Visuell hierarki — varför ögat hittar rätt eller inte.
Hur får jag besökaren att titta på rätt sak först?
Genom att göra en sak tydligt viktigast och resten tydligt mindre viktiga. Sex verktyg styr ordningen ögat läser i: storlek, kontrast, position, tomrum, gruppering och avvikelse. Det vanligaste felet är att lita enbart på storlek — större rubriker på allt — när tomrum och kontrast oftast gör jobbet bättre. Snabbtestet: kisa mot sidan tills den blir suddig och se vad som fortfarande syns.
När någon öppnar din sida läser de den inte. De skannar den, i en ordning du antingen har bestämt eller lämnat åt slumpen. Nielsen Norman Group har följt det med ögonspårning i decennier — F-mönstret är vad som händer när sidan inte ger ögat något att hålla sig i.
Visuell hierarki är namnet på den ordningen. Här är verktygen som styr den.
De sex verktygen
| Verktyg | Vad det gör | Vanligaste felet |
|---|---|---|
| Storlek | Stort läses först | Överanvänds — allt blir stort, inget sticker ut |
| Kontrast | Mörkt mot ljust drar blicken | Dämpad text på dämpad bakgrund |
| Position | Överst och till vänster läses tidigast | Det viktigaste ligger under vikningen |
| Tomrum | Isolerat upplevs som viktigt | Fylls med “något som passar där” |
| Gruppering | Det som ligger nära hör ihop | Rubriken närmare stycket ovanför än sitt eget |
| Avvikelse | Det som bryter mönstret minns | Fem avvikelser, alltså ingen |
De två i mitten är de underskattade. Tomrum och gruppering gör mer för läsbarheten än ännu en storleksnivå.
Tomrum är inte tomt
Det mest kontraintuitiva i listan: att ta bort saker runt ett element gör elementet viktigare.
Praktiskt betyder det att vägen till en tydligare sida oftast går genom att ta bort, inte lägga till. En sida med tre budskap och gott om luft slår en med sju budskap där alla skriker.
Närhetsprincipen: avstånd betyder tillhörighet
Element som ligger nära varandra uppfattas som besläktade — oavsett vad du menade. Det ger det vanligaste och lättast fixade layoutfelet på webben:
En rubrik ska ligga närmare sin egen text än föregående stycke. Ligger avståndet lika åt båda hållen svävar rubriken och läsaren måste tänka efter var ett avsnitt börjar.
Samma sak gäller formulär: etiketten hör till sitt fält, inte till fältet ovanför. Sätt större marginal mellan fältgrupper än inuti dem.
Kontrast slår storlek
När du vill lyfta något är reflexen att göra det större. Ofta räcker det med att göra allt annat mindre framträdande.
En sida där brödtexten är dämpad grå och rubriken nästan svart har en tydlig hierarki utan att någonting behövde växa. Håll bara koll på golvet: brödtext måste fortfarande klara 4,5:1 mot bakgrunden (WebAIM om kontrastkravet), se kontrast och läsbarhet.
Hur många nivåer behöver du?
Tre till fyra räcker nästan alltid:
- Sidans ämne — en per sida, ingen konkurrens
- Avsnittsrubriker — tydligt mindre än nivå ett
- Brödtext — den mängd som faktiskt ska läsas
- Stödtext — bildtexter, hjälptexter, metadata
Har du sex nivåer där skillnaden mellan tre och fyra är två pixlar har du ingen hierarki, bara variation. Gör hoppen mellan nivåer stora nog att synas utan att man jämför.
Testet som tar tio sekunder
Kisa. Luta dig tillbaka och kisa tills sidan blir suddig.
Det som fortfarande går att urskilja är din faktiska hierarki. Är det rubriken och knappen — bra. Är det en stockbild och en cookieruta vet du vad som behöver ändras.
Den andra varianten: visa sidan för någon i fem sekunder, ta bort den och fråga vad sidan handlade om. Svaret är vad din hierarki faktiskt kommunicerar, oavsett vad du tänkt.
Sidan är fri att läsa, citera och länka till. Hittar du ett fel eller en siffra som hunnit bli gammal — mejla hej@webraketen.se, så rättar vi och skriver ut ändringsdatumet.