over de auteur

Jon was jarenlang een visueel ontwerper voordat hij de sprong maakte naar interactieontwerp. Hij heeft een master ‘ s degree in Human-Computer Interaction van de DePaul …Meer aboutJon↬

het perceptuele proces stelt ons in staat om de wereld waar te nemen via onze zintuigen van zicht, geur, geluid, smaak en aanraking. In het bijzonder verwerkt ons visuele systeem enorme hoeveelheden informatie in zijn omgeving. In plaats van elementen afzonderlijk waar te nemen, organiseert ons brein patronen, objecten en vormen in hele vormen die we kunnen begrijpen.

De gestaltgroepingsprincipes van visuele waarneming beschrijven deze organisatie als een reeks principes die verklaren hoe we deze enorme hoeveelheid visuele prikkels waarnemen en organiseren. De gestaltprincipes-gelijkenis, nabijheid, sluiting, figuur-grond, voortzetting en gemeenschappelijk lot — zijn een populair instrument dat door ontwerpers wordt gebruikt voor het visueel organiseren van informatie. Als visueel ontwerper, en nu interaction designer, pas ik deze principes regelmatig toe om relaties en verschillen tussen elementen in mijn ontwerpen te creëren. Inzicht in hoe deze principes werken, en hoe ze te gebruiken in uw ontwerpen, produceert sterker en meer boeiende werk.

bent u klaar om uw ontwerpen te verbeteren? Laten we beginnen met zoeken naar overeenkomsten.

Similarity

Het gestaltprincipe van similarity zegt dat elementen die vergelijkbaar zijn, meer verwant worden waargenomen dan elementen die verschillend zijn. Gelijkenis helpt ons objecten te organiseren door hun verwantschap met andere objecten binnen een groep en kan worden beïnvloed door de attributen van kleur, grootte, vorm en oriëntatie.

kleur gebruiken om relaties toe te wijzen

gelijkenis wordt in het bijzonder beïnvloed door kleur. Merk in het onderstaande voorbeeld op hoe de gekleurde vormen een sterk effect hebben bij het toewijzen van een groepering of relatie, zelfs wanneer verschillende vormen zijn opgenomen.

het gebruik van grootte om relaties toe te wijzen

grootte is een ander handig hulpmiddel dat we kunnen gebruiken bij het maken van overeenkomsten. In het onderstaande voorbeeld zorgt de gelijkenis in grootte ervoor dat de grotere vormen opvallen en een groep vormen, hoewel alle vormen hetzelfde zijn.

Shape gebruiken om relaties toe te wijzen

Shape is nuttig bij groeperen op gelijkenis, maar het heeft het zwakste groepeffect in vergelijking met kleur en grootte. In het voorbeeld dat hier wordt gezien, zorgt vorm ervoor dat we elementen interpreteren als kolommen van cirkels en vierkanten, in tegenstelling tot rijen van afwisselende cirkels en vierkanten.

met behulp van oriëntatie om relaties toe te wijzen

oriëntatie kan ook worden gebruikt om te groeperen door gelijkenis. Door een aantal van de vierkanten in deze groep 45 graden te draaien, wordt een aparte groepering gemaakt die als gerelateerd wordt ervaren. Ze lijken bijna samen te bewegen in een vergelijkbare richting in vergelijking met de vormen om hen heen. Dit raakt eigenlijk aan het gestaltprincipe van gemeenschappelijk lot, een principe waar we in een toekomstig artikel op ingaan. Maar voel je vrij om vooruit te springen en Google het (na het lezen van dit artikel, natuurlijk!). Het is een fascinerend principe dat vaak om je heen gebeurt.

meer over kleur

zoals eerder vermeld, wordt gelijkenis met name beïnvloed door kleur en kan andere attributen overschrijven. We kunnen bijvoorbeeld het voorbeeld van gelijkenis in vorm overschrijven door kleur toe te voegen. Nu zien we afwisselende rijen van rode en witte vormen in tegenstelling tot kolommen van cirkels en vierkanten. Probeer het eens. Probeer de kolommen van cirkels en vierkanten te zien. Mogelijk, maar behoorlijk moeilijk nu, is het niet?

