Děláte vše, co můžete vytvořit web které přivedou návštěvníky ke konverzi. Když si prostudujete analýzu, budete nadšeni, když uvidíte, že cesta uživatele, kterou jste vytvořili, je svými návštěvníky znovu a znovu podporována. Existuje však něco, co jim brání v konverzi.

Le kontaktní formulář je nezbytnou součástí cesty vašich návštěvníků. I když ve skutečnosti máte téměř vše, co web může nabídnout, a kontaktní formulář může zničit zážitek, pokud se nepoužívá správně. „Rozbitá“ tlačítka, matoucí pole, příliš mnoho kroků, neuspořádané rozhraní… dokonce i umístění kontaktní formulář může narušit uživatelský zážitek.

Existuje mnoho věcí, které se mohou pokazit.

Pravidla 5 pro vytvoření dokonalého kontaktního formuláře

Studie sledování očí společnosti Google zveřejněná v roce 2014 ukázala, že dodržení nejzákladnějších pokynů pro použití při navrhování formuláře výrazně zlepší uživatelský zážitek. Konkrétně, když kontaktní formulář splňuje všechna pravidla, 78 % uživatelů je může vyplnit a odeslat na jeden pokus. Pokud však kontaktní formulář porušuje tato pravidla, pouze 42 % je schopno tak učinit na jeden pokus.

Zajímá vás, jaká jsou tato pravidla? Čtěte dál.

Pravidlo č. 1: Zaměřte se na zarovnání

Jak uvidíte v jiných pravidlech zde, lidé se často obávají délky formuláře kontaktu, což často vede ke špatnému výběru designu. Vezměte si například otázku zarovnání.

Na webových stránkách BrainTraffic můžete vidět takový formulář a pomyslet si: Hmmm ... ale není to příliš dlouhé na dokončení?

vyplňte formulář.png

Jedním ze způsobů, jak přemýšlet o řešení tohoto „problému“, je přesunout štítky doleva a umístit pole odpovědí doprava. Odborníci na UX vám však řeknou, že se jedná o zásadní ne-ne, protože ohrožuje schopnost skenovat formulář. Totéž platí, pokud jste uvažovali o umístění polí vedle sebe vodorovně.

Pokud chcete svůj formuláře kontakty splňují standard zarovnání, musíte udělat toto:

  • Zarovnejte doleva všechny štítky, pole formuláře a primární tlačítko výzvy k akci.
  • Nikdy nevyrovnávejte související pole vodorovně. Formulář můžete strukturovat logicky, ale každá otázka nebo pole by mělo být skládáno svisle.
  • Každé pole s otázkami s možností výběru z více možností (s méně než šesti možnostmi) musí být zobrazeno ve svislém seznamu bodů nebo zaškrtávacích políček, nikoli v rozevírací nabídce.

Pravidlo 2: Zahrňte všechna příslušná pole

Pokud jde o návrh kontaktních formulářů, můžete si myslet, že čím kratší, tím lepší, že? Ne vždy to tak je. Nejdůležitější je, že uživatelům poskytnete všechna potřebná a relevantní pole.

Michael Aagaard, hlavní optimalizátor konverzí pro Unbounce, to udělal prezentace v roce 2015, která se touto otázkou zabývala. On a jeho tým chtěli vědět, co by se stalo, kdyby zkrátili tento kontaktní formulář:

příklad kontaktní formuláře court.png

Jak vidíte, odstranili to, co považovali za zbytečná pole, aby zefektivnili proces vyplňování formuláře. Po ukončení testu však zjistili 14% pokles konverzí u kratší formy.

Pravidlo # 3: Zjednodušení polí

Nezáleží na tom, zda vaši uživatelé komunikují s vaším kontaktním formulářem pomocí počítače nebo mobilního zařízení, nebo pokud potřebují pomocnou technologii, aby jim pomohli, formulář by měl být vybaven. zjednodušit proces zadávání.

Zde je několik technik, které byste měli znát:

