Mobilní web pro byznys: formuláře – místo, kde drobnosti rozhodují o konverzích

V předchozích článcích jsme se dívali na problémová místa mobilního webu. Nejprve jsme se zaměřili na jeho vliv na byznys, poté jsme se prakticky podívali na navigaci a její nejčastější problémy a v posledním článku jsme si ukázali, jak dokážeme znepříjemnit procházení mobilního webu návštěvníkům. Teď si rozebereme formuláře, v nichž vás chyby mohou stát nemalé peníze.

Jan Kvasnička

Jan Kvasnička

Jan Kvasnička, specialista na optimalizaci konverzního poměru (CRO) a uživatelskou zkušenost (UX), který se věnuje převážně e-shopům a optimalizaci jejich stránek, a spoluautor online kurzu Strategický webdesign, v novém seriálu nazvaném Mobilní web pro byznys pro Retailek popisuje, jak mobilní firemní web ovlivňuje podnikání. Nové díly seriálu budou vycházet vždy v úterý.

Umožněte jednoznačnou kontrolu údajů

Stále častěji se grafici snaží šetřit místo i u formulářů. Neuvědomují si ale, že jejich snaha může vést ke snížení konverzního poměru. Je důležité, aby návštěvník věděl, co má v jednotlivých polích vyplnit a mohl si to po sobě také zkontrolovat. Bohužel často se stává, že grafici názvy jednotlivých polí vkládají vně těchto polí, jako je tomu v ukázce níže. Než jej návštěvník začne vyplňovat vidí, co má kde vyplnit. Pokud jej ale vyplní, vidí jen vlastní vyplněné texty. Pokud by si tedy chtěl po sobě překontrolovat, zda jej vyplnil správně (což je mimochodem velice časté chování návštěvníků na mobilním zařízení), nemá si to jak ověřit. A tady vzniká problém. Sám jsem si jej ověřil u svých klientů, kteří tento ty formuláře používali. Nasadil jsem u nich nástroj Smartlook.com a vyhodnocoval jsem, jak se u tohoto formuláře návštěvníci na mobilu chovají. Jejich velice časté chování bylo, že si své zadané údaje smazali, jen aby viděli, co tam měli vložit a poté znovu napsali úplně ten samý údaj. A málokdo má tuto trpělivost. Na mobilním webu nechcete návštěvníkovi takto komplikovat cestu ke konverzi. Obzvlášť ne když už se dostal až k vyplnění formuláře. Když mu budete házet klacky pod nohy v tomto kroku, je pak více pravděpodobné, že formulář nevyplní a odejde vám pryč. Správné řešení této situace najdete v ukázce níže z e-shopu bonami.cz, kde se při vyplňování daného pole jeho název přesune nad toto pole. Díky tomu návštěvník stále vidí, co má kde zadat a zda to zadává správně. Toto je řešení, kde i grafici budou spokojeni – oni ušetří místo a vám neodejde zákazník před dokončením konverze.

Příklad formuláře

Příklad formuláře

Příklad formuláře

Příklad formuláře

Příklad formuláře

Příklad formuláře

Příklad formuláře

Příklad formuláře

Validace vyplněných údajů a chybová hlášení

Lidé jsou si rádi jisti. A obzvláště ve formulářích by měl návštěvník ihned poznat, které údaje vyplnil správně. Měli bychom mu pomoci odhalit, zda někde neudělal chybu. Když jej na chybu upozorníte před tím, než formulář odešle, jde pro něj o přirozenější a intuitivnější proces. Tuto pomoc jim nabídnete díky live validaci formulářů. Pěkně s ní pracuje e-shop eobuv.cz, kde při chybném vyplnění mají i přehledně rozepsány chybové stravy. Návštěvník ihned po vyplnění ví, zda má nějaké pole upravit. Mohlo by se to zdát jako drobnost, ale tato funkcionalita má přímý vliv na konverzní poměr. A pokud jste e-shop, nebo máte důležité formuláře na svém online projektu, pak validaci určitě zapracujte a otestujte.

Pokud návštěvník zadá cokoliv špatně, tak byste mu měli zobrazit správnou textovou nápovědu/chybovou hlášku. Měli byste mu přesně říct, co zadal špatně a jak by měl vypadat správný tvar. Kolikrát totiž nad tím, co udělali špatně, návštěvníci zbytečně uvažují – nejsou si jisti tím, co mají upravit a jakým způsobem – proto je třeba je správně navést. Uvědomte si, že žádný z formulářů na webu nevypadá stejně jako jiný. Formuláře se zpracovávají pokaždé jinak, a proto vznikají tyto problémy. Například telefonní číslo některé weby chtějí s předvolbou, jiné bez předvolby. Ulici někdy chtějí v jednom poli i s číslem domu a někdy jsou tyto údaje zvlášť. Ty rozdíly jsou velké a návštěvník tedy mnohdy netuší, jak to má zadat údaje ve vašem formuláři. Proto musíme návštěvníka správně navést.

