Jaký je tedy rozdíl mezi comboboxem, multiselectem, listboxem a rozevíracím seznamem? I když se všechny tyto komponenty uživatelského rozhraní mohou zdát podobné, slouží různým účelům. Volba často závisí na počtu dostupných možností a jejich viditelnosti. Podívejme se, jak se liší, k jakému účelu slouží a jak si vybrat ten správný – vyhnout se tak nedorozuměním a nesprávným očekáváním.
Ne všechny vzory seznamů jsou stejné Všechny komponenty uživatelského rozhraní zvýrazněné výše mají přesně jedno společné: podporují interakce uživatelů se seznamy. Dělají to však trochu jinak. Pojďme se na každý podívat jeden po druhém:
Rozbalovací nabídka → seznam je skrytý, dokud se nespustí. Combobox → typ pro filtrování + výběr 1 možnosti. Vícenásobný výběr → typ pro filtrování + výběr mnoha možností. Listbox → všechny možnosti seznamu viditelné ve výchozím nastavení (+ rolování). Duální seznam → přesun položek mezi 2 seznamy.
Jinými slovy, Combobox kombinuje pole pro zadávání textu s rozevíracím seznamem, takže uživatelé mohou psát, filtrovat a vybrat jednu možnost. S Multiselect si uživatelé mohou vybrat mnoho možností (často zobrazených jako pilulky nebo žetony). Seznamy zobrazují všechny možnosti seznamu viditelné ve výchozím nastavení, často s rolováním. Je to užitečné, když uživatelé potřebují okamžitě vidět všechny dostupné možnosti. Duální seznam (také nazývaný seznam převodů) je varianta seznamu, která umožňuje uživatelům přesouvat položky mezi dvěma seznamy (vlevo ↔ vpravo), obvykle pro hromadný výběr. Nikdy neschovávejte často používané možnosti Jak bylo uvedeno výše, výběr správné komponenty uživatelského rozhraní závisí na 2 faktorech: na počtu dostupných možností seznamu a na tom, zda musí být všechny tyto možnosti ve výchozím nastavení viditelné. Všechny seznamy mohou mít stromové struktury, vnořování a výběr skupin.
Existuje jedna zásada, kterou se roky řídím pro jakoukoli komponentu uživatelského rozhraní: nikdy neschovávejte často používané možnosti. Pokud uživatelé často spoléhají na určitý výběr, nemá cenu ho před nimi skrývat. Můžeme je buď předem vybrat, nebo (pokud existují pouze 2–3 často používané možnosti) je zobrazit jako žetony nebo tlačítka a poté zobrazit zbytek seznamu při interakci. Obecně je dobré vždy zobrazovat oblíbené možnosti – i když by to mohlo přetížit uživatelské rozhraní. Jak vybrat který? Ne každý seznam potřebuje složitou metodu výběru. U seznamů s méně než 5 položkami obvykle nejlépe fungují jednoduché přepínače nebo zaškrtávací políčka. Pokud však uživatelé potřebují vybírat z velkého seznamu možností (např. 200+ položek), combobox + multiselect jsou užitečné kvůli rychlejšímu filtrování (např. výběr země).
Seznamy jsou užitečné, když lidé potřebují mít přístup k mnoha možnostem najednou, zejména pokud potřebují vybrat mnoho možností z tohoto seznamu. Mohou být užitečné pro často používané filtry.
Duální seznam je často přehlížen a ignorován. Ale může to být velmi užitečné pro složité úkoly, např. hromadný výběr nebo přidělování rolí, úkolů, odpovědností. Je to jediná komponenta uživatelského rozhraní, která uživatelům umožňuje zkontrolovat svůj úplný seznam výběru vedle zdrojového seznamu před potvrzením (také nazývaný „seznam převodů“). Ve skutečnosti je duální seznam často rychlejší, přesnější a dostupnější než přetahování. Úvahy o použitelnosti Jedna důležitá poznámka, kterou je třeba mít na paměti, je, že všechny typy seznamů musí podporovat navigaci pomocí klávesnice (např. šipky ↑/↓), aby byly přístupné. Někteří lidé budou téměř vždy spoléhat na klávesnici, aby si vybrali možnosti, jakmile začnou psát.
Kromě toho:
U seznamů s více než 7 možnostmi zvažte přidání funkcí „Vybrat vše“ a „Vymazat vše“, abyste zefektivnili interakci uživatele. U dlouhých seznamů s polem se seznamem zpřístupněte uživatelům všechny možnosti po kliknutí/klepnutí, jinak by je možná nikdy neviděli, A co je nejdůležitější, nezobrazujte neinteraktivní prvky jako tlačítka, aby nedošlo k záměně – a nezobrazujte interaktivní prvky jako statické štítky.
Balení: Ne všechno je rozbalovací seznam Na jménech záleží. Vertikální seznam možností je obvykle popisován jako „rozbalovací“ – ale často je příliš obecný na to, aby měl nějaký smysl. „Dropdown“ naznačuje, že seznam je ve výchozím nastavení skrytý. „Vícenásobný výběr“ znamená vícenásobný výběr (zaškrtávací políčko) v seznamu. „Combobox“ znamená vkládání textu. A „Listbox“ je jednoduše seznam volitelných položek, které jsou vždy viditelné. Cílem není být v souladu s výše uvedenými definicemi. Ale spíše pro sladění záměrů – mluvte stejným jazykem při rozhodování o těchto komponentách uživatelského rozhraní, jejich navrhování, sestavování a následném používání. Mělo by to fungovat provšichni – návrháři, inženýři a koncoví uživatelé – pokud statické štítky nevypadají jako interaktivní tlačítka a přepínače nefungují jako zaškrtávací políčka. Seznamte se s „Návrhovými vzory pro rozhraní AI“ Seznamte se s designovými vzory pro rozhraní AI, Vitalyho nový videokurz s praktickými ukázkami z reálných produktů – s živým školením UX, které proběhne již brzy. Přejít na bezplatný náhled. Seznamte se s návrhovými vzory pro rozhraní AI, Vitalyho videokurz o designu rozhraní a uživatelském rozhraní.
Video + školení UX PouzevideoVideo + školení UX $ 450,00 $ 799,00
Získejte video + školení UX 30 videolekcí (10 hodin) + živé školení UX. 100denní záruka vrácení peněz. Pouze video 275,00 $ 395,00 $
Získejte videokurz30 videolekcí (10h). Aktualizováno ročně. K dispozici také jako balíček UX se 3 video kurzy.
Užitečné zdroje
Automatické doplňování: Pokyny pro uživatelské prostředí, Vitaly Friedman Combobox, od eBay 👍 Combobox od Elastic Combobox, Elisa Combobox, od MongoDB 👍 Combobox, od společnosti Visa 👍 Combobox, od Watsona (Docplanner) Combobox, Wikimedia Combobox, od Zendesk Multiselect (MongoDB Combobox Design Docs), od MongoDB 👍 Multiselect Lookup, Wikimedia Multi-select Combo Box od Vaadina Multiselect, od společnosti Visa Transfer (příklad seznamu), od Ant Design Listbox, od Hoppera List Box, od Vaadina Seznam, od společnosti Visa Dual List Selector, od Red Hat (PatternFly) Dual Listbox, od Salesforce (Lightning Design System) Seznam přestupů, podle Mantine Dual Listbox, od Dashlite Odznaky vs. Pills vs. Chips vs. Tagy, Vitaly Friedman Seznamy vs. rozbalovací seznamy, Anna Kaley (NN/g)
