Creëer betere visualisaties met de Gestalt-principes (deel 2)

In de vorige blog heb ik aandacht besteed aan vier Gestalt-wetten, die je kunt handhaven om datavisualisaties te verbeteren. In dit vervolg behandel ik nog vier Gestalt-principes. Doe er je voordeel mee!

Gestalt-wet van nabijheid

Deze wet stelt dat objecten die dicht bij elkaar zijn geplaatst als een groep worden gezien. We maken gemakkelijk vergelijkingen en zoeken naar overeenkomsten in dergelijke groepen. Objecten die verder van elkaar liggen, worden gezien als niet-gerelateerd of minder gerelateerd.

Laten we de wet van nabijheid in actie bekijken. In het volgende diagram vormen de verkopen van de regio’s “Noord”, “Zuid”, “Oost” en “West” 4 afzonderlijke groepen: “Kwart 1”, “Kwartaal 2”, “Kwartaal 3” en “Kwartaal 4” .

Het is vrij eenvoudig om de omzet van elke regio binnen een kwartaal te vergelijken (wat onze groepering is volgens de wet van nabijheid) vanwege hun nabijheid bij elkaar.

Maar vergelijk de verkoop van het “Noord” -regio (blauwe staafdiagrammen) over de 4 kwartalen. Moeilijk toch?
Laten we onze grafiek herzien door gebruik te maken van de wet van nabijheid:

Probeer nu de verkopen van de regio “Noord” (en andere regio’s) in de kwartalen te vinden en te vergelijken met behulp van de herziende grafiek. Het zou nu eenvoudiger moeten zijn.

Les: weet waar uw diagram op wil focussen. Houd die gegevenspunten dicht bij elkaar door ze te groeperen volgens uw vastgestelde informatieprioriteit.

Gestalt-wet van de isomorfe correspondentie

Deze wet stelt dat mensen afbeeldingen interpreteren en erop reageren op basis van hun ervaringen uit het verleden. Deze wet legt bijvoorbeeld uit waarom het vasthouden aan algemeen aanvaarde conventies voor gebruikersinterfaces, zoals blauw-en-onderstreepte hyperlinks in webpagina’s, effectief is. Een toepassing van deze wet op het gebied van gegevensvisualisatie is de selectie van kleuren voor uw diagrammen. Veel culturen en naties associëren bijvoorbeeld de kleur rood met ‘gevaar’ of ‘stop’ en groen met ‘groei’ of ‘natuur’.

Wanneer je diagrammen maakt met positief / negatieve connotaties (zoals winst / verlies-diagrammen en omzetdiagrammen), kun je je diagram dienovereenkomstig een kleurcode geven – groen voor positief en rood voor negatief. (Dit is een populaire conventie voor grafieken in de zakenwereld waar mensen aan gewend zijn.)

In de grafiek “Totale omzet” zie je hoe – dankzij de kleuren die voor de staafdiagrammen worden gebruikt – de gebruiker snel het idee krijgt dat de inkomsten twee maanden onder de beoogde omzet lagen met minimale inspectie van de grafiek.

Les: houd rekening met uw gebruikers en hun vooroordelen en eerdere ervaringen; vasthouden aan populaire conventies en best practices, indien mogelijk.

Gestalt-wet van figuur en grond

Deze wet stelt dat objecten van een afbeelding ofwel worden waargenomen als figuren (afzonderlijke elementen van focus) of als grond (de achtergrond waarop de figuren rusten). Objecten op de voorgrond zijn belangrijk. Objecten op de achtergrond zijn minder belangrijk. Webontwerpers moeten al bekend zijn met het concept van de figuur / grondwet.

Hoe meer het contrast tussen de figuur en de grond, hoe gemakkelijker het is om onderscheid te maken tussen de twee typen objecten. Hieronder, welke grafiek vind je beter leesbaar?

Vanwege het lage contrast tussen het figuur en de achtergrond in de grafiek aan de linkerkant, is er een extra cognitieve belasting. Het verhogen van het contrast (zoals in de grafiek aan de rechterkant), verbetert de leesbaarheid.

Les: zorg voor voldoende contrast tussen uw figuren en de grond

Gestalt-wet van de isomorfe correspondentie

Deze wet stelt dat wanneer lijnen of vormen samen in dezelfde richting bewegen, ze een gevoel van eenheid creëren en een relatie aanduiden. Ze delen een gemeenschappelijk lot.

Aan de andere kant, wanneer lijnen of vormen in verschillende richtingen bewegen, worden ze als niet-verwant of minder gerelateerd beschouwd. Hieronder, in de grafiek aan de linkerkant, lijkt de datavelden voor “Product A” en “Product B” samen te gaan en een groepering te vergemakkelijken. In de grafiek aan de rechterkant, beweegt de plot voor “Product C” zich in een andere richting, zodat “Product C” dus wordt gezien als verschillend en niet gerelateerd.

Les: Gebruik richting en / of beweging om relaties te leggen of te ontkennen.

Overzicht

Om de lessen samen te vatten die we kunnen afleiden uit deze Gestalt-wetten:

• Wet van Prägnanz: houd het simpel. Rangschik data waar mogelijk logisch.
• Wet van continuïteit: rangschik objecten in een lijn om groeperen en vergelijken te vergemakkelijken.
• Gelijkwaardigheidswet: gebruik vergelijkbare kenmerken (kleur, grootte, vorm, enz.) Om verbanden te leggen en groeperingen van objecten aan te moedigen.
• Wet van Focal Point: gebruik onderscheidende kenmerken (zoals een andere kleur of een andere vorm) om focuspunten te markeren en te maken.
• Wet van nabijheid: weet wat de informatieprioriteit van uw diagram is en maak vervolgens groeperingen door nabijheid om die prioriteit te ondersteunen.
• Law of Isomorphic Correspondence: houd rekening met uw gebruiker en zijn vooroordelen en ervaringen. Blijf bij gevestigde conventies en best practices.
• Figuur-grond wet: zorg voor voldoende contrast tussen voor- en achtergrond, zodat diagrammen en grafieken beter leesbaar zijn.
• Wet van gemeenschappelijk lot: gebruik richting en / of beweging om relaties te leggen of te ontkennen.

Aanbevolen literatuur

Kurt Kofka – Principles of Gestalt Psychology

Susan Weinschenk – 100 Things Every Designer Needs to Know About People