10 pravidiel pre tvorbu užívateľsky príjemných webových formulárov

Ilustrácia webových formulárov na iMacu a tablete

Napriek vývoju interakcie človek - počítač stále zostávajú formy pre používateľov jedným z najdôležitejších typov interakcie. Ľudia, ktorí používajú vašu aplikáciu alebo web, majú konkrétny cieľ a jedna vec, ktorá stojí medzi používateľom a jeho cieľom, je často forma. Každý deň ich používame na svoje základné aktivity - na dokončenie nákupu, na prihlásenie do sociálnych sietí, na poskytnutie spätnej väzby k produktu, ktorý sme kúpili, a ďalšie - sú obrovskou súčasťou užívateľská skúsenosť .

Vo výsledku je pre nás veľmi dôležité, aby sme boli schopní vyplniť online formuláre rýchlo a bez zmätkov. Čím menej úsilia musíme vynaložiť, tým sme šťastnejší. Ako dizajnéri a vývojári by sme sa mali snažiť vytvárať rýchlejšie, ľahšie a produktívnejšie zážitky z formy pre našich používateľov.

V druhom z mojich dvoch článkov venovaných skúmaniu, ako vytvárať lepšie formy ( tu nájdete prvý ), tu je mojich 10 tipov na navrhovanie formulárov, ktoré sú užívateľsky príjemné. Nie celkom to, čo hľadáte? Možno budete potrebovať našich sprievodcov na začiatok tvorca webových stránok alebo cloud-ové úložisko služby.



najlepšia pamäťová karta pre kánon 80d

01. Spýtajte sa iba na to, čo sa vyžaduje

Zníženie množstva požadovaných informácií uľahčuje vyplnenie formulára. Vždy by ste si mali položiť otázku, prečo a ako sa požadované informácie používajú. Snažte sa čo najviac minimalizovať počet polí, pretože každé pole, ktoré pridáte do formulára, ovplyvní jeho konverzný pomer. Obmedzenie počtu otázok a polí spôsobí, že sa formulár menej zaťaží, najmä keď od používateľov požadujete veľa informácií.

02. Zoraďte polia logicky

Screenshot porovnáva dve formy - jednu s poliami v nepárnom poradí, jednu s nadpismi vysvetľujúcimi zoskupenia polí, usporiadané logicky

Myslite na svoju formu ako na rozhovor; chcete zoskupiť a zoradiť polia v poradí, ktoré má pre používateľa zmysel

Je užitočné považovať formu za podobnú rozhovoru. Ako každá bežná konverzácia by mala byť predstavovaná logickou komunikáciou medzi dvoma stranami: osobou a vašou aplikáciou. Podrobnosti by sa mali vyžadovať v poradí, ktoré je logické z pohľadu používateľa, nie z hľadiska aplikácie alebo databázy. Napríklad je nezvyčajné pýtať si pred menom niekoho adresu.

Je tiež veľmi dôležité zoskupiť súvisiace otázky do blokov, takže tok z jednej skupiny otázok na ďalšiu bude lepšie pripomínať konverzáciu. Zoskupovanie súvisiacich polí tiež pomáha používateľom porozumieť informáciám, ktoré musia vyplniť.

Na obrázku vyššie sú príklady dvoch registračných formulárov. Dlhé formuláre môžu byť ohromujúce, ak nezoskupujete súvisiace polia - porovnajte formulár vľavo s vylepšenou verziou vpravo.

Zoskupenie je potrebné vykonať vizuálne aj v kódexe. Môžete napríklad použiť a prvky na priradenie súvisiacich ovládacích prvkov formulára:

Personal Information: First Name Last Name Profession

03. Štítky udržiavajte krátke

Štítky polí informujú používateľov, čo znamenajú príslušné vstupné polia. Vymazať text štítka je jedným z hlavných spôsobov, ako zvýšiť dostupnosť používateľských rozhraní. Štítky informujú používateľa o účelu poľa, ale nie sú pomocnými textami. Preto je prioritou zabezpečenie ich ľahkého skenovania - mali by ste navrhnúť stručné, krátke a popisné štítky (ponechajte ich na slovo alebo dve).

04. Neuplikujte polia

Screenshot porovnáva zlé a dobré formy - zlý požiada používateľov, aby znova napísali svoj e-mail a znova zadali heslo

Nenechajte svojich používateľov, aby zadávali informácie dvakrát, iba ich frustrujete stratou času

Tento problém je obzvlášť bežný pri registračných formulároch: takmer každý sa stretol s formulárom, ktorý vyžaduje, aby ste dvakrát zadali e-mailovú adresu alebo heslo. Historicky to bolo navrhnuté tak, aby sa zabránilo chybám v písaní. Väčšina používateľov však potrebné pole jednoducho skopírovala a prilepila, kedykoľvek to aplikácia povolila. A ak údaje pôvodného poľa obsahovali chybu, boli duplikované.

05. Zvýraznite voliteľné polia

Ideálne je, ak nemáte žiadne voliteľné polia. V súlade s pravidlom číslo 1, ak sa informácia nevyžaduje, nemá zmysel strácať čas používateľa. Ak ich však použijete, mali by ste jasne rozlíšiť, ktoré vstupné polia nemôžu zostať nevyplnené. Zvyčajne stačí malá značka ako hviezdička (*) alebo „voliteľný“ štítok.

