Show version

Version created by Åsa Lindström 2017-01-25 11:52

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

Formulär

Riktlinjer formulär

Exempel Formulär
 

Minimera indata

1. Ta bort fält som kan

  • erhållas på annat sätt,
  • vid en senare mer passande tidpunkt, eller
  • helt enkelt utelämnas.

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. Elimenera godtycklig formattering

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

Var tydlig

4. Gruppera fält

(A Alla fält ska ha en beskrivande rubrik placerad nära det fält den hör till

Eftersom: användaren behöver tydligt uppfatta vilken rubrik som hör till vilket fält så att vet vilken data som ska mata in i vilket fält.

)

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
 

5. Placera rubriken ovanför fältet

 Placera rubriken ovanför fältet i stället för bredvid till vänster.

 Eftersom:

  • det gör formuläret lättare att scanna då man kan se rubrik och fält samtidigt.
    • En rubrik placerad till vänster om fältet som är a. högercentrerad nära fältet gör det svårare att scanna formuläret och en vänsterjusterad rubrik gör att rubriken kommer för långt från fältet vilket gör det svårare att se vart rubriken hör.
  • det möjliggör länge rubriker
  • Det blir mobilanpassat
     

 6. Undvik text i fält

 Undvik text inuti fälten som:

  1. rubriken,
  2. instruktioner (”placeholder text”)

 Eftersom:

  • Texten försvinner när man skriver, och man behöver memorera den.
  • Vilket blir särskilt besvärligt då du tabbar dig igenom ett formulär.
  • Rubrik och instruktioner behövs då användare vill läsa igenom sina svar.
  • Rubrik och instruktioner behövs även då man vill behöver förstå när ett fel har uppstått..
  • Användare dras till tomma fält
  • Användare kan tro att texten i fältet är ett default-svar och gå ignorera fältet.
  • Den grå färgen som används till ”Placeholder text” är inte tillgänglig då den har för låg kontrast.

 

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 ….
 

(9. Ge synliga och specifika felmeddelanden.

  • Fel bör signaleras genom en rad olika ledtrådar, inte enbart genom färg:
    • beskriv fältet och använda röd text, en tyngre teckensnitt,

Eftersom: extremt viktigt att användarna inte förbise denna viktiga information. Nu är inte tid att vara subtil)
 

Gör interaktionen enklare och effektivare

10. Ha en enda kolumn

Ha en kolumn i stället för två eller flera.

 Eftersom:

  • användaren får ett vertikalt flöde och behöver inte visuellt omorientera sig.

 Undantag från denna regel:

  • korta och/ eller logiskt relaterade områden såsom stad, stat och postnummer kan presenteras på samma rad.
     

 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