In dit artikel worden de vijf wetten van de Gestaltpsychologie behandeld. Ontdekt begin jaren twintig van de vorige eeuw en tegenwoordig zeer relevant voor webdesign.

De vijf wetten van menselijke waarneming toegepast op websites.
Waarom zie we het ene als voorgrond en het andere als achtergrond?
Hoe kan het dat we vormen kunnen onderscheiden?
Wat is een goede vorm?
Hoe en waarom zie we samenhang tussen dingen?
Welke eigenschappen van een ding zorgen ervoor dat we het kunnen onderscheiden van andere dingen?

Deze en nog veel meer andere razend interessante filosofische vraagstukken is het domein van de Gestaltpsychologie1 die zich hier in de jaren twintig tot veertig van de vorige eeuw mee bezig hieldt. De gestaltpsychologen, waarvan Max Wertheimer2, Kurt Koffka3 en Wolfgang Köhler4 het meest bekend zijn, probeerden de wetten van de menselijke waarneming te ontdekken.

Tijdens hun onderzoeken ontdekten ze een aantal wetten die beschrijven hoe mensen waarnemen. Kennis van deze wetten is voor het hedendaagse webdesign bijzonder waardevol.

De volgende vijf wetten van de gestaltpsychologie worden achtereenvolgens behandeld:
De wet van nabijheid;
De wet van overeenkomstigheid;
De wet van geslotenheid;
De wet van goede continuïteit;
De wet van eenvoud.

 

De wet van nabijheid

Dingen die zich dicht bij elkaar bevinden, worden als groepen gezien. Dingen die zich ver van elkaar bevinden worden als onafhankelijk waargenomen.

Wet van de nabijheid

 

In bovenstaande afbeelding zie je waarschijnlijk vijf zuilen in plaats van tien lijnen. Dit komt omdat de afstand tussen de lijnen die gezamenlijk een zuil vormen zo klein is dat we deze groeperen. Dit groeperen doen we echter alleen maar omdat de ruimte tussen de zuilen onderling weer extra groot is.

Wet van nabijheid op DMOZ

Op de website van het DMOZ open directory project5 is goed gebruikt gemaakt van de wet van nabijheid. De hyperlinks ‘Movies’, ‘Television’ en ‘Music’ binnen de hoofdcategorie ‘Arts’ zijn dicht bij elkaar geplaatst, waardoor we ze als één groep beschouwen. Tussen de categorieën zoals Arts en Games is er echter voldoende witruimte, waardoor we deze makkelijk van elkaar kunnen onderscheiden.

Een goed gebruik van witruimte heeft een behoorlijke impact op de leesbaarheid van teksten. Mensen onthouden 20% meer van een tekst als er voldoende witruimte is6.

Wet van nabijheid - Groen Links

De oude website van Groen Links is een duidelijk voorbeeld van wat er gebeurt als je de ‘Wet van overeenkomstigheid’ links laat liggen. De lijst met onderwerpen is moeilijk scanbaar en niet prettig om te lezen. Een dikke usability FAIL. (red. gelukkig is de webite van Groenlinks inmiddels aangepast)

 

De wet van overeenkomstigheid

Dingen die op elkaar lijken worden gegroepeerd. Dingen die veel van elkaar verschillen worden als aparte elementen waargenomen.

Wet van de overeenkomstigheid

 

Volgens de wet van de nabijheid is er geen structuur. Toch onderscheiden we vijf paren. Dit komt door de wet van overeenkomstigheid. Dankzij de overeenkomstigheid maken we een duidelijk onderscheid tussen de drie witte en twee groene zuilen.

Wat overeenkomstig moet zijn, is niet zo belangrijk; het kan kleur, vorm, beweging of grootte zijn. De overeenkomstigheid van achtergrond kleur is een van de meeste effectieve manieren om items te groeperen7

Hoe meer overeenkomsten er zijn des te sterker is de tendentie om ze te groeperen. Op Amazon8 zien we hiervan een mooi voorbeeld.

Wet van overeenkomstigheid Amazon.com

