7 tipů, jak navrhovat lepší webové formuláře

Překladový článek od Marca Schenkera, který poradí, jak navrhovat takové webové formuláře, které nebudou odrazovat vaše návštěvníky.

TIP: Česká kniha o budování responzivních stránek.

Ačkoliv hvězdami první velikosti jakékoli seriózní cílové stránky (landing page) jsou bezesporu webové formuláře, často se považují za úplnou samozřejmost. Právě ony přijímají veškeré osobní informace od návštěvníků, které pak můžete začít sypat do prodejního trychtýře. A v závislosti na tom, jak tyto webové formuláře navrhnete, můžete očekávat velké, nebo naopak malé, množství konverzí.

Článek byl přeložen s laskavým svolením serveru webdesignerdepot.com. Originální znění článku (EN) naleznete zde: Designing forms that convert, 7 proven techniques.

Zpravidla žádný návštěvník libovolného webu nechce ztrácet příliš mnoho času vyplňováním nějakých webových formulářů, takže alfou i omegou je stručnost. V praxi ale budete často brát ohled na skutečnost, že delší formuláře vykazují tendence získávat kvalitnější kontakty. Každopádně, ať už tak nebo onak, design webových formulářů by měl být primárně zaměřen na prožitky uživatelů.

Formuláře by měly být jasně viditelné, ale ne dotěrné; snadno pochopitelné, ale neurážející intelekt uživatelů; minimalistické, ale nikoliv nudné. Když se budete držet těchto doporučení, uvidíte, jak se začne zvyšovat konverzní poměr vašeho webu.

Odstraňte matoucí pole

Když nedáváte dobrý pozor na to, jaká pole umisťujete do svých webových formulářů, můžete přijít o spoustu peněz, což zjistila vcelku významná společnost Expedia. Před časem měla tato online cestovní kancelář na svém webovém formuláři, ve kterém se zadávaly informace o platební kartě, uvedeno políčko „Company“ (společnost), které bylo hned pod políčkem „Name“ (jméno). Ačkoliv formulářové políčko “Company” vůbec nebylo povinné (a nebylo ani tak označeno), přesto zmátlo mnoho potenciálních klientů Expedie natolik, že do tohoto pole napsali název banky, která jim vydala platební kartu. Důsledkem bylo, že ve stejném duchu pokračovali i dál, a do pole „Address“ (adresa) napsali adresu své banky, ačkoliv se očekávalo, že sem napíšou svou vlastní adresu. Proces zpracování platební karty pak pochopitelně skončil neúspěšně, protože zadaná adresa nesouhlasila s adresou držitele karty.

Toto nedorozumění s políčkem „Company“ ve webovém formuláři způsobilo firmě roční ztrátu 12 miliónů dolarů na ušlých ziscích. Expedii se podařilo zjistit, v čem je problém a opravit ho až po důkladné statistické analýze dat. Jaké z toho plyne ponaučení? Vyvarujte se příběhu Expedie a při designu webových formulářů dbejte na to, abyste v nich neměli nějakým způsobem matoucí pole, která by mohla způsobit, že přijdete o dokončené konverze (a tím pádem i o peníze).

Kratší webové formuláře jsou lepší než delší (výjimky ale potvrzují pravidlo)

Weboví designéři mohou zvýšit konverze na daném webu tím, že věnují patřičnou pozornost délce webových formulářů. Obecně se vřele doporučuje, aby byly všechny webové formuláře spíše kratší než delší. Odpovídající průzkumy (jako je třeba tato případová studie) potvrdily, že návštěvníci webů dávají přednost kratším webovým formulářům, které obsahují méně polí.

S různými délkami kontaktních formulářů experimentovala na svém webu webdesignérská a vývojářská společnost Imaginary Landscape. První kontaktní formulář obsahoval celkem jedenáct políček, druhý jen čtyři pole. Schválně se pokuste uhádnout, který měl víc konverzí. Pokud tipujete, že ten druhý, se čtyřmi políčky, máte pravdu. V porovnání s kontaktním formulářem o jedenácti políčkách vyletěl konverzní poměr o fantastických 120 %. Stojí za to také zmínit, že při přechodu z formuláře o jedenácti polích k formuláři se čtyřmi poli zůstala v tomto konkrétním případě kvalita získaných kontaktů konstantní.

V současné době Imaginary Landscape používá na své domovské stránce kontaktní formulář s pouhými třemi poli.

Jiné výzkumy ovšem naznačují, že kratší webové formuláře mohou redukovat kvalitu získaných kontaktů (lidí, kteří vyplnili vaše kratší webové formuláře). V podstatě to znamená, že když začnete formuláře zkracovat (snižovat počet jejich polí), měli byste najít nějaký optimální kompromis mezi kvantitou a kvalitou. Pokud je tedy vaším zaměrem získávat kvalitnější kontakty – čím se myslí kontakty, které vám poskytnou více informací o sobě samých a budou ochotnější ke skutečným konverzím – možná raději zůstanete u delších formulářů.

Popisky vedle políček jsou lepší než nad nimi

Je také velmi moudré navrhovat webové formuláře se zásadou, že popisky polí se umisťují vedle nich. Až příliš velké množství designérů to dělá nesprávně a umisťuje popisky polí nad ně. Důsledkem je, že takový webový formulář vypadá delší, než ve skutečnosti je. Vyvarujte se toho. Většinou není vůbec žádný problém umisťovat popisky do stejného řádku, ve kterém se nachází i odpovídající formulářové pole.

