Om ett formulär ber om ett datum och dina besökare ger upp i stället för att fylla i det har du ett problem med datumfältet. Det låter enkelt. Välj ett datum. Skriv en tid. Men små designval i hur du ber om de uppgifterna står för förvånansvärt många avhopp.
Datum- och tidsfält ser enkla ut ur en designers perspektiv. Utmaningen är att besökare använder dem olika beroende på vilket datum de söker, vilken enhet de använder och om de behöver scrolla genom månader eller skriva siffror. Får du fältets design rätt rör sig folk genom formuläret utan friktion. Får du den fel överger de det innan de ens försöker.
Därför spelar datum- och tidsfält roll för hur många som fyller i formuläret
Datumfält är beslutspunkter. En besökare som fyller i ett bokningsformulär behöver välja ett mötesdatum. Någon som anmäler sig till ett evenemang behöver ange sitt födelseår. En kund som ställer in en återkommande beställning behöver välja ett startdatum. I varje fall kan interaktionskostnaden för just det fältet avgöra om hen blir klar eller lämnar.
Ta tidsbokning. Forskning visar att datumväljare fungerar bra när besökare väljer datum i närmaste framtid. Samma datumväljare blir en frustration när en besökare fyller i sitt födelsedatum och måste scrolla tillbaka 40 år. Interaktionsmodellen som känns enkel för nästa månad känns trasig för 1985.
Tidsfält skapar ett liknande problem. En besökare som vill boka en tid klockan 14:30 ska inte behöva trycka sig igenom rullgardinslistor för timmar, minuter och AM/PM var för sig. Hur du strukturerar de fälten påverkar direkt om någon bokar tiden eller stänger webbläsaren.
Textfält eller datumväljare: välj rätt interaktion
Valet mellan ett textfält och en kalenderbaserad datumväljare är inte universellt. Det beror på vilken sorts datum du frågar efter.
Använd textrutor för datum långt bak eller fram i tiden
När någon anger sitt födelsedatum söker hen ett datum som kan ligga 30, 40 eller 50 år tillbaka. En kalenderväljare kräver att hen klickar genom dussintals månader för att komma dit. Tre separata textrutor med etiketterna Dag, Månad och År fungerar bättre. Besökaren skriver snabbt i varje fält och flyttas automatiskt från en ruta till nästa. Åtta till tio tangenttryck och hen är klar. En datumväljare för samma handling kräver många fler tryck eller klick.
Om du använder en enda textruta i stället för tre separata, visa tydligt det förväntade formatet med en etikett som "MM/DD/ÅÅÅÅ" eller "DD/MM/ÅÅÅÅ" beroende på region. Använd inte en platshållare som försvinner när användaren klickar. En etikett förblir synlig och talar om vad du vill ha.
Använd datumväljare för datum i närmaste framtid
En kalenderväljare passar när någon bokar en tid nästa vecka eller väljer ett resedatum nästa månad. Väljaren visar den aktuella månaden som standard, och hen klickar eller trycker på datumet hen vill ha. Kalendermetaforen stämmer med hur folk redan tänker kring planering.
Huvudregeln: låt kalendern visa den aktuella månaden som standard för framtida datum. Låt dem inte klicka sig genom månader för att hitta rätt. Och om datum inte är tillgängliga, visa vilka datum som inte är tillgängliga direkt i väljaren. Gråade eller inaktiverade datum förebygger frustrationen i att välja ett datum och sedan se ett felmeddelande om att det inte är tillgängligt efter inskick.
Bästa praxis för datumväljare: få dem att fungera för dina besökare
En datumväljare är bara så användbar som besökare kan använda den. Regler som spelar roll:
Stöd manuell textinmatning vid sidan av väljaren
Alla vill inte använda kalendergränssnittet. Vissa besökare föredrar att skriva datumet direkt. Tillåt alltid inmatning med tangentbord. Om någon skriver "3/15/2026", acceptera det utan att tvinga hen in i väljaren. Kräv inga specialtecken. Acceptera "3-15-2026" eller "3 15 2026" lika. Flexibel formatering tar bort friktion.
Använd HTML5-fälttyper på mobilen
Mobila enheter har inbyggda datum- och tidsväljare i operativsystemet. Använd type="date" eller type="time" i ditt HTML-formulärfält. På iOS visas datumhjulet. På Android visas plattformens datumväljare. Besökare förväntar sig den interaktionen på sin telefon, och den inbyggda väljaren är optimerad för mobil användning.
Begränsa datumintervallet för att undvika oändlig scrollning
Om du frågar efter ett framtida datum, begränsa väljaren till månaderna de närmaste 2 till 3 åren, inte de närmaste 50 åren. Om du frågar efter ett historiskt datum, sätt en rimlig startpunkt. För "födelsedatum", börja 30 eller 50 år bakåt, inte 100 år bakåt.
Visa sammanhang för otillgängliga datum
Om vissa datum inte går att välja (för att tiderna redan är bokade eller för att väder hindrar tjänsten), markera de datumen annorlunda i väljaren. Gråa ut dem, inaktivera dem eller visa en visuell markering. Det förhindrar återvändsgränden där någon väljer ett datum och sedan ser ett felmeddelande om att det inte är tillgängligt.
Utformning av tidsfält: hjälp besökare välja rätt tidpunkt
Tidsfält har egna utmaningar. En besökare som väljer en mötestid ska inte behöva välja timmar, minuter och AM/PM i separata rullgardinslistor. Kombinera dem på ett smart sätt.
Erbjud tider i steg om 30 minuter
De flesta bokningssystem behöver inte detaljnivå ner på minuten. Steg om trettio minuter täcker möten, konsultationer och reservationer. Erbjud tider som 9:00 AM, 9:30 AM, 10:00 AM och så vidare. Det minskar antalet alternativ utan att förlora funktion.
Visa tid i ett format som besökare redan använder
För amerikanska målgrupper, använd 12-timmarsformat med AM/PM. I internationella sammanhang eller vid skiftbaserad planering kan 24-timmarsformat vara rimligt. Var konsekvent genom hela formuläret. Byt aldrig format mitt i ett formulär.
Förvälj en standardtid eller visa aktuell tid
Ett tidsfält ska aldrig vara helt tomt. Förvälj antingen en vanlig mötestid (som 10:00 AM) eller visa aktuell tid. Det ger besökare en startpunkt och visar vilket format du förväntar dig.
Mobilaspekter för datum- och tidsfält
Mobilformulär har andra begränsningar än datorformulär. Utrymmet är begränsat. Tryckytor behöver vara större. Tangentbord täcker halva skärmen.
Använd inbyggda mobilväljare när det går
HTML5-fälttyper för datum och tid visar operativsystemets väljare på mobilen. Det går snabbare och är mer välbekant för användare än en egen väljare du själv utformat. Datumhjulet i iOS och datumväljaren i Android är redan optimerade för mobil interaktion.
Gör tryckytorna tillräckligt stora
Om du bygger en egen väljare, se till att knappar och datum är minst 44 gånger 44 pixlar. Små kalenderrutor som fungerar bra på datorn blir omöjliga att trycka på på en telefon.
Undvik automatiskt inskick
Skicka inte formuläret automatiskt och hoppa inte till nästa fält i samma stund som ett datum väljs. Låt besökare bekräfta sitt val och gå vidare i egen takt. Automatiskt inskick kan fånga användare i fel datum eller tid och frustrera dem.
Felmeddelanden och validering: led användare till rätt datum
Även med bra design väljer besökare ibland ogiltiga datum. De anger ett returdatum före avresedatumet. De väljer ett datum som redan är bokat. De skriver "13/45" av misstag. Din felhantering avgör om de rättar problemet eller överger formuläret.
Validera i realtid
Vänta inte tills formuläret skickas för att tala om för besökare att deras datum är fel. Validera medan de skriver eller väljer. Om någon väljer ett returdatum före sitt avresedatum, tala om det direkt. Om ett datum inte är tillgängligt, låt dem veta med en gång så att de kan välja ett annat.
Skriv felmeddelanden som förklarar vad som blev fel
Ett dåligt fel säger "Ogiltigt datum". Ett hjälpsamt fel säger "Ange ett datum i formatet MM/DD/ÅÅÅÅ" eller "Det datumet är inte tillgängligt. Välj ett annat."
Namnge det specifika problemet och föreslå lösningen. Ditt felmeddelande är inget straff. Det är hjälpsam vägledning.
Förhindra logiskt omöjliga val
Om du frågar efter ett avresedatum och ett returdatum, inaktivera returdatum som ligger före det valda avresedatumet. Om du frågar efter en bokning, inaktivera datum som redan är fullbokade. Gör omöjliga val otillgängliga i stället för att be besökare välja och sedan avvisa dem.
Mönster från verkligheten: vad som fungerar i olika användningsfall
Den bästa utformningen av datumfält beror på din specifika formulärtyp. Här är vanliga mönster.
Boknings- och mötesformulär
Använd en kalenderbaserad datumväljare. Visa som standard den aktuella månaden eller nästa lediga månad. Visa otillgängliga datum. Acceptera manuell datuminmatning som reserv.
Fält för födelsedatum
Använd tre textrutor (Dag, Månad, År) eller ett enda textfält med flexibel formatering. Undvik datumväljare eftersom datumet ligger så långt bak i tiden att väljaren blir otymplig.
Startdatum för återkommande beställningar eller prenumerationer
Använd en enkel datumväljare med nästa lediga datum som standard. De flesta besökare accepterar standardvärdet eller väljer ett datum inom nästa månad.
Val av tid för evenemang
Om ditt evenemang har ett fast datum men besökare väljer en tid, använd en enkel tidsväljare med steg om 30 minuter eller en timme. Visa vilka tider som är lediga och vilka som är fullbokade.