Menu

10 tipů, jak zjednodušit otravné formuláře

Formuláře na webových stránkách jsou pro uživatele otrava. Z hlediska konverzí přitom představují místo zlomu. Víte, jak je zjednodušit a nepřicházet o budoucí zákazníky?

Zjednodušení formulářů, aneb Jak na webu nezpůsobit zbytečný chaos
Zjednodušení formulářů, aneb Jak na webu nezpůsobit zbytečný chaos

Objednávka, poptávka, vyhledávání, nákupní košík, dotazník, odběr newsletteru nebo jiné zanechání kontaktu – na všech těchto místech se setkáváme s webovými formuláři. Často se právě zde stává z návštěvníka zákazník. Zdlouhavé vyplňování údajů a odpovídání na otázky, na které z hlavy neznají odpověď, ale mnoho uživatelů odrazuje a celá akce pak místo nákupu končívá jejich odchodem ze stránek. Proto se mezi UX designéry někdy říká „nejlepší formulář = žádný formulář“. Když už přece jen nějaké ty informace od uživatelů potřebujete, je potřeba jim celý proces maximálně zjednodušovat a po každé úpravě kontrolovat konverzní poměr (tj. počet zobrazení / počet odeslaných formulářů). Jaké konkrétní přístupy se nabízejí?

1) Vynechte zbytečná pole

U každého údaje se minimálně dvakrát zamyslete, jestli ho od uživatele opravdu potřebujete. Možná ve skutečnosti není důležité vědět, z jakého města pochází nebo jak velký tým pracuje pro jeho zaměstnavatele. Nervy člověka, který formulář vyplňuje, se dají šetřit také na údajích, bez kterých se naopak neobejdete. Třeba tím, že spojíte jméno a příjmení do jednoho políčka.

2) Schovejte nepovinná pole

Zkuste si sami odpovědět, kolikrát v životě jste vyplnili textové pole nadepsané „Chcete nám něco vzkázat?“. Pokud se chováte jako většina uživatelů, mockrát to asi nebylo. Nejlepší je volitelná pole vůbec nepoužívat. Pokud si je přece jen byznysově obhájíte, pak je lepší takový message box částečně schovat, aby nezabíral místo, a nechat na uživateli, zda jej rozbalí, nebo ne. Kratší formulář je totiž podvědomě přívětivější. Otázkou je, jestli pak schovaná pole nevyplní výrazně méně uživatelů, než kdyby schovaná nebyla. Na příkladu žádosti o zkušební jízdu vozem Lexus je vidět, jak takový problém v části Additional Details (optional) pomáhá řešit copy. Vysvětlení účelu nepovinných údajů pomáhá s motivací k jejich vyplnění.

3) Neptejte se na datum narození

Potvrzení věku už nepatří jen na vstupní stránky mládeži nepřístupných serverů, ale s nástupem GDPR by mělo figurovat v každém košíku e-shopu. A formulářům tak hrozí natahování o další políčka. Úmornost tohoto kroku neodpáře ani snaha některých designérů o všelijaká „hravá“ počítadla. Obvyklé jsou na stránkách s alkoholem. Nutnost vyplňovat své údaje i při opakované návštěvě bývá poměrně frustrující. Zákonné potvrzení věku je samozřejmě potřeba dodržovat, a to i v tak komplikovaných případech, jakým je přístup na sociální sítě. Nechcete-li ale svým zákazníkům vyloženě posílat přání k narozeninám, vyzvídání přesného data narození si raději odpusťte. Tlačítko „Je mi více než 18 let“ splní svůj účel stejně dobře.

4) Vynechte slevové kupony

Slevy a jiné akční nabídky jsou zaručenou vábničkou na zákazníky. Konkrétně při optimalizaci stránek Bionic Gloves se ale projevily jako překvapivý kámen úrazu. Počet konverzí totiž během optimalizace webu vzrostl, jakmile z formuláře nákupního košíku pole určená slevovým kódům zmizela. Ukázalo se, že prázdné políčko zbytečně provokovalo nakupující k tomu, aby opustili nákupní košík a vydali se svůj slevový kód hledat. Prodloužení formuláře kvůli slevě nemusí být nutně špatně. Pokud ale zákazník má na výhodnou nabídku právo, nepouštějte ho na loveckou výpravu za kódem kamsi do kyberprostoru, ale sami mu jej připravte ve vyplněném políčku.

