Hvis en formular beder om en dato, og dine besøgende giver op i stedet for at udfylde den, har du et problem med datofeltet. Det lyder enkelt. Vælg en dato. Skriv et tidspunkt. Men små designvalg i, hvordan du spørger om de oplysninger, står for overraskende meget af frafaldet i formularer.
Dato- og tidsfelter ser ligetil ud fra en designers synsvinkel. Udfordringen er, at besøgende bruger dem forskelligt, alt efter hvilken dato de leder efter, hvilken enhed de bruger, og om de skal rulle gennem måneder eller skrive tal. Får du feltdesignet rigtigt, glider folk gennem din formular uden gnidning. Får du det forkert, dropper de ud, før de overhovedet prøver.
Derfor betyder dato- og tidsfelter noget for din formulars udfyldelsesrate
Datofelter er beslutningspunkter. En besøgende, der udfylder en bookingformular, skal vælge en dato til aftalen. Nogen, der tilmelder sig et arrangement, skal skrive deres fødselsår. En kunde, der opsætter en tilbagevendende bestilling, skal vælge en startdato. I hvert tilfælde kan prisen for interaktionen med det ene felt afgøre, om de bliver færdige eller går.
Tag aftalebooking. Forskning viser, at datovælgere virker godt, når besøgende vælger datoer i den nære fremtid. Den samme datovælger bliver en frustration, når en besøgende udfylder sin fødselsdato og skal rulle 40 år tilbage. Den interaktionsmodel, der føles let til næste måned, føles ødelagt til 1985.
Tidsfelter skaber et lignende problem. En besøgende, der vil sætte en aftale til 14:30, skal ikke trykke sig gennem dropdownlister til timer, minutter og AM/PM hver for sig. Måden, du opbygger felterne på, påvirker direkte, om nogen booker aftalen eller lukker browseren.
Tekstfelter eller datovælgere: vælg den rigtige interaktion
Valget mellem et tekstfelt og en kalenderbaseret datovælger gælder ikke altid. Det afhænger af, hvilken slags dato du spørger om.
Brug tekstfelter til datoer langt tilbage eller langt frem i tiden
Når nogen skriver deres fødselsdato, leder de efter en dato, der kan være 30, 40 eller 50 år tilbage. En kalenderbaseret datovælger kræver, at de klikker gennem snesevis af måneder for at nå dertil. Tre separate tekstbokse med labelsene Dag, Måned og År virker bedre. Den besøgende skriver hurtigt i hver boks og flytter automatisk fra den ene til den næste. Otte til ti tastetryk, og de er færdige. En datovælger til den samme handling kræver mange flere tryk eller klik.
Hvis du bruger én tekstboks i stedet for tre separate, så vis tydeligt det forventede format med en label som "MM/DD/ÅÅÅÅ" eller "DD/MM/ÅÅÅÅ" alt efter din region. Brug ikke en pladsholder, der forsvinder, når brugeren klikker. En label forbliver synlig og fortæller dem, hvad du vil have.
Brug datovælgere til datoer i den nære fremtid
En kalenderbaseret datovælger giver mening, når nogen booker en aftale i næste uge eller vælger en rejsedato i næste måned. Vælgeren viser som standard den aktuelle måned, og de klikker eller trykker på den dato, de vil have. Kalendermetaforen passer til, hvordan folk allerede tænker på planlægning.
Hovedreglen: Lad kalenderen som standard vise den aktuelle måned for fremtidige datoer. Få dem ikke til at klikke gennem måneder for at finde den rigtige. Og hvis datoer ikke er ledige, så vis, hvilke datoer der er utilgængelige, direkte i vælgeren. Nedtonede eller deaktiverede datoer forhindrer frustrationen ved at vælge en dato og så se en "ikke ledig"-fejl efter afsendelsen.
Bedste praksis for datovælgere: få dem til at virke for dine besøgende
En datovælger er kun så nyttig som den måde, besøgende kan bruge den på. Regler, der tæller:
Understøt manuel tekstindtastning ved siden af vælgeren
Ikke alle vil bruge kalendergrænsefladen. Nogle besøgende foretrækker at skrive datoen direkte. Tillad altid indtastning med tastatur. Hvis nogen skriver "15/3/2026", så accepter det uden at tvinge dem ind i vælgeren. Kræv ikke særlige tegn. Accepter "15-3-2026" eller "15 3 2026" lige så godt. Fleksibel formatering fjerner gnidning.
Brug HTML5-inputtyper på mobil
Mobile enheder har indbyggede dato- og tidsvælgere i operativsystemet. Brug type="date" eller type="time" i dit HTML-formularfelt. På mange telefoner udløser det operativsystemets eget datohjul. På Android viser det platformens datovælger. Besøgende forventer den interaktion på deres telefon, og den indbyggede vælger er optimeret til mobil.
Begræns datointervallet, så der ikke er endeløs rulning
Hvis du spørger om en fremtidig dato, så begræns vælgeren til at vise måneder de næste 2-3 år, ikke de næste 50 år. Hvis du spørger om en dato i fortiden, så sæt et rimeligt startpunkt. Til "fødselsdato" skal standarden være 30 eller 50 år tilbage, ikke 100 år tilbage.
Vis sammenhængen for utilgængelige datoer
Hvis nogle datoer ikke kan vælges (fordi tidspunkterne allerede er booket, eller vejret forhindrer ydelsen), så marker dem anderledes i vælgeren. Tone dem ned, deaktiver dem eller vis en visuel markering. Det forhindrer blindgyden, hvor nogen vælger en dato og så ser en fejlbesked om, at den ikke er ledig.
Design af tidsfelter: hjælp besøgende med at vælge det rigtige tidspunkt
Tidsfelter har deres egne udfordringer. En besøgende, der vælger et tidspunkt til en aftale, skal ikke vælge timer, minutter og AM/PM i separate dropdowns. Kombiner dem på en smart måde.
Tilbyd tid i trin på 30 minutter
De fleste planlægningssystemer har ikke brug for detaljer ned på minuttet. Trin på 30 minutter dækker aftaler, konsultationer og reservationer. Tilbyd tidspunkter som 9:00, 9:30, 10:00 og så videre. Det mindsker antallet af muligheder uden at miste funktionalitet.
Vis tid i et format, besøgende allerede bruger
Til amerikanske målgrupper skal du bruge 12-timersformat med AM/PM. I internationale sammenhænge eller ved vagtbaseret planlægning kan 24-timersformat give mening. Vær ensartet i hele din formular. Skift aldrig mellem formater midt i én formular.
Forvælg et standardtidspunkt, eller vis det aktuelle tidspunkt
Et tidsfelt bør aldrig være helt tomt. Forvælg enten et almindeligt aftaletidspunkt (som 10:00) eller vis det aktuelle tidspunkt. Det giver besøgende et udgangspunkt og viser dem, hvilket format du forventer.
Hensyn til mobil i dato- og tidsfelter
Mobilformularer har andre begrænsninger end computer. Pladsen er begrænset. Trykfladerne skal være større. Tastaturer dækker halvdelen af skærmen.
Brug indbyggede mobilvælgere, når det er muligt
HTML5-input til dato og tid udløser operativsystemets vælger på mobil. Det er hurtigere og mere velkendt for brugerne end en egen vælger, du designer selv. Operativsystemernes datohjul og datovælgere er allerede optimeret til mobil interaktion.
Gør trykfladerne store nok til at trykke på
Hvis du bygger en egen vælger, så sørg for, at knapper og datoer er mindst 44 gange 44 pixel. Små kalenderfelter, der fungerer fint på computer, bliver umulige at ramme på en telefon.
Undgå automatisk afsendelse
Send ikke automatisk formularen og hop ikke til næste felt i det øjeblik, en dato er valgt. Lad besøgende bekræfte deres valg og gå videre i deres eget tempo. Automatisk afsendelse kan fange brugere i den forkerte dato eller tid og frustrere dem.
Fejlbeskeder og validering: guid brugerne til den rigtige dato
Selv med godt design vælger besøgende nogle gange ugyldige datoer. De skriver en returdato før afrejsedatoen. De vælger en dato, der allerede er booket. De skriver "13/45" ved en fejl. Din fejlhåndtering afgør, om de retter problemet eller dropper formularen.
Valider i realtid
Vent ikke, til formularen er sendt, med at fortælle besøgende, at deres dato er forkert. Valider, mens de skriver eller vælger. Hvis nogen vælger en returdato før deres afrejsedato, så fortæl dem det med det samme. Hvis en dato er utilgængelig, så lad dem det vide straks, så de kan vælge en anden.
Skriv fejlbeskeder, der forklarer, hvad der gik galt
En dårlig fejl siger "Ugyldig dato". En hjælpsom fejl siger "Skriv en dato i formatet DD/MM/ÅÅÅÅ" eller "Den dato er ikke ledig. Vælg en anden."
Navngiv det konkrete problem, og foreslå løsningen. Din fejlbesked er ikke en straf. Den er hjælpsom vejledning.
Forhindr logisk umulige valg
Hvis du spørger om en afrejsedato og en returdato, så deaktiver returdatoer, der ligger før den valgte afrejsedato. Hvis du spørger om en aftale, så deaktiver datoer, der allerede er helt booket. Gør umulige valg utilgængelige i stedet for at bede besøgende vælge og så afvise dem.
Mønstre fra virkeligheden: hvad der virker i forskellige situationer
Det bedste design af datofeltet afhænger af din bestemte formulartype. Her er almindelige mønstre.
Booking- og aftaleformularer
Brug en kalenderbaseret datovælger. Lad den som standard vise den aktuelle måned eller næste ledige måned. Vis utilgængelige datoer. Accepter manuel indtastning af dato som reserve.
Fødselsdatofelter
Brug tre tekstbokse (Dag, Måned, År) eller ét tekstfelt med fleksibel formatering. Undgå datovælgere, fordi datoen ligger så langt tilbage, at vælgeren bliver uhåndterlig.
Startdato for tilbagevendende bestillinger eller abonnementer
Brug en enkel datovælger, der som standard viser den næste ledige dato. De fleste besøgende accepterer standarden eller vælger en dato inden for den næste måned.
Valg af tidspunkt til arrangement
Hvis dit arrangement har en fast dato, men besøgende vælger et tidsrum, så brug en enkel tidsvælger med trin på 30 minutter eller en time. Vis, hvilke tidsrum der er ledige, og hvilke der er fyldt.