Vezměte jakýkoli formulář, který návštěvníky žádá o výběr ze seznamu možností, a všimnete si něčeho. Formulář neselhává proto, že klade příliš mnoho otázek. Selhává proto, že někdo pro danou otázku zvolil špatný typ vstupu. Rozbalovací seznam tam, kde by přepínače byly rychlejší. Zaškrtávací pole tam, kde dává smysl jen jedna odpověď. Přepínače tam, kde by rozbalovací seznam ušetřil polovinu místa na obrazovce.
Nejsou to drobnosti. Výzkumy ukazují, že výběr typu vstupu patří mezi hlavní důvody, proč návštěvníci formuláře opouštějí. Jediná špatná volba mezi rozbalovacím seznamem, přepínačem a zaškrtávacím polem může zvýšit míru opuštění formuláře o 15% i více. Návštěvník není zmatený proto, že se nemůže rozhodnout. Je zmatený proto, že typ vstupu, který jste zvolili, vysílá špatný signál o tom, co formulář očekává.
Tento článek shrnuje praktická pravidla pro volbu mezi rozbalovacími seznamy, přepínači a zaškrtávacími poli. Dozvíte se, který typ vstupu funguje nejlépe v různých situacích, co každý z nich návštěvníkovi sděluje a jak se vyhnout chybám, kvůli kterým návštěvníci formuláře opouštějí. Když tato rozhodnutí zvládnete, pochopíte, proč některé značky vidí u stejného formuláře výrazně vyšší míru vyplnění jen tím, že změnily jeden typ vstupu.
Proč typ vstupu ovlivňuje vyplnění formuláře víc, než si většina lidí uvědomuje
Rozbalovací pole, přepínač a zaškrtávací pole všechny sbírají výběr ze seznamu. Na povrchu se zdají zaměnitelné. Rozdíly jsou nenápadné. Dopad nikoli.
Když návštěvník vidí rozbalovací seznam, ví, že musí kliknout, aby viděl možnosti. Možnosti jsou skryté, dokud neklikne. To znamená krok navíc. Když vidí přepínače, možnosti jsou vidět hned. Může je všechny najednou přehlédnout a vybrat, aniž by musel nejdřív kliknout. Když vidí zaškrtávací pole, chápe, že může vybrat více položek, ne jen jednu.
Tyto rozdíly mění to, jak návštěvníci s formulářem pracují. Mění mentální zátěž. Mění to, jak rychle se někdo rozhodne. Mění to, zda formulář působí jednoduše, nebo ohromujícím dojmem. Když to uděláte správně, méně lidí formulář opustí. Když špatně, návštěvníci odejdou, protože formulář nepůsobí intuitivně, i když technicky funguje.
Nejhorší chybou je použít pro danou situaci špatný typ vstupu. Rozbalovací seznam pro dvě možnosti působí zbytečně. Přepínače pro 15 možností působí nepřehledně a ohromujícím dojmem. Zaškrtávací pole tam, kde má někdo vybrat jen jednu možnost, vyvolává zmatek v tom, co smí vybrat. Každá špatná volba vás stojí konverze.
Rozbalovací seznamy fungují nejlépe u dlouhých seznamů, kde výchozí hodnota nehraje roli
Rozbalovací seznam je pole, které skrývá možnosti, dokud na něj někdo neklikne. Volba je skrytá za kliknutím. Proto jsou rozbalovací seznamy ideální pro jednu konkrétní situaci. Máte mnoho možností a záleží na minimálním místě na obrazovce.
Rozbalovací seznam použijte, když máte více než sedm možností. V tomto bodě zobrazení všech možností jako přepínačů nebo zaškrtávacích polí způsobí, že formulář působí nepřehledně. Rozbalovací seznam sbalí všechny možnosti do jediného pole, které zabere téměř žádné svislé místo. Proto jsou rozbalovací seznamy ve formulářích na mobilu standardem. Obrazovka telefonu je úzká. Rozbalovací seznamy šetří místo na obrazovce.
Rozbalovací seznamy fungují dobře také tehdy, když je volba zřejmá a návštěvník má jasnou odpověď. Představte si výběr země nebo státu. Většina lidí hned ví, kterou chce. Může napsat první písmeno a skočit na možnost, nebo kliknout a procházet seznam. Interakce je rychlá, protože otázka je snadná.
Jenže právě tady rozbalovací seznamy selhávají. Selhávají, když návštěvníci potřebují možnosti před rozhodnutím porovnat. Selhávají, když je seznam seřazen způsobem, který návštěvníci nečekají. Selhávají, když není výchozí hodnota a návštěvník musí kliknout jen proto, aby viděl, jaké možnosti existují.
Příklad: formulář žádá návštěvníky o výběr preferovaného jídla pomocí rozbalovacího seznamu. Možnosti jsou v náhodném pořadí (mořské plody, vegetariánské, kuřecí, hovězí, veganské, bezlepkové). Návštěvník neví, jaké možnosti existují, dokud neklikne. Když klikne a uvidí seznam, musí je všechny zpracovat, aby se rozhodl. Nevidí je všechny najednou, aby je mohl porovnat. To trvá déle, než kdyby byly možnosti vidět jako přepínače. Výzkum v oboru použitelnosti ukazuje, že rozbalovací seznamy zpomalují rozhodování, když uživatelé potřebují vyhodnotit více možností.
Rozbalovací seznamy používejte, když návštěvníci vědí, co hledají, a možností je hodně. Vyhněte se jim, když návštěvníci potřebují možnosti porovnat nebo když je voleb méně než sedm.
Přepínače dávají smysl, když máte mezi dvěma a pěti možnostmi
Přepínač zobrazuje u každé možnosti kulaté políčko. Když na jedno někdo klikne, ostatní se automaticky zruší. Najednou lze vybrat jen jednu možnost. Proto se jim anglicky říká "radio" buttons, podle starých autorádií, kde stisknutí tlačítka nové stanice uvolnilo předchozí.
Přepínače fungují skvěle, když mají návštěvníci jasný, malý soubor voleb. Pokud se ve formuláři ptáte návštěvníků na výběr tarifu a nabízíte tři úrovně, přepínače jsou ideální volba. Návštěvník vidí všechny tři najednou. V hlavě okamžitě porovná ceny, funkce a výhody. Klikne na jednu. Hotovo. Žádné skryté možnosti. Žádný zmatek.
Přepínače fungují dobře také tehdy, když je jedna možnost zjevně výchozí nebo nejoblíbenější. Představte si formulář, který se ptá, jak se návštěvníci o vaší značce dozvěděli. Nabízíte pět možností a většina lidí zvolí "Vyhledávání Google". Díky viditelným přepínačům návštěvníci, kteří hledali přes Google, hned vidí svou odpověď a kliknou na ni. Nemusí otevírat rozbalovací seznam a přemýšlet, zda tam jejich odpověď je.
Výzkum použitelnosti je jednoznačný. Když jsou možnosti vidět, lidé se rozhodují rychleji. Když lidé vidí všechny volby bez dalšího kliknutí, míra vyplnění roste. Proto přepínače u menších seznamů překonávají rozbalovací seznamy.
Přepínače začínají působit nepřehledně kolem pěti nebo šesti možností. Přidejte jich víc než sedm a formulář vypadá ohromujícím dojmem. Každý přepínač zabere svislé místo. Formulář s osmi možnostmi přepínače u otázky "Co vás zajímá nejvíce?" vypadá mnohem delší, než je nutné. V tomto bodě dává větší smysl rozbalovací seznam.
Přepínače použijte, když máte dvě až pět možností a návštěvníkům pomáhá je porovnat. Vyhněte se jim u více než sedmi možností.
Zaškrtávací pole jsou pro výběry, kde je správných odpovědí více
Zaškrtávací pole vypadá jako malý čtverec. Po kliknutí zobrazí zatržítko. Na rozdíl od přepínačů lze u více zaškrtávacích polí ve stejné skupině zaškrtnout víc najednou. To je klíčový rozdíl. Zaškrtávací pole nejsou alternativami jedno druhého. Jsou to nezávislé volby.
Zaškrtávací pole fungují, když otázka připouští více než jednu odpověď. Formulář, který se ptá "Které z těchto funkcí vás zajímají?", používá zaškrtávací pole, protože návštěvník může vybrat analytiku produktů, zpětnou vazbu od zákazníků a integraci automatizace najednou. Každé zaškrtávací pole je samostatná nezávislá volba, ne alternativa k ostatním.
Zaškrtávací pole fungují i pro prohlášení o souhlasu. "Souhlasím s obchodními podmínkami" je zaškrtávací pole, protože jde o výrok typu ano nebo ne. Návštěvník buď souhlasí, nebo ne. Podobně "Posílejte mi novinky e-mailem" je jedno zaškrtávací pole, protože představuje jedinou volbu.
Ke zmatku dochází, když lidé používají zaškrtávací pole tam, kde mají použít přepínače, nebo naopak. Formulář, který se ptá "Který tarif chcete?", by neměl používat zaškrtávací pole. Nikdo nemůže chtít všechny tři tarify. Volby se vzájemně vylučují. Správné jsou tady přepínače.
Zaškrtávací pole trpí stejným problémem se shlukováním jako přepínače. Více než sedm nebo osm zaškrtávacích polí v jedné skupině působí ohromujícím dojmem. Vizuálně vypadá mnoho zaškrtávacích polí jako hodně práce, i když návštěvník potřebuje vybrat jen jednu nebo dvě položky.
Zaškrtávací pole používejte jen tehdy, když návštěvníci mohou oprávněně vybrat více možností najednou. Vyhněte se jim u otázek s jednou odpovědí a velký počet zaškrtávacích polí rozdělte do menších, souvisejících kategorií.
Jak se rozhodnout, když si nejste jistí, který vstup použít
Rozhodnutí je často jasné. Někdy ale otázka leží v šedé zóně. Máte pět možností a nejste si jistí, zda sedí spíš přepínače, nebo rozbalovací seznam. Tady je rozhodovací strom, který funguje.
Krok 1. Může návštěvník vybrat více než jednu odpověď? Pokud ano, použijte zaškrtávací pole. Pokud ne, přejděte ke kroku dvě.
Krok 2. Kolik je možností? Méně než šest možností, přejděte ke kroku tři. Více než sedm možností, použijte rozbalovací seznam.
Krok 3. Potřebují návštěvníci možnosti porovnat, aby se rozhodli? Pokud ano, použijte přepínače, aby byly všechny možnosti vidět najednou. Pokud ne a odpověď je zřejmá, funguje buď přepínač, nebo rozbalovací seznam, ale přepínače budou o něco rychlejší.
Tento jednoduchý rozhodovací strom vyřeší 90% otázek ohledně typu vstupu, které se při návrhu formulářů objeví. V případech, kdy si stále nejste jistí, otestujte obě varianty se skutečnými návštěvníky. Týden provozujte formulář s přepínači a změřte míru vyplnění. Přepněte na rozbalovací seznam, týden ho provozujte a porovnejte. Skutečná data od vašich návštěvníků překonají jakékoli pravidlo návrhu, protože právě vaši návštěvníci formuláře vyplňují.
Časté chyby, které bez povšimnutí srážejí vyplnění formuláře
První chybou je rozbalovací seznam pro dvě nebo tři možnosti. Stává se to častěji, než byste čekali. Formulář se ptá "Jak jste nás našli?" a možnosti jsou "Vyhledávač", "Sociální sítě" a "Doporučení". Rozbalovací seznam tyto možnosti skrývá. Návštěvník musí na seznam kliknout, aby je viděl. Bez kliknutí neví, jaké možnosti existují. To přidává tření bez důvodu. Přepínače jsou tady rychlejší a působí intuitivněji.
Druhou chybou je zobrazení osmi nebo devíti přepínačů, když by rozbalovací seznam zabral desetinu místa na obrazovce. Formulář žádá návštěvníky o výběr země ze seznamu 195 zemí. Přepínače by se posouvaly donekonečna. Rozbalovací seznam s vyhledáváním s automatickým doplňováním to vyřeší okamžitě. Někteří návrháři zůstávají u přepínačů, protože působí intuitivněji, a nevšimnou si, že intuitivnost mizí, když musíte procházet 50 možností.
Třetí chybou je zaškrtávací pole pro otázku s jednou odpovědí. Formulář se ptá "Jaký je váš tarif?" a zobrazí tři zaškrtávací pole, jedno pro každý tarif. Návštěvníci jsou zmatení. Mohou vybrat všechny tři? Zaškrtávací pole vysílá špatný signál. Přepínače jsou jasnější, protože vizuálně sdělují, že lze vybrat jen jednu možnost.
Čtvrtou chybou je, že není jasně vysvětleno, co pole znamená. Skupina zaškrtávacích polí se objeví s popiskem "Zájmy" a bez vysvětlení. Návštěvník neví, zda má vybrat jen jednu, nebo tolik, kolik se hodí. Když je něco nejednoznačné, míra vyplnění klesá. Jasné popisky to řeší. "Vyberte všechny, které platí" nebo "Vyberte jednu" návštěvníkovi řekne, co pole očekává.
Pátou chybou je nesprávné použití výchozích hodnot. Rozbalovací seznam, který jako výchozí hodnotu začíná textem "Vyberte možnost", působí rozbitě. Rozbalovací seznam, který jako výchozí hodnotu začíná "Spojené státy", působí užitečně, pokud tam je většina návštěvníků. Přepínače, které začínají bez výběru, nutí návštěvníka kliknout na jeden. Přepínače, které začínají s předvybranou nejčastější odpovědí, návštěvníkovi ušetří klik. Tyto drobné výchozí hodnoty se ve formuláři sčítají.
Hlediska mobilu, která mění rozhodnutí o typu vstupu
Mobilní telefony jsou menší. To mění rozhodnutí o typu vstupu významným způsobem.
Na počítači působí tři přepínače pro jednoduchou volbu přirozeně a rychle. Na mobilu jsou tytéž tři přepínače naskládané pod sebou a zabírají víc místa na obrazovce než rozbalovací seznam. Rozhodnutí se může obrátit.
Mobilní návštěvníci také pracují jinak. Ťukají palcem, ne přesným kliknutím myši. Zaškrtávací pole o velikosti 44 na 44 pixelů je minimální pohodlná velikost. Cokoli menšího se těžko přesně trefuje. Přepínače a zaškrtávací pole potřebují kolem sebe dost místa, aby ťuknutí na jedno omylem neťuklo na sousední možnost.
Rozbalovací seznamy na mobilu obvykle zajišťuje nativní nabídka výběru v zařízení. Když návštěvník na telefonu klikne na rozbalovací seznam, uvidí výběr optimalizovaný pro mobil. To je často rychlejší a pohodlnější než procházet dlouhý seznam přímo na stránce.
U formulářů na mobilu jsou rozbalovací seznamy atraktivnější, protože místo na obrazovce je cenné. Přepínače jsou stále dobré pro dvě až čtyři volby, protože se na ně rychle ťuká. Ale šest možností jako přepínače působí jako posouvání. Týchž šest možností v rozbalovacím seznamu působí na telefonu čistěji a rychleji.
Formuláře testujte na mobilu. Rozhodnutí, které se zdálo správné na počítači, může působit jinak, když někdo vyplňuje váš formulář na čtyřpalcové obrazovce telefonu.
Požadavky na přístupnost, které musí splnit každý typ vstupu
Rozbalovací seznamy, přepínače i zaškrtávací pole musí splňovat standardy přístupnosti, aby lidé používající čtečky obrazovky nebo ovládání klávesnicí mohli váš formulář úspěšně vyplnit.
Každá skupina přepínačů nebo zaškrtávacích polí potřebuje popisek fieldsetu, který vysvětluje, k čemu skupina slouží. Když se uživatel čtečky obrazovky tabulátorem dostane do skupiny, uslyší popisek a pochopí, z čeho vybírá. Bez něj uslyší jen "Přepínač jedna, Přepínač dvě" bez souvislostí.
Každá jednotlivá možnost potřebuje viditelný, klikatelný popisek, ne jen malý přepínač nebo zaškrtávací pole. Když musí návštěvník kliknout přesně na čtvereček zaškrtávacího pole, aby ho vybral, mají lidé s méně přesnou motorikou potíže. Když mohou kliknout na popisek vedle zaškrtávacího pole, výběr je snazší pro všechny. Není to funkce přístupnosti jen pro lidi s postižením. Usnadňuje formuláře všem.
Rozbalovací seznamy potřebují také jasné popisky. Popisek má být nad polem rozbalovacího seznamu nebo nalevo od něj. Aktuálně vybraná možnost má být v zavřeném rozbalovacím seznamu vždy vidět. Když se rozbalovací seznam po výběru zavře a ukáže zvolenou hodnotu, návštěvník ví, že jeho volba byla zaznamenána.
Uživatelé klávesnice se formuláři pohybují tabulátorem a šipkami. Přepínače mají umožňovat pohyb mezi možnostmi šipkami. Zaškrtávací pole mají jít vybrat mezerníkem. Rozbalovací seznamy mají jít otevřít a zavřít příkazy z klávesnice. Pokud váš formulář u čehokoli z toho vyžaduje kliknutí myší, uživatelé klávesnice jsou zablokováni.
Samotná barva nesmí signalizovat vybraný stav. Rozbalovací seznam se zvýrazněnou možností používá barvu k označení vybrané položky. To je užitečné. Uživatelé, kteří barvu nevidí, ale také musí poznat, co je vybráno, pomocí zatržítka, ikony nebo vizuálního ukazatele, který nezávisí jen na barvě.
Jak typy vstupů v poli formuláře ovlivňují vnímání vaší značky
Typ vstupu, který zvolíte, návštěvníkovi sděluje, jak moc mu rozumíte.
Rozbalovací seznam pro dvě nebo tři možnosti signalizuje, že ten, kdo formulář navrhl, o zkušenosti uživatele moc nepřemýšlel. Přidává zbytečné kliknutí. Návštěvník si toho všimne. Působí to jako tření.
Přepínač tam, kde by rozbalovací seznam ušetřil polovinu délky formuláře, signalizuje totéž. Formulář působí špatně navržený.
Formulář, který jasně promyslel zkušenost uživatele, u kterého jsou rychlé volby zřejmé a vícenásobné výběry jasné, ale signalizuje něco jiného. Signalizuje, že této značce záleží na čase návštěvníka. Signalizuje, že někdo formulář pečlivě promyslel. To není jen lepší použitelnost. Je to lepší vnímání značky.
Takovéto drobné volby se sčítají. Návštěvník vyplní váš formulář a každé pole působí intuitivně. Dokončí ho rychleji, než čekal. Z interakce má dobrý pocit. Ten pocit se přenáší do toho, jak vaši značku vnímá.