Jimi Knightley » Lär dig göra bättre formulär – eyetrackingundersökning

Lär dig göra bättre formulär – eyetrackingundersökning

formimageAtt designa formulär till webbsidor är inte precis den första sidan man väljer att formge. Och det är inte heller besökarens högsta önskan att fylla formulären. Men formulär är kriteriet för att allt ska gå runt, en väldigt viktig del av din sida som oftast handlar om nya kunder, nya prenumeranter eller befintliga kunder som ska handla av dig. Inga formulär, inga kunder, inga köp.

Det finns många olika sätt att designa ett formulär och vissa är bättre än andra. Det jag främst tänkte visa upp i denna artikeln är förhållandet mellan den beskrivande texten sk label som hör till varje ruta och själva rutan.

En bra eyetrackingstudie jag hittat visar tydliga resultat för hur lätt eller svårt besökaren tar sig igenom formulär beroende på layout av labels och rutor. Detta är resultaten i korthet:

Vänsterjusterad text och vänsterjusterade rutor
Denna layout tvingade besökare att dubbelkolla label vs fält fler gånger och resulterade i ett formulär som tog längre tid att slutföra än nödvändigt.

Högerjusterad text och vänsterjusterade rutor
Denna layout minskade ögonfixeringar och resulterade i en halvering av tid för formuläruppgiften.

Vänsterjusterad text ovanför vänsterjusterade rutor
Denna uppställning visade sig vara den mest effektiva eftersom besökaren kunde uppfatta både label och ruta på samma gång utan att behöva tveka över vad som tillhörde vad.

Andra lärorika resultat
Att använda fetad text i labels med motiveringen att dom syns bättre håller inte, resultatet visar tydligt att det istället gjorde texten mer svårläst. I testet användes även en drop-down-ruta och vad man kan se så är detta formulärelement en stark blickfångare.

Ursprungsartikel av Matteo Penzo, undersökning av Magda Giacintucci.
Läs hela artikeln här.

Svara