06. Pri zlyhaniach buďte opatrní

Nepoužívajte statické predvolené hodnoty, pokiaľ si myslíte, že veľká časť vašich používateľov (napr. 90 percent) túto hodnotu nevyberie - najmä ak je to povinné pole. Prečo? S týmto prístupom pravdepodobne zavediete chyby, pretože ľudia skenujú formuláre rýchlo online. Nepredpokladajte, že si nájdu čas na analýzu všetkých možností. Môžu bezstarostne preskočiť niečím, čo už má svoju hodnotu.

puzdrá pre MacBook Pro 13 palcov

Jedinou výnimkou v tomto bode sú inteligentné predvolené hodnoty - napríklad predvolené krajiny používateľa na základe ich geolokačných údajov -, ktoré umožňujú rýchlejšie a presnejšie vyplnenie formulára. Mali by ste ich však stále používať opatrne, pretože používatelia majú tendenciu ponechávať vopred vybrané polia také, aké sú.

07. Minimalizujte potrebu písania

Písanie je pomalý a náchylný na chyby. Je to obzvlášť bolestivé v prípade mobilných telefónov, kde používatelia čelia obmedzeniam obmedzeného množstva obrazoviek. A s tým, že čoraz viac ľudí používa malé obrazovky, všetko, čo sa dá urobiť, aby sa zabránilo zbytočnému písaniu, zlepší užívateľskú skúsenosť. V prípade potreby môžete pre údaje použiť funkcie ako automatické dopĺňanie a predvyplňovanie, takže používatelia musia zadávať iba nevyhnutné minimum informácií.

Vyplnenie informácií o vašej adrese je často najťažkopádnejšou časťou každého online registračného formulára, a to vďaka viacerým poliam, dlhým menám atď. Ušetrite svojich používateľov pred zadávaním celej svojej adresy implementáciou predvyplnení pre tieto polia. Knižnice ako Mapy Google ponúkajú jednoduché rozhranie API jazyka JavaScript aby sme to dosiahli. Môžeš tu nájdete funkčné riešenie .

ako nakresliť siluetu mačky

08. Použite overenie v reálnom čase

Obrázok zobrazuje dve polia vyplnené zelenými kliešťami vedľa nich, jedno pole vyplnené, ale s červeným x vedľa

V prípade chyby okamžite upozornite používateľov - nenechajte ich čakať, kým nevyplnia celý formulár

V ideálnom svete používatelia vypĺňajú formuláre potrebnými informáciami a dokončia svoju prácu úspešne, v skutočnom svete však ľudia často robia chyby. Je frustrujúce prechádzať procesom vypĺňania celého formulára, len aby ste v mieste podania zistili, že ste urobili chybu.

Správny čas informovať niekoho o úspechu alebo neúspechu údajov, ktoré ste poskytli, je správny čas po ich odoslaní. Tu vstupuje do hry validácia v reálnom čase. Okamžite upozorní používateľov na chyby a umožní im ich rýchlejšie opraviť bez toho, aby museli čakať na stlačenie tlačidla „Odoslať“.

Pamätajte, že validácia by nemala používateľom povedať iba to, čo urobili zle; malo by im to tiež povedať, čo robia dobre. To dáva používateľom väčšiu istotu pri prechádzaní formulárom.

Petržlen je vynikajúca knižnica na overenie formy JavaScriptu. Je otvorený a zameraný na UX, takže môžete prepísať takmer každé predvolené správanie tak, aby vyhovovalo vašim presným potrebám. V nasledujúcom kóde je jednoduchý príklad validácie petržlenu pre pole „Správa“. Pole by malo mať najmenej 20 znakov, ale nie viac ako 100.

Message (20 chars min, 100 max) :

Môžeš kompletnú ukážku kódu nájdete tu .

09. Vyhýbajte sa pevným vstupným formátom

Najbežnejším dôvodom na vynútenie pevného formátu je obmedzenie platnosti validačného skriptu (zadný koniec nedokáže určiť požadovaný formát), čo vo väčšine prípadov predstavuje problém s implementáciou. Namiesto vynucovania formátu niečoho ako telefónneho čísla počas zadávania používateľom by ste mali mať možnosť transformovať čokoľvek, čo používateľ zadá, do formátu, ktorý chcete zobraziť alebo uložiť.

10. Nepoužívajte tlačidlá Reset

Obrázok zobrazuje tlačidlo Resetovať vedľa tlačidla Uložiť pod formulárom a má v ňom červený krížik

ako získať prácu 3d umelca
Nikdy nebolo dobré zahrnúť tlačidlo Reset priamo vedľa možnosti Odoslať

Tlačidlo Reset používateľom takmer nikdy nepomáha. Je ťažké si predstaviť, že by niekto chcel tlačidlo, ktoré zruší všetku ich prácu, nehovoriac o tom, že by chcel, aby toto tlačidlo sedelo vedľa tlačidla, ktoré ju ukladá. Web by bol šťastnejším miestom, keby boli odstránené prakticky všetky tlačidlá Reset.

Chcete vedieť, ako reagujú vaši používatelia na vaše webové stránky? Poriadne web hosting služba vám poskytne potrebné analýzy.

Tento článok sa pôvodne objavil v sieť , časopis pre profesionálnych webových dizajnérov a vývojárov. Prihláste sa na odber tu .

Súvisiace články: