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:
🇬🇧 Read this article in English: Gestalt principles in UX/UI design: 8 examples 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 user 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)Het vierde principe is connectie. En de naam zegt het eigenlijk al: elementen die geconnecteerd zijn, door middel van een lijn, of een vorm, ervaar je als een groep. In onderstaande voorbeeld zul je merken dat punt 1, 2 en 3 door middel van een lijn aan elkaar. gekoppeld zijn. Deze 3 punten staan daardoor los van punt 4 en punt 5, die met geen enkel ander punt zijn geconnecteerd.
Gestalt principe #5: Symmetrie (symmetry)Met het vijfde principe zijn we aangekomen bij de tweede helft van de 8 principes. Het is je vast opgevallen dat de eerste vier principes gericht zijn het creëren van groepen van elementen. De principes 5 tot en met 8 zijn anders. Het vijfde principe gaat over het aanbrengen van symmetrie in je design om rust en stabiliteit te creëren.
Hoe bereik je symmetrie?
Dit zie je ook terug in onderstaand voorbeeld: de rechthoeken, afbeeldingen en teksten (voorgesteld als donkergroene lijnen), zijn allemaal symmetrisch ten opzichte van een denkbeeldige verticale as in het midden. 
Gestalt principe #6: Afronding (closure)Closure is het Engelse woord voor sluiten of afronden. Mensen kunnen met hun brein vormen afmaken die niet geheel getoond worden. Denk aan een cirkel waar een hap uit is, of een rechthoekig kader waar een lijn van onderbroken is. Als mensen kun je je toch voorstellen hoe de hele cirkel of de hele rechthoek eruit ziet.
In UI design denk ik dan bijvoorbeeld aan een rij met kaartjes of afbeeldingen, waarbij het meest rechtse kaartje half van de pagina 'afvalt'. Een deel van het kaartje is daardoor niet zichtbaar. Toch weet de gebruiker dat dat kaartje wel degelijk heel is, en dat zij door actie te ondernemen het hele kaartje kan bekijken. Op een touch screen kan er bijvoorbeeld naar links geswiped worden om de rij te verplaatsen en het rechtse kaartje in zijn geheel te zien komen. 
Gestalt principe #7: Continuïteit (continuity)Principe nummer 7 is continuïteit. Dit lijkt wel wat op principe 6: Afronding. Het gaat erom dat het menselijk brein twee lijnen, die in dezelfde richting lopen, ziet als één lijn. Tussen de twee lijnen is er witruimte, of een andere vorm. Toch lijken de twee lijnen één geheel te zijn. Dit werkt voor rechte lijnen, maar ook voor gekromde lijnen.
Zo zie je de horizontale donkergroene lijn in de onderstaande afbeelding: de twee lijnstukken worden onderbroken door het lichtgroene vlak achter het Wallet icoon. Maar omdat de twee lijnen in dezelfde richting lopen, interpreteert je brein dit als één lijn die de bovenkant van de tab bar markeert. 
Gestalt principe #8: Voor- en achtergrond (figure and ground)Tenslotte het achtste en laatste principe, dat door UX/UI designers weinig gebruikt wordt. Je ziet het vaak in logo's, dat er gespeeld wordt met de vorm en op de voorgrond, en de vormen in de achtergrond. Het is dus eerder een principe dat nuttig is voor grafisch ontwerpers.
Bekijk eens het voorbeeld hieronder. Als je kijkt naar de groene vormen, dan zie je een letter 'N' en een letter 'I'. Als je kijkt naar de witte achtergrond, dan zie je de letter 'H' verschijnen tussen de 'N' en de 'I'. Er zijn misschien mensen die de vorm(en) in de achtergrond eerder zien dan de vorm(en) op de voorgrond. 
ConclusieAls designer kun je (bewust of onbewust) handig gebruik maken van de 8 Gestalt principes. Je helpt gebruikers door elementen op het scherm te groeperen, of door onderscheid te maken tussen verschillende groepen. Je kunt rust brengen op een pagina door elementen te centreren. En bovendien weet je dat gebruikers onzichtbare delen van elementen toch waarnemen, ookal zijn ze verborgen achter een ander element, of vallen ze van de pagina af.
|
|
|
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. |