tabulation
U uživatelů stolních počítačů a uživatelů s problémy s přístupností zkontrolujte, zda má váš kontaktní formulář povoleno logické řazení karet.

Vstupní masky
Spíše než nutit uživatele hádat, jak chcete určitá pole formátovat, můžete je přidat pomocí vstupních masek, které je automaticky naformátují.

formátování polí html.png

Automatické dokončování Google
Spíše než kódovat každé pole tak, aby bylo tvořil automaticky podle standardů, které je třeba respektovat, aktivujte automatické vyplňování pomocí pluginu Automatické vyplňování adres Google. Nejen, že vám to ušetří vypořádání se s pravopisnými chybami a nesprávně vyplněnými adresami, ale také to vašim návštěvníkům ušetří zadávání většiny těchto informací.

Pravidlo # 4: Ukončete vše

I když si uvědomuji, že toto pravidlo bude v rozporu se základy minimalismu, je to pravidlo, kterému byste měli věnovat zvýšenou pozornost, abyste se vyhnuli zbytečnému frustrování návštěvníků.

Vysvětlím: Máte kontaktní formulář, který vypadá docela jednoduše. Vaši uživatelé to vyplní na základě toho, co navrhují štítky, a kliknou na tlačítko Odeslat. Pak dostanou tuto strašlivou červenou zprávu: „Neudělali jste to správně! Vraťte se zpět, opravte formulář a odešlete jej zpět! " 

Pravděpodobně jste se s ním setkali jako uživatel a víte, jak frustrující to může být, zvláště pokud dojde k odstranění některých informací, které jste zadali, když dojde k chybě. Nenechávejte tedy uživatele, aby hádali, co je třeba opravit a jak, nenechte to do tohoto bodu. Vyhláskujte všechno na cestě:

  • Zaměřte se v terénu (zejména na mobil) tak, aby uživatelé přesně věděli, kde vyplňují formulář.
  • Pokud nepoužíváte vstupní masky k automatickému formátování polí, zapište si všechny požadavky na formátování.
  • Výslovně označte, kdy je pole „Nepovinné“ (použijte slovo, nikoli červenou hvězdičku).
  • Poskytněte uživatelům možnost zobrazit nebo skrýt pole hesla při zadávání.
  • Jakmile se uživatel zapojí do pole, zobrazí se chybová zpráva. Nečekejte, až to uděláte.

form wordpress.png chyba

Pravidlo # 5: Neskrývat radu

Text desky v kontaktním formuláři vypadá takto:

pole s tips.png

Podívejte se, jak Target umisťuje štítky do pole? V některých kontaktních formulářích tyto štítky / indikace jednoduše zmizí, když uživatel klikne na pole. Cíl to řeší trochu jinak a přesune štítek do horní části pole (viz „e-mailová adresa“).

Bez ohledu na to, jak se s tím pracuje, odborníci na použitelnost, jako je skupina Nielsen Norman, vám řekne, že toto je špatná designová praxe, protože:

  • To je problematické pro multitasking, rozptýlené nebo příliš rychlé uživatele v dalším poli. Když stopa zmizí, uživatelé musí opustit pole, aby znovu objevili, co potřebují.
  • Tipy, které zmizí, také brání uživatelům v návratu do formuláře, aby zkontrolovali svou práci nebo opravili chybu, aniž by zcela odstranili odpověď a zjistili, co je níže.
  • Světlejší šedý text použitý pro tipy zástupných symbolů není ideální pro snadné čtení.
  • Pole s textem nápovědy lze zaměnit s poli, která již vyplnila data, takže je uživatelé mohou ignorovat, odeslat formulář a obdržet chybovou zprávu.
  • Některé nástroje pro čtení z obrazovky nejsou schopny číst text nápovědy.

Podle NNG považují uživatelé prázdná pole za atraktivnější než ta, která obsahují klíčový text. I když se zdá, že vaše formuláře umisťují tyto štítky nebo deskriptory nad pole déle, vylepší to použitelnost.

To je pro tyto tipy vše, doufám, že vám pomohou vytvořit lepší kontaktní formuláře.