Jaka jest więc różnica między comboboxem, multiselectem, listboxem i listą rozwijaną? Chociaż wszystkie te komponenty interfejsu użytkownika mogą wyglądać podobnie, służą różnym celom. Wybór często sprowadza się do liczby dostępnych opcji i ich widoczności. Zobaczmy, czym się różnią, czemu służą i jak wybrać ten właściwy – unikając przy tym nieporozumień i błędnych oczekiwań.
Nie wszystkie wzorce list są takie same Wszystkie wyróżnione powyżej komponenty interfejsu użytkownika mają dokładnie jedną wspólną cechę: wspierają interakcję użytkowników z listami. Robią to jednak nieco inaczej. Przyjrzyjmy się każdemu z osobna:
Lista rozwijana → lista jest ukryta do momentu jej uruchomienia. Combobox → wpisz, aby filtrować + wybierz 1 opcję. Multiselect → wpisz, aby filtrować + wybierz wiele opcji. Listbox → wszystkie opcje listy domyślnie widoczne (+przewijanie). Podwójne pole listy → przenoś elementy pomiędzy 2 polami list.
Innymi słowy, Combobox łączy pole wprowadzania tekstu z listą rozwijaną, dzięki czemu użytkownicy mogą pisać, filtrować i wybierać pojedynczą opcję. Dzięki Multiselect użytkownicy mogą wybierać wiele opcji (często wyświetlanych jako pigułki lub żetony). Listboxy wyświetlają wszystkie opcje list widoczne domyślnie, często z możliwością przewijania. Jest to przydatne, gdy użytkownicy muszą natychmiast zobaczyć wszystkie dostępne opcje. Podwójne pole listy (zwane także listą transferu) to odmiana pola listy, która umożliwia użytkownikom przenoszenie elementów między dwoma polami listy (lewy ↔ prawy), zazwyczaj w celu zbiorczego wyboru. Nigdy nie ukrywaj często używanych opcji Jak wspomniano powyżej, wybór odpowiedniego komponentu interfejsu użytkownika zależy od 2 czynników: ile opcji listy jest dostępnych i czy wszystkie te opcje muszą być domyślnie widoczne. Wszystkie listy mogą mieć również strukturę drzewiastą, zagnieżdżanie i wybór grup.
Jest jedna zasada, której kieruję się od lat w przypadku każdego komponentu interfejsu użytkownika: nigdy nie ukrywaj często używanych opcji. Jeśli użytkownicy często polegają na określonym wyborze, ukrywanie tego przed nimi nie ma większego sensu. Możemy albo zrobić to wstępnie wybrane, albo (jeśli są tylko 2–3 często używane opcje) pokazać je jako żetony lub przyciski, a resztę listy pokazać po interakcji. Ogólnie rzecz biorąc, dobrym pomysłem jest zawsze wyświetlanie popularnych opcji — nawet jeśli może to zaśmiecać interfejs użytkownika. Jak wybrać który? Nie każda lista wymaga złożonej metody selekcji. W przypadku list zawierających mniej niż 5 elementów zwykle najlepiej sprawdzają się proste przyciski opcji lub pola wyboru. Jeśli jednak użytkownicy muszą wybierać z dużej listy opcji (np. ponad 200 pozycji), pomocne są opcje combobox + multiselect ze względu na szybsze filtrowanie (np. wybór kraju).
Pola list są przydatne, gdy ludzie muszą uzyskać dostęp do wielu opcji jednocześnie, zwłaszcza jeśli muszą także wybrać wiele opcji z tej listy. Mogą być pomocne w przypadku często używanych filtrów.
Podwójne pole listy jest często pomijane i ignorowane. Ale może być bardzo pomocne przy skomplikowanych zadaniach, np. zbiorczej selekcji, czy przydzielaniu ról, zadań, odpowiedzialności. Jest to jedyny komponent interfejsu użytkownika, który umożliwia użytkownikom przeglądanie pełnej listy wyboru obok listy źródłowej przed zatwierdzeniem (zwanej także „listą transferu”). W rzeczywistości podwójne pole listy jest często szybsze, dokładniejsze i bardziej dostępne niż przeciąganie i upuszczanie. Rozważania dotyczące użyteczności Należy pamiętać, że wszystkie typy list muszą obsługiwać nawigację za pomocą klawiatury (np. klawisze strzałek ↑/↓), aby zapewnić dostępność. Niektórzy ludzie prawie zawsze będą polegać na klawiaturze przy wybieraniu opcji po rozpoczęciu pisania.
Poza tym:
W przypadku list zawierających ponad 7 opcji rozważ dodanie funkcji „Zaznacz wszystko” i „Wyczyść wszystko”, aby usprawnić interakcję z użytkownikiem. W przypadku długich list z comboboxem udostępniaj użytkownikom wszystkie opcje po kliknięciu/dotknięciu, w przeciwnym razie mogą nigdy nie zostać widoczne, Co najważniejsze, nie wyświetlaj elementów nieinteraktywnych jako przycisków, aby uniknąć zamieszania – i nie wyświetlaj elementów interaktywnych jako statycznych etykiet.
Podsumowanie: nie wszystko jest listą rozwijaną Imiona mają znaczenie. Pionową listę opcji opisuje się zwykle jako „rozwijaną listę”, ale często jest ona zbyt ogólna, aby miała znaczenie. „Dropdown” wskazuje, że lista jest domyślnie ukryta. „Multiselect” oznacza wielokrotny wybór (pole wyboru) w obrębie listy. „Combobox” oznacza wprowadzanie tekstu. A „Listbox” to po prostu lista elementów do wyboru, widoczna przez cały czas. Celem nie jest zachowanie spójności z powyższymi definicjami. Ale raczej, aby dopasować intencje — mów tym samym językiem przy podejmowaniu decyzji, projektowaniu, budowaniu, a następnie używaniu tych komponentów interfejsu użytkownika. Powinno działaćwszyscy — projektanci, inżynierowie i użytkownicy końcowi — pod warunkiem, że etykiety statyczne nie wyglądają jak przyciski interaktywne, a przyciski opcji nie działają jak pola wyboru. Poznaj „Wzorce projektowe interfejsów AI” Poznaj wzorce projektowe dla interfejsów AI, nowy kurs wideo Witalija z praktycznymi przykładami z rzeczywistych produktów — wkrótce odbędzie się szkolenie na żywo z zakresu UX. Przejdź do bezpłatnego podglądu. Poznaj wzorce projektowe dla interfejsów AI, kurs wideo Witalija na temat projektowania interfejsów i UX.
Szkolenie wideo + UXTylko wideoWideo + szkolenie UX450,00 $ 799,00
Uzyskaj szkolenie wideo + UX 30 lekcji wideo (10 godz.) + szkolenie UX na żywo. 100-dniowa gwarancja zwrotu pieniędzy. Tylko wideo275,00 USD 395,00 USD
Skorzystaj z kursu wideo30 lekcji wideo (10h). Aktualizowany co roku. Dostępny również jako pakiet UX z 3 kursami wideo.
Przydatne zasoby
Autouzupełnianie: Wytyczne dotyczące UX, autor: Witalij Friedman Combobox, przez eBay 👍 Combobox firmy Elastic Combobox, autorstwa Elisy Combobox, autorstwa MongoDB 👍 Combobox, przez Visa 👍 Combobox, autor: Watson (Docplanner) Combobox, Wikimedia Combobox autorstwa Zendeska Multiselect (dokumentacja projektowa MongoDB Combobox), autorstwa MongoDB 👍 Wyszukiwanie wielokrotne, według Wikimedia Pole kombi wielokrotnego wyboru, autorstwa Vaadin Multiselect firmy Visa Transfer (przykład Listbox), autorstwa Ant Design Listbox, autorstwa Hoppera Pole listy, autorstwa Vaadina Listbox, przez Visa Selektor podwójnej listy autorstwa Red Hat (PatternFly) Podwójna skrzynka listowa firmy Salesforce (system Lightning Design) Lista transferów, autorstwa Mantine'a Podwójny Listbox firmy Dashlite Odznaki kontra pigułki kontra chipsy kontra tagi – Witalij Friedman Listboxy a listy rozwijane, autor: Anna Kaley (NN/g)
