Het verkennen van de Gestalt principes van Design

Luister naar de audio versie van dit artikel

negatieve ruimte is al lang een hoofdbestanddeel van goed ontwerp. Het verlaten van witte ruimte rond elementen van een ontwerp is het eerste wat meestal in je opkomt. Maar dan zijn er ontwerpen die die witruimte gebruiken om een element af te leiden dat er niet echt is (de pijl verborgen tussen de E en X in het FedEx-logo komt meteen in gedachten als voorbeeld).

de” E “en” x ” in het FEDEX-logo maken een pijl binnen de negatieve ruimte tussen hen.,

het menselijk brein is buitengewoon goed in het invullen van de lege plekken in een afbeelding en het creëren van een geheel dat groter is dan de som van zijn delen. Daarom zien we gezichten in dingen als boombladeren of trottoirscheuren.

dit principe is een van de belangrijkste onderliggende ideeën achter de gestaltprincipes van visuele waarneming., Het meest invloedrijke vroege voorstel over de theorie werd gepubliceerd door Max Wertheimer in 1923 in zijn Gestaltwetten van perceptuele organisatie, hoewel Wolfgang Köhlers bespreking van fysieke Gestalten in 1920 ook veel invloedrijke ideeën over het onderwerp bevat.

ongeacht wie de ideeën voor het eerst voorstelde (er zijn essays die dateren uit 1890), gestaltprincipes zijn een belangrijke verzameling ideeën die elke ontwerper moet leren, en de implementatie ervan kan niet alleen de esthetiek van een ontwerp, maar ook de functionaliteit en gebruiksvriendelijkheid ervan aanzienlijk verbeteren.,

in de eenvoudigste termen is de gestalttheorie gebaseerd op het idee dat het menselijk brein zal proberen complexe beelden of ontwerpen te vereenvoudigen en te organiseren die uit vele elementen bestaan, door onbewust de delen in een georganiseerd systeem te rangschikken dat een geheel creëert, in plaats van slechts een reeks ongelijksoortige elementen. Onze hersenen zijn gebouwd om structuur en patronen te zien zodat we de omgeving waarin we leven beter kunnen begrijpen.,

Er zijn zes individuele principes die gewoonlijk geassocieerd worden met de gestalttheorie: gelijkenis, voortzetting, sluiting, nabijheid, figuur/grond, en symmetrie & orde (ook prägnanz genoemd). Er zijn ook een aantal extra, nieuwere principes soms geassocieerd met gestalt, zoals gemeenschappelijk lot.

gelijkenis

Het is menselijk om dingen samen te groeperen. In gestalt zijn vergelijkbare elementen visueel gegroepeerd, ongeacht hun nabijheid tot elkaar. Ze kunnen worden gegroepeerd op kleur, vorm of grootte., Gelijkenis kan worden gebruikt om elementen die niet direct naast elkaar in een ontwerp te binden.

de vierkantjes hier zijn allemaal gelijk verdeeld en even groot, maar we groeperen ze automatisch op kleur, ook al is er geen rijm of reden om ze te plaatsen.

natuurlijk kunt u dingen verschillend maken als u ze wilt onderscheiden van de menigte., Daarom zijn knoppen voor oproepen tot actie vaak in een andere kleur ontworpen dan de rest van een pagina—zodat ze opvallen en de aandacht van de bezoeker vestigen op de gewenste actie.

In UX-ontwerp maakt het gebruik van gelijkenis duidelijk voor uw bezoekers welke items gelijk zijn. Bijvoorbeeld, in een lijst met functies die repetitieve ontwerpelementen gebruiken (zoals een pictogram met 3-4 regels tekst), zou het gelijkvormigheidsprincipe het gemakkelijk maken om er doorheen te scannen., Het veranderen van de ontwerpelementen voor functies die u wilt markeren maakt ze daarentegen opvallen en geeft ze meer belang in de perceptie van de bezoeker.

zelfs dingen die zo eenvoudig zijn als ervoor zorgen dat links in een ontwerp op dezelfde manier worden geformatteerd, zijn gebaseerd op het principe van gelijkenis in de manier waarop uw bezoekers de organisatie en structuur van uw site zullen waarnemen.

Continuation

De Wet van continuïteit stelt dat het menselijk oog het meest vloeiende pad zal volgen bij het bekijken van lijnen, ongeacht hoe de lijnen daadwerkelijk werden getrokken.,

