Blog

21 prvotriednych ukážok dizajnu webového formulára

V prípade, že webové online formuláre sú navrhnuté dobre, pomáhajú ľuďom jednoduchšie sa registrovať na stránke, odoberať newslettre, nakupovať… Na druhej strane, zle zrealizované formuláre môžu byť pre potencionálnych zákazníkov skutočnou prekážkou. Môžu zákazníka dohnať až do bodu, kedy sa prestane snažiť o jeho vyplnenie.


Graham Charlton zozbieral 21 príkladov osvedčených foriem formulárov z rôznych webových stránok.

Zreteľné vysvetlenie polí formulára

Threadless má skvelý príklad formuláru. Jednoduchý text v zátvorkách vedľa polí formulára elegantne predchádza množstvu možných vstupných problémov.

threadless_form-blog-full

Ukazovatele bezpečnosti hesla

Všetci poznáme ukazovatele bezpečnosti hesla, avšak niektorí ľudia tieto odporúčania ignorujú.

Greeklist má iný prístup, ktorým napomôže používateľovi, aby sa viac potrápil pri vytváraní dobrého hesla.

form_ux_geeklist-blog-full

Kontrolný formulár pravdivosti údajov

Ako chrániť užívateľa pred nesprávnymi údajmi, ktoré by mohol odoslať prostredníctvom formulára?Táto forma formulára tiež predchádza spraviť ďalší krok pred tým, než užívateľ nájde a opraví chybu.

Autoglass buď schváli alebo opraví to, čo užívateľ vyplnil.

autoglass_in_line_validation-blog-full

Opravenie nesprávnej e-mailovej adresy

Formuláre Kickstarteru pri vstupnej chybe navrhnú zrejmú e-mailovú adresu. Tento krok dokáže predísť prípadným problémom.

email_correction

Jednoduchý vstup pre užívateľov mobilných telefónov

Optimalizovanie formulárov pre mobilné telefóny je o znižovaní počtu potrebných zadávaných dát.

Mobilná stránka Kayak zistí polohu zákazníka a tak skráti čas, ktorý by človek musel stráviť jej vypisovaním. Nastavenia sú navrhnuté aj pre väčšie prsty.

kayak1-blog-full

Prispôsobenie formulára pre cieľové publikum

Wiltshire Farm Foods roznáša jedlá a ich zákazníci sú prevažne starší ľudia.
Snažili sa urobiť platobnú stránku a overovacie formuláre jednoduché na používanie.

wff1-blog-full

prepisovanie veľkých písmen

Keď si ľudia na Flickr-i omylom nechajú zapnutý caps lock, ich správa sa prepíše na malé písmená.

flickr_text_format-blog-full

Platba kartou prostredníctvom mobilného telefónu

Murat Mutlu on Dribble má skvelú možnosť naskenovania platobnej karty, ktorá dokáže užívateľovi ušetriť množstvo času.

Card_scan

Rozpoznanie typu karty

Táto užitočná funkcia, na Github-e, rozpoznáva typ platobnej karty hneď potom, čo užívateľ začne písať číslo kreditnej karty.

github2

Vítané je všetko, čo skracuje proces vypĺňania dotazníka.

Dizajn môže presvedčiť

Pekný dizajn formulára môže pomôcť k presvedčeniu používateľa, aby ho vyplnil.

poe_form-blog-full

Jednoduché opakovanie nákupu prostredníctvom mobilného telefónu

Asos ukladá dáta platobnej karty (ak s tým zákazník súhlasí). Toto zjednodušuje opakovanie nákupu.

Keď raz zákazník zadá svoje prihlasovacie údaje, pri ďalšom nákupe bude potrebovať pre dokončenie transakcie len bezpečnostný kód ku karte.

asos_image_1-blog-third   aos_image_2-blog-third

Pekný dizajn

Stránka Barley má formulár pri ktorom môže užívateľ hodnotiť pivo. Má pôsobivý dizajn a funguje veľmi dobre.

rate_beer-blog-full

Vertikálne zarovnanie formulára na mobile

Pri mobilných telefónoch funguje vertikálne označenie zarovnania veľmi dobre. Znamená to, že políčka formulára a tlačidlá nemusia byť na seba veľmi natlačené.

debenhams-blog-third

Riešenie častých otázok

Niekedy chcú užívatelia vedieť prečo sú od nich požadované konkrétne údaje. Ak im tieto informácie poskytnete dopredu, zvýšite šancu, že užívateľ formulár vyplní.

Moneysupermarket poskytuje tieto informácie hneď vedľa daného poľa.

moneysupermarket_form-blog-full

Zreteľne vyznačená možnosť doručenia pri produkte

Aplikácia John Lewis iPhone zobrazuje pri každom produkte možnosť doručenia. Tiež ponúka možnosť rozkliknúť si viac detailov.

johnlewischeck-blog-half

Slider ukazujúci naliehavosť kontaktovania

Toto je elegantný nástroj od Wopata, ktorý sa snaží odhadnúť, ako súrne užívatelia potrebujú odpoveď.

wopata_form_1-blog-full

Input ušitý na mieru

Walmart zobrazuje numerickú klávesnicu pre zadanie tel. čísla a tým zjednodušuje zákazníkovi prácu.

walmart-blog-third   walmart1-blog-third

Zmiešanie vstupných dát

Kontaktný formulár mixuje rôzne štýly vstupných dát a tým robí tento proces oveľa zábavnejším.

information_highwayman-blog-full

Vstupná overovacia stránka

Staples má stránku, ktorá je skvelým príkladom. Možnosť vyskúšania si stránky ako hosť je predovšetkým nevyhnutná kvôli zákazníkom, ktorých by mohla odradiť povinná registrácia.

Staples zároveň podčiarkuje benefity registrovania sa a necháva zákazníkom možnosť jednoducho si vytvoriť konto neskôr.

staples_us_checkout-blog-full

Live chat v košíku

Košík House of Fraser-u nepožaduje žiadnu povinnú registráciu. V štádiu, keď môžu mať zákazníci otázky ohľadom nákupu, používa proaktívny chat.

hof_checkout-blog-full

Checkout pre mobilné telefóny

Best Buy má vynikajúci checkout pre mobilné telefóny.
Aj napriek tomu,že zákazníkovi zostáva ešte mnoho krokov na dokončenie akcie, veľké textové polia a jasné pomenovania činnosti, pre neho vytvárajú jednoduchú navigáciu.

Textové polia sú veľmi dobre navrhnuté pre dotykové obrazovky. Tiež vynecháva akékoľvek nepotrebné informácie, takže stránky sú prehľadné.

bestbuy1-blog-third   bestbuy-blog-third

 

Zdroj/Preklad: https://econsultancy.com/blog/64669-21-first-class-examples-of-effective-web-form-design/

Páči sa vám článok?