Také bych vám doporučil, abyste si nechali své chybové hlášky zkontrolovat copy specialistou. Mnohdy se vám totiž může stát, že vám ve formuláři zůstanou obecné hlášky, které kdysi psali programátoři systému, na kterém máte postaven web. Tyto hlášky se snažte udělat opravdu co nejvíce návodné a v jazyce, kterému váš návštěvník rozumí a ze kterého pozná, jak má svou chybu napravit.

Příklad formuláře

Příklad formuláře

Příklad formuláře

Příklad formuláře

Příklad formuláře

Příklad formuláře

Přílišná kreativita vizualizace formuláře

Dalším problémovým místem se může stát přílišná kreativita vizualizace formuláře. Tím myslím, že mnohdy ani nepoznáte, že před sebou vidíte formulář, kam můžete něco vyplnit. Například pokud je pole pro zadání uvozeno pouze čarou, na kterou máte podle jejího autora psát. Sám jsem udělal několik porovnávacích testů, kde se hned několikrát ukázal tentýž problém. Testující vůbec nepoznali, že se jedná o formulář, ani že by tato část webu měla vyžadovat jejich aktivitu. Doporučuji, abyste si dali pozor, jak hodně jste pro návštěvníka jednoznační a kde jej zbytečně nutíte přemýšlet. U formulářů není potřeba, aby byly kreativní. U nich je hlavní, aby byly funkční. Jsou i ty vaše?

Příklad formuláře

Příklad formuláře

Jednoznačně by mělo jít poznat, které prvky je nutné vyplnit

Hodně problémů a naštvání zákazníků během vyplňování formulářů vzniká díky tomu, že návštěvník neví, co jsou povinná pole. Bohužel často za neoznačování povinných polí stojí názory vývojářů webů. Často si myslí, že pokud jsou všechna pole povinná, není nutné to nijak prezentovat. Opak je přitom pravdou. Návštěvník opravdu nemůže tušit, co je a co není povinné pole. Povinná pole se nejčastěji označují hvězdičkou, nejčastěji červenou, která se nachází za názvem pole. Bohužel i zde se kolikrát vývojáři nebo grafici snaží o kreativitu, přitom formulář je místem, kde by měl návštěvník provádět rychlé úkony. Není to prostor, kde má nad zadávanými údaji dlouze uvažovat. Níže najdete pár příkladů kreativity označení povinných polí. První příklad má povinná pole označena jiným pozadím, což, jak mi ukázaly uživatelské testy, někteří vůbec nepochopili a mysleli si, že jen tato pole jsou aktivní a ostatní pole jsou neaktivní. To je obrovská chyba. Díky této nejednoznačnosti můžete přijít o důležité údaje od svých zákazníků nebo přímo o konverze. Druhý příklad ukazuje špatné umístění označení povinného pole pod ním a je prezentováno jako vykřičník. Na návštěvníky to pak spíše působí, jako by zde bylo něco špatně. Třetí ukázkou je již opravený e-shop z ukázky číslo dva. Takto je povinné pole správně označeno. Ani v tomto nekomplikujte návštěvníkovi vyplnění formuláře.

Příklad formuláře

Příklad formuláře

Příklad formuláře

Příklad formuláře

Příklad formuláře

Příklad formuláře

Pokud prezentujete povinná pole pomocí hvězdičky a ještě chcete návštěvníky upozornit, co hvězdička znamená, použijte jako vysvětlivku stejnou hvězdičku, jaká je u pole. Neexperimentujte a nepoužívejte nějaké výraznější ikony. Návštěvníci ji pak mohou ve formuláři zbytečně hledat a opět jim to může komplikovat vyplnění formuláře, jak je vidět v ukázce níže.

Příklad formuláře

Příklad formuláře

Nepodceňujte sílu drobných úprav u formulářů

Čím jednoznačnější a pro návštěvníka jednodušší bude vyplnění formuláře, tím vyšší pravděpodobnost konverze budete mít. Kolikrát i úplně drobné úpravy formuláře mohou pomoci výrazně zvýšit počet konverzí. Na závěr vám ještě doporučím udělat si uživatelské testování svých formulářů. Sami uvidíte reálné zákazníky v praxi při tom, jak se jim formuláře vyplňují a kde se zasekávají. Pokud z nějakého důvodu dáváte přednost nástrojům, existují pro tento účel perfektní, které nahrávají aktivity návštěvníků na vašem webu. Patří k nim například smartlook.com nebo hotjar.com, díky nim si můžete fungování svých formulářů krásně ověřit.

Nejnovější