Príťažlivé webové formuláre - tipy a triky

Bc. Róbert Struhár 3. máj 2011 v kategórii Informačná architektúra

Úvod

Na webe sa nachádza neskutočné množstvo webových sídiel, ktoré každou sekundou len a len narastá. Každé webové sídlo sa snaží o to, aby bolo navštevované, aby ho používatelia našli, aby dobre propagovalo a predávalo svoje služby a výrobky, aby si používateľ odniesol z jeho návštevy nejaký zážitok atď. Popri všetkých týchto skutočnostiach však nesmieme zabúdať na interakciu prebiehajúcu medzi používateľom a webovým sídlom. Webový formulár predstavuje akýsi primárny spôsob, vďaka ktorému táto interakcia prebieha. Formuláre sa stále častejšie objavujú na stránkach rôznych firiem, na portáloch, e-shopoch ako aj na ďalších typoch webových stránok.

Webový formulár

Webový formulár umožňuje komunikovať na webe, objednávať, získavať informácie o záujmoch potenciálnych zákazníkov, resp. návštevníkov websídla, a v neposlednom rade poskytovať rôzne typy služieb, ako napr. poradenstvo.

Na webe sa vyskytuje vo viacerých formách. Môže ísť o sign-up formulár, formulár pri založení e-mail konta, formulár vo forme príspevku na blogu, kontaktný formulár, formulár pri nákupe na websídle e-shopu a iné. Napr. kontaktný formulár je pre každé websídlo dôležitý a prakticky veľmi potrebný. Zabezpečuje prvý kontakt s používateľom a preto ide o jednu z najdôležitejších častí websídla.

Autorka Kerrová (2010) sa špecializuje najmä na prácu, týkajúcu sa návrhu webových formulárov, ich dizajnu a rozvrhnutiu, čiže layoutu.

Na dizajn webových formulárov má veľký dopad najmä to, ako ľudia vnímajú, teda to, ako sa danú stránku pozerajú. Na to, aby sa každý používateľ pohyboval v rámci formuláru rýchlo, ľahko a úspešne, by sme mohli zužitkovať všetko to, čo vieme o ľudskom vnímaní. Je dôležité povedať, že dizajn formulárov nie je len o kráse. Formulár môže vyzerať akokoľvek graficky prepracovaný, ale ak ho používateľ nevie dostatočne využiť, ide len o plytvanie časom grafických dizajnérov a celého tímu špecialistov, ktorí sa podieľali na jeho návrhu. Preto je potrebné sledovať odporúčania, ktoré by sa týkali jeho návrhu a zvyšovali tak jeho atraktivitu a príťažlivosť a tým pádom aj použiteľnosť a úspech.

V článku sme sa zamerali na konkrétne a ďalšie tipy a triky pri návrhu príťažlivého formulára ako aj na odporúčania zabezpečujúce ich lepšiu použiteľnosť.

Konkrétne tipy a triky pre návrh príťažlivého formulára

V nasledujúcich riadkoch sme uviedli určité tipy, triky, resp. odporúčania pre návrh kvalitného webformuláru, pri ktorých sme sa snažili pripojiť aj konkrétny príklad. Jednotlivé odporúčania sme spracovali podľa autorky Kerrovej (2010), autora Crescimanna (2007), Rhinda (2010) a Caixetaa (2011). Znejú nasledovne:

1. Umiestnenie v rámci websídla

Vyplnenie jednoduchého formuláru ešte neznamená, že ho používatelia v rámci sídla ľahko nájdu. Preto je dôležité aj umiestnenie odkazu na vyplnenie napr. sign-up formuláru.

