Rare kronkels of een bewuste keuze?
Laten we er niet te diep op ingaan, maar deze hiërarchie is ontstaan vanuit een belangrijk basisprincipe: het ‘Gestalt-principe’.
Simpel uitgelegd draait het om dit idee: “Het geheel is voor het menselijk oog belangrijker dan de afzonderlijke onderdelen.”
Wij houden van:
- Ordelijkheid
- Herkenbare patronen
- Eén samenhangend geheel
Denk er maar eens over na: als je naar een auto kijkt, zie je eerst het complete plaatje. Je richt je niet meteen op de banden, de lak of de ramen afzonderlijk. Toch dragen al deze losse onderdelen bij aan het totaalbeeld van je auto.
Hetzelfde geldt voor grafische vormgeving, websites en foto’s. Alleen werk je hier met andere visuele elementen om een perfect geheel te creëren.
De visuele elementen
De visuele elementen waar we het over hebben in marketing en grafische vormgeving, gaan niet over banden, ramen of deuren. In plaats daarvan richten we ons op:
- Kleuren
- Contrast
- Grootte
- Positie
- Uitlijning
Deze elementen zijn de bouwstenen waarmee je een sterk visueel geheel creëert.
Meer te weten komen over het verschil tussen UX en UI? Leer meer over het vergroten van je online gebruikerservaring!
Waarom is visuele hiërarchie belangrijk?
Net zoals je binnen 30 seconden weet of er een klik is op een eerste date of dat je in 8 seconden de aandacht van een potentiële klant moet grijpen, heeft je website slechts 10 seconden om indruk te maken op een bezoeker.
Daarom is visuele hiërarchie zo belangrijk. Het is letterlijk het eerste waar mensen naar kijken. De hersenkronkels die we eerder noemden, werken razendsnel, slechts een paar seconden. Net zoals een printer een document in 5 seconden scant, scannen wij visueel alles wat we tegenkomen.
Vooral online worden we overspoeld met informatie van merken, bedrijven en personen die allemaal strijden om onze aandacht. Hier geldt: je moet niet alleen opvallen, maar ook de aandacht weten vast te houden.
Maar hoe verwerkt het menselijk oog visuele informatie eigenlijk? Maak kennis met het F-patroon en Z-patroon!
Hoe scannen wij informatie?
F-patroon
Het F-patroon beschrijft hoe het oog van een gebruiker beweegt: het begint linksboven, schuift horizontaal naar rechts en beweegt daarna zigzaggend verder naar beneden. Hierbij scannen we vooral trefwoorden en vetgedrukte zinnen, in plaats van elk woord aandachtig te lezen.
Dit patroon is vooral populair bij krantenartikelen en nieuwsberichten, waar koppen en teksten vaak links zijn uitgelijnd om de lezer door de inhoud te leiden.
Z-patroon
Het Z-patroon wordt vaak toegepast in online advertenties, brochures, webpagina’s en infografieken. Dit zijn visuele ontwerpen met minder tekst dan je doorgaans in krantenartikelen tegenkomt.
Bij het Z-patroon begint de kijker linksboven, beweegt horizontaal naar rechts, volgt vervolgens een diagonale lijn naar de linkeronderhoek en eindigt door opnieuw horizontaal naar rechts te lezen.
De 9 principes van visuele hiërarchie
Kleur
Over kleuren en hun betekenis zouden we een hele blog kunnen schrijven – er valt zoveel over te vertellen! 😉
Maar laten we het simpel houden: heldere kleuren trekken veel meer aandacht dan zachte of fletse tinten. Dat klinkt logisch, toch? Het is minstens zo belangrijk om consistent te blijven met je huisstijl. Gebruik niet alle kleuren van de regenboog in één website, want dat komt chaotisch en overweldigend over.
Houd je aan je huisstijl, experimenteer met wat online opvalt en stem je kleurenkeuze af op je boodschap. Wil je dat een specifiek element eruit springt of wil je juist een samenhangend geheel creëren?
Contrast
Contrast ontstaat door elementen van elkaar te onderscheiden, zodat één specifiek item extra opvalt.
Neem bijvoorbeeld een abonnementenpagina op je website. Door het middelste aanbod in een andere kleur, grootte of lettertype weer te geven, trek je direct de aandacht naar deze optie. Het oog van de gebruiker wordt er als vanzelf naartoe geleid.
Ook call-to-action-knoppen zijn hier een goed voorbeeld van. Ze worden altijd ontworpen in een opvallende kleur of vorm, zodat ze direct zichtbaar zijn. Je zal zo’n knop nooit zien tussen een lange blok tekst. 😉
Wil je ook op een positieve manier online opvallen? Ontdek het Von Restorff effect!
Compositie
Plaats de belangrijkste teksten of afbeeldingen bovenaan, gevolgd door de overige informatie in volgorde van relevantie. Ontwerpers maken gebruik van verschillende compositietechnieken om de aandacht op specifieke elementen te richten.
Een paar veelgebruikte technieken zijn:
- De Rule of Thirds, waarbij de focus niet in het midden van het beeld ligt, maar op strategische plekken binnen het kader.
- De Rule of Odds, waarbij een oneven aantal objecten een dynamischer en interessanter beeld creëert.
- Gelaagdheid, die diepte toevoegt aan het ontwerp en het visueel meer gelaagd maakt.
Grootte
Het is vanzelfsprekend dat grote, indrukwekkende elementen de aandacht trekken – denk maar aan de Burj Khalifa in Dubai, die je simpelweg niet kan missen.
Dit principe geldt ook voor je website: grote elementen vallen op.
Maar als je alles op je website in een groot formaat plaatst, kan dat juist verwarrend overkomen. Waar moet je als eerste naar kijken? Wat is echt belangrijk? Om dit te voorkomen, maak je de belangrijkste elementen groter en zet je minder belangrijke onderdelen kleiner.
Symmetrie
Met symmetrie kan je twee kanten op:
Je kan alles symmetrisch uitlijnen, wat je website of advertentie visueel aantrekkelijk maakt en rust uitstraalt voor het oog. Aan de andere kant kan je ook kiezen voor asymmetrie, waarbij je bepaalde elementen juist laat opvallen door deze bewust te laten afwijken.
Gelijkheid
Het herhalen van informatie helpt om de boodschap beter te onthouden. Zorg er daarom voor dat je consistent dezelfde boodschap of slogan door je hele website gebruikt. Heb je de snelste levering? Bied je de goedkoopste stofzuigers of lever jij de beste service als tele-operator? Schreeuw het van de daken!
Nabijheid
Plaats gerelateerde informatie op je website zo dicht mogelijk bij elkaar, zodat het direct duidelijk is voor de gebruiker. Elementen die geen verband met elkaar hebben, zet je juist verder uit elkaar om het verschil duidelijk te maken.
Textuur
Een variatie aan visuele elementen maakt je ontwerp boeiender. Het voorkomt eentonigheid en zorgt voor een visueel dynamisch effect. Extra texturen trekken de aandacht en geven je ontwerp meer diepte.
Witruimte
Witruimte betekent niet letterlijk dat de ruimte op je website wit moet zijn, maar dat je voldoende afstand, en dus ruimte, tussen de elementen moet creëren. Hierdoor voorkom je dat alles te dicht op elkaar staat. Het oog heeft ruimte nodig om zich te concentreren op elk element afzonderlijk.
