Hög kundnöjdhet genom väldesignade formulär

Mer och mer surf sker på mobilen och e-handel ökar enormt på mobila enheter. Under 2012 ökade mobil e-handel med 86 % och omsatte ca 180 miljarder kr världen över. Uppskattningar säger att den kommer att omsätta 600 miljarder kr 2016 (källa: www.baymard.com). Väldesignade formulär är en kritisk del av kundupplevelsen och ju mindre skärm desto viktigare. Små skärmar innebär nämligen svårare textinmatning.

Det mest påtagliga exemplet på tydlighet i formulär är det som kallas “The 300 Million Dollar Button”. Designgurun Jared Spool med team förtydligade möjligheten till check-out utan att skapa ett konto. Första året efter förbättringen ökade företagets e-handel med 300 miljoner dollar. Ja, du såg rätt. 300 miljoner dollar.

Placering av ledtexten är en av många viktiga aspekter då man designar formulär. Nedan går jag igenom för- och nackdelar med olika placeringar och visar hur en ny teknik som kallas svävande ledtexter kombinerar två olika sätt att förenkla inmatning. Här placeras ledtexten i fältet tills kunden skriver in den första bokstaven. Då flyttas den upp i toppen av inmatningsfältet och fungerar som en ledtext ovanför utan att ta upp det extra utrymme som en sådan ledtext vanligtvis gör. Och som vi alla vet är utrymme mycket värdefullt på små skärmar.

Nedan följer en översikt över olika placeringar av ledtexten

Ledtext till vänster om inmatingsfältet

Fördel: Ger korta, kompakta formulär som lättare ryms i höjdled.

Nackdel: Kan ge problem vid långa ledtexter eller inmatning som inte ryms i sidled, t.ex. en lång e-postadress som blir svår att verifiera. Se exempel nedan (Flipboard app för iOS)

Ledtext i inmatningsfältet

Fördel Tar inget utrymme alls i höjdled.

Nackdel: Ledtexten försvinner när användaren matar in det första tecknet, vilket kan skapa osäkerhet eftersom kontexten försvinner. Se exemplet nedan (www.linkedin.com) 

Ledtext ovanför inmatningsfältet

Fördel: Tydligt och lättläst. Ögonrörelsestudier visar att denna lösning är lättast att läsa.

Nackdel: Tar mycket utrymme. I höjdled, vilket leder till långa och svåröverskådliga formulär Se exemplet nedan (www.facebook.com) 

Svävande ledtexter 

Fördel: Ledtexten kräver minimalt med utrymme, men ger ändå tydlig information och kontext.

Nackdel: Gränssnittets animation kan möjligtvis upplevas som störande men troligtvis inte då fokus ligger på textinmatningen. Se exemplet nedan (Delectable app för iOS)

Samma designmönster återkommer i samtliga inmatningsfältfält.

Detta är bara en av många saker man kan göra för att förbättra sina mobila inmatningsformulär. Och med tanke på hur viktig denna del är för registrering och konvertering så det kan innebära väldigt mycket större vinst om man lägger lite extra tid på att göra en riktigt bra formulärdesign.