Ha egy űrlap dátumot kér, és a látogatóid feladják a kitöltést, dátummező-problémád van. Egyszerűen hangzik. Válassz egy dátumot. Írj be egy időpontot. De azok az apró tervezési döntések, hogyan kéred ezeket az adatokat, meglepően sok űrlap-lemorzsolódásért felelnek.
A dátum- és időmezők a tervező szemszögéből egyszerűnek tűnnek. A kihívás az, hogy a látogatók másképp használják őket attól függően, milyen dátumot keresnek, milyen eszközt használnak, és hónapokon kell-e végiggörgetniük, vagy számokat gépelhetnek. Ha jól tervezed meg a mezőt, az emberek súrlódás nélkül haladnak végig az űrlapodon. Ha rosszul, még a próbálkozás előtt feladják.
Miért számítanak a dátum- és időmezők az űrlap kitöltési arányánál
A dátummezők döntési pontok. Egy foglalási űrlapot kitöltő látogatónak ki kell választania egy időpont dátumát. Aki egy eseményre regisztrál, annak meg kell adnia a születési évét. Aki ismétlődő rendelést állít be, annak ki kell választania egy kezdődátumot. Mindegyik esetben az az egyetlen mező interakciós költsége eldöntheti, hogy befejezik-e, vagy elmennek.
Vegyük az időpontfoglalást. A kutatások szerint a dátumválasztók jól működnek, amikor a látogatók a közeli jövőben választanak dátumot. Ugyanez a dátumválasztó frusztrálóvá válik, amikor a látogató a születési dátumát tölti ki, és 40 évet kell visszagörgetnie. Az interakciós modell, amely a jövő hónaphoz könnyűnek érződik, 1985-höz rossznak tűnik.
Az időmezők hasonló problémát okoznak. Egy látogatónak, aki du. 2:30-ra szeretne időpontot kérni, nem kellene külön legördülő listákon végigkoppintania az órákat, a perceket és a de./du. jelölést. Az, ahogy ezeket a mezőket felépíted, közvetlenül befolyásolja, hogy valaki lefoglalja-e az időpontot, vagy bezárja a böngészőt.
Szövegbevitel vagy dátumválasztó: a megfelelő interakció kiválasztása
A szövegbeviteli mező és a naptáras dátumválasztó közötti választás nem egyetemes. Attól függ, milyen típusú dátumot kérsz.
Használj szövegbeviteli dobozokat a távoli múltbeli vagy jövőbeli dátumokhoz
Amikor valaki megadja a születési dátumát, olyan dátumot keres, amely 30, 40 vagy 50 évvel ezelőtt van. A naptáras dátumválasztóban emiatt több tucat hónapon kell végigkattintania. Három külön szövegdoboz, Nap, Hónap és Év felirattal jobban működik. A látogató gyorsan gépel az egyes mezőkbe, és automatikusan lép át az egyikről a másikra. Nyolc-tíz leütés, és kész. Ugyanehhez egy dátumválasztó sokkal több koppintást vagy kattintást igényel.
Ha egyetlen szövegdobozt használsz három külön helyett, mutasd világosan a várt formátumot egy olyan címkével, mint "ÉÉÉÉ.HH.NN" vagy "NN/HH/ÉÉÉÉ", a régiódtól függően. Ne használj olyan helyőrzőt, amely eltűnik, amikor a felhasználó rákattint. A címke látható marad, és megmondja, mit szeretnél.
Használj dátumválasztót a közeli jövőbeli dátumokhoz
A naptáras dátumválasztónak van értelme, amikor valaki jövő hétre foglal időpontot, vagy jövő hónapra utazási dátumot választ. A választó alapból az aktuális hónapot mutatja, és rákattintanak vagy rákoppintanak a kívánt dátumra. A vizuális naptármetafora illeszkedik ahhoz, ahogy az emberek már gondolkodnak az ütemezésről.
A kulcsszabály: jövőbeli dátumoknál a naptár alapértelmezetten az aktuális hónapot mutassa. Ne kényszerítsd őket, hogy hónapokon kattintsanak végig a megfelelő megtalálásához. És ha vannak nem elérhető dátumok, mutasd közvetlenül a választóban, melyek azok. A szürkített vagy letiltott dátumok megelőzik a frusztrációt, amikor valaki kiválaszt egy dátumot, és a beküldés után "nem elérhető" hibát lát.
A dátumválasztó legjobb gyakorlatai: hogyan működjön jól a látogatóidnak
A dátumválasztó csak annyira hasznos, amennyire a látogatók használni tudják. A fontos szabályok:
Támogasd a kézi szövegbevitelt a választó mellett
Nem mindenki akarja a naptár felületét használni. Egyes látogatók inkább közvetlenül gépelik a dátumot. Mindig engedélyezd a billentyűzetes bevitelt. Ha valaki beírja, hogy "2026.03.15.", fogadd el anélkül, hogy a választóba kényszerítenéd. Ne követelj meg különleges karaktereket. Fogadd el egyformán a "2026-03-15" és a "2026 03 15" formát. A rugalmas formázás megszünteti a súrlódást.
Használj HTML5 beviteli típusokat mobilon
A mobil eszközökbe az operációs rendszer beépített dátum- és időválasztóját építették. Használd a type="date" vagy a type="time" értéket a HTML űrlapmezőben. Egyes telefonokon ez az operációs rendszer dátumkerekét hívja elő. Másokon a platform saját dátumválasztóját mutatja. A látogatók ezt az interakciót várják a telefonjukon, és a natív választó mobilra van optimalizálva.
Korlátozd a dátumtartományt a végtelen görgetés elkerülésére
Ha jövőbeli dátumot kérsz, korlátozd a választót a következő 2-3 év hónapjaira, ne a következő 50 évre. Ha múltbeli dátumot kérsz, állíts be ésszerű kiindulópontot. A "születési dátumnál" alapértelmezetten 30 vagy 50 évvel ezelőttre állítsd, ne 100 évvel ezelőttre.
Mutass kontextust a nem elérhető dátumokhoz
Ha egyes dátumok nem választhatók (mert az időpontok már foglaltak, vagy az időjárás megakadályozza a szolgáltatást), jelöld meg ezeket a dátumokat másként a választóban. Szürkítsd, tiltsd le, vagy mutass vizuális jelzést. Ez megelőzi a zsákutcát, amikor valaki kiválaszt egy dátumot, aztán hibaüzenetet lát, hogy nem elérhető.
Az időmező tervezése: segíts a látogatóknak kiválasztani a megfelelő pillanatot
Az időmezőknek megvannak a maguk kihívásai. Az időpontot választó látogatónak nem kellene külön legördülő menükben kiválasztania az órát, a percet és a de./du. jelölést. Kombináld őket okosan.
Kínálj időpontokat 30 perces lépésekben
A legtöbb ütemező rendszernek nincs szüksége percre lebontott részletességre. A harminc perces lépések lefedik az időpontokat, konzultációkat és foglalásokat. Kínálj olyan időket, mint 9:00, 9:30, 10:00 és így tovább. Ez csökkenti az opciók számát a funkcionalitás elvesztése nélkül.
Olyan formátumban mutasd az időt, amelyet a látogatók már használnak
Amerikai közönségnél használj 12 órás formátumot AM/PM jelöléssel. Nemzetközi kontextusban vagy műszakalapú ütemezésnél a 24 órás formátumnak lehet értelme. Légy következetes az egész űrlapon. Soha ne válts formátumot egyetlen űrlap közepén.
Válassz ki előre egy alapértelmezett időt, vagy mutasd az aktuális időt
Egy időmező soha ne legyen teljesen üres. Vagy válassz ki előre egy gyakori időpontot (például 10:00), vagy mutasd az aktuális időt. Ez kiindulópontot ad a látogatóknak, és megmutatja, milyen formátumot vársz.
Mobilos szempontok a dátum- és időmezőknél
A mobil űrlapoknak más korlátai vannak, mint az asztaliaknak. A hely korlátozott. Az érintési célpontoknak nagyobbnak kell lenniük. A billentyűzet a képernyő felét takarja.
Használj natív mobilos választókat, ha lehetséges
A HTML5 dátum- és időbeviteli mezők mobilon az operációs rendszer választóját hívják elő. Ez gyorsabb és ismerősebb a felhasználóknak, mint egy általad tervezett egyedi választó. Az operációs rendszerek dátumválasztói már mobilos interakcióra vannak optimalizálva.
Tedd elég naggyá az érintési célpontokat a koppintáshoz
Ha egyedi választót építesz, gondoskodj róla, hogy a gombok és a dátumok legalább 44 x 44 pixelesek legyenek. A kis naptárnégyzetek, amelyek asztali gépen rendben vannak, telefonon lehetetlenné válnak a koppintáshoz.
Kerüld az automatikus beküldést
Ne küldd be automatikusan az űrlapot, és ne ugorj a következő mezőre abban a pillanatban, hogy egy dátumot kiválasztanak. Hagyd, hogy a látogatók megerősítsék a választásukat, és maguk lépjenek tovább. Az automatikus beküldés rossz dátumba vagy időpontba csapdázhatja a felhasználókat, és frusztrálhatja őket.
Hibaüzenetek és validálás: a felhasználók a megfelelő dátum felé terelése
Még jó tervezés mellett is előfordul, hogy a látogatók érvénytelen dátumot választanak. A visszautazás dátumát az indulás előttire adják meg. Olyan dátumot választanak, amely már foglalt. Tévedésből beírják, hogy "13/45". A hibakezelésed határozza meg, hogy kijavítják-e a problémát, vagy feladják az űrlapot.
Validálj valós időben
Ne várd meg, amíg az űrlapot beküldik, hogy megmondd a látogatóknak, hogy a dátumuk rossz. Validálj gépelés vagy választás közben. Ha valaki a visszautazás dátumát az indulás előttire választja, mondd meg neki azonnal. Ha egy dátum nem elérhető, tudasd azonnal, hogy választhasson másikat.
Írj olyan hibaüzeneteket, amelyek elmagyarázzák, mi ment félre
A rossz hibaüzenet azt mondja: "Érvénytelen dátum". A hasznos hibaüzenet azt: "Kérjük, a dátumot ÉÉÉÉ.HH.NN formátumban add meg" vagy "Ez a dátum nem elérhető. Kérjük, válassz másikat."
Nevezd meg a konkrét problémát, és javasolj megoldást. A hibaüzeneted nem büntetés. Hasznos útmutatás.
Előzd meg a logikailag lehetetlen választásokat
Ha indulási és visszautazási dátumot kérsz, tiltsd le azokat a visszautazási dátumokat, amelyek az indulási dátum kiválasztása előtt esnek. Ha időpontot kérsz, tiltsd le azokat a dátumokat, amelyek már teljesen foglaltak. Tedd elérhetetlenné a lehetetlen választásokat, ahelyett, hogy a látogatókat választatnád, majd elutasítanád.
Valós minták: mi működik a különböző felhasználási esetekben
A legjobb dátummező-tervezés az adott űrlaptípusodtól függ. Íme a gyakori minták.
Foglalási és időpontfoglaló űrlapok
Használj naptáras dátumválasztót. Alapértelmezetten az aktuális vagy a következő elérhető hónapot mutasd. Mutasd a nem elérhető dátumokat. Fogadd el a kézi dátumbevitelt tartaléknak.
Születési dátum mezők
Használj három szövegbeviteli dobozt (Nap, Hónap, Év) vagy egyetlen szövegmezőt rugalmas formázással. Kerüld a dátumválasztókat, mert a dátum annyira messze van a múltban, hogy a választó nehézkessé válik.
Ismétlődő rendelések vagy előfizetések kezdődátuma
Használj egyszerű dátumválasztót, amely alapértelmezetten a következő elérhető dátumra áll. A legtöbb látogató elfogadja az alapértelmezést, vagy a következő hónapon belüli dátumot választ.
Eseményidőpont kiválasztása
Ha az eseményednek rögzített dátuma van, de a látogatók időpontot választanak, használj egyszerű időválasztót 30 perces vagy egyórás lépésekkel. Mutasd, mely időpontok szabadok, és melyek betelt.