De buttons zijn verspreid over de gehele website. Doordat ze echter dezelfde vorm en achtergrondkleur hebben onderscheiden we ze als knoppen en weten we dat we erop moeten klikken om het een aankoop te doen.

De wet van overeenkomstigheid is een van de belangrijkste gebruiksvriendelijkheidsprincipes9. De verklaring is simpel. Als dingen zich altijd hetzelfde gedragen, hoeven mensen zich geen zorgen te maken over wat er zal gebeuren. Op basis van vorige ervaringen weten ze wat er gebeurt. Een appel zal altijd naar beneden vallen, gelukkig maar.

Laten we eens kijken naar hyperlinks. Er is eenmaal bepaald dat een hyperlink standaard blauw en onderstreept is en zich in hetzelfde venster opent. Gebruikers die dus een blauwe onderstreepte tekst zien, verwachten dat dit een hyperlink is en zijn verward als dit niet het geval is. Niets is irritanter dan een onderstreepte tekst die geen hyperlink is bijvoorbeeld.

Je kunt er echter ook voor kiezen om bewust iets er anders uit te laten zien dan de rest van de complete website. Een mooi voorbeeld zien we op de website van Firefox. De belangrijkste call-to-action ziet eruit als een knop en iedereen zal herkennen dat het klikbaar is omdat dit overeenkomt met wat we op andere webites hebben ervaren. Binnen het ontwerp van de website is het qua kleur, grootte en vorm echter dermate afwijkend dat direct duidelijk is wat de belangrijkste actie is. Een belangrijke beïnvloeder voor je conversie.

Wet van overeenkomstigheid Firefox

 

De wet van geslotenheid

Dingen die omrand worden door een lijn worden als geheel gezien. Dingen die doorkruist worden door een lijn worden als aparte elementen waargenomen.

Wet van de geslotenheid

 

In bovenstaande zien we weer de inmiddels bekende tien lijnen. Doordat ze echter aan de boven- en onderkant gesloten zijn zien we weer vijf zuilen. Dit komt door de wet van geslotenheid.

Op de website van de KLM is het allerbelangrijkste ‘het boeken van een vlucht’ omkadert waardoor we het de bezoeker makkelijk maken zijn aandacht te blijven richten op het formulier en niet af te dwalen.

Wet van geslotenheid KLM

Soms is het ons doel om elementen duidelijk van elkaar te scheiden Zie bijvoorbeeld de volgende twee afbeeldingen van de weerkaart op de website van het Dagblad van het Noorden11

Wet van geslotenheid DVHN weerkaartje

De linker weerkaart bevat twee verticale lijnen waardoor we de dagen en de gegevens die daarbij horen makkelijk kunnen onderscheiden. Bij de rechter weerkaart zijn deze verticale lijnen weggelaten en kunnen we moeilijker onderscheid maken tussen de dagen.

De wet van overeenkomstigheid leert ons dat dingen die veel van elkaar verschillen als aparte elementen worden waargenomen. Dankzij het verschil in achtergrondkleur van de windkracht kunnen we de dagen toch onderscheiden. De verticale lijn zorgt er alleen voor dat dit nog iets makkelijker gaat.

Het is belangrijk om te weten dat volledige geslotenheid niet noodzakelijk is om toch volledigheid waar te kunnen nemen.

Subjectieve contouren

 

Een goed voorbeeld zien we in bovenstaande afbeelding. Feitelijk zien we hier drie schijfjes kiwi waar een hoek uit mist. Werkelijk gezien kunnen we echter duidelijk een driehoek onderscheiden. Dit wordt het fenomeen van de subjectieve contouren10 genoemd. Mensen zijn geneigd figuren waarin iets ontbreekt zelf aan te vullen.

Wet van geslotenheid Guardian.co.uk

Op de website van the Guardian zien we hiervan een treffend voorbeeld. Onder de navigatie staat een brede rode balk. Door deze balk maakt de bezoeker denkbeeld een vierkant waardoor het onderscheiden van alle nieuwsberichten erg gemakkelijk is. Naast de brede rode balk staat een smalle blauwe balk met andere content die niet hoort bij nieuwsartikelen.

 

