Robíte všetko, čo môžete vytvoriť webovú stránku ktoré privedú návštevníkov ku konverzii. Keď študujete analýzy, ste nadšení, keď vidíte, že cesta používateľa, ktorú ste vytvorili, je podporovaná jeho návštevníkmi, znova a znova. Existuje však niečo, čo im bráni v obrátení.

Le Kontaktný formulár je nevyhnutnou súčasťou cesty vašich návštevníkov. Aj keď v skutočnosti máte takmer všetko, čo môže webová stránka ponúknuť, a Kontaktný formulár môže zničiť zážitok, ak sa nepoužíva správne. „Pokazené“ tlačidlá, mätúce polia, príliš veľa krokov, neusporiadané rozhranie... dokonca aj umiestnenie Kontaktný formulár môže narušiť používateľskú skúsenosť.

Existuje veľa vecí, ktoré sa môžu pokaziť.

Pravidlá 5 pre vytvorenie dokonalého kontaktného formulára

Štúdia sledovania očí Google zverejnená v roku 2014 ukázala, že pri navrhovaní sa dodržiavajú najzákladnejšie pokyny na používanie formuláre výrazne zlepší používateľskú skúsenosť. Konkrétne, keď kontaktný formulár spĺňa všetky pravidlá, 78 % používateľov ich môže vyplniť a odoslať na jeden pokus. Keď kontaktný formulár poruší tieto pravidlá, iba 42 % to dokáže urobiť na jeden pokus.

Zaujíma vás, aké sú tieto pravidlá? Čítajte teda ďalej.

Pravidlo 1: Zamerajte sa na zarovnanie

Ako uvidíte v iných pravidlách tu, ľudia sa často obávajú dĺžky formuláre kontaktu, čo často vedie k zlým výberom dizajnu. Vezmite si napríklad otázku zarovnania.

Na webe BrainTraffic môžete vidieť taký formulár a pomyslíte si: Hmmm ... ale nie je to príliš dlhé na dokončenie?

vyplňte formulár.png

Jedným zo spôsobov, ako uvažovať o riešení tohto „problému“, je presunúť štítky doľava a umiestniť polia odpovedí doprava. Odborníci na UX vám však povedia, že ide o zásadné odmietnutie, pretože ohrozuje schopnosť skenovať formulár. To isté platí, ak ste uvažovali o umiestnení polí vedľa seba vodorovne.

Ak chcete svoje formuláre kontakty spĺňajú štandard zarovnania, musíte urobiť nasledovné:

  • Zarovnajte všetky štítky, polia formulára a primárne tlačidlo výzvy na akciu doľava.
  • Nikdy nezarovnávajte súvisiace polia vodorovne. Formulár môžete štruktúrovať logicky, ale každá otázka alebo pole by malo byť usporiadané zvisle.
  • Každé pole s otázkami s možnosťou výberu z viacerých odpovedí (s menej ako šiestimi možnosťami) musí byť zobrazené vo vertikálnom zozname bodov alebo začiarkavacích políčkach, nie v rozbaľovacej ponuke.

Pravidlo 2: Zahrňte všetky príslušné polia

Pri návrhu kontaktných formulárov by ste si mohli myslieť, že čím kratšie, tým lepšie, že? Nie vždy to tak je. Najdôležitejšie je, aby ste používateľom poskytli všetky potrebné a relevantné polia.

Michael Aagaard, senior optimalizátor konverzií pre Unbounce, to urobil prezentácia v roku 2015, ktorá sa touto otázkou zaoberala. On a jeho tím chceli vedieť, čo by sa stalo, keby skrátili tento kontaktný formulár:

príklad kontaktného formulára court.png

Ako vidíte, z dôvodu zjednodušenia procesu vypĺňania formulára odstránili polia, ktoré považovali za nepotrebné. Po ukončení testu však zistili pokles konverzií o 14% pri kratšej forme.

Pravidlo # 3: Zjednodušenie polí

Nezáleží na tom, či vaši používatelia interagujú s vašim kontaktným formulárom pomocou stolného alebo mobilného zariadenia, alebo či potrebujú pomocnú technológiu, ktorá by im pomohla, formulár by mal byť vybavený. na zjednodušenie procesu zadávania.

Tu je niekoľko techník, ktoré by ste mali vedieť:

tabulation
Pre používateľov počítačov a používateľov s problémami s prístupom skontrolujte, či má váš kontaktný formulár povolené logické usporiadanie kariet.

