Dwa ważne elementy sterujące wyborem w projektach to przyciski opcji (radio) oraz menu rozwijane. Jeśli przestudiujesz użyteczność tych elementów sterujących, stanie się jasne, że przyciski opcji oraz listy rozwijane powinny być używane w niektórych scenariuszach, w zależności od kontekstu.
Kiedy opcje są równorzędne – przycisk radiowy
Może być wiele przypadków, w których chcesz pokazać użytkownikowi wszystkie dostępne opcje:
- Nie ma wyraźnej domyślnej ani zalecanej opcji
- Chcesz, aby użytkownik przeczytał wszystkie opcje.
- Opcje są nieznane dla użytkownika i ciężkie do przewidzenia
Użycie menu rozwijanego w takim wypadku sprawdzi się o wiele gorzej, ponieważ pierwsza opcja nie daje wskazówek co do zawartości kolejnych możliwości.
Gdy liczba opcji waha się od 2 do 4 – przycisk radiowy
Umieść opcje obok siebie, gdy ich liczba jest mała. Dzięki temu:
- Użytkownik o wiele szybciej przeskanuje opcje
- Zapewnia to szybszą reakcję niż otwierania menu rozwijanego
Gdy opcje wymagają porównania – przycisk radiowy
Gdy użytkownik może porównać kilka opcji, umieść je obok siebie.
- Użytkownik może zobaczyć opcje na pierwszy rzut oka i porównać ze sobą
Porównanie opcji z menu rozwijanego wymaga więcej czasu. Użytkownik musi otworzyć menu i porównywać opcje za każdym razem, gdy chce przejrzeć wybraną opcję. Za przykład może posłużyć płatna subskrypcja gdzie do wyboru jest plan miesięczny, pół roczny i roczny.
Kiedy szybka reakcja jest priorytetem – przyciski radiowe
Przyciski radiowe są szybsze do zrozumienia. Zwłaszcza przy wypełnianiu długich formularzy.
- W przypadku dłuższych formularzy skanowanie opcji oraz oznaczanie wymaganych pól staje się łatwiejsze i szybsze.
- Kliknięcie menu rozwijanego za każdym razem, aby wybrać opcję, zajmuje dużo czasu i wymaga większej ilości kliknięć
Z powyższego przykładu wynika, że długie formularze zapewniają lepsze wrażenia użytkownika, gdy wszystkie dostępne opcje są widoczne od razu.
Gdy opcja domyślna jest opcją zalecaną – lista rozwijana
Widoczność tylko zalecanej opcji ułatwia użytkownikowi wybór, ponieważ:
- Wyświetlenie wszystkich opcji rozprasza uwagę użytkownika.
- Użytkownik nie jest zachęcany do zmiany domyślnej opcji.
Na przykład nie ma potrzeby wyświetlania wszystkich opcji, ponieważ w tym przypadku użytkownik ma mniejszą szansę na zmianę domyślnej opcji.
Gdy dostępna jest duża liczba przewidywalnych opcji – lista rozwijana
Gdy użytkownik może łatwo przewidzieć opcje, nie ma potrzeby, aby widział je wszystkie obok siebie.
Gdy jest więcej niż 7 opcji – lista rozwijana
Duża liczba opcji, umieszczonych obok siebie nie jest dobrym pomysłem, ponieważ:
- Interfejs użytkownika staje się zagracony, użytkownik może być zdezorientowany, patrząc na wszystkie opcje
- Skanowanie dużej listy opcji radiowych zajmuje więcej czasu.
Tip: w przypadku długiego menu rozwijanego np. wybór kraju, dobrą praktyką jest zapewnienie pola tekstowego, w którym użytkownik może wpisać nazwę opcji, a lista wyświetli tylko opcje filtrowane. To sprawia, że wybór jest łatwiejszy i szybszy.
Jeśli spodobały Ci się porady z tego artykułu, to zapraszam Cię do zapoznania się z naszym ebookiem “przeprojektowani”, gdzie znajdziesz mnóstwo wiedzy z zakresu projektowania Ui/Ux.
