het menselijk brein is bedraad om structuur, logica en patronen te zien. Het helpt ons de wereld te begrijpen. In de jaren twintig ontwikkelde een groep Duitse psychologen theorieën over hoe mensen de wereld om hen heen waarnemen, de zogenaamde Gestaltprincipes.
bijvoorbeeld, wat zie je als je naar deze afbeelding kijkt?,
bron: het geïnspireerde oog
als je net als de meeste mensen bent, zie je waarschijnlijk een driehoek. Maar in werkelijkheid zijn er alleen maar drie blanke pac mannen.”We zien de driehoek omdat onze hersenen de dubbelzinnige visuele informatie nemen en organiseren in iets dat zinvol is voor ons-iets vertrouwd, ordelijk, symmetrisch en dat we begrijpen.
wanneer dit cognitieve proces begint, springen onze geesten van het begrijpen van alle elementen als individuele en niet-verwante componenten naar het zien van de gehele vorm als een geheel., Als gevolg daarvan nemen we vormen en objecten waar waar die niet zijn gemaakt.
om dit proces verder te illustreren, bekijk de GIF hieronder. Je hersenen zien een hond lopen, maar het is niets meer dan een reeks bewegende stippen.
bron: Gizmodo
Dit zijn eenvoudige voorbeelden, maar ze tonen de soorten snelkoppelingen die onze hersenen de hele tijd maken om snel inzicht te krijgen in de wereld.
Wat zijn de Gestaltprincipes?,
deze snelkoppelingen staan bekend als de Gestaltprincipes van visuele waarneming, en ze beschrijven hoe onze hersenen standaard structuur creëren. Maar waarom is het begrijpen van dit belangrijk voor web en mobiel design?
waarom ontwerpers zich moeten bekommeren om de Gestaltprincipes
grote ontwerpers begrijpen de krachtige rol die psychologie speelt in visuele waarneming. Wat gebeurt er als iemands oog uw ontwerpcreaties ontmoet? Hoe reageert hun geest op de boodschap die jouw stuk deelt?, – Laura Busche, brand Content strateeg bij Autodesk
denk even na over dat citaat. Wanneer mensen uw ontwerpen voor het eerst zien, hoe ervaren ze ze dan? Om te begrijpen wat maakt UI design werken, moet je de psychologie van de menselijke perceptie te begrijpen.
de fundamentele wet die een Gestaltprincipe beheerst is dat we de neiging hebben om onze ervaring te ordenen op een manier die regelmatig, ordelijk en herkenbaar is. Dit is wat ons in staat stelt om Betekenis te creëren in een complexe en chaotische wereld., En het hebben van een goed begrip van hoe deze principes werken zal u helpen op drie manieren.
- zij helpen u te bepalen welke ontwerpelementen het meest effectief zijn in een bepaalde situatie. Bijvoorbeeld wanneer u visuele hiërarchie, achtergrondschaduw, kleurverlopen moet gebruiken en hoe u vergelijkbare items kunt groeperen en verschillende items kunt onderscheiden.deze psychologische principes hebben de kracht om onze visuele perceptie te beïnvloeden, waardoor ontwerpers onze aandacht kunnen richten op specifieke focuspunten, ons specifieke acties kunnen laten ondernemen en gedragsverandering kunnen creëren.,
- en tot slot, op het hoogste niveau, helpen de Gestaltprincipes u producten te ontwerpen die het probleem van de klant oplossen of voldoen aan de behoeften van de gebruiker op een manier die mooi, aangenaam en intuïtief te gebruiken is.
In dit artikel bespreken we zeven Gestaltwetten of principes die direct van toepassing zijn op modern design, en delen we enkele voorbeelden van hoe ze gebruikt worden in UI design. Dit is geen uitputtende lijst, maar je zult al snel merken dat er een overlapping is tussen veel van de principes en dat ze allemaal vloeiend samenwerken. Laten we er nu in duiken.,
- figuur-grond
- gelijkenis
- nabijheid
- gemeenschappelijke regio
- continuïteit
- sluiting
- Focal point
principe #1: figuur-grond
het figuur-grondbeginsel stelt dat mensen instinctief objecten waarnemen als zich op de voorgrond of op de achtergrond. Ze vallen prominent op aan de voorkant (de figuur) of wijken terug in de rug (de grond).,
bron: een dwerg genaamd Warren
in de afbeelding hierboven, bijvoorbeeld, ziet uw oog direct een witte appel op een zwarte achtergrond zitten.
deze bepaling zal in de meeste gevallen snel en onbewust plaatsvinden. Figuur / grond laat ons weten waar we ons op moeten richten en wat we veilig kunnen negeren in een compositie. – Steven Bradley, webdesigner
wanneer mensen uw website of mobiele app gebruiken, is een van de eerste dingen die ze doen op elk scherm om te bepalen welke de figuur en welke de grond is.,
voorbeelden van het figure-ground Principe
De homepage van Basecamp heeft een hoop afbeeldingen, tekst, formulieren en andere informatie. En vanwege het figuur-grond principe, kunt u onmiddellijk vertellen dat u zich moet concentreren op de inhoud in de witte voorgrond gebieden.
AngelList gebruikt het figuur-grondprincipe op twee manieren hieronder. Ten eerste zitten de tekst en het logo aan de linkerkant van de pagina duidelijk bovenop de achtergrondafbeelding. Ten tweede staat de witte tekst in het menu rechts bovenop de zwarte achtergrond.,
Principe #2: gelijkenis
het principe van gelijkenis stelt dat wanneer dingen lijken op elkaar, we ze groeperen. We denken ook dat ze dezelfde functie hebben.
bijvoorbeeld, in deze afbeelding, lijken er twee afzonderlijke en verschillende groepen te zijn gebaseerd op vorm: de cirkels en de vierkanten.
bron: Creative Beacon
een verscheidenheid aan ontwerpelementen, zoals kleur en organisatie, kunnen worden gebruikt om soortgelijke groepen tot stand te brengen., In de afbeelding hieronder bijvoorbeeld, ook al zijn alle vormen hetzelfde, is het duidelijk dat elke kolom een afzonderlijke groep vertegenwoordigt:
bron: Andy Rutledge
voorbeelden van het gelijkvormigheidsprincipe
GitHub gebruikt het gelijkvormigheidsprincipe op twee manieren op de onderstaande pagina. Ten eerste gebruiken ze het om verschillende secties te onderscheiden. Je kunt meteen zien dat het grijze gedeelte bovenaan een ander doel dient dan het zwarte gedeelte, dat ook gescheiden is van en anders dan het blauwe gedeelte.,
ten tweede gebruiken ze ook de kleur blauw om links te onderscheiden van gewone tekst en om te communiceren dat alle blauwe tekst een gemeenschappelijke functie deelt.
Principe #3: nabijheid
het principe van nabijheid stelt dat dingen die dicht bij elkaar liggen meer verwant lijken te zijn dan dingen die verder uit elkaar liggen.
bron: Andy Rutledge
nabijheid is zo krachtig dat het overeenkomsten van kleur, vorm en andere factoren die een groep objecten kunnen onderscheiden, overschrijft.,
bron: Steven Bradley
zie je de drie groepen zwarte en rode stippen hierboven? De relatieve nabijheid van de objecten heeft een nog sterkere invloed op groepering dan kleur.
voorbeelden van het nabijheidsprincipe
de nabijheid van elk beeld en de bijbehorende tekst geeft aan dat ze aan elkaar gerelateerd zijn.
en Vice gebruikt het om een onderscheid te maken tussen de afbeeldingen, koppen, beschrijvingen en andere informatie voor elk van zijn verhalen.,
Principe #4: gemeenschappelijke regio
het principe van gemeenschappelijke regio is sterk gerelateerd aan nabijheid. Het stelt dat wanneer objecten zich binnen hetzelfde gesloten gebied bevinden, we ze zien als gegroepeerd.
bron: Smashing Magazine
het toevoegen van randen of andere zichtbare barrières is een geweldige manier om een waargenomen scheiding tussen groepen objecten te creëren—zelfs als ze dezelfde nabijheid, vorm, kleur, enz.hebben.,
voorbeelden van het common region principle
in het voorbeeld van Pinterest hieronder wordt het common region principle gebruikt om elke pin—inclusief de foto, titel, beschrijving, bijdrager en andere details—te scheiden van alle andere pins eromheen.
en het wordt gebruikt in het Facebook voorbeeld hieronder om te communiceren dat de opmerkingen, likes en interacties zijn geassocieerd met deze specifieke post—en niet de andere berichten eromheen.,
Principe #5: continuïteit
het continuïteitsbeginsel stelt dat elementen die op een lijn of kromme zijn gerangschikt, als meer verwant worden ervaren dan elementen die niet op de lijn of kromme staan.
bron: Smashing Magazine
in de afbeelding hierboven lijken de rode stippen in de gebogen lijn bijvoorbeeld meer gerelateerd aan de zwarte stippen op de gebogen lijn dan aan de rode stippen op de rechte horizontale lijn., Dat komt omdat je oog van nature een lijn of een kromme volgt, waardoor voortzetting een sterker signaal van verwantschap is dan de gelijkenis van kleur.
voorbeelden van het continuïteitsprincipe
Amazon gebruikt continuã teit om aan te geven dat elk van de onderstaande producten vergelijkbaar is en met elkaar verband houdt.
Sprig gebruikt het om het proces in drie stappen uit te leggen om hun app te gebruiken.
en Credit Karma gebruikt het om de voordelen te illustreren die hun diensten bieden.,
Principe #6: closure
het principe van closure stelt dat wanneer we kijken naar een complexe ordening van visuele elementen, we de neiging hebben om te zoeken naar een enkel, herkenbaar patroon.
met andere woorden, wanneer u een afbeelding ziet die ontbrekende delen bevat, zullen uw hersenen de lege plekken invullen en een compleet beeld maken zodat u het patroon nog steeds kunt herkennen.
bron: Eduard Volianskyi
bijvoorbeeld, als je naar de afbeelding hierboven kijkt zie je waarschijnlijk een zebra, ook al is de afbeelding slechts een verzameling zwarte vormen., Je geest vult de ontbrekende informatie in om een herkenbaar patroon te creëren op basis van je ervaring.
voorbeelden van het sluitingsprincipe
het sluitingsprincipe wordt vaak gebruikt in logo-ontwerpen bij verschillende bedrijven, waaronder IBM, NBC, Zendesk en Funding Circle.
Principe #7: focal point
het focal point principe stelt dat wat visueel opvalt de aandacht van de kijker eerst vastlegt en vasthoudt.,
bron: Smashing Magazine
als je naar de afbeelding hierboven kijkt, is het eerste wat je opvalt het rode vierkant omdat het anders is dan alle zwarte cirkels eromheen. Het is het eerste aandachtspunt dat je aandacht trekt, en van daaruit gaat je aandacht naar andere delen van het beeld.
voorbeelden van het focal point Principe
Twilio gebruikt het focal point principe om uw aandacht te trekken naar hun call-to-action knop.,
en in het voorbeeld hieronder combineert Instacart het focal point principe met het figure-ground principe om je oog naar de witte voorgrond te trekken en vervolgens naar de groene knop” winkels zoeken”.
Final thoughts
als je begrijpt hoe de menselijke geest werkt, is het makkelijker om de aandacht van mensen op de juiste plaats te richten. En het houden van deze principes top-of-mind zal u helpen om de gebruiker in het centrum van uw productontwikkelingsproces te houden., Als u meer wilt weten over de Gestaltprincipes van visuele waarneming, raden wij u aan de onderstaande bronnen te bekijken.,
verder lezen:
- Simplicity, Symmetry and More: Gestalt Theory And the Design Principles It caved To
- Design Principles: Visual Perception And The Principles Of Gestalt
- the Designer ’s Guide to Gestalt Theory
- Andy Rutledge’ s five-part series on Gestalt perception:
- Part 1: Figure-Ground Relationships
- Part 2: Similarity
- deel 3: nabijheid, uniforme verbondenheid en goede voortzetting
- deel 4: gemeenschappelijk lot
- deel 5: sluiting
wilt u meer weten?,
om te leren hoe UserTesting u kan helpen uw klanten te begrijpen via on-demand human insight, kunt u hier contact met ons opnemen.