De wet van goede continuïteit

Dingen die in een doorgaande lijn of kromming zijn geplaatst worden door onze waarneming gegroepeerd.

Wet van goede continuïteit

 

Als we ‘wet van goede continuïteit’ bekijken, kunnen we zeggen dat we 70 witte streepjes zien. Dit is feitelijk niet onjuist. Het komt ons echter natuurlijker over als we zeggen dat we twee gekromde lijnen zien die elkaar op twee punten snijden.

Al eerder noemden we het fenomeen van de subjectieve continuïteit. Dit fenomeen leert ons dat volledige geslotenheid niet noodzakelijk is om toch volledigheid te kunnen waarnemen.

Met andere woorden, de mens vult zelf ontbrekende informatie in. Dit principe wordt extra duidelijk als we kijken naar de wet van goede continuïteit. In webdesign passen we dit principe toe bij de uitlijning van elementen. Items die horizontaal of verticaal op hetzelfde niveau horen bij elkaar.

Wet van goede continuïteit Google pagination

Als we zoeken in Google, worden de resultaten op meerdere pagina’s getoond. Onderaan de pagina kunnen we door de zoekresultaten bladeren. De hyperlinks zijn horizontaal uitgelijnd waardoor de bezoeker weet dat ze bij elkaar horen.

De wet van goede continuïteit komt ook goed van pas bij het vormgeven van een sitemap.

Wet van goede continuïteit Flickr

De sitemap van Flickr12. De sitemap bestaat uit drie hiërarchische niveau’s. Dankzij verticale uitlijning weten we direct welke pagina’s onder welke categorie horen.

 

De wet van eenvoud

Dingen worden waargenomen in de meest eenvoudige vorm.

Wet van de eenvoud 1

Wet van de eenvoud 2

Wet van de eenvoud 3

 

Als we ‘wet van de eenvoud 1’ bekijken, kunnen we een ronde en een vierkante golfbeweging onderscheiden zoals bij ‘wet van de eenvoud 2’ te zien is. De complexere vormen bij ‘wet van de eenvoud 3’ zijn ook feitelijk juist. We nemen ze alleen niet waar als we de eerste afbeelding van deze wet bekijken. De wet van eenvoud leert ons dat we alleen het meest voor de hand liggende zien. Complexiteit in webdesign moet dan ook zoveel mogelijk worden vermeden.

Volgens Jakob Nielsen is eenvoud zelfs het belangrijkste gebruiksvriendelijkeidsprincipe13. Des te minder je bezoekers laat zien, des te minder hoeven ze te scannen en te begrijpen en des te groter de kans dat ze de juiste keuze maken.

Professor John Maeda14 van MIT Media Lab15 heeft een hele weblog gewijd aan het onderwerp eenvoud16. Volgens hem wordt eenvoud niet bereikt door alles weg te halen, maar door enkel de juiste dingen over te houden. Dit is makkelijker gezegd dan gedaan. Het is moeilijk om dingen eenvoudig te maken – maar het loont, aldus Bart de Waele17

De bekende uitspraak van Albert Einstein Everything should be made as simple as possible, but not simpler. verwoordt het misschien nog wel allerbeste

Wet van goede eenvoud Telegraaf

De website van de Telegraaf18 staat boordevol informatie. De items zijn niet goed horizontaal en verticaal uitgelijnd waardoor de site chaotisch en druk oogt.

Wet van de eenvoud Nu.nl

Veruit de meeste mensen geven dan ook de voorkeur aan Nu.nl19 als nieuwssite. Het is niet voor niets de meeste succesvolle nieuwssite van Nederland20. Er is geen overkill aan informatie en items zijn goed horizontaal en verticaal uitgelijnd. Deze site straalt veel meer rust uit.

 

We zien wat we willen zien

