Användarvänliga formulär; 6 tips!

2012-10-29

Under den senaste tiden har jag lagt märke till allt för många sidor som har svåra eller rent ut sagt dåliga formulär. Med frasen ”dåliga formulär” menar jag inte att man måste fylla i känslig information eller tjänsten på sidan inte är värt tiden man måste lägga på formuläret. Nej, jag syftar på användarupplevelsen där det kan vara svårt att förstå var och hur man skall fylla in sin information.

Jag har därför samlat några konkreta tips som jag tycker ni alltid skall ha med i bakhuvudet när ni skapar eller designar formulär.

1. Visa vad som händer

Det är mycket enerverande när man befinner sig på en sida väntandes utan att få reda på om man väntar förgäves. Det kan exempelvis vara när man fyllt i och skickat in ett formulär och när man klickar på ”Skicka in” utan att det händer något. Många av dessa fall slutar med att man stänger, uppdaterar eller stoppar förfrågan. Med tanke på att alla besökare är olika med olika smärt-trösklar så är det bättre att vara övertydlig.

Ett billigt och relativt enkelt sätt att hålla användarna glada och nöjda i situationer likt denna är att implementera något som visualiserar att servern arbetar. Det räcker med en liten bild som presenteras eller att ”Skicka in” knappen blir inaktiverad.

2. Validera och presentera felen

Att validera sina formulär är något man får lära sig i ett väldigt tidigt om man studerat webbutveckling och om du inte gör det eller om du vet med dig att du skippat det för att spara tid. Ni måste börja validera och förstå hur viktigt det är att användaren får veta vad denne gör för fel.

Alla användare förstår inte alltid vad de gjort för fel när de fyllt i ett formulär, därför kan det vara en god ide att berätta för användaren vad du måste göra för att korrigera felet.

3. Minska risken för felformaterad information

Man kan tro att denna punkt negligerar den tidigare punkten. För om du kan få användaren att förstå vad och hur de skall fylla i sin information i formuläret så kommer de inte få ett valideringsfel presenterat för sig. Men så är det inte.

När man hjälper användaren med formateringen av informationen så undviker man inte bara användaren från att trilla tillbaka vid valideringsfel. Man gör också så användarna inte behöver tänka på hur de skall mata in information och att inte behöva tänka är något som uppskattas!

När kan behöva hjälpa användaren? Vad kan man göra för att minska risken för felformaterad information?

Ett klockrent fall när man eventuellt måste hjälpa användaren är vid ett datumfält. Det finns många sätt att mata in datum på och när det endast finns ett textfält för datumet så kan det vara lagom förvirrande. Min rekommendation är att titta på JQuery UI biblioteket som tillhandahåller en funktion som gör om ett helt vanligt textfält till ett ”datumfält”. Funktionen heter ”datepicker” och har goda möjligheter att anpassas.

Det finns en hel del fler fall det det kan behövas hjälp med formatering så som vid telefonnummer, webbadresser med mera.

4. Smarta standardval

Förvalda alternativ kan vara en bra sak att implementera i sina formulär om man vet ungefär vilken målgrupp man försöker nå. Dock måste man vara medveten om att den del av användare som faktiskt inte lägger mycket möda på formuläret utan bara klickar sig förbi kommer ha angett standard alternativet. I deras fall hade det varit bättre att de fångades av en validator (punkt 2) som faktiskt tvingar dem till att ange något.

Innan man tänker på att ”vara snäll” mot sina användare genom att sätta smarta standard val måste man ställa sig frågan ”Finns där något klockrent standardval för detta fält?”

5. Underlätta ifyllnad

Ett väl-designat och väl-kodat formulär skall inte bara vara lätt att förstå utan det skall också vara lätt att fylla i. Det kan exempelvis vara en sån liten sak som att man skall kunna klicka på texten vid en ”checkbox” för att klicka på boxen. Använd ”label” elementet med andra ord.

När användaren först överblickar formuläret så skall denne förstå vad som är viktigt och vilka delar som är relaterade till varandra. Detta kan man som utvecklare genomföra genom att ställa sig följande frågor:

  • Är storeken på objektet vettigt för dess betydelse?
  • Finns där tillräckligt avstånd mellan formulär-fälten så de inte blandas ihop?
  • Kan man gruppera vissa formulär-fält för att betona deras sammanhållning?
Men precis som allt här i livet så skall allt tas i måttliga mängder och det gäller även denna frågeställning.

6. Hjälp och dokumentation

Det värsta man kan göra som designer eller programmerare är att anta att användarna kommer förstå det man implementerar. Detta är ingen perfekt värld och alla ser på saker olika därför är det viktigt att vara tydlig i sina formulär. Kanske till och med övertydlig.

Hjälp och dokumentation kan komma i olika former. Det kan exempelvis vara så simpelt som en ljusgrå text i text-fältet som suddas bort när användaren fokuserar i fältet. Ibland räcker inte detta utan man får ta till med en ikon som presenterar en informativ ”tooltip” när musen vilar över.

Frågan ni måste ställa er efter ni har implementerat något som förklarar eller hjälper användarna är: ”Kommer detta störa de användarna som inte behöver hjälp?”.

Sammanfattning

Var medvetna att alla nämnda punkter ovan inte alltid kan appliceras i alla situationer. Men se till att alltid ha haft de i bakhuvudet så ni inte missar den gången det verkligen behövs.

Det bästa sättet att lokalisera var och om formulären behövs förbättras är genom att inspektera när en faktisk användare faktiskt får testa era formulär. Få dem att berätta vad de tänker när de testar så kommer ni få god insikt i vilka delar av formuläret som behövs förbättras.

Taggar: , ,

I wrote this!

The name is Dennis Sangmo!

Jag har ett brinnande intresse av att utveckla webbapplikationer och gör detta både professionellt och på min fritid. En stor del av den tiden jag inte spenderar till att utveckla brukar jag lägga på att läsa på och hålla mig uppdaterad i utvecklings-sfären på internet.

Under det senaste året har jag ökat mitt intresse för att designa användarvänliga applikationer och allt som hör till att öka den positiva upplevelsen hos en besökare eller användare.