het oog heeft de neiging om de rechte lijn van het ene uiteinde van deze figuur naar het andere te volgen, en de gebogen lijn van boven naar beneden, zelfs als de lijnen halverwege van kleur veranderen.

deze voortzetting kan een waardevol hulpmiddel zijn wanneer het doel is het oog van een bezoeker in een bepaalde richting te leiden. Ze zullen het eenvoudigste pad op de pagina volgen, dus zorg ervoor dat de meest vitale delen die ze moeten zien binnen dat pad vallen.,

omdat het oog van nature een lijn volgt, zal het plaatsen van items in een reeks in een lijn het oog van het ene item naar het volgende trekken. Horizontale schuifregelaars zijn zo ‘ n voorbeeld, net als gerelateerde product aanbiedingen op sites als Amazon.

Closure

Closure is een van de coolste gestaltprincipes die ik al aan het begin van dit stuk heb genoemd. Het is het idee dat je hersenen de ontbrekende delen van een ontwerp of beeld zullen invullen om een geheel te creëren.

in zijn eenvoudigste vorm, het sluitingsprincipe laat uw oog om iets als een stippellijn te volgen tot het einde., Maar complexere toepassingen worden vaak gezien in logo ‘ s, zoals die voor het Wereld Natuur Fonds. Grote stukken van de omtrek van de panda ontbreken, maar je hersenen hebben geen probleem met het invullen van de ontbrekende secties om het hele dier te zien.

het gestaltprincipe van sluiting is prachtig geïllustreerd in het panda-logo van het Wereld Natuur Fonds. De hersenen completeren de witte vormen, ook al zijn ze niet goed gedefinieerd.,

sluiting wordt vaak gebruikt in logo ontwerp, met andere voorbeelden, waaronder die voor de USA Network, NBC, Sun Microsystems, en zelfs Adobe.

een ander zeer belangrijk voorbeeld van sluiting op het werk in UX-en UI-ontwerp is wanneer u een gedeeltelijke afbeelding van het scherm van de gebruiker laat vervagen om hen te laten zien dat er meer te vinden is als ze naar links of rechts vegen. Zonder een gedeeltelijke afbeelding, d.w.z.,, als alleen volledige beelden worden getoond, de hersenen niet meteen interpreteren dat er meer te zien zou kunnen zijn, en daarom is uw gebruiker minder kans om te scrollen (aangezien sluiting is al duidelijk).

Proximity

Proximity verwijst naar hoe dicht elementen bij elkaar staan. De sterkste nabijheidsrelaties zijn die tussen overlappende onderwerpen, maar het groeperen van objecten in een enkel gebied kan ook een sterk nabijheidseffect hebben.

het tegenovergestelde is natuurlijk ook waar., Door ruimte tussen elementen te plaatsen, kunt u scheiding toevoegen, zelfs wanneer hun andere kenmerken hetzelfde zijn.

neem deze groep Cirkels, bijvoorbeeld:

het enige verschil tussen de groep links en die rechts is de nabijheid van de lijnen. En toch interpreteert je brein het beeld rechts als drie verschillende groepen.

een USPS PDF-formulier voorbeeld waarbij het proximity gestalt Principe UX aantast., Als gevolg van het veld labels dichter bij de velden onder hen, mensen zouden ten onrechte geloven dat dat is waar de informatie gaat voor “c.” en “d.” toch, de informatie wordt verondersteld te worden verstrekt in de velden boven de tekst labels.

in UX-ontwerp wordt nabijheid meestal gebruikt om gebruikers bepaalde dingen samen te laten groeperen zonder het gebruik van dingen als harde randen. Door soortgelijke dingen dichter bij elkaar te brengen, met ruimte tussen elke groep, zal de kijker onmiddellijk de organisatie en structuur oppikken die jij wilt dat ze waarnemen.,

figuur / grond

het figuur / grondprincipe is vergelijkbaar met het sluitingsprincipe omdat het voordeel haalt uit de manier waarop de hersenen negatieve ruimte verwerken. Je hebt waarschijnlijk voorbeelden van dit principe gezien die rondzweven in memes op sociale media, of als onderdeel van logo ‘ s (zoals het FedEx-logo al genoemd).