Als praten over vormgeving word het vaak afgedaan als iets dat ontastbaar is, iets dat vooral met individuele smaak te maken heeft. De gevoelige snaar raken, daar gaat het om. Dankzij de Gestaltpsychologie weten we dat vormgeving zo ongrijpbaar nog niet is. Dat er wetten zijn die ervoor zorgen dat we dingen makkelijk kunnen groeperen waardoor een vormgeving rustig en overzichtelijk overkomt. Het is de menselijke natuur om dit prettig te vinden. Groeperen helpt ons de wereld om ons heen te ordenen. Het tegenovergestelde van orde is wanorde, wel eens mensen gehoord die dit prettig vinden? Een handjevol anarchisten daargelaten. Mensen hebben nu eenmaal een aangeboren haat jegens chaos.

Hoe vaak spreek je echter niet met iemand die een website heeft gemaakt die ronduit lelijk is maar waarvan de eigenaar zo trots als een pauw is is?

Hoe is het toch mogelijk dat er nog zoveel websites zijn die breken met elke wet van de gestaltpsychologie en toch nog bezoekers hebben. Van de 628.007 stemmen bij de website van het jaar verkiezing kozen 17% van de mensen de Telegraaf als hun favoriete nieuwssite.

Een verklaring voor dit feit is niet eenvoudig te geven. Het werk van de Deense psycholoog Edgar Rubin21 biedt een interessante invalshoek.

figuur achtergrond fenomeen

 

Zie je in ‘figuur achtergrond fenomeen’ de vaas of zie je de twee gezichten van mensen die tegen elkaar praten? Na enige inspanning zul je waarschijnlijk beide zien. Dit verschijsnel wordt ook wel het figuur-achtergrond fenomeen genoemd. Het is maar net met welke intentie we de afbeelding bekijken die bepaald wat we zien. Waarneming is dus toch niet zo objectief als de gestaltpsychologen ons doen geloven. Er is altijd een zekere mate van subjectiviteit en al snel trekken we de verkeerde conclusie.

Moeten we de wetten van de gestaltpsychologie daarom maar vergeten? Nee in dit artikel hebben we gelezen dat ze zeer waardevol zijn. Alleen het bereiken van 100 procent objectiviteit is niet haalbaar en louter gebaseerd op illusie. Waar het om gaat is dat je objectiviteit zo dicht mogelijk probeert te benaderen. Dat je subjectiviteit zoveel mogelijk probeert te objectiveren. Geobjectiveerde subjectiviteit.

Hoe goed we de wetten van de gestaltpsychologie echter ook opvolgen, altijd zal er een percentage mensen bestaan dat toch de voorkeur geeft aan de, in onze ogen, mindere website.

Ik zie ze als de uitzondering die de regel bevestigen.

Bronnen

  1. Gestaltpsychologie – Wikipediaga terug naar de content
  2. Max Wertheimer – Wikipediaga terug naar de content
  3. Kurt Koffka – Wikipediaga terug naar de content
  4. Wolfgang Köhler – Wikipediaga terug naar de content
  5. Dmoz.orgga terug naar de content
  6. Lin, D. Y. M. (2004). “Evaluating older adults’ retention in hypertext perusal: impacts of presentation media as a function of text topology.” Computers in Human Behavior, 20.ga terug naar de content
  7. Beck, D. M., and Palmer, S. E. (2002). “Top-Down Influences on Perceptual Grouping.” Journal of Experimental Psychology: Human Perception and Performance.ga terug naar de content
  8. Amazon.comga terug naar de content
  9. Why consistency is criticalga terug naar de content
  10. Subjective Contours and Associated Phenomenaga terug naar de content
  11. Dagblad van het Noordenga terug naar de content
  12. Planet – sitemapga terug naar de content
  13. Reduce Redundancy: Decrease Duplicated Design Decisionsga terug naar de content
  14. John Maedaga terug naar de content
  15. MIT Media Laboratoryga terug naar de content
  16. Maeda’s SIMPLICITYga terug naar de content
  17. Moeilijk om dingen eenvoudig te doenga terug naar de content
  18. Telegraaf.nlga terug naar de content
  19. Nu.nlga terug naar de content
  20. Website van het Jaar: Uitslagga terug naar de content
  21. Figure/Groundga terug naar de content
Be Sociable, Share!