Obr. Umiestnenie formulára v rámci sídla (http://wordpress.com/)

Napríklad toto websídlo umiestňuje na svojej úvodnej stránke odkaz na vytvorenie vlastného konta, ktoré sa vytvorí prostredníctvom vyplnenia 4 polí. Tým pádom bude mať používateľ vlastný účet behom niekoľkých sekúnd.

2. Ak ide o sign-up formulár je dobré, aby obsahoval čo najmenej polí.

Informácie, ktoré nie sú potrebné (napr. fax, telefónne číslo a pod.) by sa vo formulári nemali nachádzať, najmä ak ide o nepovinné polia. Používateľa to len zaťažuje. Takisto aj meno, by sme nemali rozdeľovať na krstné meno a priezvisko.

Príklad dvoch websídiel (facebook.com a myspace.com) sign-up formuláru z roku 2010. Sign-up formulár je prvý kontakt s používateľmi a preto je dôležité, aby používateľov nezaťažoval a bol v jednoduchej forme.

Obr. Sign-up formulár (www.facebook.com; www.myspace.com)

3. Modals

Po kliknutí na odkaz formulára vyskočí okno, ktoré je v popredí a pozadie sa stlmí, resp. stmaví. Ide o nový a zároveň rastúci spôsob ako vytvoriť unikátny, používateľsky a zároveň estetický formulár. Takisto môže tento spôsob zobrazenia formulára znamenať pre používateľa vizuálny zážitok.

Obr. Modals (http://www.reddit.com/)

4. Návestia vo formulároch

Návestia môžeme definovať ako mená alebo termíny používané na celej webovej stránke slúžiace na identifikáciu menu možností, kategórií na stránke alebo iných elementov nachádzajúcich sa na webovej stránke. (Web Design Glossary, 2011)

Návestia vo formulároch predstavujú vodítko, ktoré používateľa vedie k tomu, aký druh údajov je potrebné vpísať do konkrétneho formulára. Preto si musíme uvedomiť, že návestia nie sú iba zhlukom písmen umiestneným nad formulárom, ale sú dôležitým identifikačným prvkom, ktorý netreba zanedbávať pri navrhovaní konkrétneho dizajnu formulárov.
V skutočnosti predstavujú skrátenú formu požiadavky kladenú na používateľa.

Používateľ túto požiadavku spracováva na základe čítania, ktoré je založené na mechanických procesoch, na porozumení čítaného, na schopnosti identifikovať otázku, vytvoriť odpoveď na otázku a umiestniť ju do konkrétneho formulára (Caroline Jarrett, 2008).

Dôležitou zložkou dizajnu formulárov je ich správne rozvrhnutie. Ak je potrebné minimalizovať čas nevyhnutný na vyplnenie formulára, tak sa predovšetkým sústredíme na údaje, ktoré sú pre používateľa dôverne známe (napr. meno, adresa....) – uplatní sa kolmé zoskupenie od návestia k vstupnému poľu. Pri takomto rozvrhnutí existuje najlepší predpoklad pre prácu s formulármi. Návestia vo formulároch sú zoskupené prostredníctvom kolmého príbuzenstva, čo používateľovi umožňuje realizovať jednosmerný pohyb (Wroblewski, 2005).

Matteo Penzo (2006 b) sa zaoberal problematikou hodnotenia použiteľnosti formulárov v rámci svojho výskumu realizovaného prostredníctvom použitia metódy sledovania pohybu očí. V rámci tohto hodnotenia sa zameral na rozloženie a umiestnenie jednotlivých typov návestí vo formulároch.

Výskum založil na testovaní štyroch konkrétnych formulárov, ktoré boli respondentom predkladané v laboratórnych podmienkach z dôvodu eliminácie rušivých vplyvov z okolia. Vzorku respondentov tvorili dve kategórie a to nováčikovia a experti.

Prvý testovací formulár obsahoval ľavostranne zarovnané návestia umiestnené naľavo od vstupného poľa. Jedná sa o najobľúbenejší formulár používaný na webe.

Na základe výsledkov tohto výskumu môžeme konštatovať, že obe kategórie respondentov boli s týmto formulárom schopné pracovať veľmi dobre. Avšak prehnaná vzdialenosť medzi návestiami a vstupným poľom nútila používateľov vynakladať viac času na vizuálne vzájomné pôsobenie s formulárom. Prázdne miesto medzi návestím a formulárom spracovávali používatelia formou upreného pozorovania smerom k vstupnému poľu, čím nedošlo k žiadnej fixácii na prázdne miesto. Malo to však za následok pomerne dlhú dobu vynaloženú na jeden kmit – 500 ms – čo spôsobilo zvýšenie kognitívnej záťaže respondentov.

Tento testovací formulár obsahoval rolovaciu lištu, ktorej cieľom bolo zistiť do akej miery je pre používateľa pútavá v rámci formulára. Ukázalo sa, že prvá fixácia všetkých používateľov bola usmernená na rolovaciu lištu, pretože pre používateľov predstavovala najdôležitejší element.

Obr. Návestia s ľavostranným zarovnaním a umiestnením naľavo od vstupného poľa

Druhý testovací formulár obsahoval pravostranne zarovnané návestia umiestnené naľavo od vstupného poľa. Použitie takéhoto druhu návestia znížilo počet fixácií respondentov o polovicu a taktiež bola pozorovaná znížená kognitívna záťaž pri realizácii úlohy. Rovnako čas potrebný na kompletizáciu formulára sa zmenšil o polovicu.

Vďaka pravostrannému zarovnaniu textu sa takmer úplne znížila aktivita kmitania oka medzi návestím a k nemu prislúchajúcemu vstupnému poľu a používateľ veľmi rýchlo pochopil význam vstupného poľa vďaka ľahkosti postranného očného pohybu.

Oproti prvému testu došlo k zníženiu dĺžky kmitania oka medzi návestím a vstupným poľom z 500 ms na čas okolo 170 ms pre expertov a 240 ms pre nováčikov. Väčšina používateľov z oboch kategórií však potrebovali prekontrolovať vstupné polia prislúchajúcich návestí.

Obr. Návestia s pravostranným zarovnaním a umiestnením naľavo od vstupného poľa

Tretí testovací formulár obsahoval ľavostranne zarovnané návestie umiestnené nad vstupným poľom.

Z testovania predchádzajúcich dvoch návestí vo formulároch vyplýva, že čím bližšie je návestie umiestnené k formuláru, tým rýchlejšie a plynulejšie používateľ zvláda prechod medzi nimi. Na základe toho teda dochádza k skráteniu času potrebného na spracovanie požiadavky. Používateľ najskôr fixuje formulár a potom sa vracia k návestiu.

Ak návestie umiestnime priamo nad formulár, tak je možné používateľa zaujať naraz. To znamená, že jedným očným pohybom fixuje aj návestie aj formulár a preto nemá potrebu spätne sa k niektorému z nich vracať. To má za následok zníženie počtu fixácií a kmitania oka.

V rámci tohto formulára došlo k zmene v usporiadaní jednotlivých vstupných polí, konkrétne došlo k premiestneniu poľa obsahujúceho rolovaciu lištu. Cieľom tejto zmeny bolo pozorovať, do akej miery to ovplyvní jej pozíciu najdôležitejšieho elementu (z používateľského hľadiska). Nebol však pozorovaní žiadny rozdiel v súvislostí jej umiestnenia a zmeny dôležitosti, ktorú jej pridávali používatelia. Dokonca bola považovaná za viac dôležitú ako tlačidlo slúžiace na potvrdenie vyplneného formulára.

Obr. Ľavostranne zarovnané návestie umiestnené nad vstupným poľom

Posledným testovaným návestím bolo návestie písané tučným fontom umiestnené nad vstupným poľom. Ak takéto návestie umiestnime priamo nad formulár, dochádza k zvýšeniu jeho vizuálnej váhy a tým pádom sa návestie dostávajú do popredia layoutu.

Pri používaní takéhoto druhu návestia dochádza k 60% zvýšeniu kmitania oka pri presune od návestia k vstupnému poľu. Čítanie a vnímanie takýchto návestí predstavuje pre používateľa väčšiu kognitívnu záťaž. Pravdepodobne je to spôsobené vizuálnym zmätkom, keď sa používateľovi začne zlievať návestie písané tučným fontom s hrubším priľahlým okrajom vstupného poľa. Túto záťaž je však možné zmierniť prostredníctvom vizuálneho dizajnu stránky.

Obr. Tučné návestia nad vstupným poľom

Vo svojom článku Matteo Penzo (2006 b) uvádza okrem výsledkov výskumu aj niekoľko odporúčaní, ktoré z nich priamo vyplývajú. Na základe týchto odporúčaní sa teda pri tvorbe a dizajne návestí vo formulároch musíme zamerať na samotnú pozíciu návestia, jeho zoskupenie, je potrebné sa rozhodnúť či budeme používať návestia písané tučným forntom a či do formulára vložíme rolovaciu lištu a aké návestia pre ňu použijeme.

• pozícia návestia 
  - na základe výskumu môžeme konštatovať, že za najvhodnejšiu pozíciu pre návestie je možné považovať jeho umiestnenie priamo nad formulár;
  - ak bolo návestie umiestnené napr. na ľavej strane, s použitím ľavostranného zarovnania, dochádzalo k ťažkej kognitívnej záťaží používateľa;
  - pri umiestnení nad formulár je potrebné dobré vizuálne rozlíšenie príslušnosti návestí k jednotlivým formulárom;
  
• zoskupenie návestia
  - okrem samotnej pozície návestia je potrebné dbať aj na jeho správne zoskupenie;
  - napr. ak zvolíme umiestnenie vľavo od formulára, je potrebné aplikovať aspoň pravostranné zarovnanie textu;
  
• použitie návestí písaných tučným fontom
  - čítanie návestí písaných tučnými písmenami spôsobuje používateľom určité problémy, preto ak sa dá je vhodnejšie používať obyčajné textové návestia;
  - ak sa však rozhodneme používať návestia písané tučným fontom, je vhodné štylizovať formuláre bez hrubého orámovania;
  
• rolovacie lišty
  - používajú sa buď na zvýraznenie dôležitých alebo menej známych údajov;
  - pri ich použití je potrebné byť opatrný, pretože sú príliš pútavé a tým zvyšujú kognitívnu záťaž používateľa;
  - dôležité je ich správne umiestnenie - zväčša pod dôležitejšie vstupné polia;
  
• umiestnenie návestia pre rolovacie lišty
  - aby sme zaistili to, že používatelia okamžite pochopia, na čo sa ich pýtame, je potrebné označiť rolovacie lišty návestiami;
  - jedná sa o veľmi náročnú prácu, pretože možnosti ktoré ponúkajú rolovacie lišty, obsahujú množstvo variácií na dlhom zozname položiek, ktoré sú používateľovi ponúkané.

Okrem už spomínaných spôsobov umiestnenia návestí vo formulároch, ktoré sú uvedené vo výskume Mattea Penza, poznáme ešte niekoľko iných atypických spôsobov ich umiestenia - umiestnenie návestia pod vstupné pole, umiestnenie do vnútra vstupného poľa a návestie vo forme animácie.

Autorka Kerrová (2010) vysvetľuje, že ak formulár vychádza z ľudského vnímania „zhora nadol“, označenie pod poľami, môžeme považovať  za nevhodné. Je to predovšetkým z dôvodu toho, že používateľ prichádza na formulár prvýkrát a prvé čo si všimne je prázdne pole. Preto musí hľadať popis toho, čo má do pola napísať. Vtedy nastane situácia, že sa do poľa musí vrátiť späť. Takže v praxi by to vyzeralo asi tak, že používateľ skočí najprv dva kroky vpred na označenie poľa, potom zase jeden krok naspäť do poľa, potom tri skoky na ďalší popis a jeden skok späť atď. Tento postup je pre používateľa veľmi unavujúci a znamená oveľa viac práce ako napr. pri označeniach polí, ktoré sú umiestnené napr. na ich boku vľavo.

Obr. Návestie umiestnené pod vstupným poľom

Ďalším variantom návestia, je návestie, ktoré sa nachádza vo vnútri vstupného poľa poľa:

Obr. Návestie umiestnené vo vnútri vstupného poľa

Takýto spôsob označenia návestia (označenie vnútri) by sa nemal používať, a to najmä z nasledujúcich dôvodov:
- Keď používateľ začne písať do poľa, návestie zmizne. Takže jediný spôsob ako používateľ skontroluje význam poľa je, že odstráni vyplnené a bude dúfať, že sa tam popis znovu objaví.
- Ak návestie nezmizne v momente, ako používateľ príde do poľa, tak sa môže stať to, že sa návestie do poľa dostane aj s vyplneným textom. Posledná možnosť bude, že ho používateľ bude musieť vymazať ručne.
- Polia sa zdajú byť v takomto prípade vyplnené, čiže sa zvyšuje pravdepodobnosť používateľovej chybovosti.
- Pri kompletne vyplnenom formulári nemá používateľ možnosť kontroly, či polia vyplnil správne podľa ich návestí.
- Vyplnený formulár, ktorý sa vytlačí, alebo aj uloží je takisto bez návestí.
- Takýto prístup je vhodný len vtedy, ak je návestie poľa veľmi krátke.

Posledným druhom návestia môže byť animácia. Napríklad ako pri websídle http://www.csskarma.com/lab/plugin_slidinglabels/, kedy je popis najprv vo vnútri poľa, ale ak ide do neho používateľ niečo napísať, popis sa presunie doľava. Autorka Kerrová (2010) na využití tohto spôsobu nevidí žiadne výhody. Nešetrí priestor, pretože sa text popisu presunie vedľa, a animácia môže na používateľa pôsobiť rušivo, plus ďalšie nevýhody, ktoré boli spomenuté, ako napr. to, že si používateľ myslí, že pole už vyplnil.

Obr. Návestia vo forme animácie

5. Indikátory poukazujúce na povinnosť vyplnenia

Väčšina formulárov obsahuje polia, ktoré používateľ musí vyplniť. Ide o povinné polia a sú väčšinou označené červenou hviezdičkou. Nemusí to byť práve najvhodnejší spôsob označenia povinnosti vyplniť pole, ale tento indikátor sa na webe stal akýmsi zaužívaným pravidlom a čiže väčšinou používateľ už jeho význam pozná. Tento indikátor má dvojaký vizuálny význam. Aj farba, aj tvar pôsobia na vnímanie používateľa. Preto znevýhodnení používatelia trpiaci farbosleposťou, vnímajú aspoň tvar tohto indikátora.

Obr. Vhodné formy označenia povinných polí v rámci formulárov 1

Obr. Vhodné formy označenia povinných polí v rámci formulárov 1

Indikátory, akými sú červená kocka a žltý prúžok, nepozná oveľa väčšie množstvo používateľov.

Výsledky výskumov ukazujú, že aj keď formulár obsahuje vysvetlivky takýchto indikátorov, používatelia si ich vo väčšej miere aj tak neprečítajú. Ale na druhej strane, môže takéto vysvetlenie niektorým používateľom zasa chýbať. Z toho vyplýva, že najlepšie je použiť zaužívané indikátory ako sú červené hviezdičky.

Ďalším spôsobom ako poukázať na povinnosť vyplnenia je, že popis poľa bude zvýraznený. Tento spôsob je neznámy a k tomu označenie ako podčiarknutie textu sa na webe využíva v úplne inom význame – takýto podčiarknutý text poukazuje na hypertextový odkaz. Aj z tohto dôvodu tento spôsob nie je vhodný.

Obr. Menej vhodné formy označenia povinných polí v rámci formulárov 2

Okrem spomínaných nevhodných indikátorov sme sa na internete stretli aj s ďalšími, ako je vyznačenie popisu poľa červenou farbou s príslušným slovom „povinné“, ktoré je uvedené v zátvorke. Myslíme si, že daná forma je takisto vhodná, pretože používateľ vie okamžite, že dané pole má vyplniť a nie je zaťažený premýšľaním, čo by červená farba mohla znamenať.

Obr. Vhodné formy označenia povinných polí v rámci formulárov 2

Ďalší príklad, ktorý by sme mohli uviesť je oddelenie povinných polí od nepovinných.

Obr. Vhodné formy označenia povinných polí v rámci formulárov 3

Alebo aj formulár, kedy sa povinné polia vyfarbia inou farbou a vo formuláru je popis, ktorý upozorňuje na ich povinnosť.

Obr. Vhodné formy označenia povinných polí v rámci formulárov 4

Obr. Príklad spôsobu zvýraznenia povinných polí (www.vodicak.sk)

6. Sliders

Štandardný súbor ovládacích prvkov webových formulárov sú nám už dlhé roky známe – textové, kontrolné a rolovacie polia. Ale pred nedávnom sa objavili formuláre s novinkou – akým je slider. Ponúka výber z radu obmedzeného súboru preddefinovaných možností.

Obr. Príklad Sliders 1

Dôvody využitia slider-u:
- samo ovládanie komunikuje s používateľmi, ktorí si môžu vybrať iba jednu z možností z preddefinovaného súboru, keďže slider navrhuje viacero možností.
- slider si vyžaduje len použitie myši
- slider je používateľovi známy a vie s ním manipulovať

Využitie slideru na internetovom obchode alza.sk pri filtrovaní výsledkov na základe požiadaviek používateľa.

Obr. Príklad Sliders (www.alza.sk)

Obr. Príklad Sliders 2

7. Skrytá kontextová nápoveď

Klasická kontextová nápoveď poskytuje okamžité, doplňujúce informácie. Príkladom by mohol byť tip týkajúci sa prijateľného hesla pri poli „heslo“.

Obr. Klasická kontextová nápoveď 1

Obr. Klasická kontextová nápoveď (http://www.ebay.co.uk/)

Na takéto nápovede netreba klikať. Oproti ostatným vizuálnym prvkom sú menej výrazné. Z výskumov vyplýva, že takáto forma nápovede používateľov nevyrušuje a v prípade, že ju potrebujú, ju hneď uvidia.

Skrytá nápoveď sa môže skrývať za rôznymi ikonami, ako je napríklad otáznik. Podobne ako červené hviezdičky, tak aj otáznik sa stal vo formulároch akýmsi zaužívaným štandardom.

Obr. Skrytá kontextová nápoveď 1

Pri používateľoch, ktorí využívajú viacej klávesnicu, je oveľa pravdepodobnejšie, že môžu takúto skrytú kontextovú nápoveď prehliadnuť. Pri vyplňovaní sa chyby zvyšujú aj tým, že používateľ nevidí, alebo nemá prístup k nápovedi.

Nápoveď formou ikony môže niekedy znamenať aj to, že používateľ aj napriek tomu, že vie čo sa za ňou skrýva, musí s vyplňovaním prestať a kliknúť na ňu. Ak sa tvorca webového formuláru rozhodne pre skrytú kontextovú nápoveď, mal by sa držať zaužívaného pravidla – a to ikony „otáznik“.

Iné zobrazenie skrytej kontextovej nápovede v tvare záchranného kolesa.

Obr. Skrytá kontextová nápoveď formou ikony

Iný spôsob zobrazenia skrytej kontextovej nápovedy je vtedy, ak sme priamo v poli formulára. Tento spôsob je výborný aj z hľadiska upútania väčšej pozornosti používateľa, kedy by si v iných prípadoch túto nápovedu nevšimol.

Obr. Skrytá kontextová nápoveď 2

Obr. Skrytá kontextová nápoveď 3

Skrytá kontextová nápoveď by mohla byť v dlhších formulároch nepríjemná a zároveň prináša so sebou veľa nevýhod:

- používatelia vôbec netušia, že takáto nápoveď vôbec v rámci formulára existuje do doby, pokým nezačnú do pola písať. Za ten čas si môžu premyslieť odpoveď a keď uvidia, čo v danom poli má naozaj byť, mohla by nastať situácia, že budú potrebovať určité mentálne prepracovanie svojej odpovede.
- niekedy sa im nápoveď zobrazí až po zodpovedaní, ako napríklad pri zvukovej nápovedi.
- treba dbať na to, kde sa nápoveď zobrazí, aby sa zabránilo zakrývaniu ďalších polí, nasledujúcich otázok, alebo iných kľúčových komponentov na obrazovke.
- takáto nápoveď si vyžaduje určitú technologickú podporu.

Využitie takejto skrytej nápovede môže byť aj z dôvodu, že si to malé množstvo používateľov vyžaduje, napr. pri zadávaní hesla – „tip na heslo“.

8. Použitie formátu Client-Side Data (JavaScript)

Overenie prostredníctvom systému JavaScript šetrí používateľovi čas a minimalizuje prácu webového servera, ktorý spracováva prichádzajúce vyplnené informácie. Použitie JavaScript-u umožňuje používateľovi okamžite poukázať na chyby, ktoré pri vypĺňaní urobil, ešte pred tým ako formulár odošle. Napríklad pri zadávaní telefónneho čísla, musí používateľ zadať len číslice, alebo pri zadávaní e-mailu len písmená bez interpunkcie ako to bolo aj v prípade websídla surveygizmo.com.

Obr. Použitie formátu Client-Side Data (JavaScript)

9. Jasné zobrazenie postupu

Ak sa formulár skladá z niekoľkých častí, je dôležité, aby používateľ vedel, na akom kroku sa momentálne nachádza. Používateľ má pocit neustálej interakcie, a zároveň vidí koľko má pred sebou ešte vypĺňania. Ide napr. o online prieskum – formulár s viacerými otázkami, e-shop, alebo checkout  proces. Stačí uviesť napr. „len 4 z 5“, alebo niečo podobné. Ak by používateľ nevidel svoju aktuálnu pozíciu v rámci formuláru a bude vidieť stále nápis „ďalej“ je vysoko pravdepodobné, že formulár opustí. Samozrejme, že najlepšou alternatívou je formulár skrátiť tak, aby neobsahoval jednotlivé kroky.

Ale na druhej strane, ak formulár obsahuje veľa polí, je lepšie zvoliť formu postupu, pretože používateľ nebude mať zlý pocit z množstva času, ktoré obetuje pri vypĺňaní a jednotlivé otázky budú v určitej logickej organizácii.

Je dôležite zdôrazniť, že takéto zložité formuláre sú náchylné robiť chyby. Z toho dôvodu je potrebné, aby sa pri rôznych technických chybách zabezpečilo ukladanie vyplnených polí. Nie každý používateľ sa bude chcieť vracať k tomu čo už vyplnil. Ak by sa tieto chyby opakovali počas vypĺňania, hrozí, že používateľ formulár opustí a tým pádom ho ani nedokončí.

Obr. Zobrazenie postupu (http://moja.inzercia.sk/)

10. Použitie iného označenia pre tlačidlo „odoslať“

Namiesto označenia tlačidla „Odoslať“ použiť iný prívetivejší text. Ten by mal používateľa upozorniť na to, čo je jeho cieľom, označenie ako napr. „Registrovať“. Ďalej existuje ešte jedna oveľa lepšia forma, kedy sa pri tlačidle uvádzajú aj výhody toho, čo obsahuje formulár, ako v prípade websídla basecampphq.com, kde pri kliknutí na odkaz dostaneme určitý software na „30 dní zadarmo a zároveň naša registrácia bude trvať len 60 sekúnd“. Čiže po kliknutí na tlačidlo sa používateľ dostane na formulár.

Obr. Alternatívne označenie pre tlačidlo odoslať

11. Rozptyľovanie

Takisto nie je pre používateľov dobré, ak sa v rámci formulára odvádza jeho pozornosť. Každé websídlo od používateľa chce, aby vyplnil formulár rýchlo, ľahko a najmä, aby ho dokončil. Čím menej bude používateľ rozptyľovaný, tým lepšie. Najčastejšie sa odporúča odstrániť bočné panely, päty, a v niektorých prípadov aj hlavičky, aby bol formulár v čo najväčšej pozornosti.

Napr. websídlo Deviantart.com má na svojej domovskej stránke veľa grafiky, ale po kliknutí na odkaz „zaregistrovať“ sa zobrazí jednoduchý formulár na čistom podklade bez zbytočného rozptyľovania.

Obr. Príklad rozptyľovania používateľov prehnaným dizajnom (http://www.deviantart.com/)

Ďalšie tipy pre návrh príťažlivého formulára

Okrem predošlých tipov pri návrhu kvalitného webového formulára poznáme aj iné, všeobecnejšieho charakteru, ako napríklad:

1. Pri kontaktnom formulári by malo byť pole správy dostatočne veľké, najlepšie vo veľkosti 8-10 riadkov.
2. Vyhnúť sa tlačidlu „zrušiť“.
3. Políčko Newsletter by malo byť v predvolenom nastavení registrácie vypnuté. Ak má používateľ naozaj záujem o zasielanie newsletteru, zaškrkne si ho sám.
4. Zabezpečenie a ochrana proti spamu.
5. Umiestnenie prvkov v rámci formuláru – nie len popisy polí, ale aj ikony, tlačidlá, okraje poľa. Treba sa vyhýbať malým a zle čitateľným fontom.
6. Poskytnúť ďalšie možnosti kontaktu - Okrem e-mailu, poskytnúť aj telefonický, alebo iný kontakt, keďže každý používateľ preferuje inú, vlastnú formu spojenia s predstaviteľmi daného webového sídla, v rámci ktorého formulár vypĺňa.
7. Použiť jednostĺpcový vertikálny formulár.
8. Nechať používateľa vyplniť pole takým spôsobom, na aký je zvyknutý. Napríklad pri vyplnení pola „telefónne číslo“ - nie každý vyplní telefónne číslo rovnako, niekto ho píše s medzerami, iný s predvoľbou a pod.

Odporúčania pre väčšiu použiteľnosť webových formulárov

Okrem spomínaných tipov a trikov pre návrh kvalitného a tým pádom aj príťažlivého formulára, by sme radi spomenuli aj niektoré odporúčania, ktoré sa týkajú oblasti použiteľnosti. Práve tá patrí medzi prvé a hlavné kroky, ktoré by mal formulár spĺňať. Podľa Rhinda (2010) sú dôležité z hľadiska použiteľnosti najmä nasledujúce odporúčania:

• pred, alebo počas vypĺňania formuláru by mal používateľ prejsť akýmsi filtrom otázok. Tie by mali obsahovať najmä geografickú otázku, z ktorej krajiny používateľ pochádza, resp. kde v súčasnosti žije a pod.
• ak je formulár k dispozícii vo viacerých jazykoch, filter otázok by mal takisto zabezpečiť otázku preferencie jazyka zo strany používateľa
• formulár by sa mal deliť podľa používateľa, napr. formulár pre firmy, obsahuje pole ako názov firmy, adresa firmy a pod. Takéto údaje by nemal obsahovať formulár pre jednotlivca, ktorý nereprezentuje žiadnu organizáciu, ale len samého seba
• na základe úvodného filtra otázok sa predkladá formulár, ktorý je šití na mieru používateľa
• polia vo vnútri formulára by mali byť v určitom logickom poradí, napr. najprv meno, priezvisko, potom kontakt a pod.
• označenia polí by mali byť jasné a jednoznačné. V prípade potreby zobraziť konkrétnu hodnotu, alebo nápoveď
• nikdy nezobrazovať také polia, ktoré by používateľ nevyplnil, napr. rodné číslo a pod.
• nie každý používateľ pozná odpoveď na otázku, ktorú obsahuje povinné pole
• nastavenie veľkosti poľa
• ak obsahuje odpoveď rolovacie okno s predpísanými odpoveďami, treba sa uistiť, či je pre používateľa konkrétny obsah relevantný a zároveň v logickom poradí
• chybné správy by mali byť jasné, jednoznačné a najmä užitočné. Tie by mali používateľa nasmerovať na správnu odpoveď. Mali by sa objaviť takým spôsobom, aby si ich používateľ všimol
• text vo formulári by nemal obsahovať žiadne gramatické chyby

Záver

Každé webové sídlo, ktoré sa snaží komunikovať so svojimi používateľmi, či návštevníkmi, alebo sa snaží akokoľvek rozvíjať túto interakciu, by si malo zaobstarať okrem iného, aj dobrý a kvalitný webový formulár. Je ale potrebné zdôrazniť, že tieto atribúty nezabezpečia, že ho používateľ vyplní. Preto sa treba zamerať na to, aby bol graficky príťažlivý a najmä používateľský orientovaný. Používateľ bude od formuláru očakávať hlavne jeho rýchle a jednoduché vyplnenie. Takýto cieľ sa dá dosiahnuť sledovaním najnovších trendov, resp. tipov a trikov, ktoré sa využívajú pri jeho navrhovaní. Len tak sa dá zabezpečiť úspešná interaktivita medzi websídlom a jeho používateľmi, ktorej výsledkom bude obojstranná spokojnosť. Veď každé webové sídlo si praje, aby ich používatelia boli spokojní a v neposlednom rade, aby s ním úspešne komunikovali.

Literatúra

---

a) CAIXETA, Raphael. 10 Tips for Optimizing Web Form Submission
Usability. Six revisions [online]. 2011, [cit. 2011-02-19]. Dostupné na WWW: http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/.

b) CRESCIMANNO , Brian. Pressplaymedia’s Blog [online]. 9.11.2007 [cit.
2011-04-03]. Tips for making a good contact form. Dostupné na internete: http://pressplaymedia.wordpress.com/2007/11/09/tips-for-making-a-good-contact-form/.

c) GUBE, Jacob. 25 Stylish Examples of Web Forms. Six revisions [online].
2009, [cit. 2011-02-19]. Dostupné na WWW: http://sixrevisions.com/user-interface/25-stylish-examples-of-web-forms/.

d) JARRETT, Caroline . Label Placement in Forms – What's Best?. British
Computer Society [online]. 2008, [cit. 2011-02-19]. Dostupný z WWW: http://www.bcs.org/upload/pdf/ewic_hc08_v2_paper68.pdf.

e) KERR, Jessica. Fashionable. Web Forms: Traps and Tips. UX
matters [online]. 1.11.2010, [cit. 2011-04-03]. Dostupné na internete: http://www.uxmatters.com/mt/archives/2010/11/fashionable-web-forms-traps-and-tips.php.

