De visuele hiërarchie vormt het skelet van elk ontwerp project. Al zijn de afzonderlijke elementen nog zo mooi, zonder een goede hiërarchie zal het design-kaartenhuis ineenstorten. Een ongestructureerde puinhoop van elementen kan leiden tot een slechte gebruikerstevredenheid. Hoe voorkom je dit?
Allereerst: wat is een visuele hiërarchie?
Visuele hiërarchie is gebaseerd op de Gestalt-psychologie theorie. Deze theorie is ontstaan in 1930 in Duitsland onder leiding van Max Wertheimer. Deze theorie bevat regels die de manier van visuele perceptie beschrijven. Zo heb je bijvoorbeeld het principe van nabijheid (wat dicht bij elkaar staat, hoort bij elkaar), het principe van gelijkenis (wat op elkaar lijkt, vormt een geheel) en het principe van sluiting (gedeeltelijk bedekte figuren toch al volledig kunnen zien). Het helpt om interface elementen op een effectieve manier te ordenen, zodat de inhoud makkelijk te begrijpen is. De presentatie van visuele elementen heeft een grote impact op de gebruikerservaring. Wanneer de componenten verstandig zijn georganiseerd, navigeren gebruikers moeiteloos door de website heen.
Wat zorgt voor een krachtige visuele hiërarchie?
Hiervoor heb ik een aantal tips opgesteld die hierbij kunnen helpen:
1. Hou zakelijke doelen in gedachten
Achter een digitaal product staan vaak zakelijke doelen. Het is belangrijk om op basis van dit doel uit te zoeken welke interface elementen belangrijker zijn en deze prioriteren op basis van niveaus. Een voorbeeld hiervan is een webshop. Hier zullen de productfoto’s erg belangrijk zijn, omdat deze de klanten aanmoedigen om over hun aankoop na te denken.
2. Scanpatronen
Een belangrijke regel om te onthouden: mensen lezen niet. Het merendeel van gebruikers scant de webpagina om een idee te krijgen van de inhoud. Verschillende onderzoeken, waaronder die van de Nielsen Norman Group (dé leider op het gebied van gebruikerservaringen) noemen het F- en Z-patroon als de populairste scanpatronen. Het F-patroon wordt voornamelijk toegepast op schermen waar een grote hoeveelheid inhoud is geplaatst, zoals blogs en nieuwsplatforms. De gebruikers scannen eerst de horizontale lijn bovenaan het scherm en gaan dan naar beneden waarbij ze kortere horizontale lijnen lezen. Ze eindigen in een verticale lijn naar beneden waarbij ze trefwoorden zoeken in de eerste zinnen van de alinea’s. Een Z-patroon wordt meestal gebruikt op een pagina waarbij minder content op staat en minder hoeft te worden gescrold. Dit spanpatroon gaat als volgt: het scannen begint links bovenin, gaat dan diagonaal naar de tegenoverliggende hoek en eindigt in een horizontale lijn onderaan de pagina.
3. Functionaliteit voorop
De visuele hiërarchie lijkt misschien alleen gericht op esthetische aspecten, maar zo is het niet. Als designer is het van groot belang om rekening te houden met de functies van de verschillende UI-elementen en de rol die ze spelen in het navigatieproces. Een goede visuele hiërarchie is immers de basis van een succesvol digitaal product.
4. Witruimte is een visueel element
Witruimte, ook wel negatieve ruimte genoemd, is niet alleen een leeg gebied tussen elementen. Het werkt ook als een tool om de UI-elementen zichtbaar te maken voor de gebruikers. Met witruimte kunnen de elementen bij elkaar gegroepeerd, of juist van elkaar gescheiden worden. Daarnaast benadrukt negatieve ruimte de elementen die meer aandacht van de gebruikers vereisen.
5. Gebruik wat kleur
Kleurkeuzes en combinaties zijn essentieel voor visuele hiërarchie, omdat ze gebruikers helpen elementen te onderscheiden. Gedurfde kleuren als rood en oranje vallen meer op dan bijvoorbeeld wit of crème. Deze gewaagde kleuren kunnen zorgen voor meer focus op bijvoorbeeld buttons.
6. Besteed aandacht aan de lettertypen
De typografische hiërarchie omvat verschillende elementen, zoals koppen, subkoppen, hoofdteksten, call-to-action elementen en bijschriften. Deze kun je segmenteren in verschillende niveaus, namelijk:
- Het primaire niveau: Dit is het grootste type, zoals koppen. Dit niveau is bedoeld om gebruikers de kerninformatie te bieden en de aandacht te vestigen op een product.
- Het secundaire niveau: Dit type moet makkelijk kunnen worden gescand. Dit zijn meestal subkoppen en bijschriften waarmee gebruikers snel door de inhoud kunnen navigeren.
- Het tertiaire niveau: Dit is de hoofdtekst en wat aanvullende gegevens. Deze worden vaak wat kleiner weergeven.
Typografische hiërarchie is gericht op het combineren van verschillende lettertypes om het contrast te vergroten. Dit kan door het aanpassen van de grootte, kleuren en verschillende fontfamilies. Het aanbevolen aantal verschillende lettertypes is drie, maar het is een misverstand dat er meerdere lettertypes in één design gebruikt MOET worden. Er zijn genoeg lettertypes waarbij verschillende versies binnen één fontfamily zijn en er geen andere meer nodig zijn.
Waarom kan ik niet meer zonder goede visuele hiërarchie?
Dit is natuurlijk de hamvraag. Kort gezegd heb je ontelbaar veel concurrenten waar je zonder een goede visuele hiërarchie niet tegenop gebokst bent. Klanten willen vooral niet te veel nadenken en snel bij de juiste informatie komen. Als bovenstaande in gedachten wordt gehouden, kunnen bezoekers eenvoudig door het virtuele bos navigeren. Meer weten? Neem contact op!
