Problem med webbformulär

tisdag den 7 oktober 2008 fem kommentarer

Har du någon gång frågad dig själv "Hur gör jag det här lättare för användaren"? Om inte, är det istället dags att fråga dig vad du gör i branschen som webbutvecklare.

Hur kan jag göra det här lättare för användaren?

Precis som när vi skriver för webben, gäller det att alltid kommunicera med användaren på ett så effektivt och enkelt sätt som möjligt.

Komplicerade och långa formulär är för många en mardröm. Det stora problemet med formulär på webben är att användaren själv måste mata in information eller göra val. Gör valen färre, tydligare och enklare!

Skulle det inte vara underbart om användare aldrig mer behövde fylla i webbformulär? Tyvärr är vi inte där ännu, därför är det upp till dig att göra det lekande lätt för alla dina användare.

När du skapar ett formulär, beskriv då hur inmatad information kommer användas på din webbplats eller vilket mervärde det ger användaren. Genom detta kan användaren själv välja om denne vill delge information på en gång, eller eventuellt vid ett senare tillfälle.

Vanliga misstag i formulär på webben

  • Avsaknad av LABEL för en checkbox (kryssruta) eller radiobutton (radioknapp). Dessa objekt är ofta ganska små och kan vara svåra att träffa med ett enda klick. Använd elementet LABEL för att omsluta checkboxen och den beskrivande texten intill, vilket gör de båda klickbara. Detta ökar träffsäkerheten samt tillgängligheten.
  • Otydliga inmatningsfält gör många användare osäkra. Markera inmatningsfält med en textstorlek som tydligt skiljer texten i formuläret från annan text på din webbplats.
  • Att inte använda färger gör sällan någon lycklig. Om en text eller etikett är färgad röd betyder det att denna vill ha din uppmärksamhet. Glöm inte att kommunicera med färger i dina formulär.
  • Namnge inmatningsfält med NAME-attributet enligt standard för att ge användare ifyllnadsstöd.
  • Håll dig till ämnet och utsätt inte användaren för onödiga frågor. Begränsa ditt formulär till det absolut viktigaste. Att exempelvis fråga vilket kön en användare tillhör är i många fall helt irrelevant och ger inget mervärde för användaren.
  • Tvinga inte användare att ladda upp en profilbild av en viss storlek, då detta skapar problem för många. Att skala om en bild är ett exempel på en process som enkelt kan (och ska) göras på serversidan.
  • Upprepa e-postadresser är ett bra sätt för att minska risken för fel i e-postadresser. Men om din användare ändå måste verifiera sin adress är dubbelinmatning överflödigt.
  • Det är lätt att vara otydlig men också lätt att använda de verktyg som finns för att korrekt markera de olika delarna i formuläret: Vilken information måste anges (*), och i vilket format (ÅÅMMDD)?
  • JavaScript ska inte vara ett krav för att använda formuläret och skicka iväg informationen. Det går idag att göra mycket med AJAX-tekniker men glöm inte bort användarna som inte har JavaScript aktiverat.
  • Ingen eller dålig vägledning vid inmatningsfel. Användaren bör vid fel automatiskt flyttas eller vägledas till aktuell del i formuläret.
  • Informationen försvinner ofta när användare mottar ett felmeddelande då hela formuläret laddas om. Då krävs att all (eller delar av) information måste matas in på nytt. Detta skapar frustration som effektivt skrämmer bort dina användare.
  • För kreativa formulär är aldrig bra. Vi har en normalbild av hur formulär på webben ser ut. Håll dig till den bilden och få dina användare att känna sig trygga.

Jag är själv skyldig till några av dessa misstag, men de kommer åtgärdas framöver. Du behöver inte rätta alla dina misstag, men gör inte om dem.

Vad är din erfarenhet av formulär på webben?


Jag hoppas du gillade inlägget!

Facebook Delicious RSS Du kan prenumerera på alla inlägg via RSS, e-post eller genom att följa mig på Bloggy.


Kommentarer

Gravatar

Emma sa..

tisdag den 7 oktober 2008

Kikade in här och vill bara lämna lite fotspår efter mig :)

Gravatar

Andreas Eriksson sa..

tisdag den 7 oktober 2008

Mycket bra punkter du tagit upp. Det jag själv stör mig själv på är när inte LABEL tillämpas, själv tycker jag att man borde använda label på samtliga formulärkontroller.

Att även se till att använda tabindex så att man enkelt kan tabba igenom formuläret på ett bra sätt är viktigt enligt mig.

Bra post

Gravatar

Lars Karlsson sa..

fredag den 27 februari 2009

Det är en bra genomgång, som jag kommer att använda mig av framöver. Men du glömmer två viktiga saker som jag vill ta upp:

Ge textfält enhetliga namn så att användaren får ifyllnadsstöd (vl24 punkt 3.5.8)

Innebär att om alla som skapar formulär ger dem samma namn kommer användaren alltid att ha sitt namn, sin mailadress och andra uppgifter redo att hämtas (vanligtvis med klick, eller pil ner i fältet).

Såvitt jag förstår är det name-elementet som bör standardiseras.

Om du kollar i Vägledningen på eutveckling.se (sök formulär) finns det en del att komplettera med.

Gravatar

Erik Pettersson sa..

fredag den 27 februari 2009

@lars: Jättebra tips! Jag har uppdaterat inlägget med en punkt om just NAME-attributet samt en länk till sidan du nämnde.

Gravatar

ashed7pd4mh sa..

torsdag den 27 oktober 2016

[url=http://elocon.us.com/]elocon cream[/url] [url=http://retin-a.us.com/]retin-a[/url]


RSS Lämna en kommentar du också!

Namn: *

E-postadress: (alternativ för att visa din Gravatar)

Webbplats: (självklart får du en länk utan nofollow)

Kommentar: * (ej HTML)