5 min leestijd - 14 feb 2025
|
Hoe gebruik je de Gestalt principes in UX/UI design? Hieronder vind je acht voorbeelden. Maar wat zijn de Gestalt principes eigenlijk? Gestalt is een Duits woord voor 'vorm' of 'vormgeving'. De principes horen bij de Gestaltpsychologie, een denkrichting uit de jaren 20 van de twintigste eeuw. De acht principes gaan over de structuur van een groep van vormen, en hoe je die ervaart als mens. Zeker van toepassing dus op het werk van een UX/UI designer.
🔎 Gestalt principes gaan over de structuur van een groep van vormen, en hoe je die ervaart als mens. De Gestalt principes horen bij de Gestaltpsychologie, een denkrichting uit de jaren 20 van de twintigste eeuw. Welke Gestalt principes zijn er?Wanneer je een product of een scherm bekijkt, ben je als gebruiker niet in staat om alles snel in je op te nemen (de cognitive load is vaak hoog, omdat er veel te zien is). Daarom vereenvoudig je als gebruiker de dingen die je ziet, en gaat je brein op zoek naar patronen die je helpen om de elementen snel in je op te nemen en te begrijpen. Die patronen kun je als UX/UI designer inzetten om het voor de gebruikers zo gemakkelijk mogelijk te maken, waarmee we de 'frictie' verlagen, en het gebruiksgemak verhogen.
De 8 Gestalt principes, of de patronen, worden vaak in het Engels uitgelegd. Hieronder doe ik het in het Nederlands, maar ik vernoem er steeds de Engelse naam bij, zodat je de term herkent als je het ergens anders tegenkomt. Dit zijn de 8 principes:
Gestalt principe #1: Nabijheid (proximity)Hieronder zie je een voorbeeld van Nabijheid (proximity). Je ziet drie iconen, met bijbehorende labels (Profiel, Wallet, Statistieken). Hoewel alle iconen dezelfde styling hebben en alle labels dezelfde grootte en kleur, de twee bovenste iconen en labels duidelijk een groep vormen, die los staat van het onderste icoon met label. Dat komt natuurlijk, omdat er meer witruimte is tussen het middelste icoon en het onderste icoon, dan tussen het bovenste icoon en het middelste icoon (en evenzo tussen de labels). Dus als er verschillen zijn in afstanden in een groep van gelijkvormige elementen, dan interpreteer je dat als een groep van elementen. Als ontwerper van digitale interfaces, kun je je ontwerpen dus structuur geven aan je ontwerp door gebruik te maken van dit principe van nabijheid (proximity).
Gestalt principe #2: Gelijkenis (similarity)We blijven even bij het voorbeeld van de drie iconen met bijbehorende labels. In het voorbeeld hieronder staan alle iconen even dicht bij elkaar. Er is geen verschil in nabijheid. Er is wel een verschil in styling van de iconen en van de labels. Het onderste icoon is niet ingevuld, maar bestaat uit lijnen, in tegenstelling tot de twee bovenste iconen. Het label "Statistieken" heeft dunnere letters dan de labels "Profiel" en "Wallet". Dat interpreteer je als gebruiker opnieuw als twee groepen: de bovenste twee horen duidelijk bij elkaar. Gelijkenis (similarity) is dus ook een patroon dat je als ontwerper kunt inzetten om elementen op een scherm te structureren.
Gestalt Principe #3: Omsluiting (enclosure)Het derde principe is dat van omsluiting (enclosure). En dit kun je op twee manieren toepassen: elementen die in een kader staan, lijken een groep te zijn. Maar ook: elementen die op een gekleurde achtergrond staan, lijken een groep te zijn. Hieronder zie je dat het tweede is gebruikt: de bovenste twee iconen met bijbehorende labels staan op een lichtgroene achtergrond. Daardoor lijken ze afgesplitst van het onderste. Hoewel de afstanden en de styling van de iconen en de labels overal hetzelfde zijn, is er toch een verschil.
Gestalt Principe #4: Connectie (connection)De 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.
Gestalt Principe #5: Symmetrie (symmetry)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).
Gestalt Principe #6: Afronding (closure)Tenslotte 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. 
Gestalt Principe #7: Continuïteit (continuity)Tenslotte 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. 
Gestalt Principe #8: Voor- en achtergrond (figure and ground)Tenslotte 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. |
