E-book
Zkontrolujte si, jestli váš formulář splňuje všechny zásady, abyste z něj spolu s nasazením Foxentry vytěžili maximum.
Logická struktura
Pokud navrhujete nový formulář, jako první byste si měli rozmyslet strukturu a logickou průchodnost formulářem. Své závěry pak zkuste ověřit user-testingem nebo card sortingem. Otestujte počet kroků, pokud máte vícekrokový check-out, jejich smysluplnou návaznost podle zásad, na které jsou uživatelé zvyklí, a sdružujte pole, která se zabývají stejnou oblastí (např. doprava/platba/kontaktní údaje spotřebitel/koupě na firmu/poznámky k objednávce). Ptejte se na otázky typu:
- Jak byste formulářová pole (nebo konkrétní údaje) rozdělili do skupin podle společného jmenovatele?
- Je vám jasné, co se od vás v tomto kroku chce? Proč se vracíte na předchozí krok?
TIP: Pokud už máte svůj formulář nějakou dobu nasazený, ideální je řídit se daty z webové analytiky. Kde vám lidé nejčastěji odpadávají, nad čím nejvíce dumají, kde dělají nejčastěji chyby? Tyto poznatky pak využijte k úpravě formuláře. Pokud nemáte na svém formuláři nasazenou analytiku, postupujte podle návodu od Jakuba Drahokoupila, odborníka na Google Analytics, na našem blogu.
Když se formulář odvíjí logicky, podobá se tím víc běžné interpersonální komunikaci, kterou lidé vnímají přirozeně. Pomůže také trefné pojmenování jednotlivých sekcí formuláře nebo jednotlivých kroků.
TIP: Pracujte i s vizuální logikou a vyhněte se formulářovým polím ve více sloupcích. Tříštíte tím pozornost a porušujete plynulý pohyb vpřed formulářem. Jeden starý výzkum navíc ukázal, že nejpřehlednější je vkládat pojmenování (štítek) a dotyčné pole pod sebe, nikoliv nalevo popis a vpravo pole. Toto řešení je ale vhodnější pro krátké formuláře, protože zabírá hodně vertikálního prostoru a pocitově by to mohlo formulář v očích uživatelů prodloužit. Systém „vlevo popis, vpravo pole“ se zase nehodí pro vertikální scrollování na mobilních zařízeních, ale způsobuje, že lidé čtou „zadání“ pečlivěji.
Viditelné kroky objednávky
Podoba kroků objednávkového procesu a hlavně jejich počet nedává UXákům spát už hodně dlouho. Výsledky z testování, přejímání best-practices i vlastní freestyle s vyhodnocováním dat ale dochází k podobným závěrům:
- Jako první řešte dopravu a způsob platby objednávky, protože nejčastějším důvodem k nedokončení objednávky jsou náklady, které nebyly jasné hned od začátku.
- Jednotlivé kroky trefně pojmenujte a umožněte jejich průchod sledovat na liště – uživatel hned ví, co už vyplnil, co ho čeká, a hlavně ve kterém kroku se aktuálně nachází.
TIP: Hodně se diskutuje o jednokrokových objednávkových formulářích. Přečtěte si, jak na tzv. zrychlený nákup, a jestli se vůbec hodí pro váš obor.
Požadujte jen to, co je nezbytné k dokončení a bezproblémovému vyřízení objednávky
A kolik polí do jednotlivých kroků přidat, abychom se dozvěděli to, co potřebujeme, a zároveň uživatele neodradili? Odpověď je nasnadě – čím méně polí k vyplnění, tím hladší check-out. Výborně prý fungují lichá čísla, a proto byste měli v jednom objednávkovém kroku mít maximálně 5-7 polí. Při testování ideálního počtu polí se ptejte na otázky typu:
- Proč nechcete vyplnit toto pole? (Např. u leadových formulářu se lidé nejvíce zdráhají vyplnit povinně telefonní číslo.)
- Proč nechcete vyplnit toto volitelné pole? (Hodí se, když se snažíte do formuláře propašovat nějaké otázky sloužící k personalizaci uživatelského zážitku nebo marketingových sdělení.)
- Co by vás přesvědčilo vyplnit i toto volitelné pole?
TIP: Čím spolehlivě uživatele naštvete je povinná registrace před odesláním objednávky (trochu méně je naštvete, když s první objednávkou konto založíte automaticky). Zvažte, zda je předchozí registrace opravdu nutná, nebo nabídněte opravdové výhody za registraci – ideálně věrnostní program. Na „pravidelné produktové novinky do mailu“ opravdu nikoho neutáhnete. Extra otravné je to pak při dalším nákupu, kdy si přihlašovací údaje samozřejmě nepamatujete, a už tu máme dalších 5 kroků k objednávce navíc (zapomenuté heslo, zpět na svůj e-mail, zpět na stránku e-shopu, vymýšlení nového hesla, opětovné přihlášení do e-shopu).
Zkuste také ve jménu pohodlí zákazníka využít data, která už máte, a nenuťte je zákazníka vyplňovat. Jako příklad uvádí David Mareček, konzultant z agentury RobertNemec.com, výběr typu platební karty, což lze zjistit automaticky přímo z jejího čísla. Stejně tak můžete využít údaj o geolokaci pro automatickou volbu země.
Volte správné druhy polí
Stejně jako když připravujete dotazník a řešíte, kde dáte otevřenou a kde uzavřenou odpověď s možnostmi, i u formuláře je součástí úspěšné objednávky volba správného druhu pole.
- Radio butony a check-boxy se hodí, když vybíráte jednu nebo více možností – třeba pro typ dopravy a platby.
- Drop-down menu se hodí pro výběr z oblíbených možností – z vámi nejčastěji zadávaných adres nebo nejoblíbenějších metod dopravy a platby.
- Volná pole nechte pro poznámky k objednávce, u údajů typu jméno doporučujeme volné pole v kombinaci s našeptávačem Foxentry, u adresy našeptávání v kombinaci s validací Foxentry. U platebních údajů doporučujeme nasazení masek, které číslo automaticky upravují do požadovaného formátu (oddělí číslo karty do 4místných polí, upraví směrovací číslo z 10000 na 101 00 apod.).
TIP: Co když uživatel vyplňuje a vyplňuje a najednou ztratí signál, nebo omylem zavře okno? Nástroje jako GarlicJS zajistí, že i po novém načtení budou jeho údaje tam, kde byly.
Designujte jednoznačná tlačítka
Není nic horšího, než když se uživatel bojí kliknout na tlačítko, protože si není jistý, co tím způsobí. Ze svých copywriterských zkušeností jsou často matoucí za každou cenu originální, vtipné nebo extrémně hard-sellové textace CTA tlačítek. Místo „Chci vysavač“, kde se uživatel bojí přímého přesměrování na platební bránu, je možná lepší konzervativnější, ale jednoznačné „vložit do košíku“ nebo „dokončit objednávku“.
- Pamatujte na zvyklosti uživatelů, zelené tlačítko znamená cestu vpřed, červené, případně šedé znamená smazat, zrušit nebo zpět.
- Pokud na tlačítko uživatel klikl a požadovaná akce se provedla, tlačítko by mělo indikovat, že požadavek se procesuje (např. se změní z modrého na zelené s fajfkou u odeslání platby, aby ji uživatel neodesílal několikrát). Když to doplníte jednoznačnou potvrzující hláškou a ideálně novým screenem s dalšími instrukcemi, chybu neuděláte.
- Než na originální copy, vsaďte raději na popis akce, která se za tlačítkem skrývá.
Nenuťte uživatele přemýšlet
Měli byste se snažit, aby při vyplňování objednávkového formuláře nemusel uživatel nikam odcházet, nebo překlikávat, když si není při průchodu nějakým polem jistý. Pokud může být nějaká položka nejednoznačná, doplňte k ní nápovědu formou najížděcího otazníčku (tooltipu). Zákazník přímo na místě získá dovysvětlení – konverze je zase o něco lehčí a e-shop důvěryhodnější.
TIP: Samozřejmosti by měly být ve všech krocích výrazně viditelné kontaktní údaje, aby se uživatel mohl při problémech nebo váhání nad správnou volbou rychle poradit s vaším zaměstnancem – ideálně telefonicky nebo v online chatu. Ale znám i shopy, kde nechtějí, abyste jim volali, jako např. e-shop Vodafone. Tam pořád chtějí volat oni vám?
Myslete na mobilní i desktopové zákazníky
Pokud máte mobilní verzi webu, nebo k vám na responzivní web chodí velké procentu mobilních uživatelů, je vhodné tomu přizpůsobit i formulář. U mobilních přístupů je našeptávač s validací téměř nutností.
- Mezi nejčastější chyby u mobilních formulářů patří vzorový placeholder text nebo název políčka přímo v poli, kam uživatel píše, takže jakmile začne psát, už nevidí, co vlastně vyplňuje.
- Někdy si také uživatel splete placeholder text s již vyplněním polem a přehlédne ho.
- Hodně příjemné na mobilu je i automatické rozbalení odpovídající klávesnice podle typu vstupu – alfanumerickou pro běžné pole, numerickou pro číslo platební karty.
- U formulářů, kde máte většinu přístupů z desktopu, je zase ideální, pokud formulář mohu vyplnit, aniž bych sundavala ruce z klávesnice – tedy jen s pomocí písmen, číslic, Tabu, šipek a Enteru.
TIP: Vyzkoušejte tzv. floating štítek pro pojmenování polí – placeholder text se zobrazuje, dokud se do konkrétního pole uživatel neproklikne, poté se objeví nad polem, a je tím pádem stále viditelný pro finální kontrolu správnosti údajů.
Jak říká jeden známý reklamní slogan – na vše ostatní je tu Foxentry!
