5 min leestijd - 7 feb 2025
|
Hieronder vind je zes UI/UX design tips voor het gebruik van visuele hiërarchie. Wanneer gebruikers kennismaken met een pagina die jij ontwerpt, wil je dat ze de belangrijkste elementen eerst bekijken. Je moet hun oog dus leiden naar die elementen op de pagina. Bijvoorbeeld de belangrijkste titel van de pagina of een belangrijke knop (een call-to-action). Hoe zorg je nu dat gebruikers zien wat jij wilt dat ze zien? Dat doe je door visuele hiërarchie te gebruiken.
Wat is visuele hiërarchie?Voordat we aan de slag gaan met zes UI/UX design tips, toon ik een voorbeeld dat direct duidelijk maakt wat visuele hiërarchie is. Lees eens luidop de zinnen op de volgende afbeelding voor:
De kans is groot dat je als eerst de zwarte tekst hebt gelezen. Daarna de 2 witte tekstjes eronder, en tenslotte de witte tekst helemaal bovenaan. De meeste mensen lezen de tekst in die volgorde. Blijkbaar zijn sommige tekstjes net wat belangrijker dan andere. Maar hoe komt dat? Je hebt vast wel een idee. Er zijn verschillende designfactoren die hier een rol spelen....
🔎 Visuele hiërarchie is het principe van het ordenen van elementen om hun volgorde van belangrijkheid te tonen. Hieronder volgen zes UI/UX design tips voor het gebruik van die factoren. De design tips zijn allemaal gericht op het creëren van een visuele hiërarchie op je pagina, of het nu gaat om een website, een web applicatie of een mobiele app is. Je kunt dit toepassen op elke pagina.
UI/UX design tip #1: afmetingDe afmeting van je tekst of de grootte van een knop bepalen voor een deel hoe snel gebruikers deze lezen of zien. Hieronder zie je een voorbeeld van 2 dezelfde zinnen, in hetzelfde lettertype. Waarschijnlijk lees je de tekst aan de rechterkant eerder dan die aan de linkerkant. Waarom? Omdat die tekst het grootst is. Niet alleen de hoogte van de letters, ook de dikte van de letters is anders. Daardoor heeft die tekst een grotere oppervlakte, en wordt je oog ernaar toegetrokken.
UI/UX design tip #2: kleurDoor opvallende kleuren te kiezen, springen sommige elementen op je pagina meer in het oog dan andere. In het voorbeeld hieronder zie je dat Youtube rood gebruikt als accentkleur. Hoewel de afbeeldingen op de pagina heel verschillend van kleur zijn, wordt je oog getrokken naar de grote rode bol met het icoon erop, waardoor je de titel "Movies" die daar rechts van staat ook leest. De afmeting speelt hier dus een rol (de grote bol), maar ook de kleur die opvalt bij de rest van de user interface. Overigens zie je hier waarschijnlijk ook snel de rode boog op de afbeelding van "Smile 2" die ook heel hard opvalt, en daarna het logo in de linker bovenhoek.
UI/UX design tip #3: contrastBehalve afmeting en kleur kun je ook gebruik maken van contrast. En dat is wat hierboven in het voorbeeld met de zwarte en witte tekstjes ook gedaan is. Contrast is het verschil tussen de achtergrond- en de voorgrondkleur van een element of een tekst. Hieronder zie je bijvoorbeeld een zwarte knop op een witte achtergrond en een zwarte knop op een groene achtergrond. De contrast ratio van zwart en groen is 6,61:1 en de contrast ratio van zwart en wit is 21:1. Dit laatste is het hoogste contrast <link?> dat mogelijk is. Door een hoger contrast te gebruiken, wordt je oog sneller naar het object getrokken.
Het voorbeeld hierboven illustreert dat ook: de zwarte knop links lijkt veel meer 'uit de pagina' te komen, dan de zwarte knop rechts.
UI/UX design tip #4: witruimteDe vierde designfactor die ik als UI/UX design tip wil meegeven is het gebruik van witruimte. In het voorbeeld hieronder zie je de homepagina van een website, die daar goed gebruikt van maakt. Het eerste wat je (waarschijnlijk) leest is "Stay curious." Dat komt niet alleen door de grootte van de letters, de kleur of het contrast van de voor- en achtergrond. Het komt ook doordat er rondom heel wat lege ruimte, ook wel 'witruimte' (of in dit geval geelruimte), is voorzien. Je oog wordt daardoor echt geleid naar het object dat middenin die ruimte staat: de H1 titel van de pagina. Overigens zien veel mensen de M-metjes aan de rechterkant ook snel staan, evental de zwarte knop 'Start reading', de knop rechtsboven 'Get started' en het logo in de linkerbovenhoek.
UI/UX design tip #5: beweging (animatie)De gebruikers die je pagina bekijken zullen ook aangetrokken worden door zaken die bewegen. Je kunt dan heel groot denken: een carrousel die automatisch naar een volgende afbeelding 'slide', of een video in de achtergrond van je header. Maar misschien is het wel beter om dit toe te passen op een subtiele manier: door een menu dat uit- of inklapt om je aandacht te trekken, een oplichtende knop in de navigatie, of een icoon waar een kleine beweging in zit (bijvoorbeeld een alarmbelletje dat 'klingelt'). In het onderstaande voorbeeld van Youtube, zit er beweging in het icoon, het vlammetje (bekijk het zelf op Youtube).
UI/UX design tip #6: typografieTenslotte geef ik je de UI design tip mee van het gebruik van typografie. Ook door het gebruik van speciale en ongebruikelijke lettertypes, kun je de aandacht van je gebruiker trekken. Denk aan een heel strak lettertype, een brutaal lettertype of juist een romantisch lettertype zoals het voorbeeld hieronder.
Let wel op: bijzondere lettertypes kunnen moeilijk leesbaar zijn, en dat heeft een nadelig effect op de gebruikerservaring (UX). Je wilt je gebruikers niet ontmoedigen, je wilt ze juist helpen en ondersteunen in het gebruik van je website, web applicatie of mobile app. Denk dus goed na over de keuze van je lettertypes. 
ConclusieTWanneer gebruikers jouw ontwerp zien, wil je dat ze de belangrijkste elementen eerst bekijken. Je moet hun oog dus leiden naar die elementen die jij in de picture wilt zetten. Je wilt namelijk dat de gebruiker haar/zijn doel bereikt, en dat de gezochte informatie of de actie die uitgevoerd moet worden snel gevonden wordt. Je kunt hiervoor zorgen door een visuele hiërarchie aan te brengen op je pagina. Gebruik daarvoor de zes designfactoren Afmeting, Kleur, Contrast, Witruimte, Beweging (animatie) en Typografie.
|
|
|
Hoe breng je visuele hiërarchie aan als UX/UI designer?Visuele hiërarchie is een manier om de belangrijkste elementen op een pagina in het oog te laten springen. Ik leg het uit aan de hand van voorbeelden, en geef je de zes factoren die een rol spelen als je zelf ontwerpt: afmeting, kleur, contrast, witruimte, beweging en typografie.
Wil je bijleren over UX/UI design en UX research of interesse in opleidingen? Abonneer je dan op de nieuwsbrief van UX Coach. |
