UX Design en Gestalt-principes

Ons brein kan slechts een gelimiteerde hoeveelheid informatie aan. Daarom hebben we de neiging om zaken te groeperen, bijvoorbeeld op basis van vorm, kleur of nabijheid. Deze zogenaamde Gestalt-principes vormen richtlijnen voor onze visuele perceptie.
iemand zweeft met een vergrootglas boven een groot brein. Twee anderen zitten ernaast met een laptop en een tablet

Door bij de Gestalt-principes aan te sluiten met het design van je website zorg je ervoor dat gebruikers de website sneller snappen. De gebruiker krijgt gemakkelijker overzicht als de ordening aansluit bij zijn cognitieve mogelijkheden. De drie belangrijkste Gestalt-principes in UX zijn nabijheid, gelijkheid en omsluiting.

Gestalt-principe 1: Nabijheid

Ons brein beschouwt elementen die dicht bij elkaar staan als eenheid. Onbewust koppelen we dus de nabijheid van elementen aan een relatie tussen de elementen.

Dat maakt tussenruimtes een belangrijk onderdeel van een design. Met te veel, maar ook met te weinig tussenruimte zal de gebruiker het overzicht kwijtraken. Het is dus belangrijk om een goede balans te zoeken, maar ook om alleen onderdelen bij elkaar te plaatsen waartussen een verband is.

Met deze kennis zul je met een andere perspectief naar een menu kijken. Vaak staat een onderdeel, zoals ‘contact’, ‘maak een afspraak’ of ‘meld je aan’ apart. Hiermee wordt al in het design duidelijk dat deze knop geen onderdeel is van het normale menu dat je vaak naar meer informatie zal leiden, maar een speciale call-to-action die vaak samenhangt met de hoofdconversie van een website.

Gestalte principe nabijheid, twee setjes van samengeclusterde bollen

Gestalt-principe 2: Gelijkheid

Gestaltprincipe Gelijkheid door middel van kleur. Lichtblauwe vormen en donkerblauwe vormen

Ons brein groepeert elementen die qua kleur, formaat en vorm op elkaar lijken. We gaan er dan vanuit dat die elementen dezelfde functie of betekenis hebben. Dat zorgt ervoor dat bijvoorbeeld kleur aanbrengen een krachtig middel is om elementen te groeperen. De donkerblauwe vormen in de afbeelding links zijn niet gelijk aan elkaar qua vorm, maar omdat ze dezelfde kleur hebben, zal je dit toch als een groep beschouwen. Als alle vormen dezelfde kleur zouden hebben, zou je juist de driehoeken als een groep zien, en de cirkels als een andere.

Formaat is ook een belangrijk onderdeel van UX design, niet alleen om te groeperen, maar ook om een hiërarchie aan te geven. Elementen van hetzelfde formaat worden als even belangrijk beschouwd. Elementen die groter zijn dan andere worden juist als belangrijker beschouwd. Hierdoor kun je formaat gebruiken om ervoor te zorgen dat de aandacht van de gebruiker van je website naar de juiste onderdelen wordt getrokken. In de afbeelding rechts zal je aandacht waarschijnlijk eerst naar de grootste cirkels gaan.

Gestalteprincipe: gelijkheid van formaat. Grote en kleine bollen

Gestalt-principe 3: Omsluiting

Gestalteprincipe omsluiting. Verschillende vormen. Om drie ervan staat een lichtblauw blok om aan te geven dat ze bij elkaar horen.

Door een groep van elementen te omsluiten met een ander visueel element, zoals een kader, worden de omsloten elementen als groep gezien. Dat is bijvoorbeeld handig als je geen tussenruimte kan creëren door ruimtegebrek. Het is ook een snelle manier om te laten zien welke elementen met elkaar verbonden zijn. In de afbeelding links zul je de vormen die omsloten zijn door het lichtblauwe kader als een groep beschouwen. Zonder het kader zul je juist de vorm gebruiken om te groeperen. Eigenlijk komen we het in de digitale wereld voortdurend tegen, denk maar aan de verschillende vensters op een computerscherm.

Meer weten?

Meer weten over ontwerpprincipes? Bekijk dan ook Laws of UX. Ga je liever niet zelf aan de slag? Laat het ontwerp dan gerust over aan de designers van Social Brothers!

Whitepaper

Hoe maak je een goede website?

Download whitepaper

He Marketeer,

Waar dien je rekening mee houden als je een nieuwe website gaat realiseren? Wij helpen je graag. 

Groeten WP Brothers