Vstupné masky
Namiesto toho, aby ste používateľov nútili uhádnuť, ako chcete niektoré polia formátovať, môžete ich pridať pomocou vstupných masiek, ktoré ich automaticky naformátujú.

formátovanie polí html.png

Automatické dopĺňanie Google
Namiesto kódovania každého poľa tak, aby bolo tvoril automaticky podľa noriem, ktoré treba rešpektovať, aktivujte automatické dopĺňanie pomocou doplnku Automatické vyplňovanie adries Google. Ušetrí vás to nielen to, že sa budete musieť vyrovnať s pravopisnými chybami a nesprávne vyplnenými adresami, ale vašim návštevníkom to zabráni zadávať väčšinu týchto informácií.

Pravidlo č. 4: Ukončiť všetky

Aj keď si uvedomujem, že toto pravidlo bude v rozpore so základmi minimalizmu, je to pravidlo, ktorému by ste mali venovať zvýšenú pozornosť, aby nedošlo k zbytočnému frustrácii vašich návštevníkov.

Vysvetlím: Máte kontaktný formulár, ktorý vyzerá celkom jednoducho. Používatelia ho vyplňujú na základe toho, čo navrhujú štítky, a kliknú na tlačidlo odoslať. Potom dostanú túto strašnú červenú správu: „Neurobili ste to dobre! Vráťte sa späť, opravte formulár a odošlite ho späť! „ 

Pravdepodobne ste sa s ním ako používateľ už stretli a viete, aké frustrujúce to môže byť, najmä ak sa pri vyhodení chyby niektoré zadané informácie vymažú. Namiesto toho, aby ste nechali používateľov hádať, čo a ako treba opraviť, nedovoľte, aby sa to dostalo až k tomuto bodu. Vyhláskujte všetko, čo je na ceste:

  • Zamerajte sa v teréne (najmä na mobilné zariadenia), aby používatelia presne vedeli, kde vyplňujú formulár.
  • Ak nepoužívate vstupné masky na automatické formátovanie polí, zapíšte si všetky požiadavky na formátovanie.
  • Výslovne uveďte, kedy je pole „Nepovinné“ (použite slovo, nie červenú hviezdičku).
  • Dajte používateľom možnosť zobraziť alebo skryť pole pre heslo pri zadávaní.
  • Hneď ako sa používateľ zapojí do poľa, zobrazí chybové hlásenie. Nečakajte, až to urobíte.

formulár wordpress.png chyba

Pravidlo # 5: Neskrývať radu

Text fóra v kontaktnom formulári vyzerá takto:

pole s tips.png

Pozrite sa, ako program Target umiestňuje štítky do poľa? V niektorých kontaktných formulároch tieto štítky / indikácie jednoducho zmiznú, keď používateľ klikne na pole. Terč to rieši trochu inak a štítok presunie do hornej časti poľa (pozri „e-mailová adresa“).

Bez ohľadu na to, ako sa to rieši, odborníci na použiteľnosť ako skupina Nielsen Norman, vám povie, že toto je zlý dizajnový postup, pretože:

  • To je problematické pre multitasking, rozptýlených alebo príliš rýchlych používateľov v nasledujúcom poli. Keď stopa zmizne, používatelia musia opustiť pole, aby znovu našli to, čo potrebujú.
  • Tipy, ktoré zmiznú, tiež bránia používateľom vrátiť sa do formulára, aby skontrolovali svoju prácu alebo opravili chybu bez toho, aby úplne odstránili odpoveď a zistili, čo je nižšie.
  • Svetlejší sivý text použitý pre tipy zástupných symbolov nie je ideálny na ľahké čítanie.
  • Polia s náznakovým textom možno zameniť s poľami, ktoré už vyplnili údaje, čo ponecháva na používateľoch ignorovanie, odoslanie formulára a chybové hlásenie.
  • Niektoré nástroje na čítanie z obrazovky nedokážu prečítať pomocný text.

Podľa NNG považujú používatelia prázdne polia za atraktívnejšie ako tie, ktoré obsahujú kľúčový text. Aj keď sa zdá, že vaše formuláre umiestňujú tieto štítky alebo deskriptory nad pole dlhšie, zlepší sa tým použiteľnosť.

To je všetko pre tieto tipy, dúfam, že vám pomôžu vytvoriť lepšie kontaktné formuláre.