Wat zijn de Gestalt principes en hoe ze toe te passen?

Een van de meest invloedrijke psychologische theorieën op het gebied van UX en interactieontwerp is de Gestalttheorie. De theorie werd opgericht door Duitse psychologen en het woord "Gestalt" betekent formulier of vorm Zoals de naam al aangeeft, is het idee achter de Gestaltprincipes dat mensen groepen objecten waarnemen als patronen in plaats van individuele objecten.

Er zijn veel artikelen over de Gestalt-principes, maar niet veel daarvan helpen je te begrijpen hoe je ze kunt toepassen in je werk als UX/UI-ontwerper. Dit artikel geeft je enkele ideeën over hoe je de Gestalt-principes kunt gebruiken om betere UX- en UI-ontwerpen te maken die mensen helpen hun doelen te bereiken met minder moeite.

De Wet van Gelijkenis

Het principe van gelijkenis stelt dat wanneer objecten fysiek gelijk zijn, we geneigd zijn om groepeer ze samen en neem aan dat ze de dezelfde functionaliteit In de onderstaande afbeelding is het bijvoorbeeld vrij gemakkelijk om de lijn met bordeaux rode cirkels te onderscheiden van de rest van de afbeelding door de andere kleur.

Een voorbeeld van het principe van gelijkenis. Foto door auteur.

Gelijkenis gebruiken in UX- en UI-ontwerp

Stel dat uw bedrijf een app heeft ontwikkeld genaamd "Il Mio Chef'' die wordt gebruikt door liefhebbers van Italiaans eten in de VS en Canada (We gebruiken deze app voor de rest van dit artikel). In een recent rapport dat uw UX-onderzoeker u overhandigde, staat dat wanneer het aankomt op het bestellen van Italiaans eten, gebruikers vooral geïnteresseerd zijn in welke restaurants het dichtst bij hen in de buurt zijn. We willen tenslotte allemaal onzelasagne of pizza laten bezorgen terwijl het nog vers en warm is, toch?

Om onze app-gebruikers gemakkelijk te laten zien welke restaurants het dichtst bij hen in de buurt zijn, kunnen we het principe van gelijkenis gebruiken door deze restaurants in de UI te markeren. In de onderstaande afbeelding kunt u zien hoe het geel markeren van deze opties (aan de rechterkant) een groot verschil maakt door visueel het verschil te benadrukken tussen de dichtstbijzijnde restaurants en de restaurants die verder weg zijn. Zo kunt ukan het principe van gelijkenis gebruiken om uw gebruikers te helpen snel te vinden wat ze zoeken.

Met behulp van het Gestalt principe van gelijkenis. Afbeelding door auteur.

De wet van nabijheid

Het principe van nabijheid stelt dat voorwerpen die zich dicht bij elkaar bevinden lijken meer verwant te zijn De eerste afbeelding en de tweede afbeelding hebben bijvoorbeeld evenveel cirkels, maar in de tweede afbeelding staan bepaalde kolommen dichter bij elkaar en ontstaat de indruk dat er drie verschillende groepen zijn in plaats van één grote groep.

Nabijheid - voorbeeld 1 - een grote groep. Afbeelding door auteur.

Nabijheid - voorbeeld 2 - drie verschillende groepen. Afbeelding door auteur.

Nabijheid gebruiken in UX- en UI-ontwerp

Laten we een voorbeeld nemen op het gebied van informatievisualisatie.

Laten we ons deze keer voorstellen dat u een leidinggevende bent die wil zien hoe uw app "Il Mio Chef" presteert. U wilt kijken naar KPI's die de financiële prestaties, de betrokkenheid van gebruikers en de tevredenheid meten. In het begin creëert uw informatie visualisatie specialist het onderstaande dashboard waardoor u en alle andere leidinggevenden verdwalen in de cijfers en nog meer vragen stellen. Na een maand zijn velen van ugewoon helemaal stoppen met het gebruik van dit dashboard.

KPI dashboard - Il Mio Chef. Afbeelding door auteur.

Op dit punt ga je terug naar je informatie visualisatie specialist en vraag je haar om het makkelijker te maken voor mensen om het grote geheel te begrijpen door het dashboard opnieuw te ontwerpen. Het principe van nabijheid komt in dit geval goed van pas, en je kunt het nieuwe ontwerp hieronder zien. Het bevat drie groepen verdeeld door het type KPI en het helpt iedereen te begrijpen hoe de app het doet in termen van financieelDoor objecten te groeperen en meer witruimte tussen de groepen te gebruiken, kunnen uw gebruikers informatie sneller verwerken.

Het Gestalt-principe van nabijheid gebruiken bij het ontwerpen van dashboards. Afbeelding door auteur.

De wet van continuïteit

Het principe van continuïteit stelt dat wanneer het oog een object begint te volgen, het de "beweging" in die richting blijft volgen totdat het een ander object tegenkomt. Deze beweging helpt ons het object waar te nemen als onderdeel van hetzelfde pad dat we moeten doorlopen om informatie te vinden. De afbeelding hieronder laat zien hoe we het principe van continuïteit kunnen gebruiken om dergelijke visuele patronen te creëren die deoog in een bepaalde richting.

Een voorbeeld van het principe van Continuïteit. Afbeelding van de auteur.

Continuïteit gebruiken in UX- en UI-ontwerp

Uw UX-onderzoeker heeft een nieuw rapport gepresenteerd waaruit blijkt dat de belangrijkste motivatie voor gebruikers om de app "Il Mio Chef" te gebruiken voedselverkenning is, omdat ze daarmee elke week nieuwe Italiaanse restaurants kunnen bezoeken. U kijkt naar de metriek die laat zien hoe vaak mensen door hun opties vegen met het huidige UI-ontwerp in de onderstaande afbeelding (linkerzijde) en ziet dat ze nooit meer dan twee keer vegen opgemiddelde om te zien welke opties voor hen beschikbaar zijn.

Met behulp van het principe van continuïteit (rechts op de afbeelding hieronder) hielp uw UX-ontwerper dat aantal te verhogen tot gemiddeld ongeveer 10 swipes. Hoe gebeurde dat? Door een deel van de afbeelding te verbergen en het feit te benadrukken dat je naar links of rechts moet vegen om te zien wat er in zit, werden de ogen van uw gebruikers geleid om letterlijk de "swipe"-beweging te maken en waren ze meer gemotiveerd om meer restaurants te verkennen.wat ze bieden. Dit is iets waartoe het eerdere ontwerp je helemaal niet motiveerde, ook al ben je daar van nature al toe gemotiveerd.

Het Gestalt-principe van continuïteit gebruiken in UX/UI-ontwerp. Afbeelding door auteur.

Samengevat Door de in dit artikel gepresenteerde Gestalt-principes te gebruiken in uw UX- en UI-ontwerp, kunt u uw gebruikers helpen informatie sneller te vinden en beter te verteren. Bovendien kan het hun tevredenheid over uw product verhogen door hen te motiveren de acties te ondernemen die zij het liefste doen.

‍

Omslag bevat artwork van Miklos Philips, bewerkt in Vectornator.