uw hersenen zullen onderscheid maken tussen de objecten die zich op de voorgrond van een afbeelding bevinden (de figuur of het brandpunt) en de achtergrond (het gebied waarop de figuren rusten)., Het wordt interessant als de voorgrond en de achtergrond twee verschillende afbeeldingen bevatten, zoals dit:

sommige mensen zullen onmiddellijk de boom en vogels zien als ze het logo van de Pittsburgh Zoo bekijken & PPG Aquarium, terwijl anderen de gorilla en de Leeuw naar elkaar zien staren.

een ander goed voorbeeld van het figure/ground gestalt Principe.,

een eenvoudiger voorbeeld kan worden gezien met deze afbeelding, van twee gezichten die een kandelaar of vaas tussen hen creëren:

In deze beroemde illusie, ontwikkeld door de Deense psycholoog Edgar Rubin, wordt de kijker meestal gepresenteerd met twee vorminterpretaties—twee gezichten of een vaas. Het is een ander uitstekend voorbeeld van het figuur/grond Principe.

in het algemeen interpreteren uw hersenen het grotere gebied van een afbeelding als de grond en het kleinere als de figuur., Zoals te zien in de afbeelding hierboven, hoewel, kunt u zien dat lichter en donkerder kleuren kunnen beïnvloeden wat wordt gezien als de figuur en wat wordt gezien als de grond.

het figure / ground-principe kan erg handig zijn wanneer productontwerpers een focuspunt willen markeren, vooral wanneer het actief is of in gebruik is—bijvoorbeeld wanneer er een modaal venster verschijnt en de rest van de site in de achtergrond verdwijnt, of wanneer op een zoekbalk wordt geklikt en het contrast tussen dit punt en de rest van de site wordt vergroot.,

symmetrie en orde

de wet van symmetrie en orde is ook bekend als prägnanz, het Duitse woord voor “goed figuur.”Wat dit principe zegt is dat je hersenen dubbelzinnige vormen op een zo eenvoudig mogelijke manier zullen waarnemen. Een monochrome versie van het Olympisch logo wordt bijvoorbeeld gezien als een reeks overlappende cirkels in plaats van een verzameling gebogen lijnen.,

Hier is een ander goed voorbeeld van de gestalt ontwerp principe “prägnanz”:

Je hersenen interpreteren de afbeelding aan de linkerkant als een rechthoek, cirkel en driehoek, zelfs wanneer de contouren van elk onvolledig zijn, omdat deze eenvoudiger vormen dan het algemene beeld.

Common fate

hoewel common fate oorspronkelijk niet was opgenomen in de gestalttheorie, is het sindsdien toegevoegd. In UX design kan het nut ervan niet over het hoofd worden gezien., Dit principe stelt dat mensen dingen die naar dezelfde richting wijzen of in dezelfde richting bewegen, bij elkaar zullen brengen.

in de natuur zien we dit in dingen als zwermen vogels of scholen vissen. Ze bestaan uit een aantal individuele elementen, maar omdat ze zich schijnbaar als één bewegen, groeperen onze hersenen ze samen en beschouwen ze als een enkele prikkel.

een koppel vogels wordt gezien als één eenheid wanneer ze in dezelfde richting vliegen en daarmee een gemeenschappelijk lot delen., (door Martin Adams on Unsplash)

Dit is erg handig in UX omdat geanimeerde effecten vaker voorkomen in modern design. Merk op dat elementen eigenlijk niet hoeven te bewegen om te profiteren van dit principe, maar ze moeten wel de indruk van beweging geven.

Gestaltprincipes in UX Design

zoals met elk psychologisch principe, kan het leren om de visuele waarnemingsprincipes van gestalt op te nemen in uw ontwerpwerk de gebruikerservaring aanzienlijk verbeteren., Begrijpen hoe het menselijk brein werkt en vervolgens de natuurlijke neigingen van een persoon uitbuiten, zorgt voor een naadloze interactie die ervoor zorgt dat een gebruiker zich op zijn gemak voelt op een website, zelfs als het zijn eerste bezoek is.

Gestaltprincipes zijn relatief eenvoudig op te nemen in zowat elk ontwerp en kunnen snel een ontwerp verheffen dat lukraak lijkt of alsof het Vecht voor de aandacht van een gebruiker voor een ontwerp dat een naadloze, natuurlijke interactie biedt die gebruikers leidt naar de actie die u wilt dat ze ondernemen.