Inmatningsfält

Inmatningsfält (Input field) används för att användaren ska kunna fylla i text när det inte finns färdiga alternativ att välja mellan.

Visuella exempel

Riktlinjer

  • Alla inmatningsfält ska ha en synlig etikett.
  • Skriv korta och tydliga etiketter. Det ska vara enkelt för användaren att förstå vilken information som fältet ska fyllas med.
  • Etiketten ska vara vänsterjusterad.
  • Är det möjligt ska vi tillåta inmatning i olika format.
  • Visa vilket format som ska användas i de fall det krävs, användaren ska inte behöva gissa vilket format som gäller.
  • Placeholder kan användas, men gör inte användaren beroende av placeholder-informationen, då texten inte längre visas när användaren börjat fylla i fältet.
  • En beskrivande text som är placerad mellan etikett och inmatningsfält kan användas när det finns behov av att förtydliga för användaren vilken information som ska fyllas i.
  • Inmatningsfält och etikett ska vara kopplade så att ett klick på etikett aktiverar fältet.
  • Inmatningsfält som är aktiverat ska markeras visuellt och markören ska visas i fältet.
  • Det ska vara tydligt för användaren om det är obligatoriskt eller frivilligt att fylla i inmatningsfältet, se Obligatoriska fält.

Bra att tänka på

  • Anpassa storleken på inmatningsfältet för att passa för ett normalt svar i sammanhanget. Men ta samtidigt hänsyn till helheten, så att inte formuläret upplevs som rörigt.
  • Fundera på ordningsföljden och grupperingen av inmatningsfält, så att den följer största möjliga logik för användaren.
  • Är det möjligt att förpopulera inmatningsfält med information ska vi göra det.
  • Validering görs direkt när användaren lämnar inmatningsfältet.
  • Ett meddelande om felet presenteras i text under inmatningsfältet, tillsammans med en ikon och inmatningsfältet färgmarkeras i rött.
  • Tänk på att formulera felmeddelandet kort och koncist. Användaren ska förstå vad som gick fel och vad som behöver göras för att rätta till felet. Var konsekvent i formuleringarna.
  • Rensa inte informationen i fältet vid validering.
  • Inmatningsfält kan också validera bekräftande. En text presenteras tillsammans med en ikon under inmatningsfältet, som färgmarkeras i grönt. Används främst för då datat i fältet hämtar information i ett annat system eller liknande.