71
by Jak nepokazit finiš ...aneb na formulářích záleží
by
Jak nepokazit finiš...aneb na formulářích záleží
=
Sestavení otázek
ZDROJ: marketingexperiments.com, imagescape.com (PDF)
Vyhoďte zbytečné otázky
Čím více otázek, tím více, lidé lžou.
Méně otázek se vyplatí businessově.
Zbavte se optional otázek
Lidé neřeší required položky, ale vnímají formulář jako celek: cxpartners.co.uk
Jméno sousedky (nepovinné)
...nebo se na ně ptejte po odeslání formuláře
Udělejte si question protocol
1. Můžete odpověď získat jinde?
2. Co přesně s odpovědí plánujete dělat?
3. Jaká je kvalita odpovědí?
4. Opravdu potřebujete odpověď teď?
ZDROJ: uxmatters.com
Seřazujte a seskupujte je dle témat. Tvořte přirozené pauzy.
Pokud je to možné používejte podmíněný input.
Jedna stránka
formulář se skádá z
několika krátkých
témat nebo obsahuje
mnoho otázek, ale
mají společné téma.
Kdy to rozdělit na stránky?
Více stránek
pro velké množství
otázek s několika
různými tématy
U formulářů s několika kroky nebo mnoha otázkami indikujte progres.
Umožněte uložit rozdělanou žádost k dokončení později
Dobrý den,
děkujeme Vám, že chcete využívat naše služby. Kód Vaší rozpracované žádosti je: xxxxx. Pokud jste žádost dosud nedokončili, můžete to udělat na www.airbank.cz. Rozpracovanou žádost najdete v části „Stát se klientem“. Zde stačí kliknout na záložku „Pokračovat v žádosti“ a žádost dokončit.
U velmi složitých formulářů používejte startovací stránku
Layout formuláře
Vyhoďte vše, co není formulářHLAVIČKA
PATIČKA
NAVIGACE
NAVIGACE
REKLAMY,NÁSTROJE
NESLOUŽÍCÍ FORMULÁŘE
Používejte jednosloupcový layout
ZDROJE: baymard.com, cxpartners.co.uk, nngroup.com,
Existují výjimkyJméno Příjmení
Den Měsíc Rok
Hodiny Minuty
Výška Šířka
Hodiny, Minuty
Vyjímky je lepší sloučit.Jméno a příjmení
Den, Měsíc, Rok
Labely
Velká a malá písmena používejte jako ve větách
Dodací adresa > dodací adresa > Dodací Adresa > DODACÍ ADRESA
ZDROJE: uxmatters.com, lukew.com, nngroup.com
Labely ideálně nad inputem
Jméno
V mobilu rozhodně nahoře
Bacha na labely uvnitř
James Newman
Fax number
Označujte optional, ne required
Jméno
Telefon
PSČ
Jméno
Telefon
PSČ
*povinné
*povinné
*povinné
nepovinné
ZDROJE: uxmovement.com, uxmovement.com # 2
Na zadaný e-mail pošleme informaci o případné výhře a vaše soukromí dodržujeme na 100 %. Tak přísaháme.
Nebojte se, vaše data jsou u nás v bezpečí. Rodné číslo potřebujeme, protože je v žádosti vyžadováno zákonem. Jinak by nás nikdy nenapadlo ho chtít :)
Rodné číslo
U složitých nebo citlivých vysvětlete proč je vyplnění pro uživatele užitečné, rozptylte obavy
Můžete jí kdykoliv později změnit
Přezdívka
Inputy
Vyberte správný input.
Žena
Jméno
PohlavíMuž
Požadovaná výbava
Autorádio
Vyhřívaná sedadla
Vodotrysk
Kraj
Počet osob- +2
0 % 100 %
20 % 80 %
PrahaStředočeskýJihomoravskýPardubický
Vyberte správný input.
1. Je přirozenější odpověď napsat než vybrat?2. Je u odpovědí jednoduchý a častý překlep?3. Potřebuje uživatel vidět odpovědi, aby
pochopil otázku?4. Kolik je možných odpovědí?5. Může uživatel vybrat více než jednu?6. Jsou možné odpovědi vizuálně odlišné?
Vyberte správný input.
ZDROJ: Formsthatwork.com (PDF)
Nejčastější je textový input. Zvolte správnou délku.
170 00PSČ
Otázka
OdpověďOtázka
Odpov
ZDROJ: Wikipedia.org
Nezapomeňte na input type.
ZDROJ: Mobileinputtypes.com
Text (/ password) Email Phone number
Number Date (/week, time,..) URL
...bohužel to stále není samozřejmost
Radio buttony a checkboxy by měly být vybratelné celým řádkem
Žena
Pohlaví
Muž
Požadovaná výbava
Vyhřívaná sedadla
7 - 15 možností drop down2 - 6 možností radio button
ZDROJE: Baymard.com, Smashingmagazine.com
Pro rozsáhlý uzavřený výběr použijte našeptávač.
ZDROJ: Smashingmagazine.com
Podpořte alternativyZohledněte řazení
Když nemáte našeptávač, použijte aspoň dobrý default a řazení
Pozor na dlouhé odpovědi v mobilním drop-down menu
Pro výběr škály, kde čekáte nízkou variabilitu odpovědí, použijte stepper
Využívejte nových funkcí mobilních browserů.
Každopádně šetřete inputy.
ZDROJ: Baymard.com
Pořebujete to?1. Je pole absolutně nutné?
Popis2. Je label na inputem? (Ne vevnitř nebo pod ním)
3. Máte označena nepovinná pole?
4. Dali jste pryč zbytečné placeholdery a nápovědy?
Viditelnost5. Je pole dostatečně velké pro většinu možných odpovědí?
6. Je pole viditelné při obou orientacích displeje se zapnutou
klávesnicí?
Vyplňování
7. Máte pro pole nějaké defaults? Jsou k dispozici z databáze,
případně historie uživatele? Nebo často vyplňované odpověd?
8. Můžete použít features a senzory telefonu k vyplnění?
(Foťák, GPS, Mikrofon, Kontakty…)
9. Můžete pole předvyplnit na základě jiných informací?
(např. město na základě PSČ nebo čísla slevového
kupónu)
Psaní10. Podporujete copy & paste?
11. Používáte správný typ klávesnice?
12. Můžete použít našeptávač nebo autocomplete na základě prvních vyplněných písmen?
13. Vypněte autocorrect pro jména, adresy a emaily
14. Chápe váš formulář běžné zkratky a překlepy?
15. Necháváte uživatelům svobodu ve formátu? (např. telefonní číslo, datum, číslo kreditní karty). Zformátovat to můžete za ně...
Checklist pro mobilní zobrazení
ZDROJ: nngroup.com
Akce
Zbavte se sekundárních akcí.
Zaplatit
Když máte více akcí, prioritizujte velikostí, vzdáleností, polohou.
Zaplatit Zrušit
Hlavní akce vlevo je nejčastější, ale je dobré to otestovat.
Save
vs
Cancel Save
Cancel
SaveCancel
vs
ZDROJ: Smashingmagazine.com
Buďte konzistetní v umístění.
+
Vytvořte dojem směřování.
Vyhýbejte se generickým popisům, musí být jasné, co se stane a že je to žádoucí.
Ano Ne
Všechny naše pokoje mají prostor pro přistýlku, ale připravujeme ji pro hosty pouze na přání. Budete chtít přistýlku připravit?
Ne, děkujiChci přistýlku
Všechny naše pokoje mají prostor pro přistýlku, ale připravujeme ji pro hosty pouze na přání. Budete chtít přistýlku připravit?
Naznačte, že se něco děje.
Uložit 32 % complete Hotovo
Nepoužívejte CAPTCHA dokud jste nevyzkoušeli vše ostatní.
ZDROJ: Smashingmagazine.com, Haacked.com, Moz.com
Nenuťte hesla opakovat.
ZDROJE: Uxmovement.com, Formisimo.com
*********************Zadejte heslo
Zopakujte heslo
*********************
Místo toho je dovolte odmaskovat.
ZDROJ: Passwordmasking.com
Maminka1234Zadejte heslo
Ukázat heslo
Nápověda a asistivní funkce
Podporujte autocomplete.
Používejte chytré a personalizované defaults.
MVelikost
S
Praha
Kraj
Počet osob- +2
L XL
+420 775 323 01700420 775 323 017775 323 017775323017775 323017775-323-017775.323.017
Netrvejte na jednom formátu. Buďte velkorysí.
Telefonní číslo
Číslo karty (bez mezer a pomlček)
… a když nejste, ukažte, jaký formát je potřeba.
Opravujte známé chyby
U inputu se jednoznačným formátem automaticky pousunujte na další pole.
Automaticky formátujte inputy do přehledného formátu
Když tušíte, že by chyba mohla nastat u velké části uživatelů, poskytněte inline nápovědu.
Objem motoruObjem motoru najdete v malém tech. průkazu.
Pokud pomoc potřebuje menšina lidí, použijte user triggered help
Objem motoru
Každopádně to nepřehánějte
1. Uživatelům neznámý typ informací
2. Budou přemýšlet, k čemu je potřebujete
3. Budou se bát o soukromí
4. Jsou přesné formáty toho, co vyplnit
Kdy použít nápovědu a vysvětlení
Omyly odhalte včas inline validací umístěnou ideálně pod inputem (mobil) nebo vpravo (desktop). Validační hlášku zobrazujte na lost-focus.
Telefon
Emailfrantaseznam.cz Nespletli jste se? Zadanému
emailu chybí zavináč @.
Když odhalíte chybu, vysvětlete, co se stalo a navrhněte řešení.
Budujte vztah
Základem dobré uživatelské zkušenosti jsou emoce.
1. Minimalizujte bolest
2. Vytyčte jasnou cestu k cíli
3. Uvědomte si kontext
4. Buďte konzistentní
Když už nic jiného...
Testujte, testujte, testujte!