f) PENZO, Matteo. Evaluating the Usability of Search Forms Using
Eyetracking: A Practical Approach. UXmatters [online]. 2006 a, [cit. 011-02-19]. Dostupný z WWW: http://www.uxmatters.com/mt/archives/2006/01/evaluating-the-usability-of-search-forms-using-eyetracking-a-practical-approach.php.

g) PENZO, Matteo. Label Placement in Forms. UXmatters [online]. 2006 b,
[cit. 2011-02-19]. Dostupný z WWW: http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php.

h) Resourcesmix.info : Resource website for Graphic & web designers and
Developers with huge collection of design tips, tutorials, downloads and tricks [online]. 2010 [cit. 2011-04-03]. How To Design An Effective Web Form. Dostupné na internete: http://resourcesmix.info/how-to-design-an-effective-web-form/.

i) RHIND, Graham . Need Better Data? Pay More Attention to Your Web
Forms. UXmatters [online]. 2010, [cit. 2011-02-19]. Dostupné na WWW: http://www.uxmatters.com/mt/archives/2010/12/need-better-data-pay-more-attention-to-your-web-forms.php.

j) WROBLEWSKi, Luke . Web Application Form Design. [online]. 2005,
[cit. 2011-02-19]. Dostupný z WWW: http://www.lukew.com/resources/articles/web_forms.html.

Zasielajte mi nové články na e-mail: Odoslať

Ďalšie články z kategórie Informačná architektúra