Hoe laat je jouw design aansluiten bij de gebruiker?!

Dit is het logo van het WNF (Wereld Natuur Fonds). Grote kans dat je een pandabeer ziet en geen losse vlakken. Dit komt doordat wij alles wat wij zien onbewust organiseren in groepen en samenhangende vormen. Wij nemen hele vormen, figuren en objecten waar. We zien bijvoorbeeld geen neus, ogen en mond, maar een gezicht.

De manier waarop wij dit doen wordt samengevat in de Gestalt principes. Gestalt is een onderdeel van de psychologie en staat voor ‘vorm’ of ‘geheel’. Wanneer je deze principes toepast in het design van jouw website dan kun je deze beter aan laten sluiten bij je gebruikers. Dit heeft een positief effect op je gebruiksvriendelijkheid. 

Een aantal van deze principes kun je eenvoudig toepassen.

1. Principe van eenvoud

Het beeld wat de minste cognitieve inspanning vraagt gaat voor. Dat wil zeggen: we kiezen liever voor één geheel wat is samengesteld uit simpele objecten. Less is more. In onderstaand voorbeeld staan twee rollup-banners voor Kesseler & Reuvekamp. Het eerste voorbeeld is druk: veel teksten, grafische elementen en afbeeldingen. De boodschap is volledig ondergesneeuwd. Door elementen weg te halen en de kern te laten staan komt de boodschap naar voren.

2. Principe van nabijheid

Objecten die dicht bij elkaar staan worden als eenheid gezien. Zo zie je in het big-menu van Normec geen opsomming van teksten, maar categorieën. Je weet dat ‘Kwaliteitssystemen’, ‘Certificering begeleiden’, ‘Handboek digitaliseren’ en ‘Digitale registraties’ bij elkaar horen.

3. Principe van gelijkenis

Objecten die hetzelfde zijn of op elkaar lijken, zien wij als een geheel. In het voorbeeld zien wij een rij vierkanten en een rij rondjes. Daarnaast zien wij een plusteken van rondjes.

Ook wanneer iets altijd op een bepaalde manier werkt op jouw website, verwacht de gebruiker dat dit gelijk blijft. Gebruik daarom dezelfde CTA knoppen, dezelfde kleuren en dezelfde bewegingen. De bezoeker snapt jouw website beter en zal sneller tot actie overgaan.

4. Principe van sluiting

Een afgesneden of overlapping van een object zien we toch als een volledig figuur.
Er is een stukje van het object ‘afgesneden’, maar de ontbrekende delen worden ingevuld. Dit principe maakt een design ‘spannend’ om naar te kijken. We zien bijvoorbeeld een cirkel, terwijl het een doorbroken lijn is.

Dit voorbeeld komt uit de vormgeving voor de website Proeven met Rien en Sabine. Het lichtgrijze lijntje om de flessen wordt doorbroken. Maar we zien een rechthoek.

5. Principe van voortzetting/continuïteit

Mensen zullen een lijn of vorm tot voorbij het eindpunt volgen. Dit is ideaal wanneer je de aandacht van de bezoekers op jouw website naar een bepaalt punt wil trekken.
In het voorbeeld met de stippen zien we een golvende lijn. Eigenlijk is er helemaal geen lijn, maar we nemen dit wel waar.

Het andere voorbeeld komt uit de website Professionals in Food. We volgen automatisch de kijkrichting van de persoon. Dit is een trucje waarmee we de aandacht op een object of tekst kunnen vestigen.

6. Principe van omsluiting

Door een groep objecten te omsluiten met een lijn of ander element zien wij dit als geheel. Het is een makkelijke manier om aan te tonen dat objecten bij elkaar horen. Zo hebben wij bij de website voor Globe Airmotors een kader achter hun UPS’s geplaatst.

7. Principe van figuur-grond

Een element staat los van de achtergrond. Het lijkt dichterbij en wordt daardoor beter gezien en onthouden. Zo hebben wij op onze website een CTA naar een contactformulier (popup), waarbij de achtergrond donker wordt. Het contactformulier komt daardoor beter naar voren.

Hulp nodig bij het toepassen van deze principes?
Sta jij ook te trappelen om deze principes toe te passen? Wij helpen je er graag bij. Neem contact met ons op en optimaliseer jouw website voor een betere gebruiksvriendelijkheid en meer conversie.