Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma.

Děláte vše pro to, abyste vytvořili web, který přivede návštěvníky ke konverzi. Když studujete analytiku, s potěšením zjistíte, že cesta uživatele, kterou jste vytvořili, je čas od času podporována návštěvníky. Existuje však něco, co jim brání v převodu.

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, kontaktní formulář by mohl tento zážitek zničit, pokud nebude používán správně. „Zlomená“ tlačítka, matoucí pole, příliš mnoho kroků, neuspořádané rozhraní… dokonce i umístění kontaktního formuláře by mohlo narušit uživatelskou zkušenost.

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

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

Studie Google Eye Tracking publikovaná v roce 2014 ukázala, že dodržování nejzákladnějších pokynů k použití pro návrh formulářů dramaticky zlepší uživatelský komfort. Konkrétně, když kontaktní formulář splňuje všechna pravidla, 78% uživatelů je může vyplnit a odeslat na jeden pokus. Pokud kontaktní formulář porušuje tato pravidla, je to však pouze 42% schopných 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 dalších pravidlech zde, lidé se často obávají délky kontaktních formulářů, což často vede ke špatnému výběru designu. Vezměme si například otázku vyrovná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, aby vaše kontaktní formuláře splňovaly standard zarovnání, musíte udělat následující:

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

  • 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í.

Chcete prodávat své produkty na internetu?

Stáhněte si zdarma WooCommerce, nejlepší pluginy pro e-commerce pro prodej vašich fyzických a digitálních produktů na WordPress a snadné vytvoření vašeho online obchodu. Ideální pro začátečníky.

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.