Changes between two versions

Changes in "Formulär" between 2017-03-13 11:05 by Åsa Lindström and 2017-03-13 11:06 by Åsa Lindström.

Show < previous | next > change.

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 

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:¶
* rubriken,
* 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)

Se Återkoppling 

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