UX dizajn: 13 zistení ako vylepšiť formuláre na web stránkach
Formuláre na webových stránkach a aplikáciách sú zrejme najdôležitejším UX miestom, kde sa návštevník mení na zákazníka. Pri testovaní použiteľnosti sa stále stretávame s chybami, ktoré môžu mať za následok to najhoršie: frustrovaného používateľa, ktorý odchádza zo stránky (ku konkurencii). Prinášame vám prehľad niekoľkých chýb a odporúčaní, ktoré sme zozbierali pri nedávnych UX výskumoch. Použite ich napríklad ako checklist, aby ste si boli istí, že vaši používatelia nebudú chytení do rovnakej pasce.
AKTUALIZOVANÉ: Blogový článok sme pôvodne publikovali 20.4.2021 a aktualizovali 8.4.2024.
Validácia je evergreen. Pripomeňme si niekoľko základných pravidiel
#1 Zobrazovanie chýb
Ak pri vypĺňaní údajov nastane chyba, oznámte túto informáciu používateľovi, ukážte kde sa chyba stala, a tiež konkrétne informujte ako chybu opraviť.
#2 Zobrazujte výstižné popisy chýb a pokúste sa chybám predchádzať
Ak používateľ nevie vopred ako má niektoré pole vyplniť, zákonite urobí chybu. A s každou chybou niektorým - hlavne technicky menej zdatným - klesá sebavedomie a vôľa dokončiť vypĺňanie formuláru. Ak vopred uvedieme napr. formát telefónneho čísla, minimalizujeme množstvo používateľov, ktorí spravia chybu.
Špeciálne v prípadoch ako je tento, však môžeme chybám predísť aj iným spôsobom. Pozrite nasledovný bod.
#3 Netrvajte na presnom formáte dát
V určitých prípadoch môžete drobné chyby "ignorovať". Pri testovaní stránok poisťovní sme zistili, že niektoré nedovolili zadať ŠPZ (EČV) auta s medzerou. Takže striktne po zadaní 7 znakov sa formulár odoslal a následne zobrazil chybu, že zadaný údaj nie je správny. Pritom medzery v textovom reťazci dokáže programátor odignorovať jednou rýchlou funkciou či už na front-ende alebo back-ende.
Oveľa častejšie je však vyžadovanie telefónnych čísel v medzinárodnom formáte. Ak prevádzkujete web na Slovensku a väčšina vašich používateľov je zo Slovenska, prečo im jednoducho nedovoliť zadať číslo v lokálnej verzii? Po overení, že formát je správny, si pri ukladaní do databázy slovenskú predvoľbu jednoducho doplníte. A samozrejme, povolíte zadať číslo aj so zahraničnou predvoľbou.
A do tretice: rodné čísla. Večná otázka byť, či nebyť je v tomto prípade: s lomkou alebo bez lomky? No asi už tušíte, že ideálne oboje. Tento znak si ľahko doplníte alebo odstránite pri ukladaní dát. Nezabudnite však uviesť, že očakávate jeden alebo druhý formát, pretože respondenti v našich testoch sa nad tým pozastavili.
Zopár vizuálnych a obsahových tipov
#4 Označte povinné polia
Ľudia očakávajú, že nie je nutné vyplniť všetky údaje. Automaticky hľadajú označenie povinných častí, napr. hviezdičkou a pod. (Áno, aj keď sú všetky polia povinné.)
Ak používatelia túto informáciu nenájdu, snažia sa si ju domyslieť na základe iných indícií. Respondentka v našom teste napríklad povedala: "Toto políčko má hrubý nadpis, zrejme bude povinné." V danom formulári boli všetky polia povinné a hrubý rez písma bol štandardným štýlom pre označenia polí (label).
#5 Akcia vyvolá reakciu, dajte ju najavo
Špeciálne pri formulároch, ktoré slúžia na výpočet ceny, dajte jasne najavo, že zmena nejakej voľby upraví cenu produktu alebo služby. Uistite sa, že
- zmena ceny je vizuálne pútavá,
- cena je umiestnená vo viditeľnej časti stránky (ideálne po celý čas vypĺňania formuláru),
- zmena nastane ihneď po tom, ako používateľ klikne na element, ktorý prepočet spôsobí. Každá (mili)sekunda naviac totiž spôsobí, že používateľ si akciu a reakciu mentálne nespojí.
#6 Nech vaše otázky nevyvolávajú viac otázok
Pri testovaní scenára s uzatváraním cestovného poistenia sme sa stretli s formulárom ako na obrázku nižšie.
Ako by ste odpovedali na otázku "Táto osoba je tiež poistená"? Kto je vlastne tá poistená osoba? Je to ten človek, ktorý formulár vypĺňa? Alebo osoba, ktorá vlastní núdzové číslo? Každá otázka vyvoláva sériu ďalších otázok, napr. prečo by môj núdzový kontakt mal byť poistený alebo prečo to poisťovňu zaujíma?
V tomto prípade sa skombinovala nevhodná formulácia otázky a porušenie jedného z princípov Gestalt psychológie aplikovanej na používateľské rozhranie. Tzv. Law of proximity hovorí, že objekty, ktoré sú blízko pri sebe, spolu súvisia. Vo formulári z príkladu však otázka na poistenú osobu nijak nesúvisela s núdzovým číslom, iba si developer zjednodušil prácu a tlačidlá áno/nie umiestnil do stĺpca vpravo a s nedostatočný odstupom od predch. riadku. Toto je aj dôvod, prečo sa neodporúča používať viacstĺpcové rozloženie pre formuláre.
Všimnite si časť formulára "Nepovinné príplatky" na stránke CK Satur. Je vám jasné čo je Smart business? Čo je "Dopoistenie storna k poisteniu PLUS (ECP) X…" a malé štvorčeky napravo od tejto voľby?
#7 Viackrokové formuláre
Rozdelenie formulára do viacerých krokov môže mierne znížiť tzv. kognitívnu záťaž používateľa, pretože sa môže sústrediť na menej vypĺňaných polí, formulár nepôsobí ako veľmi dlhý a je vizuálne príjemnejší. Dajte si ale (okrem iného) pozor na nasledovné:
- Jasne informujte používateľa, že proces je rozložený na kroky, koľko ich je a kde sa práve nachádza.
- Ak kroky formulára implementujete JavaScriptom, dovoľte používateľom vracať sa na predchádzajúce kroky tlačidlom Späť v internetovom prehliadači, nie len tlačidlom, ktoré ste vložili do stránky (dúfame, že ste ho tam vložili). Back-button je stále jedna z najpoužívanejších funkcií internetových prehliadačov.
- Ak v istom kroku odkazujete na vyplnenú informáciu z predchádzajúcich krokov, pripomeňte používateľovi, akú hodnotu zvolil.
Príklad: Používateľ si objednáva poistenie a v 1. kroku si zvolí dátum začiatku platnosti. V 3 . kroku sa pýtate, či "k zvolenému dátumu má poistenie aj v inej poisťovni" - doplňte tento dátum priamo do otázky. Inak sa kognitívna záťaž zvyšuje.
Niekoľko technických tipov najmä pre developerov
#8 Ak máte vlastné "našepkávače", nech sa nebijú s prehliadačom
Hovoríme tu o autocomplete/suggestion funkciách, kde sa napríklad pri písaní názvu ulice zobrazí zoznam ulíc v danom meste a používateľ nemusí dopísať celý názov. Pri nedávnom testovaní sme narazili na 2 problémy v jednom formulári:
- Stránka vyžadovala výber PSČ z ponúkaných možností. Pri tak krátkom údaji ako je PSČ sa nikto z respondentov "neobťažoval" klikaním na ponúkané možnosti, ale jednoducho napísal 5 znakov sám.
- Keď sa počet ponúkaných možností stránky zúžil na 1 a zároveň sa zobrazila ponuka uložených údajov v prehliadači, táto prekryla autocomplete stránky a nebolo možné vybrať danú hodnotu.
Táto testovaná stránka teda spravila 2 chyby: vyžadovali výber hodnoty z autocomplete pričom nepredpokladali, že by ich používateľ nemusel vidieť. A pri validácii neakceptovali ručne vpísanú hodnotu, hoci presne spĺňala kritériá. Výsledkom bolo, že časť respondentov testu v tomto kroku formulár opustila. Čo iné im ostávalo, keď vyplnili 5-miestne PSČ a vrátila sa im chyba, že PSČ musí mať 5 znakov?
#9 Povoľte odoslanie formulára klávesou ENTER
Zdá sa to ako hlúposť, ale mnoho ľudí je zvyknutých menej klikať a viac používať klávesnicu. Mimochodom, pre týchto ľudí je tiež dôležité aby mohli používať tabulátor na prechod medzi jednotlivými poľami formulára. Uistite sa, že v takom prípade je zachované správne poradie jednotlivých elementov (napr. nastavením atribútu tabindex).
#10 Ak to pomôže používateľovi, ignorujte diakritiku alebo jej neprítomnosť
Pri našom teste sme videli prípady, kedy vyhľadávanie na stránke vrátilo iné výsledky podľa toho, či respondent zadal hľadané slovo aj s mäkkčeňmi a dĺžňami. Hlavne na mobilných telefónoch ľudia píšu bez diakritiky. A potom je tu veľká skupina ľudí, ktorí prevažne pracujú s anglickou klávesnicou. Prosím, neignorujte nás :-)
#11 Ak si používateľ musí vybrať z dlhého zoznamu hodnôt, dovoľte mu v nich vyhľadávať
Pri veľmi dlhých zoznamoch (napríklad všetky krajiny sveta alebo značka automobilu) si na mobile človek trošku "poscrolluje" kým sa dostane k hodnote pri konci zoznamu. Množstvo hotových knižníc ako napr. Select2 a iné, ponúkajú hotové riešenie tohto problému.
#12 Nepoužívaje element select (dropdown) na málo hodnôt
Opačne k predchádzajúcemu bodu, ak máte hodnôt na výber len málo, napr. 2-3, nezobrazujte ich vo forme elementu select ale skôr radio button. Používateľ okamžite vidí dostupné hodnoty a rýchlejšie tento údaj vyplní.
#13 Používajte správne formulárové elementy na špecifické dáta
Pri vypĺňaní čísiel alebo e-mailov je ideálne použiť element <input type="email"> resp. <input type="number"> doplnené atribútom inputmode="numeric" a pattern="[0-9]*", vďaka čomu sa hlavne na mobilných zariadeniach zobrazí upravená klávesnica, zobrazujúca iba čísla alebo znak zavináč bez nutnosti otvoriť špeciálne znaky.
Podobne existuje aj natívna možnosť vyberať dátum bez nutnosti implementovať vlastný kalendár, podpora vo všetkých browseroch je však dnes stále diskutabilná. Pri kalendároch pozor na ich použiteľnosť, písal o tom aj náš Martin Krupa v blogu Rok 2018 - rok kalendárov so zlým UX. My sme si pri poslednom testovaní všimli, že ľudia chcú dátumy zadávať aj bez použitia kalendára a vy by ste im v tom nemali brániť.
Ďalšie čítanie
Pre zopakovanie si základov odporúčame článok z dielne Nielsen Norman Group:
Website Forms Usability: Top 10 Recommendations. A samozrejme zdrojov na internete je neúrekom.
V našej firemnej UX knižnici sa napríklad nachádza kniha Form Design Patterns z vydavateľstva Smashing Magazine, ktorá sa výlučne venuje formulárom. Smashing Magazine (keby ste nevedeli) je veľmi populárna stránka pre tvorcov webov založená Vitaly Friedmanom, ktorý nedávno prednášal aj na našej konferencii MastersGate.
Ak vám vaši zákazníci nevypĺňajú formuláre alebo máte pocit, že obsahujú kritické miesta, ktoré by bolo dobré vylepšiť, zverte sa do rúk odborníkov. V ui42 vám s tým radi pomôžeme. Stačí, ak nás kontaktujete.
O zisteniach ako vylepšiť formuláre sa môžete dočítať aj na E-commerce Bridge.
