Gestaltprincipes in webdesign

In de gestaltpsychologie wordt uit gegaan van het principe dat de mens de wereld om hem heen waar neemt in gehelen en patronen. De gestaltpsychologie was voornamelijk gericht op visuele perceptie en ging er vanuit dat onze waarneming van objecten niet een optelsom van losse kenmerken was, maar eerder een totaalbeeld. Onze hersenen zouden bij deze optelsom driedimensionale voorstellingen en tweedimensionale beelden creëren. Bron: http://nl.wikipedia.org/wiki/Gestaltpsychologie

 

Mensen zullen ingewikkelde vormen zo eenvoudig mogelijk interpreteren of waarnemen.

 

Waarom is dit voor ons van belang? Het kan ons zeer waardevolle houvast geven tijdens het ontwerpproces. Als je hier even iets tijd in steekt voor jezelf dan kun je de usability van je website verhogen. Als je bedenkt dat een bezoeker binnen een paar seconden al beslist of een webpagina wel of niet voor hem of haar geschikt is, dan moet je er voor zorgen dat deze paar seconden meteen goed zijn.

Even kort een paar afbeeldingen om inzicht te geven waar het om gaat:. Links een voorbeeld van groeperen volgens het principe van overeenkomst; wit bij wit en zwart bij zwart, het wordt ervaren als lijnen. Bij het rechter voobeeld maken onze ogen de vorm ‘af’.

Gestalt7 featured-image-gestalt


Video kijken over gestaltprincipes?


Waar moeten we als ontwerpers op letten?

  • Proximity (nabijheid): elementen die dicht bij elkaar liggen, worden als eenheid beschouwd.
  • Similarity (overeenkomstigheid): dingen die op elkaar lijken tot een geheel zien.
  • Closure (continuering): onafgebroken en netjes afgewerkte figuren verkiezen boven onsamenhangende figuren.
  • Figure ground: voorgrond vs achtergrond.
  • Common fate (gemeenschappelijke bestemming): gelijkvormige objecten samenvoegen als ze een gelijke beweging of bestemming hebben.
  • Symmetry (symmetrie): symetrische objecten worden aantrekkelijker gevonden.

 

Proximity: de wet van de nabijheid

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

proximity-2proximity-1Gestalt-1
Let op dat dingen die bij elkaar horen ook daadwerkelijk bij elkaar staan. Dit is met name goed om in gedachten te houden wanneer u met een menu bezig bent; zorg dat menu-items netjes geordend zijn zodat het voor gebruikers makkelijk zoeken is. Gebruik witruimte om ruimte te maken tussen zaken die NIET bij de groep horen.

proximity-bad-1

 

Similarity: de wet van de gelijkheid

Dingen die een overeenkomst hebben, worden als groep gezien. Deze overeenkomst kan bestaan uit kleur, vorm, lengte etc.

gelijkheid-2gelijkheid-4gelijkheid-5

Dit is zeer belangrijk in een website omdat je hiermee herkenning creëert tussen objecten.  Bijvoorbeeld alle linkjes zijn blauw en onderstreept. Of alle buttons zijn oranje met een grijze rand.  Over het algemeen proberen we hier  automatisch op te letten bij het ontwerpen en zorgen we dat we in ons ontwerp zaken zo veel als mogelijk een uitstraling geven om zo aan te geven dat ze bij elkaar horen.

gelijkheid-1

 

Closure: 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. Dit gaat zo ver dat we zelfs objecten ‘afmaken’ met onze ogen om deze geslotenheid maar te creëren.

closure-3closure-2closure-1

 

Een zeer bekend voorbeeld zijn de box-grids die we tegenwoordig veel zien in websites. Overigens hoeft de vorm niet helemaal gesloten te zijn om toch waar genomen te worden! Door hier mee te spelen kun je zeer leuke en verrassende ontwerpen creëren.

closure-4
 

Figure ground: vorm – restvorm

Elementen zijn hetzij vorm, hetzij achtergrond. Wees je er van bewust dat iedere vorm die je aanbrengt een restvorm heeft; namelijk dat wat overblijft. Hierbij is het belangrijk dat er voldoende verschil is tussen voorgrond en achtergrond zodat zaken die er uit moeten springen, er ook echt uit springen.

figure-ground-1figure-ground-4

Bij de twee linker afbeeldingen hierboven is het onduidelijk welke vorm belangrijk is; in beide zien we 2 plaatjes in. De meest rechter afbeelding (met de blokjes) is wel duidelijk. Het kleine blokje is de vorm, de grote de achtergrond. Echter, door te spelen hiermee kun je verrassende beelden krijgen:

figure-ground-2background-attachment fixed
 

Common fate: de wet van gemeenschappelijke bestemming

Dit is ook wel de wet van continuiteit. Dingen die in een doorgaande lijn of kromming zijn geplaatst worden door onze waarneming gegroepeerd. Zo kan het lijken alsof er een beweging is.

continuiteit-2continuiteit-1continuiteit-3

 

Symmetry

Hier zijn wij mensen dol op: symmetrische dingen worden mooi gevonden.

symmetrie-3symmetrie-5

Door hier mee te spelen en soms bewust het net iets anders te doen kun je heel verrassende ontwerpen creeren.

symmetrie-1symmetrie-4symmetrie-2

 


Links

Op http://www.usabilityweb.nl/2006/05/gestaltpsychologie-en-webdesign staat een helder geschreven artikel met voorbeelden hier over.

http://graphicdesignjunction.com/2013/05/how-to-use-the-gestalt-principle-in-your-web-design-projects (Engelstalig)

Op http://sarahmarran.blogspot.nl/2013/01/exercise-2-gestalt-principles.html staan een aantal leuke voorbeelden van hoe gestalt principes gebruikt zijn bij bekende en minder bekende merken in de uitingen. Deze site is weliswaar in het Engels maar het is niet veel tekst en goed te volgen.

 


Als kritische noot

In een aantal artikelen komt echter ook naar voren dat je nooit zeker weet of iedereen iets op dezelfde manier zal zien (waarnemen). Er is blijkbaar ook sprake van subjectiviteit.

Een leuke site met voorbeelden van hoe onze ogen ons “bedriegen”: http://www.ritsumei.ac.jp/~akitaoka/index-e.html
Of deze presentatie via slideshare van Rene Boonstra [slideshare id=7093878&doc=beeldcomles3-110228141205-phpapp02]