bovendien kan kleur de grootte overschrijven. Wanneer we kleur toevoegen aan het voorbeeld van gelijkenis in grootte, maken we twee groepen gescheiden van elkaar. Nu zien we de grote rode vierkanten als één groep en het enkele grote witte vierkant als een aparte, ongerelateerde (en eenzame) groep.

deze twee voorbeelden illustreren hoe krachtig kleur kan zijn bij het toewijzen van relaties tussen elementen. Probeer kleur in je werk te gebruiken om elementen te onderscheiden en je zult versteld staan van hoeveel sterker je groeperingen zijn.

Similarity in Practice

bij het ontwerpen kunnen we similarity gebruiken om organisatie en associaties over te brengen door te laten zien welke elementen al dan niet gerelateerd zijn aan elkaar. Bijvoorbeeld, de twee secties weergegeven op Salon site hieronder zijn gegroepeerd op hun relatieve grootte. We zien duidelijk twee aparte groepen, met topverhalen aan de linkerkant en de meeste lezen aan de rechterkant. Hoewel beide secties bieden dezelfde functie-weergeven van artikelen te lezen-groeperen op grootte wijst meer salience aan de linker groep, waardoor Salon om de aandacht te begeleiden naar hun top verhalen.

in tegenstelling, het gebrek aan grootteverschillen in dit voorbeeld van Amazon geeft geen specifiek belang aan een sectie. Ondanks dit wordt de gelijkenis nog steeds bereikt door het gebruik van herhaling van dezelfde grootte en vorm, waardoor we rijen items waarnemen.

soortgelijk kleurgebruik

we weten dat kleur een sterke indicator is van gelijkenis, wat helpt om inhoud te organiseren en begrijpelijk te maken. In dit voorbeeld van Cars.com, vergelijkbaar kleurgebruik helpt ons onderscheid te maken tussen wat is een koptekst, body copy, en link tekst. (Volledige openbaarmaking: ik werk bij Cars.com als interaction designer.) Door verschillende kleuren te gebruiken voor elk van deze elementen, verwachten we dat ze op dezelfde manier functioneren en, in het geval van de blauwe link tekst, zich op dezelfde manier gedragen.

Proximity

het gestaltprincipe van proximity zegt dat elementen die dichter bij elkaar staan, meer verwant zijn dan elementen die verder van elkaar verwijderd zijn. Net als bij gelijkenis, helpt nabijheid ons objecten te organiseren door hun verwantschap met andere objecten. Nabijheid is het sterkste principe om de verwantschap van objecten aan te geven, zodat we informatie sneller en efficiënter kunnen begrijpen en organiseren.

De voorbeelden van cirkels hieronder laten zien hoe nabijheid kan worden gebruikt om ons te helpen objecten als gerelateerd te zien. Zoals we hier zien, zijn de cirkels uitgespreid en vertonen ze geen relatie, waarbij ieder als een afzonderlijk object wordt waargenomen.

echter, wanneer de cirkels dicht bij elkaar worden getrokken, krijgen ze een relatie toegewezen en worden ze niet langer als afzonderlijke objecten waargenomen.

witruimte

witruimte is een onschatbare tool voor het creëren van nabijheid. Het nemen van dezelfde groep cirkels en het toevoegen van witruimte helpt ons om dingen anders waar te nemen. Nu, aan de linkerkant, zorgt de nabijheid van de vormen ervoor dat we de twee groepen waarnemen als kolommen, elk zijn eigen groep. Aan de rechterkant zorgt de nabijheid van de vormen ervoor dat we de twee groepen als rijen waarnemen, weer elk hun eigen groep. Gebruik witruimte in uw ontwerpen om groepen te versterken en ze te onderscheiden van andere elementen.

de kracht van nabijheid

