7 min. čítanie

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).

Peter Angelov Peter Angelov
UX Consultant
13 zistení ako vylepšiť formuláre na web stránkach

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.

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.

Pri objednávaní povinného zmluvného poistenia na stránke axa.sk môžete byť upozornení, že ste rodné číslo zadali “v nesprávnom formáte” – je však problém v chýbajúcej lomke alebo ste spravili preklep v čísle?

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 Ak akcia vyvolá reakciu, dajte to 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é:

  1. Jasne informujte používateľa, že proces je rozložený na kroky, koľko ich je a kde sa práve nachádza.
  2. 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.
  3. 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 hlavne 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:

  1. 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.
  2. 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žívajte 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ť.

Zdieľať článok
Peter Angelov
UX Consultant

Peter Angelov začal v ui42 pracovať ako Projektový Manažér a Produktový Manažér redakčného systému BUXUS od ui42. Momentálne sa však naplno venuje dizajnu používateľskej skúsenosti ako UX designer. Tvorbe webov sa venuje už od základnej školy a skúsenosti nazbieral rokmi práce v medzinárodných firmách.

Tento článok ti prináša

ui42

ui42 je slovenská digitálna agentúra, ktorá pokrýva všetky základné oblasti online biznisu. Ponúka komplexné služby od programovania webov a webových aplikácií, cez user experience a performance marketing až po umelú inteligenciu. Sú one-stop shop pre váš online biznis.

Viac o tejto spoločnosti

Týždenný podcast UPdate
Podobné články
Live shopping v Nemecku sa rozbieha. Aj keď veľmi pomaly
2 min. čítanie

Live shopping v Nemecku sa rozbieha. Aj keď veľmi pomaly

Nedávny prieskum spoločnosti ECC Köln ukázal, že živé nakupovanie v Nemecku, známe aj ako “live shopping” či “in-stream shopping”, získava na obľube. Šesť z desiatich nemeckých spotrebiteľov v súčasnosti rozumie tomuto pojmu, čo je dvojnásobne viac ako pred tromi rokmi. Miera prijatia live shoppingu v Nemecku je však stále nízka.

Redakcia Redakcia
Prečítať článok
Najväčšia česká štúdia: Ako Česi používajú zľavy v e-shopoch?
6 min. čítanie

Najväčšia česká štúdia: Ako Česi používajú zľavy v e-shopoch?

Ako veľmi dáme na zľavy v e-shopoch? A ako veľmi dávajú zľavy samotné e-shopy? Na to sa pozrela nová štúdia pod vedením Jaroslava Janíčka v rámci projektu Ďekovačka. Do prieskumu sa zapojilo viac ako 200 slovenských e-shopov. Výsledky odhalili zaujímavé informácie o tom, ako zľavy v online obchodoch fungujú.

Jaroslav Janíček Jaroslav Janíček
Online podnikatel
Prečítať článok
Bridge Now

Najnovšie správy práve TERAZ

10+ neprečítaných

10+