Dzisiaj znowu opowiem Wam chwilę o elementach interfejsu. Mówiłam już o formularzach, a dziś będzie o ich mniejszej części – dropdown, checkbox, radio button. Czyli o dość popularnych kontrolkach, które bywa, że potrafią się trochę mylić początkującym projektantom UI. Dziś kilka wskazówek, jak używać ich poprawnie i o czym warto pamiętać. No i na kanale jest też film na ten temat – wpadajcie, tu: https://www.youtube.com/watch?v=M4ouwIHtXOE
Dropdown, checkboxy, radio buttons – jaka różnica?
Choć wszystkie z trzech elementów, wyglądają zazwyczaj inaczej, ich działanie można by określić jako dość podobne. Sprowadza się bowiem do wyboru przez użytkownika opcji, z określonej, ustalonej przez projektanta listy. Przejdźmy szybko po kolei przez wszystkie trzy opcje i zastanówmy się w którym momencie ich użyć i na co zwrócić szczególną uwagę.
Ach i jeszcze jedno. Używam tu angielskich nazw kontrolek, nie bez powodu. Wszystkie z nich mają swoje polskie odpowiedniki, ale przyznam szczerze, że poza literaturą, nie spotkałam się z sytuacja, by ktoś ich używał. Z reguły projektanci i developerzy, a nawet klienci, używają oryginalnych angielskich nazw właśnie lub (trochę brzydkich) spolszczeń.
Dropdown – kliknij i rozwiń
Dropdown to rozwijana lista wyboru. Jak nazwa wskazuje, wymaga od użytkownika jakiejś akcji żeby rozwinąć listę i zobaczyć opcje do wyboru. I sam fakt, że coś na pierwszy rzut oka przed nim ukrywamy, jest taką średnią opcją. Ale, ale. To nie oznacza wcale, że dropdown w ogóle skazany jest na porażkę. Najczęściej spotkacie go w formularzach, czy choćby filtrach. Podobny sposób działania do dropdowna mają rozwijane zakładki nawigacji (pokazujące podstrony po najechaniu kursorem).
Niewątpliwą zaletą dropdownów jest ich minimalistyczny wygląd – możemy w nich schować całkiem sporo informacji. Są też standardowym elementem interfejsu i wiele osób wie, jak z nich korzystać. Zanim jednak ich użyjecie, zastanówcie się, czy nie utrudnicie użytkownikom życia. Na przykład dlatego, że opcji do wyboru na liście jest na przykład 130 i aby znaleźć jedną konkretną, użytkownika czeka masa scrollowania.
Żeby ułatwić korzystanie z dropdowna, można zaprojektować kontrolkę, która będzie rozszerzeniem jej funkcji. Dużym ułatwieniem jest na przykład możliwość wyszukiwania na liście i przede wszystkim mądre pogrupowanie elementów na liście, np. alfabetycznie, bądź tematycznie. Pamiętajcie, by grupować opcje tak, by użytkownik zrozumiał to grupowanie.
Radio button, czyli jedna z wielu
Radio buttony to lista jednokrotnego wyboru. Oznacza to, że z grupy dostępnych opcji, mamy możliwość zaznaczenia tylko jednej z nich. Zresztą podobnie jak w przypadku klasycznego dropdowna. Czym zatem różni się od niego? Przede wszystkim wyglądem. Lista przycisków radio to tytuł i wymienione opcje pod spodem, zazwyczaj w formie kropek, z etykietami tuż obok. Forma tej kontrolki jest więc zdecydowanie bardziej rozbudowana, czyli zajmie dużo więcej miejsca niż dropdown.
W związku z tym, warto wybrać radio button w przypadku, gdy opcji do wyboru nie ma zbyt wielu. Świetnie sprawdzi się przy 2-5 opcji, a im więcej, tym trochę trudniej będzie przedzierać się przez możliwe opcje. Zadbajcie o dobre ułożenie elementów i odległości między nimi – tak, by łatwo klikało się w nie (lub w wersji mobilnej, zaznaczało palcem).
Switche – przełączniki, o nich również warto wspomnieć w tym miejscu. Te kontrolki dają możliwość włączenia i wyłączenia opcji, czyli wyboru tylko dwóch stanów. Są popularne zwłaszcza w rozwiązaniach mobilnych i z pewnością już się z nimi spotkaliście w ustawieniach Waszych telefonów. Warto mieć to na uwadze, kiedy będziecie zastanawiać się nad tym, czy umieścić je na stronie desktopowej. Użytkownicy bowiem mogą być nieprzyzwyczajeni do takiego rozwiązania – to zawsze warto testować!
Checkbox, czyli pole wyboru
Checkbox (pole wyboru), to kontrolka, która może występować w interfejsie jako pojedynczy element. Ma formę kwadratu, który można zaznaczyć – w ten sposób często potwierdzamy zaznajomienie się z regulaminem sklepu lub wysyłki newslettera. Checkbox może także pojawić się w grupie (jako grupa wyboru), np. w ankietach, kiedy chcemy zapytać o zainteresowania i dajemy ich listę użytkownikowi.
Czym zatem grupa checkboxów różni się od radio buttonów? Przede wszystkim funkcją – radio, jak już ustaliliśmy, służy do zaznaczania jednej opcji spośród wielu. Tymczasem checkboxy pozwalają użytkownikowi zaznaczyć więcej opcji – dwie, trzy, wszystkie – jakkolwiek skonfigurujemy to w interfejsie. Jak więc użytkownik może odróżnić, czy do wyboru ma jedną opcję, czy kilka?
Zwyczajowo rozróżnia się te kontrolki właśnie kształtem. Radio są okrągłe, checkboxy kwadratowe. Ten wzorzec stosuje zapewne większość stron i systemów wizualnych i dobrze się go trzymać. Bo skoro większość stron tak ich używa, to znaczy, że użytkownicy, też się tego w ten sposób nauczyli. Zmiana takiego wzorca może skutkować błędami i zagubieniem naszych użytkowników w interfejsie – a tego przecież nie chcemy!
Gdzie szukać informacji na ten temat?
Jeżeli chcecie dowiedzieć się więcej, na temat kontrolek interfejsów graficznych, to z całego serca polecam Wam po prostu przeszukiwanie sieci. Jest mnóstwo stron i artykułów, gdzie znajdziecie ciekawe opracowania i porównania rozwiązań. Jeśli koniecznie szukacie czegoś na papierze, możecie sięgnąć chociażby po „Projektowanie interfejsów – sprawdzone wzorce projektowe” Jenifer Tidwell. Ale serio, nie ma potrzeby niepotrzebnie wydawać kasy, jeśli wiedzę dostępną macie za darmo.
