Weź dowolny formularz, który prosi odwiedzających o wybór z listy opcji, a zauważysz pewną rzecz. Formularz nie zawodzi dlatego, że zadaje za dużo pytań. Zawodzi, bo ktoś wybrał zły typ pola do danego pytania. Lista rozwijana tam, gdzie przyciski opcji byłyby szybsze. Pola wyboru tam, gdzie sensowna jest tylko jedna odpowiedź. Przyciski opcji tam, gdzie lista rozwijana zaoszczędziłaby połowę miejsca na ekranie.
To nie są drobiazgi. Badania pokazują, że wybór typu pola to jeden z głównych powodów, dla których odwiedzający porzucają formularze. Jeden zły wybór między listą rozwijaną, przyciskiem opcji i polem wyboru może podnieść odsetek porzuceń formularza o 15% lub więcej. Odwiedzający nie jest zagubiony dlatego, że nie potrafi podjąć decyzji. Jest zagubiony, bo wybrany przez Ciebie typ pola wysyła zły sygnał o tym, czego oczekuje formularz.
Ten artykuł opisuje praktyczne zasady wyboru między listami rozwijanymi, przyciskami opcji i polami wyboru. Dowiesz się, który typ pola sprawdza się w różnych sytuacjach, co każdy z nich komunikuje odwiedzającemu i jak uniknąć błędów, przez które odwiedzający porzucają formularze. Opanuj te decyzje, a zrozumiesz, dlaczego niektóre marki widzą wyraźnie wyższy odsetek wypełnień tego samego formularza po prostu dzięki zmianie jednego typu pola.
Dlaczego wybrany typ pola wpływa na wypełnianie formularza bardziej, niż większość ludzi sądzi
Lista rozwijana, przycisk opcji i pole wyboru zbierają wybór z listy. Na pierwszy rzut oka wydają się wymienne. Różnice są subtelne. Wpływ już nie.
Gdy odwiedzający widzi listę rozwijaną, wie, że musi kliknąć, by zobaczyć opcje. Opcje są ukryte do czasu kliknięcia. To dodatkowy krok. Gdy widzi przyciski opcji, opcje są widoczne od razu. Może przejrzeć je wszystkie naraz i dokonać wyboru bez wcześniejszego klikania. Gdy widzi pole wyboru, rozumie, że może zaznaczyć kilka pozycji, a nie tylko jedną.
Te różnice zmieniają sposób, w jaki odwiedzający korzystają z formularza. Zmieniają obciążenie poznawcze. Zmieniają, jak szybko ktoś może podjąć decyzję. Zmieniają to, czy formularz wydaje się prosty, czy przytłaczający. Dobre ich dopasowanie oznacza, że mniej osób porzuca formularz. Złe oznacza, że odwiedzający odchodzą, bo formularz nie wydaje się intuicyjny, nawet jeśli technicznie działa.
Najgorszy błąd to użycie złego typu pola do danej sytuacji. Lista rozwijana dla dwóch opcji wydaje się przesadą. Przyciski opcji dla 15 opcji wyglądają na zagracone i przytłaczające. Pola wyboru, gdy ktoś powinien wybrać tylko jedną opcję, wprowadzają zamieszanie co do tego, co można zaznaczyć. Każdy zły wybór kosztuje Cię konwersje.
Listy rozwijane sprawdzają się przy długich listach, gdzie wartość domyślna nie ma znaczenia
Lista rozwijana to pole, które ukrywa opcje do czasu kliknięcia. Wybór jest schowany za kliknięciem. Dzięki temu listy rozwijane idealnie pasują do jednej konkretnej sytuacji: masz wiele opcji, a liczy się minimalna ilość miejsca na ekranie.
Użyj listy rozwijanej, gdy masz więcej niż siedem opcji. Przy takiej liczbie wyświetlenie wszystkich opcji jako przycisków opcji lub pól wyboru sprawia, że formularz wygląda na zagracony. Lista rozwijana zwija wszystkie te opcje do jednego pola, które zajmuje prawie zero miejsca w pionie. Dlatego listy rozwijane są standardem w formularzach mobilnych. Ekran telefonu jest wąski. Listy rozwijane oszczędzają miejsce.
Listy rozwijane sprawdzają się też wtedy, gdy wybór jest oczywisty, a odwiedzający ma w głowie jasną odpowiedź. Pomyśl o wyborze kraju lub województwa. Większość osób od razu wie, które wybrać. Mogą wpisać pierwszą literę, by przeskoczyć do opcji, albo kliknąć i przewinąć, by ją znaleźć. Interakcja jest szybka, bo pytanie jest łatwe.
Ale oto, gdzie listy rozwijane zawodzą. Zawodzą, gdy odwiedzający musi porównać opcje przed decyzją. Zawodzą, gdy lista jest posortowana w sposób, którego odwiedzający się nie spodziewają. Zawodzą, gdy nie ma wartości domyślnej i trzeba kliknąć tylko po to, by zobaczyć, jakie opcje istnieją.
Przykład: formularz prosi odwiedzających o wybór preferencji posiłku za pomocą listy rozwijanej. Opcje są wymieszane (owoce morza, wegetariańskie, kurczak, wołowina, wegańskie, bezglutenowe). Odwiedzający nie wie, jakie opcje istnieją, dopóki nie kliknie. Gdy kliknie i zobaczy listę, musi przetworzyć je wszystkie, by podjąć decyzję. Nie widzi ich wszystkich naraz, by je porównać. To trwa dłużej, niż gdyby opcje były widoczne jako przyciski opcji. Badania Nielsen Norman Group pokazują, że listy rozwijane spowalniają podejmowanie decyzji, gdy użytkownicy muszą ocenić wiele opcji.
Używaj list rozwijanych, gdy odwiedzający wiedzą, czego szukają, a opcji jest dużo. Unikaj ich, gdy odwiedzający muszą porównać opcje lub gdy wyborów jest mniej niż siedem.
Przyciski opcji mają sens, gdy masz od dwóch do pięciu opcji
Przycisk opcji pokazuje okrągłe pole przy każdej opcji. Gdy ktoś kliknie jedną, pozostałe odznaczają się automatycznie. Można wybrać tylko jedną opcję naraz. Dlatego nazywa się je przyciskami „radio", jak w starych radiach samochodowych, gdzie naciśnięcie przycisku nowej stacji zwalniało poprzedni.
Przyciski opcji działają świetnie, gdy odwiedzający mają jasny, niewielki zestaw wyborów. Jeśli formularz prosi o wybór planu subskrypcji, a oferujesz trzy poziomy, przyciski opcji to idealny wybór. Odwiedzający widzi wszystkie trzy naraz. Może od razu porównać w głowie ceny, funkcje i korzyści. Klika jedną. Gotowe. Bez ukrytych opcji. Bez zamieszania.
Przyciski opcji sprawdzają się też, gdy jedna opcja jest wyraźnie domyślna lub najpopularniejsza. Wyobraź sobie formularz pytający odwiedzających, skąd dowiedzieli się o Twojej marce. Oferujesz pięć opcji, a większość osób wybiera „Wyszukiwarka Google". Gdy przyciski opcji są widoczne, odwiedzający, którzy szukali w Google, od razu widzą swoją odpowiedź i ją klikają. Nie muszą otwierać listy rozwijanej, zastanawiając się, czy ich odpowiedź jest na liście.
Badania użyteczności są jednoznaczne. Gdy opcje są widoczne, ludzie podejmują decyzje szybciej. Gdy widać wszystkie wybory bez dodatkowego kliknięcia, odsetek wypełnień rośnie. Dlatego przyciski opcji wypadają lepiej niż listy rozwijane przy krótszych listach.
Przyciski opcji zaczynają wyglądać na zagracone przy pięciu lub sześciu opcjach. Dodaj więcej niż siedem, a formularz wygląda przytłaczająco. Każdy przycisk opcji zajmuje miejsce w pionie. Formularz z ośmioma przyciskami opcji dla pytania „Co Cię najbardziej interesuje?" wygląda na dużo dłuższy, niż trzeba. Przy takiej liczbie lepsza jest lista rozwijana.
Używaj przycisków opcji, gdy masz od dwóch do pięciu opcji, a odwiedzający zyskują na ich porównaniu. Unikaj ich przy więcej niż siedmiu opcjach.
Pola wyboru służą do wyborów, w których poprawnych odpowiedzi może być kilka
Pole wyboru wygląda jak mały kwadrat. Po kliknięciu pokazuje znaczek zaznaczenia. W przeciwieństwie do przycisków opcji wiele pól wyboru w tej samej grupie można zaznaczyć jednocześnie. To kluczowa różnica. Pola wyboru nie są względem siebie alternatywami. To niezależne wybory.
Pola wyboru działają, gdy pytanie dopuszcza więcej niż jedną odpowiedź. Formularz pytający „Które z tych funkcji Cię interesują?" używa pól wyboru, bo odwiedzający może zaznaczyć analitykę produktu, opinie klientów i integrację automatyzacji jednocześnie. Każde pole wyboru to osobny, niezależny wybór, a nie alternatywa dla pozostałych.
Pola wyboru sprawdzają się też przy oświadczeniach o zgodzie. „Akceptuję regulamin" to pole wyboru, bo to oświadczenie typu tak lub nie. Odwiedzający albo się zgadza, albo nie. Podobnie „Wysyłajcie mi aktualności e-mailem" to pojedyncze pole wyboru, bo oznacza pojedynczy wybór.
Zamieszanie pojawia się, gdy ludzie używają pól wyboru tam, gdzie powinni użyć przycisków opcji, lub odwrotnie. Formularz pytający „Który plan wybierasz?" nie powinien używać pól wyboru. Nikt nie może chcieć wszystkich trzech planów. Wybory wzajemnie się wykluczają. Tu właściwe są przyciski opcji.
Pola wyboru mają też ten sam problem z natłokiem co przyciski opcji. Więcej niż siedem lub osiem pól wyboru w jednej grupie sprawia, że formularz wydaje się przytłaczający. Wizualnie wiele pól wyboru wygląda na dużo pracy, nawet jeśli odwiedzający musi zaznaczyć tylko jedną lub dwie pozycje.
Używaj pól wyboru tylko wtedy, gdy odwiedzający może zasadnie wybrać wiele opcji naraz. Unikaj ich w pytaniach jednokrotnego wyboru, a dużą liczbę pól wyboru grupuj w mniejsze, powiązane kategorie.
Jak zdecydować, gdy nie masz pewności, którego pola użyć
Decyzja jest często jasna. Ale czasem pytanie trafia w szarą strefę. Masz pięć opcji i nie wiesz, czy lepsze będą przyciski opcji, czy lista rozwijana. Oto drzewo decyzyjne, które działa.
Krok 1. Czy odwiedzający może wybrać więcej niż jedną odpowiedź? Jeśli tak, użyj pól wyboru. Jeśli nie, przejdź do kroku drugiego.
Krok 2. Ile jest opcji? Mniej niż sześć: przejdź do kroku trzeciego. Więcej niż siedem: użyj listy rozwijanej.
Krok 3. Czy odwiedzający muszą porównać opcje, by zdecydować? Jeśli tak, użyj przycisków opcji, aby wszystkie opcje były widoczne naraz. Jeśli nie, a odpowiedź jest oczywista, sprawdzą się zarówno przyciski opcji, jak i lista rozwijana, ale przyciski opcji będą nieco szybsze.
To proste drzewo decyzyjne rozwiązuje 90% pytań o typ pola, które pojawiają się przy projektowaniu formularzy. W przypadkach, w których wciąż nie masz pewności, przetestuj obie opcje na prawdziwych odwiedzających. Uruchom formularz z przyciskami opcji na tydzień i zmierz odsetek wypełnień. Przełącz na listę rozwijaną, uruchom na kolejny tydzień i porównaj. Prawdziwe dane od Twoich odwiedzających biją każdą zasadę projektową, bo to oni wypełniają Twoje formularze.
Częste błędy, które obniżają wypełnianie formularza, choć nikt nie wie dlaczego
Pierwszy błąd to lista rozwijana dla dwóch lub trzech opcji. Zdarza się to częściej, niż myślisz. Formularz pyta „Skąd o nas wiesz?", a opcje to „Wyszukiwarka", „Media społecznościowe" i „Polecenie". Lista rozwijana ukrywa te opcje. Odwiedzający musi kliknąć listę, by je zobaczyć. Nie wie, jakie opcje istnieją, dopóki nie kliknie. To dodaje tarcia bez powodu. Przyciski opcji są tu szybsze i wydają się bardziej intuicyjne.
Drugi błąd to wyświetlanie ośmiu lub dziewięciu przycisków opcji, gdy lista rozwijana zajęłaby jedną dziesiątą miejsca na ekranie. Formularz prosi odwiedzających o wybór kraju z listy 195 krajów. Przyciski opcji przewijałyby się w nieskończoność. Lista rozwijana z wyszukiwaniem i autouzupełnianiem rozwiązuje to od razu. Niektórzy projektanci trzymają się przycisków opcji, bo wydają się bardziej intuicyjne, nie zauważając, że intuicyjność znika, gdy trzeba przewijać 50 opcji.
Trzeci błąd to użycie pól wyboru w pytaniu jednokrotnego wyboru. Formularz pyta „Jaki jest Twój plan subskrypcji?" i wyświetla trzy pola wyboru, po jednym na plan. Odwiedzający są zdezorientowani. Czy mogą zaznaczyć wszystkie trzy? Pole wyboru wysyła zły sygnał. Przyciski opcji są jaśniejsze, bo wizualnie komunikują, że można wybrać tylko jedną.
Czwarty błąd to brak jasnych instrukcji, co oznacza pole. Grupa pól wyboru pojawia się z etykietą „Zainteresowania" bez wyjaśnienia. Odwiedzający nie wie, czy ma zaznaczyć tylko jedno, czy tyle, ile pasuje. Gdy jest niejasność, odsetek wypełnień spada. Jasne etykiety to naprawiają. „Zaznacz wszystkie pasujące" lub „Wybierz jedno" mówi odwiedzającemu dokładnie, czego oczekuje pole.
Piąty błąd to nieprawidłowe użycie wartości domyślnych. Lista rozwijana, która startuje z domyślnym „Wybierz opcję", wydaje się zepsuta. Lista rozwijana, która startuje z „Polska", wydaje się pomocna, jeśli stamtąd pochodzi większość odwiedzających. Przyciski opcji bez zaznaczonej opcji zmuszają odwiedzającego do kliknięcia jednej. Przyciski opcji z wstępnie zaznaczoną najczęstszą odpowiedzią oszczędzają odwiedzającemu kliknięcie. Te małe domyślne wartości kumulują się w całym formularzu.
Uwagi o urządzeniach mobilnych, które zmieniają wybór typu pola
Telefony komórkowe są mniejsze. To w istotny sposób zmienia decyzję o typie pola.
Na komputerze trzy przyciski opcji dla prostego wyboru wydają się naturalne i szybkie. Na telefonie te same trzy przyciski opcji ułożone są pionowo i zajmują więcej miejsca niż lista rozwijana. Decyzja może się odwrócić.
Odwiedzający na telefonach inaczej też korzystają z formularzy. Stukają kciukami, a nie precyzyjnie klikają myszką. Pole wyboru o rozmiarze 44 na 44 piksele to minimalny wygodny rozmiar. Cokolwiek mniejszego jest trudne do dokładnego stuknięcia. Przyciski opcji i pola wyboru potrzebują wokół siebie dość miejsca, by stuknięcie jednego nie uruchomiło przypadkiem sąsiedniej opcji.
Listy rozwijane na telefonie zwykle obsługuje natywne menu wyboru urządzenia. Gdy odwiedzający kliknie listę rozwijaną na iPhonie, widzi selektor dostosowany do telefonu. Jest to często szybsze i wygodniejsze niż przewijanie długiej listy na samej stronie.
W formularzach mobilnych listy rozwijane stają się atrakcyjniejsze, gdy miejsce na ekranie jest cenne. Przyciski opcji nadal są dobre dla dwóch do czterech wyborów, bo szybko się je stuka. Ale sześć opcji jako przyciski opcji oznacza przewijanie. Te same sześć opcji w liście rozwijanej wygląda na telefonie czyściej i działa szybciej.
Testuj formularze na telefonie. Decyzja, która wydawała się właściwa na komputerze, może wyglądać inaczej, gdy ktoś wypełnia formularz na czterocalowym ekranie telefonu.
Wymagania dostępności, które musi spełniać każdy typ pola
Listy rozwijane, przyciski opcji i pola wyboru muszą spełniać standardy dostępności, aby osoby korzystające z czytników ekranu lub nawigacji klawiaturą mogły pomyślnie wypełnić formularz.
Każda grupa przycisków opcji lub pól wyboru potrzebuje etykiety fieldset, która wyjaśnia, do czego służy grupa. Gdy użytkownik czytnika ekranu przejdzie tabulatorem do grupy, słyszy etykietę i rozumie, z czego wybiera. Bez niej słyszy tylko „Przycisk opcji pierwszy, przycisk opcji drugi" bez kontekstu.
Każda pojedyncza opcja potrzebuje widocznej, klikalnej etykiety, a nie tylko małego przycisku opcji lub pola wyboru. Gdy odwiedzający musi kliknąć dokładnie kwadrat pola wyboru, by je zaznaczyć, osoby z mniej precyzyjną kontrolą ruchową mają trudności. Gdy mogą kliknąć etykietę obok pola wyboru, zaznaczanie staje się łatwiejsze dla wszystkich. To nie jest funkcja dostępności tylko dla osób z niepełnosprawnościami. Ułatwia formularze wszystkim.
Listy rozwijane też potrzebują jasnego oznaczenia. Etykieta powinna znajdować się nad polem listy rozwijanej lub po jego lewej stronie. Aktualnie wybrana opcja powinna być zawsze widoczna w zamkniętej liście. Gdy lista po wyborze się zamyka i pokazuje wybraną wartość, odwiedzający wie, że jego wybór został zapisany.
Użytkownicy klawiatury muszą poruszać się po formularzach za pomocą klawiszy Tab i strzałek. Przyciski opcji powinny pozwalać na nawigację strzałkami między opcjami. Pola wyboru powinny dać się zaznaczać spacją. Listy rozwijane powinny otwierać się i zamykać poleceniami z klawiatury. Jeśli Twój formularz wymaga kliknięcia myszką w którymkolwiek z tych miejsc, użytkownicy klawiatury są zablokowani.
Sam kolor nie może sygnalizować stanu zaznaczenia. Lista rozwijana z podświetloną opcją używa koloru, by pokazać, co jest wybrane. To pomocne. Ale użytkownicy, którzy nie widzą kolorów, też powinni móc stwierdzić, co jest wybrane, dzięki znaczkowi zaznaczenia, ikonie lub wskaźnikowi wizualnemu, który nie zależy tylko od koloru.
Jak typy pól formularza wpływają na postrzeganie marki
Wybrany typ pola mówi odwiedzającemu coś o tym, jak dobrze go rozumiesz.
Lista rozwijana dla dwóch lub trzech opcji sygnalizuje, że osoba projektująca formularz niewiele myślała o wygodzie użytkownika. Dodaje zbędne kliknięcie. Odwiedzający to zauważa. Odczuwa to jako tarcie.
Przycisk opcji tam, gdzie lista rozwijana oszczędziłaby połowę długości formularza, sygnalizuje to samo. Formularz wydaje się źle zaprojektowany.
Ale formularz, który wyraźnie przemyślano pod kątem wygody użytkownika, w którym szybkie wybory wydają się oczywiste, a wielokrotne zaznaczenia jasne, sygnalizuje coś innego. Sygnalizuje, że marce zależy na czasie odwiedzającego. Że ktoś starannie przemyślał formularz. To nie tylko lepsza użyteczność. To lepszy odbiór marki.
Takie małe decyzje się sumują. Odwiedzający wypełnia formularz i każde pole wydaje się intuicyjne. Kończy szybciej, niż się spodziewał. Czuje się dobrze po tej interakcji. To uczucie przenosi się na postrzeganie Twojej marki.