5) Delší formulář rozdělte do více kroků

Než aby uživatele odradila délka formuláře, je někdy lepší ho rozdělit do většího počtu jednodušších kroků. Takový přístup vám mimo jiné umožní dobře analyzovat, kde přesně přicházíte o zákazníka, a na základě toho formulář přesněji optimalizovat. Někdy ale bývají problémy se zpětným opravováním předchozích sekcí. Krokovač navíc nemusí vždy fungovat správně ani psychologicky. Uživatel totiž netuší, co ho čeká. Co když úplně nakonec zjistí, že mu nevyhovují způsoby dopravy v posledním kroku?

U vícekrokových formulářů se vyplatí postupné odesílání výsledků po vyplnění každého kroku. Na první stránce si tak řeknete například jen o jméno a e-mail, a pokud uživatel na těch dalších objednávku opustí, můžete se mu elektronickou poštou snadno připomenout.

6) Použijte akordeon

Negativa vícekrokového formuláře vesměs maže takzvaný akordeon. Tento „harmonikový formulář“ je umístěný na jediné stránce, ale rozdělený podle jednotlivých sekcí, které se postupně rozvíjejí. Každá další sekce se uživateli nabídne až ve chvíli, kdy vyplní tu předešlou. Tento způsob je poněkud náročnější na schopnosti vývojáře. Mimo jiné je potřeba si vyjasnit jednotlivé sekce, aby uživatel vždy viděl přesně to, co má. Podobně problematické může být, pokud chce uživatel některý uzavřený údaj zpětně upravit.

7) Přizpůsobte délku polí

Prostorem se u formulářů vyplácí šetřit nejen co do výšky, ale také do šířky. Namísto políčka roztaženého přes celý formulář proto jejich délku odlaďte vzhledem k obsahu. Pokud například poštovní směrovací číslo přizpůsobíte právě pětimístnému zadání, na uživatele to nejen lépe zapůsobí psychologicky z hlediska velikosti. Navíc mu tak naznačíte, že právě toto vám opravdu stačí a nehrozí, že by ho délka pole zmátla a ve vaší databázi skončila nerelevantní data.

8) Snižte počet kliknutí podle počtu položek

Náročnost při vyplňování formulářů se dá snížit také tím, že nebudete nutit uživatele vše vypisovat ručně, ale dáte mu vybrat z více možností. Počet kliknutí by měl přibližně odpovídat počtu položek. Méně než 5 věcí je vhodné seřadit vedle sebe, výběr z 6 a více věcí usnadní select box. Pokud databáze vzroste na víc než 15 položek, je vhodnější použít našeptávač, díky kterému uživatel nemusí při výběru měst nebo třeba jazyků zdlouhavě scrollovat. Pro volbu rozpětí například z kilometrů nebo Kč se jako elegantní řešení nabízejí takzvaná šoupátka.

9) Realtime validace

Nejspíš se vám už také stalo, že jste zdlouhavě vyplňovali formulář, abyste si ihned po jeho odeslání přečetli chybovou hlášku. V extrémním případě dojde k vymazání všech údajů, v tom mírnějším musí formulář „pouze“ prohledat a opravit okénko s nahlášenou chybou. Není pak výjimkou, že taková situace uživatele definitivně odradí od dalšího vyplňování. Řešením je realtime validace, kdy se uživateli při vyplňování průběžně zobrazuje, zda neudělal nějakou chybu. Takový postup sice formulář nijak nezkrátí, ušetření zbytečných kroků navíc je však pro každého chybujícího příjemnou záležitostí.

10) Vysvětlujte a buďte zábavní

Ať zredukujete své formuláře jakkoliv, stále se ideálnímu stavu budete pouze přibližovat. Lidé na webu zkrátka neradi vyplňují. Proto jim vždy vysvětlujte, proč se jich na danou věc ptáte, a co uděláte s odpovědí. A pokud to jen trochu jde, zkuste být ve svých formulářích trochu zábavní. Mluvte tónem své značky, pomáhajte si vtipem a ikonkami. Jak to může vypadat za hranicí běžných formulářů, je vidět třeba na webu pojišťovny Oscar. Hledání doktora se tady stává tak trochu hrou, kterou většina zájemců nejspíš dokončí.

Marek Jelínek 28.08.2018