Na stronach, w aplikacjach, a zwłaszcza w formularzach możemy spotkać różne elementy, które ułatwiają zbieranie danych od użytkowników. Pomagają w tym zadaniu kontrolki, które przybierają różną formę. Najpopularniejsze z nich to checbox oraz toggle.
Kontrolki zazwyczaj posiadają trzy stany: zaznaczone, niezaznaczone i nieokreślone. Ostatni stan ma miejsce gdy dodatkowo mamy opcje podrzędne, znajdujące się zarówno w stanie wybranym i niewybranym.
Przełącznik czyli toogle / switches
Przełącznik można porównać do fizycznego przełącznika prądu. Pozwala on użytkownikom włączyć lub wyłączyć daną funkcje. Interakcja z tą kontrolką jest zazwyczaj jednoetapowa czyli wybór po którym następuje akcja.
Wyboru dokonujemy wybierając odpowiednią opcję: włączony lub wyłączony.
Przełączniki wskazują, czy ustawienie jest włączone, czy wyłączone. Gdy użytkownicy przestawią przełącznik na „on”, oczekują natychmiastowej akcji, zaraz po przelączeniu. Tak samo jak po włączeniu światła od razu oczekujesz, że żarówka się zaświeci. Jakakolwiek dalsza akcja potrzebna do wykonania zadania, powoduje, że myślisz, że coś poszło nie tak i żarówka się przepaliła.
Checkbox
Checkbox to element zazwyczaj w formie małego kwadracika lub okręgu z widocznym obrysem. Aktywny posiada wewnątrz ikonkę symbolizująca zaznaczenie. Często spotykany na stronie zamówienia gdzie trzeba zaakceptować regulamin lub inne zgody. Tutaj interakcja z tą kontrolką jest dwuetapowa. Oprócz zaznaczenia dodatkowo potrzeba jeszcze wykonania i odbywa się ono za pomocą innej kontrolki np. przycisku akcji, który potwierdzi wybór.
Zaznaczenie checkboxa nie powoduje natychmiastowego działania i wykonania akcji. Dopiero po naciśnięciu przycisku potwierdzającego aktywuje się dana opcja. Pomaga to zapobiegać przypadkowym błędnej aktywacji np. usunięciu konta.
Przycisk opcji
Przyciski opcji. Oprócz pól (checkbox) wyboru i przełączników (toggle) istnieje jeszcze jeden element do zaznaczenia, a są nim przyciski opcji. Maja one swoje zastosowanie w szczególnych warunkach. Można się nimi posłuży gdy do zaznaczenia jest tylko jeden element.
Gdy program pozwala na wybór tylko jednego pola to należy użyć przycisków opcji, natomiast gdy wyborów może być więcej niż jeden wtedy o wiele lepiej sprawdzają się checkboxy.
Checkbox vs toggle
Decydując się pomiędzy toggle a checkboxem, lepiej skupić się na kontekście użycia zamiast na ich funkcji. W celu głębszego zrozumienia przeanalizujemy teraz kilka przypadków.
Przypadek 1: Natychmiastowa odpowiedź
Toggle czyli przełącznik sprawdzi się lepiej w przypadku gdy potrzeba natychmiastowej reakcji bez dodatkowego kliknięcia w przycisk akcji. Dobrym przykładem jest tabela cenowa gdzie można przełączać plany cenowe w zależności od okresu abonamentu np. miesięczny i roczny.
Zastosuj przełącznik gdy:
- Wymagana jest natychmiastowa reakcja
- Wymagane jest pokazanie lub ukrycie opcji
- Wymagane jest działanie, które nie musi być potwierdzone np. wstępny wybór ceny
Przypadek 2: Potwierdzenie ustawień
Z kolei checkbox sprawdzi się lepiej gdy wybór musi być dodatkowo potwierdzony lub sprawdzony zanim pokażą się rezultaty np. zaznaczenie regulaminu na stronie sklepu, by dokończyć zamówienie.
Zastosuj checkbox gdy:
- Czynność musi być dodatkowo potwierdzona np. przez przycisk dalej, prześlij, ok, potwierdź
- Wymagane jest potwierdzenie przed pokazaniem wyników dalszych kroków
Przypadek 3: Wiele możliwości wyboru
Gdy użytkownik może zaznaczyć wiele opcji lub istnieje możliwość nie zaznaczenia żadnej opcji to znów wygrywa checkbox. Kliknięcie w wiele przełączników toggle jeden po drugim i oczekiwanie na wyniki po każdym kliknięciu zajmuje więcej czasu.
Przypadek 4: Filtrowanie
Checkbox to również lepsze rozwiązanie gdy pod polem wyboru użytkownik otrzymuje dodatkowo podrzędne opcje. Taki stan rzeczy często możesz zaobserwować w sklepie internetowym przy filtrowaniu produktów.
Przypadek 5: Niejasność przekazu
Gdy komunikat przy kontrolce może wprowadzić w błąd bezpieczniej jest użyć checkboxa. Załóżmy, że w aplikacji masz opcje wyczyść dane. Gdy patrzysz na przełącznik to potrzebujesz chwili żeby zrozumieć czy zaznaczony przełącznik czy też odznaczony wyczyści dane. Przy checkboxie ten problem znika ponieważ wizualnie jasność przekazu jest na tyle duża, że o wiele trudniej się pomylić.
Przypadek 6: Pojedyncze funkcje
Użyj przełącznika gdy użytkownik musi przełączyć działanie jakieś jednej niezależnej od siebie funkcji np. włączenie Wifi lub przejście w tryb samolotowy. Przełącznik to dobry wybór gdy wymagany jest jeden wybór i chcesz zaoferować dwie opcje typu włącz / wyłącz.
Przypadek 7: Pojedyncza opcja
Użyj checkboxa gdy dostępny jest tylko jeden bardzo jasny wybór tak / nie. Dla przykładu podczas logowania widzisz opcje zapamiętaj mnie.
Podsumowanie
Przełącznik (toggle) skojarz z natychmiastową akcją jak zapalenie światła, natomiast checkboxa (pole wyboru) wybierz wtedy gdy potrzeba dodatkowego potwierdzenia.
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.
