Przełącznik wygląda prosto. Mały suwak, który przeskakuje między włączeniem a wyłączeniem. A jednak pola przełączników mylą użytkowników bardziej niż prawie jakikolwiek inny element formularza. Ludzie się wahają. Nie wiedzą, czy przestawienie przełącznika zmieni coś od razu, czy dopiero po kliknięciu przycisku wysyłania. Nie wiedzą, która strona oznacza tak, a która nie. Jeden źle umieszczony przełącznik w formularzu może zrujnować odsetek wypełnień. Właściwy przełącznik we właściwym miejscu staje się niewidoczny.
Weź dowolny formularz z przełącznikami i zobacz, co ludzie faktycznie robią. Poruszają się powoli. Zatrzymują kursor. Wracają, by sprawdzić, czym steruje przełącznik. Szukają przycisków wysyłania, bo nie są pewni, czy zmiana przełącznika zadziałała. To nie są błędy użytkowników. To problemy projektowe. Przełączniki mają w formularzach konkretne zadanie. Robią jedną rzecz dobrze. Nie robią wszystkiego. Zrozumienie, kiedy przełączniki pasują, a kiedy nie, to różnica między formularzem, który płynie, a formularzem, który myli.
Problem z nazywaniem wszystkiego przełącznikiem
Słowo przełącznik znaczy coś konkretnego. Przełącznik to wybór między dwoma przeciwnymi stanami. Jesteś w stanie A albo w stanie B. Nic pomiędzy. Nic innego. Ale wiele formularzy nazywa swoje pytania tak/nie przełącznikami, choć nimi nie są. Pytanie w rodzaju „Czy chcesz otrzymywać e-maile promocyjne?" to nie przełącznik. To pytanie tak lub nie, które należy do formularza. Prawdziwy przełącznik to „Włącz tryb ciemny". Przełącznik zmienia Twoje doświadczenie od razu. Formularz nie wymaga przycisku wysyłania, by ta zmiana zaczęła działać.
To zamieszanie tworzy realne tarcie. Umieść prawdziwy przełącznik w środku formularza pełnego pól tekstowych i przycisków opcji. Użytkownicy nie będą wiedzieć, czy zmiana przełącznika zadziałała od razu, czy nadal muszą kliknąć wyślij. Mogą przestawić przełącznik, uznać, że nic się nie stało, przestawić go z powrotem, a potem się zdziwić, gdy formularz pokaże odwrotny stan od wybranego.
Kiedy przełącznik naprawdę ma sens w formularzu
Przełącznik należy do formularza tylko wtedy, gdy spełnione są jednocześnie dwa warunki. Po pierwsze, wybór musi być binarny. Dokładnie dwa stany. Tak lub nie. Włączone lub wyłączone. Nic innego. Po drugie, wybór musi działać natychmiast, bez przycisku wysyłania. Użytkownik przestawia przełącznik i stan zmienia się od razu.
W większości formularzy żaden z tych warunków nie jest spełniony. Większość formularzy wymaga przycisku wysyłania na końcu. Wszystkie zmiany są stosowane naraz po kliknięciu wyślij. Umieszczenie przełącznika w formularzu z przyciskiem wysyłania tworzy zamieszanie, bo przełącznik wydaje się powinien działać od razu, a cały formularz czeka na wysłanie.
Przełączniki sprawdzają się w ustawieniach. Przełączniki sprawdzają się w panelach konta, gdzie każda zmiana jest na żywo. Przełączniki nie sprawdzają się w standardowych formularzach, w których zbierasz informacje i prosisz o wysłanie na końcu. Jeśli Twój formularz ma przycisk wysyłania, pytania tak/nie powinny używać pól wyboru lub przycisków opcji zamiast przełączników.
Przełącznik a pole wyboru w polach formularza
Wizualna różnica między przełącznikiem a polem wyboru jest oczywista. Ale liczy się różnica funkcjonalna. Pole wyboru to kontrolka formularza, która czeka na wysłanie. Możesz zaznaczyć wiele pól wyboru. Możesz je odznaczyć. Nic się nie dzieje, dopóki nie wyślesz formularza. Przełącznik to przełącznik stanu, który często zmienia rzeczy od razu. Formularz nie wymaga wysłania, by zmiana zaczęła działać.
Dlatego badania NN/G pokazują, że użytkownicy się gubią, gdy mieszasz przełączniki i pola wyboru w jednym formularzu. Przełączniki działające natychmiast wydają się zupełnie inne niż pola wyboru, które czekają. Ich mieszanie wysyła sprzeczne sygnały o tym, co się dzieje, gdy ktoś wchodzi w interakcję z formularzem.
Jeśli masz binarne pytanie tak/nie w formularzu wymagającym przycisku wysyłania, użyj pola wyboru lub pary przycisków opcji. Oba są znane. Oba mają sens w kontekście formularza. Użytkownicy rozumieją, że wybierają coś, co zostanie wysłane, a nie uruchamiają natychmiastowej zmiany.
Kiedy użyć przycisków opcji zamiast przełącznika
Przełącznik może pokazać tylko jeden stan naraz. Widzisz włączone lub wyłączone. Ale czasem użytkownicy muszą zobaczyć obie opcje jednocześnie, by podjąć decyzję. Wtedy przyciski opcji sprawdzają się lepiej niż przełącznik.
Przykład: formularz pytający „Który plan wybierasz?" z opcjami „Podstawowy" lub „Premium". Możesz użyć przełącznika do przełączania między nimi. Ale użytkownik nie widzi obu planów obok siebie. Musi przestawić przełącznik, by zobaczyć, jaka jest druga opcja. Para przycisków opcji pokazuje obie opcje jednocześnie. Użytkownik widzi Podstawowy po lewej i Premium po prawej. Może porównać i wybrać bez przestawiania czegokolwiek.
Za każdym razem, gdy chcesz, by użytkownicy porównali dwie opcje lub zobaczyli oba wybory, używaj przycisków opcji. Za każdym razem, gdy przełącznik jest jedynym sposobem przełączania między opcjami, a użytkownicy nie mogą ich porównać, przyciski opcji są prawdopodobnie lepszym wyborem.
Jak opisać przełącznik, by ludzie rozumieli, co robi
Największy problem z przełącznikami to opisy. Wielu projektantów używa tylko „Wł." i „Wył.". Ale włączone i wyłączone co? Użytkownik musi zgadywać. To rodzi wahanie.
Każdy przełącznik potrzebuje jasnej etykiety opisującej, czym steruje. Nie „Wł./Wył.". Coś w rodzaju „Włącz tryb ciemny" albo „Otrzymuj powiadomienia" albo „Pokaż opcje zaawansowane". Etykieta mówi użytkownikowi, co się stanie po przestawieniu przełącznika.
Etykieta musi być od razu widoczna i blisko przełącznika. Jeśli etykieta jest daleko lub mała, użytkownicy nie połączą jej z przełącznikiem. Przestawią go, nie rozumiejąc, co zmieniają.
Niektóre przełączniki pokazują etykiety włączone i wyłączone bezpośrednio na samym przełączniku. „Tak" po jednej stronie i „Nie" po drugiej. To może działać, jeśli etykiety są duże i jasne. Ale testy pokazują, że ludzie są mniej obeznani z przełącznikami tak/nie niż z włączone/wyłączone. Jeśli używasz etykiet tak/nie, najpierw przetestuj je na swoich użytkownikach. Ogólnie jednak włączone/wyłączone jest jaśniejsze niż tak/nie w przypadku przełączników.
Problem dostępności z przełącznikami
Przełączniki tworzą realne problemy dla użytkowników czytników ekranu. Wizualny przełącznik ma sens dla kogoś, kto go widzi. Widzi, jak suwak przesuwa się w prawo, i rozumie, że jest teraz włączony. Ale użytkownik czytnika ekranu nie słyszy nic. Przełącznik nie ma dostępnej etykiety. Użytkownik nie może stwierdzić, w jakim stanie jest przełącznik. Nie może stwierdzić, czym przełącznik steruje.
Zbudowanie dostępnego przełącznika wymaga atrybutu ARIA o nazwie aria-pressed. Mówi on czytnikom ekranu, że element jest przyciskiem i jest wciśnięty lub nie. Użytkownik czytnika ekranu słyszy „Przycisk przełącznika trybu ciemnego, obecnie włączony". Bez aria-pressed użytkownik nie słyszy nic sensownego.
Nawet przy poprawnej konfiguracji ARIA przełączniki nie są naturalnymi kontrolkami formularza. Pole wyboru jest kontrolką formularza. Każdy wie, czym jest pole wyboru. Przełącznik to niestandardowa kontrolka wymagająca dodatkowego JavaScriptu. Dlatego wiele dostępnych projektów formularzy w ogóle pomija przełączniki i używa zamiast nich pól wyboru. Pola wyboru są wbudowane w każdą przeglądarkę. Działają z czytnikami ekranu. Nie wymagają niestandardowego JavaScriptu. Po prostu działają.
Kontrast kolorów i wskaźniki wizualne mają znaczenie dla stanów przełącznika
Przełącznik, który polega tylko na kolorze, by pokazać swój stan, nie zadziała dla osób słabowidzących lub z zaburzeniami widzenia barw. Jeśli przełącznik jest zielony po włączeniu i czerwony po wyłączeniu, osoba z zaburzeniami widzenia barw nie rozpozna, w jakim jest stanie.
Każdy przełącznik potrzebuje wielu sygnałów wizualnych. Kolor plus kształt. Kolor plus położenie. Kolor plus tekst. Kształt przełącznika powinien zmieniać położenie po przestawieniu. Kółko w środku powinno przesuwać się od lewej do prawej. Tło powinno zmieniać kolor. Razem te trzy sygnały tworzą nadmiarowość, dzięki której osoba z dowolnym rodzajem zaburzeń widzenia nadal może stwierdzić, czy przełącznik jest włączony, czy wyłączony.
Etykiety tekstowe dodają kolejną warstwę. Jeśli przełącznik ma widoczną na nim etykietę włączone/wyłączone, etykieta wzmacnia to, co pokazują już kolor i położenie. To nadmiarowość wizualna. To nie jest nadmiar. To dostępność.
Rozmiar ma znaczenie dla obszarów dotyku
Przełącznik, który wygląda ładnie przy szerokości 24 pikseli, staje się koszmarem na telefonie. Użytkownik próbuje go stuknąć i trafia w coś innego. Albo stuka go wielokrotnie, bo nie jest pewien, czy pierwsze stuknięcie zostało zarejestrowane.
Minimalny rozmiar obszaru dotyku dla każdego elementu interaktywnego to 44x44 piksele. Przełącznik powinien być co najmniej tak duży. Większy jest lepszy, zwłaszcza na telefonie. Przełącznik o szerokości 60 pikseli jest znacznie łatwiejszy do dokładnego stuknięcia niż przełącznik o szerokości 30 pikseli.
To nie jest preferencja projektowa. To wymóg dostępności. Użytkownicy z ograniczoną sprawnością manualną, drżeniem rąk albo po prostu z dużymi palcami na małych ekranach potrzebują przełączników na tyle dużych, by trafiać w nie pewnie.
Nie mieszaj przełączników z przyciskami wysyłania formularza
To największy błąd. Formularz z polami tekstowymi, listami rozwijanymi i innymi standardowymi polami ma na dole przycisk wysyłania. Wszystkie zmiany są stosowane, gdy użytkownik kliknie wyślij. Ale do formularza dodano przełącznik zaprojektowany tak, by działał natychmiast, bez wysyłania. Model mentalny użytkownika się łamie. Spodziewa się, że przełącznik poczeka na wysłanie jak pola wyboru. Ale przełącznik zmienia się od razu. Użytkownik myśli, że popełnił błąd. Przestawia go z powrotem. Chaos.
Jeśli masz formularz z przyciskiem wysyłania, nie używaj przełączników. Użyj pól wyboru dla pytań tak/nie. Wszystkie zmiany w formularzu zostaną zastosowane razem po kliknięciu wyślij. Formularz ma sens. Użytkownik rozumie model.
Przełączniki należą do paneli, ustawień i innych miejsc, w których każda interakcja jest natychmiastowa. Nie należą do formularzy wymagających wysłania.
Jak WEMASY obsługuje przełączniki w formularzach
Kreator formularzy WEMASY zawiera przełączniki jako opcję pól formularza. Jeśli zdecydujesz się użyć przełącznika, kreator formularzy wymaga jasnej etykiety. Przełącznik jest wystarczająco duży do dotyku. Zawiera właściwe atrybuty ARIA dla dostępności. Kreator formularzy ostrzega też, gdy dodasz przełącznik do formularza, który ma inne typy pól i przycisk wysyłania. To ostrzeżenie jest po coś. Wychwytuje prawdziwy problem użyteczności. Jeśli zobaczysz to ostrzeżenie, przełącz się na pola wyboru lub przyciski opcji. Twoi użytkownicy Ci za to podziękują.