Beïnvloedt de websitegebruiker met een goed UX-design
De Gestalt principes beschrijven hoe jouw brein met visuele informatie omgaat. Dit is een UX-design theorie die kijkt naar hoe mensen visuele informatie groeperen, patronen herkennen en verwerken. In deze blog lees jij waarom het belangrijk is om hier rekening mee moet houden en wat de Gestalt principes inhouden.
Waarom zijn de Gestalt principes voor jou interessant?
De Gestalt principes leggen uit hoe een gebruiker visuele informatie waarneemt en verwerkt. Door de principes toe te passen, kan een gebruiker op de juiste manier beïnvloedt worden met het design. Je kan hiermee op de meest effectieve manier visuele elementen bepalen.
Welke Gestalt principes zijn er en wat houden ze in?
Gestalt principe 1; Nabijheid
Het principe van nabijheid gaat om elementen die wel of niet dicht bij elkaar zijn gerangschikt. Wanneer elementen dicht bij elkaar staan, wordt dit door jouw brein geïnterpreteerd als een bij elkaar horende groep, ongeacht het type element. Wanneer er meer tussenruimte wordt toegevoegd tussen verschillende rijen, zal het brein dit interpreteren als verschillende groepen.
In onderstaande afbeelding zijn twee groepen te zien. Tussen de meest rechtse rij en de rijen ernaast zit meer ‘witruimte’. Dit zorgt ervoor dat een websitegebruiker de laatste rij als een aparte groep ziet.
Designers gebruiken deze principe in hun voordeel bij het indelen en het overzichtelijk maken van content. Hiërarchie en witruimte spelen dan een belangrijke rol. UX-design is belangrijk bij het indelen en overzichtelijk maken van content.
Hieronder is een voorbeeld te zien waarbij de principe van nabijheid is toegepast. De verschillende elementen op de pagina zijn door witruimtes en hiërarchie verdeeld. Je ziet bijvoorbeeld dat de onderste rij van oranje vierkanten een andere “groep” is dan de paarse ronde elementen daarboven.
Het principe van nabijheid heeft raakvlakken met de gebruikerservaring. Met het nabijheidsprincipe zorg je ervoor dat een gebruiker niet lang hoeft na te denken en sneller de gewenste actie kan uitvoeren. Het begrijpen en lezen van jouw content is dan vanzelfsprekend. Dit zorgt voor een positieve gebruikerservaring.
Gestalt principe 2; Gelijkenis
Het principe van gelijkenis is vergelijkbaar met het principe van nabijheid, maar de nadruk ligt meer op elementen met vergelijkbare kenmerken. Denk hierbij aan kleur, vorm, grootte, positie en eventueel beweging. Vaak hebben deze elementen dezelfde functie. Een gebruiker kan hierdoor ‘functionele’ elementen groeperen.
Met het principe gelijkenis kan je op een effectieve wijze naar de gebruiker communiceren wat de belangrijkste elementen zijn op een pagina. Je kan de elementen benadrukken waarop een gebruiker moet focussen. Denk bijvoorbeeld aan functionele elementen zoals call-to-actions, knoppen, links of bloktitels.
Hieronder staat een voorbeeld van het principe van gelijkenis. De zwarte balk is bijvoorbeeld een koptitel en de roze balk een actieknop. Een gebruiker kan onderscheid maken tussen verschillende elementen.
De zwarte balk is drie keer te zien, de gebruiker zal dit dus telkens als titel zien. Echter moet je wel consistent blijven met de visuele elementen. Anders zal de gebruiker de relaties tussen de elementen onderling niet goed kunnen vaststellen.
Gestalt principe 3; Continuïteit
Wanneer het ene visuele element gelijnd is met een ander, koppelt het brein een soort pad tussen de twee elementen om de leesbaarheid te bevorderen. Onbewust komt dit principe ook regelmatig terug, onder andere in webdesign. Het principe van continuïteit helpt gebruikers om op een efficiënte wijze te navigeren door middel van paden en patronen.
Het is ook een handig UX-design principe om de websitegebruiker te sturen naar elementen die voor hen relevant zijn. Dit principe kan toegepast worden door vormen zoals pijlen of lijnen te gebruiken. Maar ook kan het subtiel door elementen op een manier in te delen waarbij het paden of patronen gaat vormen.
Onderstaande afbeelding is een voorbeeld van een productpagina. Het grijze element is dan de filterfunctie die je van boven naar beneden leest. De oranje elementen zijn de producten. Wij zijn gewend om van links naar rechts te lezen en dat is wat hier gebeurt.
Het is wel belangrijk om er rekening mee te houden dat deze elementen gerelateerd moeten zijn aan elkaar. Door consistentie in toegevoegde waarde te waarborgen, verklein je de kans dat het pad/patroon gebroken kan worden.
Gestalt principe 4; Figuur-grond principe
Met het figuur-grond principe creëer je onderscheid tussen elementen die op de voor-of achtergrond staan. Zo begeleid je de websitegebruiker naar specifieke elementen die je wilt tonen. Hieronder een voorbeeld van het figuur-grond principe.
Dit principe is gebaseerd op het idee dat mensen instinctief objecten waarnemen als op de voorgrond ofwel op de achtergrond. Met andere woorden, objecten vallen prominent naar voren (het figuur) of wijken terug naar achteren (de grond). In bovenstaande afbeelding valt het witte deel bijvoorbeeld meer naar voren.
Hierboven zie je een pop-up melding, welke meer naar voren komt. Het is niet de bedoeling dat elementen met elkaar concurreren, maar eerder een focuspunt benadrukken. Door het figuurgrond principe toe te passen, weet de gebruiker meteen waar hij op moet letten.
Gestalt principe 5; Gemeenschappelijk gebied
Het principe gemeenschappelijk gebied is eveneens vergelijkbaar met het principe van nabijheid. Ook hier worden elementen als groep gezien wanneer deze in een kader staan. Elementen die telkens opnieuw terugkomen worden ook als gemeenschappelijk gebied gezien.
Door elementen te kaderen, ontstaat er een scheiding tussen groepen objecten ondanks de gelijkenis in vorm, kleur, grootte of nabijheid. In onderstaande afbeelding zie je bijvoorbeeld drie groepen doordat de elementen in een grijze kader staan.
Gestalt principe 6; Sluiting
Het principe van sluiting gaat over het ‘’compleet’’ maken van elementen. In een situatie waarbij dit principe voor komt vult het brein missende onderdelen van een element aan om hiermee een volledig plaatje te schetsen. Dit principe komt vaak voor in logo’s, maar is ook regelmatig terug te zien in het web-/applicatieontwerp.
Een voorbeeld is wanneer je op een website tussen afbeeldingen kan swipen. Meestal worden aan de uiteinden van de slider afbeeldingen half afgesneden. Hierdoor weet de gebruiker dat er meer afbeeldingen in de slider zitten.
Toepassing in de praktijk
Het écht goed toepassen van principes in jouw huisstijl is lastiger dan het lijkt. Het is als voor het eerst autorijden zonder instructeur. Je weet niet waar je moet beginnen. Hetzelfde geldt voor een goed UX-design. Voorkom dat websitegebruikers afhaken door een slecht UX-design.
Kom je er zelf niet uit of simpelweg behoefte aan advies voor jouw vraagstuk? Neem vrijblijvend contact op door te mailen of te bellen naar Jörgen of Paul.