Pokud se formulář ptá na datum a vaši návštěvníci ho místo vyplnění vzdají, máte problém s polem pro datum. Zní to jednoduše. Vyberte datum. Napište čas. Malá rozhodnutí v návrhu toho, jak se na tyto údaje ptáte, ale způsobují překvapivě velké opuštění formulářů.
Pole pro datum a čas vypadají z pohledu návrháře přímočaře. Potíž je v tom, že návštěvníci s nimi pracují různě podle toho, jaké datum hledají, jaké zařízení používají a jestli potřebují listovat měsíci, nebo psát čísla. Když pole navrhnete dobře, lidé formulářem projdou bez tření. Když špatně, opustí ho dřív, než to vůbec zkusí.
Proč pole pro datum a čas ovlivňují míru dokončení formuláře
Pole pro datum jsou rozhodovací body. Návštěvník vyplňující rezervační formulář musí vybrat datum schůzky. Někdo, kdo se registruje na akci, musí zadat rok narození. Zákazník, který nastavuje opakovanou objednávku, musí vybrat datum zahájení. V každém případě může cena interakce u tohoto jediného pole rozhodnout o tom, jestli lidé dokončí, nebo odejdou.
Vezměme rezervaci schůzky. Výzkum ukazuje, že výběr data z kalendáře funguje dobře, když návštěvníci vybírají data v blízké budoucnosti. Tentýž kalendář se ale stane zdrojem frustrace, když návštěvník vyplňuje datum narození a potřebuje se vrátit o 40 let. Způsob práce, který působí snadno pro příští měsíc, působí rozbitě pro rok 1985.
Pole pro čas vytvářejí podobný problém. Návštěvník, který chce nastavit schůzku na 2:30 PM, by neměl muset klepat přes rozbalovací seznamy zvlášť pro hodiny, minuty a AM/PM. Způsob, jakým tato pole uspořádáte, přímo ovlivňuje, jestli si někdo schůzku zarezervuje, nebo zavře prohlížeč.
Textová pole, nebo výběr data: volba správného způsobu zadání
Volba mezi textovým polem a kalendářním výběrem data není univerzální. Záleží na tom, na jaký typ data se ptáte.
Pro data hluboko v minulosti nebo daleko v budoucnu použijte textová pole
Když někdo zadává datum narození, hledá datum, které může být před 30, 40 nebo 50 lety. Kalendářní výběr vyžaduje proklikat se desítkami měsíců. Lépe fungují tři samostatná textová pole s popisky Den, Měsíc a Rok. Návštěvník do každého rychle píše a automaticky přechází z jednoho pole do dalšího. Osm až deset stisků kláves a hotovo. Výběr data pro stejnou akci vyžaduje mnohem víc klepnutí nebo kliknutí.
Pokud místo tří samostatných polí použijete jedno textové pole, jasně ukažte očekávaný formát popiskem jako „MM/DD/YYYY“ nebo „DD/MM/YYYY“ podle vašeho regionu. Nepoužívejte zástupný text, který po kliknutí zmizí. Popisek zůstává viditelný a říká lidem, co chcete.
Pro data v blízké budoucnosti použijte výběr data
Kalendářní výběr data dává smysl, když si někdo rezervuje schůzku na příští týden nebo vybírá datum cesty na příští měsíc. Výběr ve výchozím stavu ukazuje aktuální měsíc a lidé kliknou nebo klepnou na datum, které chtějí. Vizuální metafora kalendáře odpovídá tomu, jak už lidé o plánování přemýšlejí.
Hlavní pravidlo: u budoucích dat nastavte kalendář výchozně na aktuální měsíc. Nenuťte lidi proklikávat měsíce, aby našli ten správný. A pokud některá data nejsou dostupná, ukažte nedostupná data přímo ve výběru. Zašedlá nebo vypnutá data předcházejí frustraci z výběru data, u kterého se po odeslání objeví chyba „nedostupné“.
Osvědčené postupy pro výběr data: jak ho přizpůsobit návštěvníkům
Výběr data je užitečný jen tak, jak snadno s ním návštěvníci mohou pracovat. Pravidla, na kterých záleží:
Vedle výběru podporujte ruční zadání textu
Ne každý chce používat kalendář. Někteří návštěvníci raději píší datum přímo. Vždy povolte zadání z klávesnice. Pokud někdo napíše „3/15/2026“, přijměte to a nenuťte ho používat výběr. Nevyžadujte speciální znaky. Přijměte stejně „3-15-2026“ i „3 15 2026“. Flexibilní formát odstraňuje tření.
Na mobilu používejte typy polí HTML5
Mobilní zařízení mají nativní výběr data a času zabudovaný v operačním systému. Použijte type="date" nebo type="time" ve svém poli formuláře HTML. Na iPhonu se tím spustí kolečko pro datum iOS. Na Androidu se zobrazí výběr data platformy. Návštěvníci tuto interakci na telefonu čekají a nativní výběr je pro mobil optimalizovaný.
Omezte rozsah dat, aby nebylo nekonečné posouvání
Pokud se ptáte na budoucí datum, omezte výběr na měsíce v následujících 2 až 3 letech, ne v následujících 50. Pokud se ptáte na historické datum, nastavte rozumný výchozí bod. U „data narození“ nastavte výchozí hodnotu na 30 nebo 50 let zpátky, ne na 100 let.
Ukažte souvislosti u nedostupných dat
Pokud některá data nelze vybrat (protože ty termíny jsou už obsazené nebo kvůli počasí nelze službu poskytnout), označte je ve výběru jinak. Zašedněte je, vypněte je nebo ukažte vizuální indikátor. Tím předejdete slepé uličce, kdy někdo vybere datum a pak uvidí chybovou hlášku, že není dostupné.
Návrh polí pro čas: pomozte návštěvníkům vybrat správný okamžik
Pole pro čas mají vlastní výzvy. Návštěvník vybírající čas schůzky by neměl muset vybírat hodiny, minuty a AM/PM v samostatných rozbalovacích seznamech. Spojte je chytře.
Nabídněte čas po 30 minutách
Většina rezervačních systémů nepotřebuje přesnost na minutu. Třicetiminutové kroky pokryjí schůzky, konzultace a rezervace. Nabídněte časy jako 9:00 AM, 9:30 AM, 10:00 AM a tak dále. Tím snížíte počet možností a nepřijdete o funkčnost.
Zobrazujte čas ve formátu, který už návštěvníci používají
Pro americké publikum použijte 12hodinový formát s AM/PM. Pro mezinárodní kontext nebo plánování po směnách může dávat smysl 24hodinový formát. Buďte konzistentní v celém formuláři. Nikdy nepřepínejte mezi formáty uprostřed jednoho formuláře.
Předvyberte výchozí čas nebo ukažte aktuální čas
Pole pro čas by nikdy nemělo být úplně prázdné. Buď předvyberte běžný čas schůzky (třeba 10:00 AM), nebo ukažte aktuální čas. Návštěvníci tak mají výchozí bod a vidí, jaký formát čekáte.
Mobilní zařízení u polí pro datum a čas
Mobilní formuláře mají jiná omezení než počítač. Místa je málo. Dotykové plochy musí být větší. Klávesnice zakrývá půl obrazovky.
Pokud to jde, používejte nativní mobilní výběr
Pole HTML5 pro datum a čas spouštějí na mobilu výběr operačního systému. Je rychlejší a uživatelům známější než vlastní výběr, který si navrhnete sami. Kolečko pro datum v iOS a výběr data v Androidu jsou pro mobilní interakci už optimalizované.
Udělejte dotykové plochy dost velké pro klepnutí
Pokud tvoříte vlastní výběr, zajistěte, aby tlačítka a data měla alespoň 44 krát 44 pixelů. Malá kalendářní políčka, která na počítači fungují dobře, se na telefonu stávají nemožná k trefení.
Vyhněte se automatickému odeslání
Formulář neodesílejte automaticky ani nepřeskakujte na další pole ve chvíli, kdy je datum vybráno. Nechte návštěvníky, ať svou volbu potvrdí a posunou se dál sami. Automatické odeslání může uživatele uvěznit v nesprávném datu nebo čase a frustrovat je.
Chybové hlášky a validace: vedení uživatelů ke správnému datu
I při dobrém návrhu někdy návštěvníci vyberou neplatná data. Zadají datum návratu před datem odjezdu. Vyberou datum, které je už obsazené. Omylem napíší „13/45“. Vaše zpracování chyb rozhoduje o tom, jestli problém opraví, nebo formulář opustí.
Validujte v reálném čase
Nečekejte s upozorněním, že je datum špatně, až na odeslání formuláře. Validujte při psaní nebo výběru. Pokud někdo vybere datum návratu před datem odjezdu, řekněte mu to hned. Pokud je datum nedostupné, dejte to najevo hned, aby mohl vybrat jiné.
Pište chybové hlášky, které vysvětlí, co se pokazilo
Špatná hláška říká „Neplatné datum“. Užitečná hláška říká „Zadejte datum ve formátu MM/DD/YYYY“ nebo „Toto datum není dostupné. Vyberte prosím jiné.“
Pojmenujte konkrétní problém a navrhněte řešení. Chybová hláška není trest. Je to užitečné vedení.
Předcházejte logicky nemožným výběrům
Pokud se ptáte na datum odjezdu a datum návratu, vypněte data návratu, která padají před vybrané datum odjezdu. Pokud se ptáte na schůzku, vypněte data, která jsou už plně obsazená. Nemožné výběry udělejte nedostupnými, místo abyste nechali návštěvníky vybrat a pak jejich volbu odmítli.
Vzory z praxe: co funguje pro různé případy použití
Nejlepší návrh pole pro datum závisí na typu vašeho formuláře. Zde jsou běžné vzory.
Rezervační formuláře a formuláře schůzek
Použijte kalendářní výběr data. Výchozí nastavte na aktuální měsíc nebo nejbližší dostupný měsíc. Ukažte nedostupná data. Ruční zadání data přijměte jako záložní možnost.
Pole pro datum narození
Použijte tři textová pole (Den, Měsíc, Rok) nebo jedno textové pole s flexibilním formátem. Vyhněte se výběru data, protože datum je tak hluboko v minulosti, že je výběr nepraktický.
Datum zahájení opakovaných objednávek nebo předplatného
Použijte jednoduchý výběr data s výchozí hodnotou na nejbližší dostupné datum. Většina návštěvníků přijme výchozí hodnotu nebo vybere datum během příštího měsíce.
Výběr času akce
Pokud má vaše akce pevné datum, ale návštěvníci vybírají časový úsek, použijte jednoduchý výběr času po 30 minutách nebo po hodině. Ukažte, které termíny jsou volné a které plné.