Nielsen Norman Group přišli v článku „Date-Input Form Fields: UX Design Guidelines“ se stručnými tipy, jak z pohledu uživatelského vylepšit vstup data.

Vybral jsem pro vás ty nejzajímavější:

  1. Hlašte chyby způsobem, který pomáhá. Například „Chybný formát data“ nepomůže. „Datum prosím vložte ve formátu den. měsíc. rok.“ je už lepší.
  2. Odstraňte nelogické volby data. Například data narození před 130 lety a o podobně.
  3. Zachovejte práci uživatelů. Pokud udělá chybu a vy mu ještě vymažete formulář, asi vám uteče. Uživatelský vstup dejte třeba do uložiště prohlížeče.
  4. Snažte se vyhnout rozbalovacím nabídkám (<select>). Obzvlášť, pokud je dělíte na tři pro měsíc, den a rok. Pro uživatele to je fakt hodně zbytečných kroků.
  5. Pokud má uživatel jen omezený počet možností pro výběr datumu, vypište jen je a žádné jiné.
  6. Nevyžadujte, aby uživatelé museli vkládat speciální znaky. Například lomítka nebo pomlčky v mezinárodních formátech.

V článku pak kromě toho najdete i pomoc s výběrem s pravného návrhového vzoru.

Související:

  • O nativním vstupu data (<input type="date">) technicky píše JeČas.cz.
  • Firefox konečně ohlásil blížící se podporu nativního vstupu data (Can I Use). Takže jediný aktuální prohlížeč, který to nebude umět je desktopové Safari. To má ale na trhu v Česku jen malinký podíl.
  • Peter-Paul Koch v článku „Making input type=date complicated“ situaci s nativním vstupem data shrnuje a podivuje se, proč ho ještě webaři běžně nepoužívají. Zároveň přiznává, že s ním problémy jsou. Já si ale myslím, že přišel čas to zase začít zkoušet.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategoriích HTML, Netechnické.

Picture, nová značka pro vkládání obrázků

21. 6. 2017 v příručce

Aktualiace textu o novém tagu, umožňujícím definování variant obrázku pro různé stavy v responzivním webdesignu.

BEM: Pojmenovávací konvence pro třídy v CSS

5. 6. 2017 v příručce

Block, Element, Modifier. Nově přepsaný článek o metodice pro pojmenovávání tříd v komponentách.

Vydal jsem nový e-book: „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací