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

E-mail

Telefon

PSČ

Jméno

E-mail

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

E-mail

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.

vratislav.kopp@gmail.comE-mail

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!

díky & těším

Vratislav KoppManaging Directorvratislav.kopp@bistrox.cz+420 775 323 017

se na feedback

We are