Bouw visuele hiërarchie die ogen stuurt in de gewenste volgorde

In deze stap zet je grootte, kleur, contrast, positie en witruimte gericht in zodat de bezoeker leest wat het belangrijkste is voordat hij iets anders ziet.

Visuele hiërarchie is de ongeschreven leesvolgorde die jouw site aan de bezoeker oplegt. Wie geen hiërarchie kiest, laat de bezoeker zelf raden wat belangrijk is, en dat raden gaat zelden goed. In deze les leer je vijf hefbomen kennen die samen werken en welke fouten je telkens terugziet bij pagina's waarop het oog niet wordt gestuurd.

Leren: vijf hefbomen, één leesvolgorde

In deze video leg ik uit hoe grootte, kleur, contrast, positie en witruimte samen de leesvolgorde bepalen en welke combinaties werken.

Begrijpen: hoe maak je visuele hiërarchie?

Vijf hefbomen werken samen. Grootte (groter is belangrijker), kleur (felle of contrasterende kleur trekt het oog), contrast (donker op licht of licht op donker valt op), positie (linksboven en bovenaan worden eerder gezien) en witruimte (een element met veel ruimte eromheen lijkt belangrijker). Pas je deze hefbomen niet bewust toe, dan wordt elke pagina een willekeurige verzameling die de bezoeker zelf moet ordenen.

P&P Company wijst op de meest gemaakte fout: alles even belangrijk willen maken. Twee even grote elementen naast elkaar concurreren om aandacht; één groot en één klein leiden het oog. Goeiezaak voegt daar een tweede regel aan toe: gebruik niet alle hefbomen tegelijk op één element. Een knop die groter, kleurrijker, gecentreerd en met witruimte omzwermd is, voelt overdreven. Eén of twee hefbomen tegelijk werken meestal beter dan vijf.

De zes principes van visuele hiërarchie:

1. Grootte. Belangrijke elementen zijn groter; ondersteunende kleiner.
2. Kleur en contrast. Eén accentkleur trekt het oog naar het belangrijkste, zoals de primaire CTA.
3. Positie. Belangrijkste elementen linksboven of bovenaan, ondersteunend lager of rechts.
4. Witruimte. Veel ruimte rond een element verhoogt zijn belang.
5. Typografische schaal. Vaste verhoudingen tussen h1, h2, h3 en body voor consequente leesvolgorde.
6. Eén focuspunt per sectie. Iedere sectie heeft één element dat eruit springt, niet drie.

MijnMarketing herinnert eraan dat hiërarchie pas werkt als hij consistent is over de site. Een h2 op de homepage hoort dezelfde grootte en kleur te hebben als op een dienstpagina. Inconsistentie in hiërarchie laat de bezoeker steeds opnieuw zoeken naar de leesvolgorde en breekt de aandacht.

Toepassen: de blueprint

Vul de Visuele Hiërarchie Blueprint in: één A4 met je belangrijkste pagina en per sectie het focuspunt aangewezen. Eén pagina, in vijftien minuten klaar.

De eerste actie kost drie minuten: kijk naar je homepage en knijp je ogen samen. Welk element zie je het eerst? Is dat het belangrijkste, dan klopt je hiërarchie. Is dat een willekeurig element, dan weet je dat je vandaag de hefbomen op je primaire CTA versterkt of het concurrerende element verzwakt.