it-swarm-eu.dev

Jaký je nejlepší UI pro výběr ze seznamu?

Máme webový formulář a jedním z polí je seznam s více možnostmi výběru. Naše možnosti jsou:

  1. Seznam zaškrtávacích políček
  2. Listview (zaškrtněte políčko, ale umožněte vícenásobný výběr)

Pokud seznam obsahuje více než 100 položek, zdá se, že jsou trochu ošklivé a nepříjemné.

Existuje nějaké jiné řešení uživatelského rozhraní, které je pro takový případ lepší?

80
leora

Jednou alternativou, kterou jsem viděl na mnoha místech, je mít dva sousední seznamy, jeden s dostupnými položkami a jeden s vybranými položkami.

Zde je příklad z OpenFaces.org , který jsem našel při rychlém vyhledávání na google:

enter image description here

55
Bevan

Dalším řešením je facebookový „multi select bar“. (Nevím přesné jméno)

Můžete najít příklad zde . V zásadě je to jako pole pro zadávání textu, ale vybrané položky se změní na „tagy“. Jen to vyzkoušejte na stránce, na kterou odkazuji.

55
Raffael Luthiger

Závisí na UI a rozložení prostoru, které máte. Závisí také na počtu položek v seznamu a průměrném počtu položek, které musí uživatel vybrat. Jedním zajímavým řešením je rozevírací seznam + zaškrtávací políčka dropdown checkbox

http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html

Čím více položek je k dispozici, tím méně bude vyhovovat rozbalovací nabídka (s tím, že uživatel bude rolovat uvnitř rozbalovací nabídky, není tak dobrý.) A zde musíte zjistit, jak uspořádat/strukturovat svůj seznam.

9
Marc D

V závislosti na počtu možností byste mohli jít s možností grafického rozevíracího seznamu, jako je následující. Klepnutím/klepnutím přepínáte, zda je vybraná položka.

To však s velmi dlouhými seznamy nefunguje dobře.

enter image description here

6

Na tuto párty jsem trochu pozdě, ale myslel jsem si, že přidám řešení, které jsem v poslední době používal hodně: jediný textový vstup s funkcí dynamického predikce textu (myslím hlavní vyhledávací formulář Google).

Protože uživatel v rozbalovací nabídce vybere „výsledky“, může se pod vstup vyplnit seznam, nejlépe s jasnou možností, jak každý výběr odebrat. Příklady této funkce jsou například weby, které žádají o označený obsah, například WordPress nebo Delicious).

Toto řešení vyžaduje, abyste vy a uživatel byli poněkud simpatičtí k obsahu většího seznamu, ale zjistil jsem, že to šetří spoustu úzkosti a stránky nemovitostí.

6
skybondsor

Vypadá to, že jsem na to pozdě, ale v naší společnosti jsem měl podobný problém.

Nezbytně jste to museli rozdělit do dvou samostatných požadavků (vyhledávání, výběr) a poté je znovu spojit do uživatelského rozhraní.

Pokud je vyhledávání jednoduché, pak by měl trik udělat něco jednoduššího s automatickým doplňováním (např. http://quasipartikel.at/multiselect/ získá nápad).

6
seanevanking

Zaškrtávací políčko je snadnější k pochopení idiomu.

Budete potřebovat tlačítko „zkontrolovat vše“ a „zkontrolovat žádné“ a pokud uživatel musí zkontrolovat spoustu sousedních položek, tlačítko „zkontrolovat vybrané položky“ (povoleno, pouze pokud je vybrána více než 1 položka)

5
Eduardo Molteni

Viděl jsem to také jako možnost. Je to seznam zaškrtávacích políček, kde jsou zaškrtnuté položky přesunuty/přemístěny. Hybridní řešení mezi nimi.

[ ] item 1
[ ] item 2
[ ] item 3
[ ] item 4
[ ] item n

Po výběru jednoho:

[ ] item 1                X item 2
[ ] item 3
[ ] item 4
[ ] item n

Vybrané položky lze přesunout doprava (například pomocí pevného dělení tak, aby zůstalo viditelné při rolování seznamu možností) nebo by mohlo migrovat na začátek seznamu.

3
DA01

Ať už jdete s možností 1 nebo 2 z vašeho seznamu, má to do činění s tím, zda chcete, aby výběr trval z jakéhokoli důvodu, stejně jako z jiných faktorů. Níže uvedu několik věcí, které byste mohli chtít vzít v úvahu při výběru metodiky, kterou chcete dodržovat.

Drag-n-Drop

Pokud chcete povolit přesouvání položek drag-n-drop, použití zaškrtávacích políček může uživateli usnadnit, aby neztratil stav výběru v procesech. Pokud nepovolujete přesouvání drag-n-drop nebo se nestaráte, zda je během procesů ztracen výběrový stav, pokud je to povoleno, může být alternativou použití vícenásobného výběru pomocí klávesy Ctrl.

Dlouhodobá perzistence

Pokud má být provedený výběr uložen na později a znovu vyvolán během následující relace nebo spuštění aplikace, zvažte použití zaškrtávacího políčka nebo paradigmatu dvojitého seznamu, protože zobrazování zvýrazněných položek je obecně vyhrazeno pro přechodný stav výběru.

Multi-Selection jako Advanced Feature

Pokud se předpokládá, že vícenásobný výběr bude pro vaše uživatele jen zřídkakdy nutný, možná není zatěžování uživatelů zaškrtávacími políčky tou nejlepší volbou, protože je pravděpodobně nebudou používat většinu času. V těchto případech může být lepší ukázat zaškrtávací políčka zadáním do zvláštního režimu s více možnostmi výběru nebo se prostě držet klávesové zkratky Ctrl pro pokročilý výběr. V případě, že uživatel potřebuje velmi jemnou kontrolu nad výběrem a objednáváním a promítáním nemovitostí, není problém, pak je slušná možnost použít metodu, kterou Bevan navrhl ve své odpovědi se dvěma samostatnými seznamy.

Všimněte si, že Průzkumník Windows obecně používá metodu Ctrl pro pokročilý výběr souborů/složek, ale lze ji nakonfigurovat tak, aby reprezentovala výběr. Zkoušel jsem to jednou a přepnul se zpět a zjistil, že většina lidí si tuto funkci ani neuvědomuje.

2
jpierson

Jsem velmi pozdě na párty. Ale rád bych nabídl své vlastní řešení.

To je: pomocí vyskakovacího okna (aka overlay, modal) k zobrazení zaškrtávacích políček a nechat uživatele vybrat více hodnot.

Po kliknutí na odkaz pro úpravy v hlavním formuláři se otevře vyskakovací okno.

Když dokončil výběr hodnot, může kliknout na tlačítko HOTOVO, které má událost click, metodu javascript, která shromažďuje zaškrtnuté hodnoty a aktualizuje některé skryté pole v hlavním formuláři nebo v některém zobrazovacím poli (např. Textová oblast pouze pro čtení, nebo rozpětí nebo prvku div) v hlavním formuláři. A když uživatel klepne na hlavní tlačítko Odeslat, skryté pole nebo zobrazované pole se odešle na server k vytrvalosti.

Pokud je k dispozici velký počet zaškrtávacích políček, jejich zobrazení může zabrat nemovitost s velmi velkou obrazovkou, takže vyskakovací okno může být stylizováno bez nepořádku, což pomáhá soustředit pozornost uživatele. Až to udělá, může zavřít okno.

Samozřejmě může mít smysl i několik kroků. Ale moje řešení je pro jediný formulář pro odeslání.

Co si myslíte o této metodě? Je to už vzor?

Děkuju

2
Zack Xu