Ideální ukázku tohoto přístupu najdete na přihlašovací stránce Spiro Fit, což je síť pro online fitness. Přestože je webový formulář Spiro Fit poměrně dlouhý (vzhledem k počtu polí, které obsahuje), většinou je v okně webového prohlížeče zobrazen kompletně celý bez nutnosti rolovat webovou stránkou. Toho bylo možné dosáhnout jen tím, že popisky byly umístěny hned vedle odpovídajících formulářových polí.

Neobvyklé formuláře jsou přitažlivější

Jedinečnost je někdy absolutně nenahraditelná. Když jste jedineční, přitahujete k sobě pozornost a snadno si vás ostatní zapamatují. Dá se to aplikovat i na webové formuláře. Jestliže budou vzhled webových formulářů vašich konkurentů vypadat a působit stejně, může být pro návštěvníky a uživatele vašeho webu váš neotřelý přístup velmi osvěžující změnou.

Vhodnou ukázkou je přihlášení k účtu na SVN2FTP. Pozornost uživatele ihned upoutá atraktivní a neotřelý vzhled stupních políček tohoto formuláře (pro e-mailovou adresu a heslo). Uživatel nezadává informace do obyčejných a staromódních nudných boxů, ale do polí, která připomínají část stránky linkovaného sešitu. Tento neočekávaný žertovný faktor může zvýšit počet uživatelů, kteří si objednají nabízenou službu.

Bezpečnost webu musí být vaše priorita

Zdá se, že jeden z nejvíce evidentních aspektů osvědčených postupů při navrhování webových formulářů ponechávají někteří designéři bez povšimnutí. Pokud bude informace, která se odeslala přes webové formuláře, někdy nějakým způsobem zneužita, je to pro váš web hotová katastrofa, protože ukradené osobní údaje znamenají kolosální ránu vašemu byznysu. Možná se z ní vůbec nepůjde zotavit. V dnešní době si nemůžete dovolit příliš chybovat a být málo obezřetní, pokud se jedná o problematiku osobních dat návštěvníků vašeho webu.

Dobrý nápad je aplikovat na celou doménu nějaký SSL certifikát. S ním budou uživatelé (díky https) chráněni nejenom v okamžik, když se přihlašují, ale vlastně po celou dobu, co se budou nacházet na vašem webu. Jak ale uživatel pozná, že je SSL certifikát funkční? Velice jednoduše – řádek v prohlížeči s URL adresou bude zbarvený zeleně, jako třeba zde.

TIP: Největší prodejce důvěryhodných SSL certifikátů (v ČR).

Přestože takové preventivní opatření není nezbytně nutné, rozhodně neuškodí, když na svém webu podniknete nějaké kroky navíc k ochraně osobních dat návštěvníků, kontaktů a kupujících. Uživatelé na webu se SSL certifikátem se budou cítit o něco bezpečněji a budou vám o něco víc důvěřovat, pokud jde o jejich osobní data.

Formulář musí být snadno pochopitelný

Není nic horšího než webový formulář, v němž nejsou věci jasně popsané. Nepochopitelné webové formuláře a nejasně popsaná formulářová pole nevyhnutelně způsobí, že uživatelé budou takovým formulářem flustrováni. Kromě toho se při transakci může něco zadrhnout, což může také zhatit dokončení procesu konverze. To je tak důležité, že se to snad ani nedá dostatečně zdůraznit.

Formát, ve kterém mají uživatelé zadávat své informace, musí být naprosto jasný. Nikde nesmějí vznikat sebemenší pochyby o tom, co se má napsat do daného prázdného pole. Tomu nesmíte dát žádnou šanci. I taková maličkost, jako je doplnění nějakého vysvětlujícího popisku vedle formulářového políčka, může rozhodnout o tom, zdali návštěvník webu zadá, nebo nezadá, své osobní informace správně.

Podívejte se na ukázku z The Bullitt Agency, která sama sebe popisuje jako agenturu pro mezinárodní diskžokeje a producenty. Když se podíváte na kontaktní formulář této agentury, můžete s jistotou říci, že její designér vyznává axiom „méně je více“. Kontaktní formulář je velmi krátký (má pouze čtyři pole) a není vůbec pochyb o tom, co a jak vyplnit. Povšimněte si, že políčko, jehož vyplnění je ponecháno na libovůli návštěvníka, je jasně označeno slovem „optional“ (nepovinné). Možnost vzniku případných omylů může markantně snížit i taková drobnost, že se na začátek popisku pole pro e-mailovou adresu uvedlo slovo „your“ (vaše).

Neberte design webových formulářů na lehkou váhu

Přestože se spousta lidí vyděsí, když mají vyplnit nějaký webový formulář, nemyslete si, že to tak musí být vždycky. Právě tohle je totiž přesně ten důvod, proč byste měli nad návrhy formulářů strávit nějaký čas navíc, aby byly pro návštěvníky vašeho webu tak bezbolestné, jak to jenom jde. Samozřejmě to není žádná velká věda – stačí vzít na pomoc zdravý rozum a zajistit, abyste uživatele neodrazovali nevzhlednými nebo komplikovanými webovými formuláři.

Webové formuláře, v nichž se nedodržují výše uvedené osvědčené postupy, budou mít negativní dopad na základní věci, jako jsou uživatelské prožitky a konverze. Jestliže se vyskytne něco, co bude uživatele mást či odrazovat, zákonitě to povede k menšímu počtu získaných kontaktů nebo kupujících. Je nezbytné nutné věnovat formulářům trochu více času a péče, pokud si chcete být jisti, že vytváříte opravdu funkční a efektivní formuláře.

About translation

• Original article: Designing forms that convert, 7 proven techniques (Webdesignerdepot).
• Translation: RNDr. Jan Pokorný
• Language and expert collaboration: Miroslav Kučera.

Language of translation: Czech (for readers from Czech and Slovak republics). Translated with the permission of Webdesignerdepot. Other translations.