Hur du designar för ökad läsbarhet

Farouk Mechedal
29 november


Först av allt vill jag poängtera att denna artikel ej kommer att gå in på hur du kodar för bästa läsbarhet. Det finns tonvis med material på nätet om det ämnet. Däremot är det mycket svårare att hitta någon bra guide i hur man förbättrar läsbarheten genom design. Jag kände då att jag måste skriva en egen artikel om det då jag ser allt för många hemsidor lida av dålig läsbarhet.

Vad är läsbarhet och varför spelar det någon roll

Beroende på vem man frågar så kan man få olika svar på vad läsbarhet är för något. För mig är det pedagogi. Att engagera läsaren på ett så friktionsfritt sätt som möjligt. Jämför exempelvis bibeln med en barnbok och fråga dig själv vilken som var lättast att läsa och vilket av de två lektyrerna som tröttade ut dina ögon snabbast. Man kan alltså göra det antingen lättare eller svårare för läsaren att ta till sig det skrivna ordet beroende på hur texten är utformad.

Om du är avsändaren så vill du med största sannolikhet att folk ska ta till sig det du har skrivit. För att uppnå det så finns det olika principer man kan följa. Men låt oss fokusera på grunderna.

Grunderna för läsbarhet

Som designer behöver vi veta vad produkten vi designar ska användas till och hur den används innan vi påbörjar vårt “kreativa” arbete. Att designa för läsbarhet är inget undantag. För att förstå läsbarhet behöver vi först förstå hur vi läser. Det finns många studier kring läsbarhet som gjorts under 1900-talet där forskare har använt sig av olika faktorer för att mäta läsbarheten, t.ex:

  • Uppfattningshastighet
  • Perceptibilitet på avstånd
  • Perceptibilitet i perifert syn
  • Synlighet
  • Reflex blinkteknik
  • Arbetshastighet (läshastighet)
  • Ögonrörelser
  • Trötthet vid läsning


Efter att ha läst några avhandlingar så är det jag kunde hitta nyttigt ur ett designperspektiv detta:

  1. Kapitäler är svårare att läsa
  2. Våra ögon skannar efter ords visuella “rytm”. Genom att använda kapitäler så nullifieras denna rytm och vi blir tvungna till att läsa ett ord bokstav för bokstav.

  3. Justerad text är för tryckt material
  4. Av samma anledning som punkt 1 så upphäver justifierad text den visuella rytmen såväl som läsrytmen eftersom mellanrummet mellan ord blir olika för varje rad. För tryckt material är det mycket enklare att kontrollera avstånd mellan ord och bokstäver. Men på webben så blir detta nästintill en omöjlig uppgift och därför bör detta undvikas till varje pris.

    Nedan ser du ett exempel på hur fel det kan bli.



  5. Bilder för intresse
  6. I Sverige är det 5-8% som har dyslexi. Det är alltså över en halv miljon människor i vårt land som har lässvårigheter. Om vi kan byta ut textväggar mot bilder (t.ex. infografik, produktbilder) så hjälper detta inte enbart dyslektiker men även personer som skannar din sida efter information som är av intresse för just dem.

  7. Listor förenklar
  8. Norman Nielsen Group gjorde en studie som visade att man enbart läser 20-28% på nätet jämfört med om man läser en bok eller tidning. Genom att använda sig av listor så skapar du naturliga ställen där folk kan stoppa sin “scanning” av sidan.

  9. 50-75 tecken per rad
  10. Det finns två utfall för om man inte följer denna regel:

    För långt: Detta gör att det blir svårt att hoppa med ögat från ena raden till den andra för att det är för långt emellan. Säkerligen har du upplevt detta själv när du varit inne på Wikipedia.

    För kort: Gör man raderna alldeles för korta så förstör man rytmen i läsandet genom att tvinga ögat till fler radhopp per minut vilket tröttar ut dig snabbare.

  11. Visuell hierarki
  12. Kanske ett av de mest fruktade sakerna man kan hitta på webben är den ökända textväggen. Hur många gånger har du kommit till en hemsida och funnit en massa text där skribenten tar för givet att du ska vara superintresserad av ämnet redan från start. Det bästa man kan göra är att leda läsaren in i sin text genom en rubrik, ingress och bra underrubriker. Detta gör det samtidigt lättare att förmedla sitt budskap till läsaren då det blir mer pedagogiskt att följa dina tankebanor. För att göra det mer harmoniskt för läsaren så är det viktigt att skapa en visuell hierarki mellan dessa. Som en hjälp på traven så finns det ett verktyg som gör det enkelt för dig att räkna ut teckenstorleken som heter Modular Scale.

    Ladda ner vår mall för bättre läsbarhet

    Känner du dig inspirerad att förbättra din hemsidas läsbarhet efter denna artikel så har vi skapat en Sketch-fil som mall för att kickstarta ditt arbete. Där hittar du bland annat fördefinierade teckensnittsstorlekar, en 12-grid som är baserad på best practice front-end kod och alla möjliga typer av texter (citat, listor m.m.).



    I nästa artikel kommer jag att jämföra 3 matbutiker på nätet (Ica, Coop och MatHem). Hur har dessa designat läsbarheten på sin sida och hur har designen på hemsidan påverkat läsbarheten. Följ oss på Facebook så du får en uppdatering på när artikeln släpps.