Så ska ett inloggningsformulär se ut

Trots att inloggningsformulär har funnits i över tio år verkar det fortfarande finnas företag som har problem att utforma dem. Eller så tycker de att de gör smarta lösningar med egna påhitt. Oavsett vilket ställer det till problem, och jag ska belysa några av de problem som kan uppstå genom tre exempel.

Binero vecklar in det enkla

Det första gäller webbhotellet Binero som har ett tämligen invecklat inloggningsformulär.

Förutom de sedvanliga fälten för användarnamn (i det här fallet kundnummer) och lösenord, så får man även välja om man vill spara användarnamnet, både användarnamnet och lösenordet eller inget av dem.

Dessa tre val är ett typiskt resultat av att överarbeta och lösa ett simpelt problem genom att ge användaren en massa alternativ. Det räcker med en enda knapp. ”Kom ihåg mig”. Vi är vana vid att se den och den fyller en mycket viktig funktion, på ett enkelt sätt.

Om man sparar användarnamn och lösenord i formulärfältet, i klartext, är det ju värre än om de ligger i en cookie där de kan ligga krypterat. Således finns det en mängd brister med detta tillvägagångssätt. I Bineros fall lyckas heller inte cookien fastna på min dator, så man tvingas ändå skriva in uppgifterna gång efter annan.

Nationalencyklopedin får brottas med Firefox

Omgjorda Nationalencyklopedin har även de gjort om sin webbplats. Inloggningsformuläret är inget undantag.

Här har vi ett annat problem, de har valt att göra rutorna till inloggningsformuläret i svart, och lägga etiketten för respektive ruta (det vill säga användarnamn och lösenord) innuti rutan med grå text. Kontrasten blir alldeles för liten och gör det svårt att läsa.

Dessutom är det alltid ett problem med att skriva etiketter i själva rutorna. Dels eftersom texten ibland inte tas bort när man sätter markören i rutan, och dels ibland för att texten faktiskt tas bort, men också tar bort användarnamnet man just skrivit in när man flyttar textmarkören genom att klicka i rutan.

En till sak är värt att nämna, som däremot endast framkommer när man använder webbplatsen, och det är att inloggningsrutan lägger sig som ett eget lager över sidan. Då döljs bakgrunden med lägre opacitet så att man lägger all fokus på inloggningen. Det är bra och smidigt, men introducerar ett nytt problem. Webbläsaren Firefox, som jag använder, frågar inte om jag vill spara lösenordet när jag trycker på Logga in. På grund av det överliggande lagret så tappar jag denna funktion, vilket är väldigt retligt. Speciellt eftersom inte heller Nationalencyklopedin vill hålla mig inloggad mer än ett par timmar, innan jag tvingas logga in igen. När man använder lexikon och uppslagsverk flera gånger dagligen höjer det irritationen.

Enkel och välfungerande inloggning på komplett.se

Sist, men inte minst, har vi nätbutiken Komplett. De lyckas göra en inloggningsruta som fungerar utomordentligt.

Det som gör den här rutan bra är dess enkelhet. Användarnamn och lösenord skrivs in, tryck på logga in och lösenordet sparas av Firefox utan problem.

Här har vi däremot ingen Kom ihåg mig-ruta, men jag bedömer det inte nödvändigt på en nätbutik av detta slag. Det är endast när man behöver lägga en order som inloggningen är oundviklig. Däremot skulle det inte skada, utan skulle höja användarvänligheten ytterligare. Speciellt om det är så att frakten måste räknas ut beroende på var du bor – då skulle ”Kom ihåg mig” sannerligen behövas.

Nackdelen med Kompletts lösning är däremot att man måste klicka på en länk för att komma till inloggningssidan. Den borde vara synlig direkt på startsidan. Binero har samma problem, men har en egen lösning som ligger i ett eget lager precis som Nationalencyklopedin, och den fungerar lika illa.

Fyra tips för dina inloggningsformulär

  • Gör det enkelt, det räcker med användarnamn och lösenord plus en logga in-knapp.
  • ”Kom ihåg mig” är det enklaste sättet att låta en cookie spara sessionen. Om du inte vill äventyra användarens säkerhet (på grund av att datorn står på ett bibliotek) eller liknande, bör du inte erbjuda denna funktion alls.
  • ”Glömt lösenordet?” är en bra funktion och du behöver inte beskriva den mer än så. Vi har vant oss vid den.
  • Kontrollera att webbläsarna kan spara användarnamnet och lösenordet utan problem.
  • Lägg inloggningsformuläret på en plats som är väl synlig.
Gillade du artikeln?
Få senaste artiklarna direkt i din inkorg. Jag skickar aldrig spam.
I agree to have my personal information transfered to MailChimp ( more information )