Checkbox vs radio button – jaka jest różnica każdy wie, ale kiedy lepiej zastosować jeden albo drugi - to już trochę bardziej skomplikowane.

Od czasu pierwszego wydania Inside Macintosh w 1984 roku zasada dotycząca tego, kiedy należy używać pól wyboru (Checkbox), a kiedy przycisków jednego wyboru (Radio), jest taka sama. Wszystkie kolejne standardy GUI i oficjalne standardy W3C zawierają tę samą definicję tych dwóch elementów sterujących:

Radio button

Przyciski opcji (Radio button) są używane, gdy istnieje lista dwóch lub więcej opcji, które wzajemnie się wykluczają, a użytkownik musi wybrać dokładnie jedną opcję. Innymi słowy, kliknięcie niezaznaczonego przycisku opcji spowoduje odznaczenie dowolnego innego przycisku, który był wcześniej zaznaczony na liście.

Checkbox

Pola wyboru (Checkbox) są używane, gdy istnieją listy opcji, a użytkownik może wybrać dowolną liczbę opcji, w tym zero, jeden lub kilka. Innymi słowy, każde pole wyboru jest niezależne od wszystkich innych pól wyboru na liście, więc zaznaczenie jednego pola nie usuwa zaznaczenia pozostałych.

W przypadku gdy do wyboru mamy tylko jedną opcję powinniśmy wziąć pod uwagę:

Pojedynczy Checkbox

Samodzielne pole wyboru (Checkbox) jest używane dla pojedynczej opcji, którą użytkownik może włączyć lub wyłączyć.

Przełącznik - Toggle-Switch

Najlepiej nadaje się do zmiany stanu funkcji i preferencji systemu. Przełączniki mogą zastąpić dwa przyciski opcji lub pojedyncze pole wyboru, aby umożliwić użytkownikom wybór między dwoma przeciwstawnymi stanami.

Czasami podjęcie decyzji, którego elementu interfejsu użytkownika użyć — przycisków radiowych, pól wyboru lub przełączników — może być trudne. Kiedy zastanawiasz się, która opcja będzie pasować do twojego przypadku użycia, rozważ liczbę i rodzaj opcji oraz czy jest jakaś wyraźna wartość domyślna. Poniższa tabela zawiera podsumowanie pytań i odpowiedzi dotyczących tych często używanych elementów interfejsu użytkownika.

Brzmi dość prosto, prawda?

Niestety zbyt często spotykamy strony, które niewłaściwie używają przycisków opcji i pól wyboru. Poprawne zastosowanie buttonów opcji powinno powinno być łatwiejsze jeśli będziemy przestrzegać dodatkowych zasad:

1. Użyj standardowych reprezentacji wizualnych.

Pole wyboru powinno być małym kwadratem, który po zaznaczeniu ma znacznik wyboru lub X. Przycisk radiowy powinien być małym kółkiem, w którym po wybraniu znajduje się wypełniony okrąg.

2. Każda grupa przycisków (niezależnie czy będzie to grupa przycisków typu Radio czy Checkbox) powinna stanowić odrębną całość.

Tak aby nie było żadnej wątpliwości co do przynależności danego przycisku do konkretnego pytania. Dobrym pomysłem przy większej ilości opcji może być wykorzystanie podtytułów, które umożliwią podzielenie długiej listy opcji na logiczne podgrupy. Dzięki temu wybory są łatwiejsze do skanowania i do zrozumienia. Takie rozwiązanie niesie ryzyko, że użytkownicy mogą postrzegać każdą podgrupę jako oddzielny zestaw opcji. Niekoniecznie musi być to problem - w przypadku pól wyboru i tak każde pole stanowi niezależny wybór. Jak łatwo wywnioskować z powyższej informacji - podtytułów nie stosujemy w przypadku grup przycisków typu Radio button, które muszą mieć ujednolicony wygląd.

3. Ułóż swoje listy pionowo, z jednym wyborem w wierszu.

Jeśli musisz użyć układu poziomego z wieloma opcjami w wierszu, pamiętaj o odpowiednim rozmieszczeniu przycisków i etykiet, aby było jasne, który wybór należy do której etykiety. Zauważ, że na poniższej liście, trudno jest określić, które kółko mamy kliknąć jeśli chcemy wybrać czwartą opcję.

4. Używaj sformułowań zachęcających do podjęcia akcji i w jak najkrótszej formie postaraj się wyjaśnić co się stanie, jeśli użytkownik włączy pole wyboru.

Innymi słowy, unikaj negacji, takich jak „Nie wysyłaj mi więcej e-maili”, co oznaczałoby, że użytkownik musiałby zaznaczyć to pole, aby coś się nie wydarzyło.

Etykiety pól wyboru, powinny być tak napisane aby użytkownicy dokładnie wiedzieli, co się stanie, jeśli zaznaczą to pole, i co się stanie, jeśli pozostawią je niezaznaczone.
Jeśli nie możesz tego zrobić, lepiej użyć dwóch Radio buttonów— jednego do włączenia funkcji, a drugiego do jej wyłączenia — i napisania wyraźnych etykiet dla każdego z dwóch przypadków.

