Show version

Version created by Åsa Lindström 2017-03-13 11:08

Show < previous | next >
Compare < previous | next >

Formulär och indata-element

Formulär används för att få in data från användaren. Det finns olika typer av input element som har olika användningsområde (se nedan).

Om du är intresserad av bakgrund till ovan Läs mer om riktlinjer för specifika områden/ Formulär

Välj typ av element

Namn Användning
Textfält När indata i form av text krävs
Rullgardin När bara ett val är möjligt och alternativen är mer än ...
Radioknapp När bara ett val är möjligt och alternativen är mindre än ?
Checkbox När flera val är möjliga
Switch För av/ på
Datumväljare

Olika typer

Exempel Formulär

Generella riktlinjer

Se vad av nedan som inte behöver informeras om utan kommer ingå automatiskt i elementen.

Minimera indata

1. Reducera fält

Ta bort fält:

  • där data kan erhållas på annat sätt,
  • vid en senare mer passande tidpunkt, eller
  • helt enkelt utelämnas. för att det inte egentligen verkligen behövs

Eftersom: varje gång du tar bort ett fält eller fråga från ett formulär, ökar chansen att formuläret avslutas och skickas in.
 

2. Skilj på valfria och obligatoriska fält

  • Först eliminera så många valfria fält som möjligt (se ovan).
  • Försök att begränsa formuläret till endast 1 eller 2 valfria fält, och tydligt märk dem som ”Optional”.
  • Om vissa fält verkligen är nödvändiga, men gäller endast en del av användarna, visa det.
     

3. Eliminera godtycklig formatering

Eliminera så mycket som möjligt av godtyckliga formateringsregler genom att vara tillåtande vad gäller indata (se också Återkoppling, Meddela fel).
 

Var tydlig

B Gruppera relaterade fält tillsammans.

 Gruppera relaterade fält tillsammans. Om det lämpar sig, lägg till en rubrik för gruppen.

 Eftersom:

  • Enstaka information är lättare att förstå då de befinner sig i sin kontext.
  • Ett formulär som är grupperat, särskilt för långa formulär, upplevs som mer hanterbart vilket gör det mer sannolikt att formuläret skickas in.

! Visa exempel på gruppering
 

 

7. Förklara särskilda krav på indata eller på formattering.

När du har försökt att elimenera godtyckliga krav på indata (se 3 ovan), ange exakta instruktioner på indata eller på formattering, som t ex format på telefonnummer eller kreditkort.
 

8. Dölj inte grundläggande hjälptext

Exponera grundläggande instruktioner där det är möjligt. För mer omfattande hjälptexter, infoga en i-ikon se ….
 

 11. Håll dig till standard

  • Håll dig till standard både för rubriker på fält (t ex kreditkortsnummer, utgångsdatum, Säkerhetskod) och de val du erbjuder
     

12. Effektivisera imatning

  • Undvik drop-downs när det endast finns 2 eller 3 alternativ. Visa dem istället som radio-knappar (som endast kräver en enda klick).
  • Överväg användningsfrekvens, lista de vanligaste valen först när det är möjligt.
  • (Ha kontextuell sökning i rullgardins om det finns mer än 25? Alternativ)
     

 13. Matcha fält till typen och storleken på data.

  • Textfält bör vara ungefär lika stor som den förväntade ingång

 Eftersom:

  • det är extremt stor risk för att det blir fel när användare inte kan allt som man matat in.
  • Längden på fältet kan hjälpa användaren att förstå format på indata (som tex postnummer)
     

 14. Undvik ”Återställ”

Eftersom: risken för oavsiktlig radering uppväger den osannolika behovet av att "börja om" i ett webbformulär.

I formulär som samlar extremt känslig data såsom finansiell information, ger "Avbryt" knappen en trygghet för de användare som vill radera inmatat information. Men se till att knappen ”Avbryt” är betydligt mindre visuellt framträdande än knappen ”Skicka”, för att undvika oavsiktliga klick.

 

 

 

Feedback News