Listy rozwijane wydają się idealnym elementem do uzyskania informacji od użytkownika. Przy ich pomocy możesz pokazać dziesiątki pozycji, tym samym nie zabierając miejsca w interfejsie.
Niestety z rozwijanymi listami wiążą się pewne problemy związane z użytecznością. Poniżej spróbuję przeanalizować ich zalety i wady.
👉 Zalety list rozwijanych
- Oszczędzają miejsce, zajmują mały obszar, jednocześnie mogą zawierać wiele informacji.
- Zbierają przewidywalne dane wejściowe. Użytkownik nie musi wpisywać nic samodzielnie, wybiera z gotowego wzorca. Nie popełni błędu podczas wpisywania.
- Elastyczność list rozwijanych sprawdzi się, gdy nie wiesz ile powstanie nowych opcji. Możesz dopisywać kolejne pozycje na liście, nie zabierając miejsca w interfejsie.
👉 Problemy list rozwijanych
- Lista może być męcząca, gdy posiada duży zakres danych np. rok urodzenia. Użytkownicy muszą scrollować w dół listy, by odszukać datę urodzin. Znalezienie danej pozycji na liście, jest bardziej angażujące niż wpisanie daty w polu tekstowym.
- Ukrywają dostępne opcje. Badanie przeprowadzone przez JA Bargas-Avila wykazało więcej zalet przy stosowaniu przycisków opcji, zamiast list rozwijanych. Przyciski opcji sprawiają, że wszystkie pozycje są widoczne od razu.
Badanie:
https://www.zuko.io/blog/why-drop-downs-are-bad-for-online-forms
Z kolei badanie przeprowadzone przez ConversionXL pokazało, że listy rozwijane spowalniają użytkowników w stosunku do przycisków opcji. Wybór pozycji za pomocą przycisku opcji był o 2,5 sekundy szybszy niż wybór z lisy rozwijanej.
Badanie:
https://cxl.com/research-study/form-field-usability-buttons/
👉 Co możesz zrobić, żeby ograniczyć listy rozwijane?
Nie wyeliminujesz ich w 100%, ponieważ nadal są świetnym elementem, gdy trzeba pokazać wiele pozycji do wyboru. Zamiast list, spróbuj zastosować:
Opcje wyboru
Gdy masz kilka pozycji, zamiast ukrywać je za listą, pokaż je na widoku za pomocą opcji wyboru.
Pole tekstowe
Zamiast listy rozwijanej, pokaż pole tekstowe do wpisania danych. Takie pole sprawdzi się, gdy użytkownik dobrze zna odpowiedź i nie musi się zastanawiać co wpisać. Przykładem może być otwarte pole tekstowe do wpisania daty urodzenia, nazwy miasta.
Niestandardowe elementy
Zamiast długich list spróbuj zastosować pasujące, dopasowane o kontekstu elementy. Przykładem może być wybór rezerwacji noclegu z kalendarza, a nie z rozwijanej listy. Wejdź sobie na stronę https://www.booking.com i zobacz na wybór daty oraz wybór ilości osób. Jak widzisz nie ma tam listy rozwijanej.
Przy dacie zastosowano kalendarz przesuwający się w bok, co umożliwia szybkie przeskakiwanie na kolejne miesiące Przy ilości osób zastosowano ikonki + oraz – dzięki którym szybko dodasz kolejne osoby.