5. Jeśli do wyboru jest więcej niż pięć lub sześć elementów, użyj listy rozwijanej.

Boks z Radio buttonami umożliwia szybsze i łatwiejsze zapoznanie się ze wszystkimi dostępnymi opcjami - ponieważ wszystkie opcje są stale widoczne użytkownicy mogą łatwo je porównywać. Warto tutaj podkreślić, że przyciski typu Radio buttony są również łatwiejsze w obsłudze dla użytkowników, którzy mają trudności z precyzyjnymi ruchami myszy. (Ograniczona przestrzeń może czasami zmusić Cię do naruszenia tej wytycznej, ale staraj się, aby wybory były widoczne, gdy tylko jest to możliwe.)

Warto tutaj podkreślić, że Radio Button lepiej sprawdzi się przy niezbyt dużej ilości opcji - jeśli użytkownik ma do wyboru kilkanaście pozycji lub więcej lepiej zastosować pole typu lista - które umożliwia nam dodatkowo na dodanie do niego wewnętrznej wyszukiwarki.

6. Tworząc boks z przyciskami typu Radio button nie zapomnij o stworzeniu pozycji domyślnej.

Z definicji Radio button umożliwiają wybranie dokładnie jednej opcji, dlatego nie należy ich wyświetlać bez domyślnego wyboru. (W przeciwieństwie do pól typu Checkbox, które często nie mają zaznaczonej żadnej opcji).

Jeśli tworzysz listę pól typu Radio button w której użytkownicy mogą nie wybrać żadnej z opcji, powinieneś stworzyć specjalny przycisk dla tego wyboru, na przykład oznaczony „Brak”. Zaoferowanie użytkownikom jednoznacznej, neutralnej opcji kliknięcia w tają opcję jest lepsze niż wymaganie niewybierania z listy, zwłaszcza że robienie tego drugiego narusza zasadę, że zawsze wybiera się dokładnie jedną opcję.

7. Ponieważ pola typy Radio button wymagają wyboru dokładnie jednej opcji, upewnij się, że opisy są zrozumiałe, jednoznaczne i wyraźnie odmienne.

Badania Usability ze starszymi użytkownikami wykazały trudność w wypełnieniu formularza, który wymagał od nich wyboru pracy a nie oferował opcji „emerytowany”. Jeśli szykując formularz nie jesteś w stanie przewidzieć wszystkich dostępnych opcji dodaj przycisk oznaczony „Inne”, przy którym dodaj pole tekstowe, gdzie użytkwonik sam wpisze swoją odpowiedź.

8. Postaraj się aby pole wyboru było maksymalnie duże i łatwe do kliknięcia - umożliwiając kliknięcie nie tylko w sam przycisk ale też w jego etykietę.

Większy cel jest szybszy i łatwiejszy do kliknięcia (zgodnie z Fitts' Law: The time to acquire a target is a function of the distance to and size of the target.). Można zapobiec wielu błędom popełnianym przez użytkowników wypełniających dany formularz, dzięki dużym strefom kliknięć, które rozciągają się o kilka pikseli poza widoczny obszar klikalny

9. Jeśli pytanie ma tylko dwie opcje, czyli tak/nie użyj przełącznika typu Toggle-Switch

Jeśli Twoje pytanie brzmi „Czy chcesz otrzymywać powiadomienia?”, „Odtwarzaj muzykę w tle?” itp., użyj przełącznika typu Toggle-Switch. Zajmują znacznie mniej miejsca, są czystsze i — ponieważ są nowszym typem selektorów — mają dodatkową zaletę, że są modne.

Dlaczego te wytyczne są ważne?

Jeśli po przeczytaniu tego artykułu nadal zastanawiasz się dlaczego warto przestrzegać powyższych zasad, muszę podkreślić, że stosowanie standardów projektowych zwiększa zdolność użytkowników do przewidywania, co zrobi kontrolka i jak będą ją obsługiwać. Widząc listę Checkboxów, użytkownicy wiedzą, że mogą wybrać wiele opcji. Kiedy widzą listę przycisków typu Radio button, wiedzą, że mogą wybrać tylko jeden. (Oczywiście nie każdy użytkownik o tym wie, ale wielu to wie, zwłaszcza że jest to standard projektowania od 1984 r.)

Prawidłowe stosowanie tych elementów zwiększa poczucie panowania nad technologią. I odwrotnie, naruszenie standardów sprawia, że ​​interfejs użytkownika wydaje się kruchy — jakby wszystko mogło się zdarzyć bez ostrzeżenia. Co gorsza jeśli w jakimś miejscu formularz będzie zachowywał niezgodnie ze standardami - użytkownik zacznie obawiać się tego, co może się stać, gdy będzie wypełniał formularz w zupełnie innym miejscu w witrynie. Nie chcemy aby na naszej stronie użytkownicy mieli wątpliwości co może się wydarzyć jeśli wybiorą jakąś opcję - negatywne doświadczenia mogą zniechęcić do ponownego korzystania z witryny lub zmotywować do wyboru oferty konkurencji.