nabijheid is sterk genoeg om andere elementen van variatie te overmeesteren. Merk op hoe nabijheid nog steeds wint, zelfs wanneer andere attributen, zoals kleur en vorm, worden toegevoegd. Hoe ze ook proberen, kleur en vorm overmeesteren de nabijheid hier niet en elke groepering wordt nog steeds gezien als een apart element.

Proximity in de praktijk

wanneer we informatie in onze ontwerpen organiseren, kunnen we proximity gebruiken om relaties tussen elementen te creëren om de gepresenteerde informatie te begrijpen. Door bijvoorbeeld deze afbeeldingen uit de Apple Store dicht bij elkaar te groeperen, wijzen we een relatie toe aan de hele groep. We zien ze als gerelateerd en verwachten dat de inhoud vergelijkbaar is.

echter, wanneer we de middelste kolom verwijderen, nemen we plotseling twee afzonderlijke groepen waar en hebben we een verwachting van verschillende inhoud tussen hen.

het combineren van nabijheid en gelijkenis

groeperen op nabijheid kan ook worden gecombineerd met gelijkenis om sterkere relaties te creëren. Gezien in dit voorbeeld van Amazon, groeperen door nabijheid en gelijkenis in grootte zorgt ervoor dat we twee afzonderlijke groepen waar te nemen en wijst meer bekendheid aan de linker groep.

nabijheid en hiërarchie

nabijheid is uitstekend voor het organiseren van hiërarchische elementen. In dit voorbeeld van Crate & Barrel, worden opties gegroepeerd onder gemeenschappelijke koppen, waardoor relaties worden gecreëerd, wat het scannen en vinden van informatie veel gemakkelijker maakt.

wanneer de koppen worden verwijderd en de opties worden gegroepeerd zonder nabijheid, verliezen we de relaties die zijn gemaakt en wordt het veel moeilijker om snel te scannen en de gewenste informatie te vinden. Probeer het zelf. Ga je gang en zie hoe snel je koffiemokken kunt vinden in de groepering met koppen versus de groepering zonder koppen. Een beetje moeilijker om er snel naar toe te springen, is het niet?

conclusie

inzicht in het gebruik van gelijkenis en nabijheid om de relaties tussen elementen in uw werk te beïnvloeden zal u helpen ontwerpen te maken die een eenvoudiger organisatie mogelijk maken en de bruikbaarheid van uw werk verbeteren. Gebruik gelijkenis en nabijheid om zowel relaties als verschillen tussen elementen in uw ontwerpen te creëren. Experimenteer met het gebruik van witruimte, kleur, grootte, vorm en oriëntatie van elementen en meng beide principes samen om zeer sterke en boeiende relaties te produceren.

In het volgende deel van deze serie zullen we kijken naar afsluiting en figuur-grond, en onderzoeken hoe deze twee gestaltprincipes positieve en negatieve ruimte gebruiken om eenvoudige maar krachtige relaties te creëren.

Resources And Good Reads

• Gestalt principles on Scholarpedia.”Laws of Organization in Perceptual Forms”: tekst van Max Wertheimer ‘ s baanbrekende artikel uit 1923.Universal Principles of Design Revised and updated: 125 manieren om de bruikbaarheid te verbeteren, perceptie te beïnvloeden, aantrekkingskracht te vergroten, betere ontwerpbeslissingen te nemen en te onderwijzen door middel van ontwerp, door William Lidwell, Kritina Holden en Jill Butler. Rockport Pub, 2010.
• Informatievisualisatie: perceptie voor ontwerp, door Colin Ware. Elsevier, 2012.

• ontwerpprincipes: Visuele perceptie en de principes van Gestalt
• elementen verbinden en scheiden door Contrast en gelijkenis
• compositorische balans, symmetrie en asymmetrie
• uw e-Mailworkflow verbeteren met modulair ontwerp
• gebruikerservaring verbeteren met Real-Time functies
(ml, da, og, jb, il)