Den menneskelige hjerne er kablet til å se struktur, logikk og mønstre. Det hjelper oss til å forstå verden. På 1920-tallet en gruppe tyske psykologer utviklet teorier rundt hvordan vi som mennesker oppfatter verden rundt dem, kalles Gestalt prinsipper.
For eksempel, hva ser du når du ser på dette bildet?,
Kilde: Den Inspirerte Øye
Hvis du er som folk flest, har du sannsynligvis se en trekant. Men i virkeligheten er alt som er der er tre hvite «pac menn.»Vi se på trekant-fordi hjernen vår, ta tvetydig visuell informasjon og organisere det til noe som gir mening for oss—noe som er kjent, ryddig, symmetrisk og at vi forstår.
Når dette kognitive prosessen spark i våre sinn spranget fra å forstå alle elementene som individuelle og komponenter som ikke er relatert til å se hele formen som en helhet., Og som et resultat, oppfatter vi former og objekter der ingen ble opprettet.
for Å illustrere denne prosessen, sjekk ut GIF nedenfor. Hjernen ser en hund å gå, men det er noe mer enn en serie av bevegelige prikker.
Kilde: Gizmodo
Disse er enkle eksempler, men viser de typer snarveier hjernen vår gjør hele tiden for å raskt gjøre følelse av verden.
Hva er Gestalt prinsipper?,
Disse snarveiene er kjent som Gestalt prinsipper for visuell persepsjon, og de detalj hvordan hjernen vår skape struktur som standard. Men hvorfor er det å forstå dette viktige for web og mobil design?
Hvorfor designere bør bry seg om Gestalt prinsipper
Store designere forstå den kraftige rolle som psykologi spiller i visuell persepsjon. Hva skjer når noens øyne møter din design kreasjoner? Hvordan har deres sinn reagerer på meldingen din del er å dele?, —Laura Busche, Splitter Innhold Strateg i Autodesk
Tenk på at quote for et minutt. Når folk først se din design, og hvordan de opplever dem? For å forstå hva som gjør UI design-arbeid, du trenger for å forstå psykologi av menneskelig persepsjon.
Den grunnleggende loven som styrer en Gestalt-prinsippet er at vi har en tendens til å bestille vår erfaring på en måte som er vanlig, ryddig, og gjenkjennelig. Dette er hva som gir oss mulighet til å skape mening i et komplekst og kaotisk verden., Og ha en solid forståelse av hvordan disse prinsippene arbeid vil hjelpe deg på tre måter.
- De vil hjelpe deg å avgjøre hvilke design elementer som er mest effektive i en gitt situasjon. For eksempel, når du skal bruke visual hierarki, bakgrunnsskygge, gradienter, og hvordan du gruppere lignende elementer og skille forskjellige de er.
- Disse psykologiske prinsipper hold makt til å påvirke vår visuelle persepsjon, som lar designere til å rette vår oppmerksomhet til bestemte punkter i fokus, få oss til å utføre bestemte handlinger, og opprette atferdsmessige endringer.,
- Og til slutt, på det høyeste nivået, Gestalt prinsipper hjelpe deg å designe produkter som løser kundens problem eller møte brukerens behov på en måte som er vakker, behagelig og intuitiv å bruke.
I denne artikkelen vil vi diskutere syv Gestalt lover eller prinsipper som direkte gjelder moderne design, og dele noen eksempler på hvordan de er brukt i UI design. Dette er ikke en uttømmende liste, men du vil raskt begynner å merke at det er en overlapping mellom mange av prinsippene, og at de alle jobber sammen for flytende. Nå la oss dykke i.,
- Figur-bakken
- Likhet
- Nærhet
- Felles område
- Kontinuitet
- Nedleggelse
- Fokale punkt
Prinsipp #1: figur-bakken
figur-bakken prinsippet sier at folk instinktivt oppfatter objekter som enten være i forgrunnen eller bakgrunnen. De enten stå tydelig ut i front (figur) eller falle inn i ryggen (bakken).,
Kilde: En Dverg som Het Warren
I bildet over, for eksempel at øyet ikke umiddelbart ser en hvit apple sitter på en svart bakgrunn.
Denne bestemmelse skal skje raskt og ubevisst i de fleste tilfeller. Figur/Bakken lar oss vite hva vi bør fokusere på og hva vi kan trygt se bort i en komposisjon. —Steven Bradley, web designer
Når folk bruker nettstedet eller mobil-app, en av de første tingene de gjør på hver skjerm er å fastslå hva som er figur, og som er i bakken.,
Eksempler på figur-bakken prinsippet
Basecamp hjemmeside har en haug av grafikk, tekst, skjemaer og annen informasjon. Og på grunn av figur-bakken prinsippet, kan du umiddelbart fortelle at du bør fokusere på innholdet i det hvite forgrunnen områder.
AngelList bruker figur-bakken i prinsippet to måter nedenfor. Første, tekst og logo på venstre side av siden er helt klart sitter på toppen av bakgrunnsbildet. For det andre, hvit tekst i menyen på høyre står på toppen av den svarte bakgrunnen.,
Prinsipp #2: likhet
prinsippet om likhet sier at når ting ser ut til å være lik hverandre, vi gruppere dem sammen. Og vi har også en tendens til å tenke at de har samme funksjon.
For eksempel, i dette bildet, det synes å være to separate og distinkte grupper basert på formen: sirkler og kvadrater.
Kilde: Creative Beacon
En rekke av design elementer, som farge og organisasjon, kan brukes til å etablere lignende grupper., I bildet under, for eksempel, selv om alle figurene er de samme, er det klart at hver kolonne representerer en distinkt gruppe:
Kilde: Andy Rutledge
Eksempler på likheten prinsippet
GitHub bruker likheten i prinsippet to måter på siden nedenfor. Først, de bruker det til å skille mellom ulike seksjoner. Du kan umiddelbart si at den grå delen på toppen tjener et annet formål enn den svarte delen, som også er atskilt fra og annerledes enn den blå delen.,
Andre, de bruker også fargen blå for å skille lenker fra vanlig tekst, og for å kommunisere at alle blå tekst aksjer en felles funksjon.
– Prinsippet #3: nærhet
prinsippet om nærhet sier at ting som er tett sammen, synes å være mer i slekt enn ting som er plassert lengre fra hverandre.
Kilde: Andy Rutledge
Nærhet er så kraftig at det overstyrer likheten av farger, form, og andre faktorer som kan skille en gruppe av objekter.,
Kilde: Steven Bradley
legg Merke til de tre gruppene av svarte og røde prikker over? Den relative nærhet av objektene har en enda sterkere innflytelse på gruppering enn farge gjør.
Eksempler på nærhet prinsippet
nærhet av hvert bilde, og den tilhørende teksten kommuniserer at de er relatert til hverandre.
Og Vice bruker den til å skille mellom bilder, overskrifter, beskrivelser og annen informasjon for hver av sine historier.,
– Prinsippet #4: felles regionen
prinsippet om felles regionen er svært knyttet til nærhet. Den sier at når gjenstander er lokalisert i det samme lukket område, oppfatter vi dem som blir gruppert sammen.
Kilde: Smashing Magazine
ved å Legge rammer eller andre synlige barrierer er en flott måte å skape et oppfattet skille mellom grupper av objekter, selv om de har den samme nærhet, form, farge, osv.,
Eksempler på vanlige regionen prinsippet
I eksempelet fra Pinterest nedenfor, er det vanlig å regionen prinsippet er brukt for å skille pin—herunder dets bilde, tittel, beskrivelse, bidragsyter, og andre detaljer—fra alle de andre pinnene rundt det.
Og det er brukt i Facebook eksemplet nedenfor for å kommunisere at kommentarer, likes, og interaksjoner er forbundet med dette innlegget—og ikke de andre innleggene som omgir den.,
– Prinsippet #5: kontinuitet
prinsippet om kontinuitet sier at elementer som er ordnet på en linje eller kurve er oppfattet å være mer i slekt enn elementer som ikke er på linje eller kurve.
Kilde: Smashing Magazine
I bildet ovenfor, for eksempel, er den røde prikker i den buede linjen synes å være mer knyttet til svarte prikker på den buede linje enn til røde prikker på rett, horisontal linje., Det er fordi øyet naturlig følger en linje eller en kurve, noe som gjør videreføring et sterkere signal om relatedness enn likheten av farge.
Eksempler på kontinuitetsprinsippet
Amazon bruker kontinuitet for å kommunisere at hvert av produktene nedenfor ligner og er i slekt med hverandre.
Kvist bruker det til å forklare de tre-trinns prosess for å bruke appen deres.
Og Kreditt Karma bruker det for å illustrere fordelene som sine tjenester gir.,
– Prinsippet #6: avslutning
prinsippet om stenging sier at når vi ser på en kompleks sammensetning av visuelle elementer, for vi har en tendens til å se for en enkelt, gjenkjennelig mønster.
med andre ord, når du ser et bilde som har manglende deler, hjernen din vil fylle ut feltene og få et komplett bilde så kan du fortsatt kjenne igjen mønsteret.
Kilde: Eduard Volianskyi
For eksempel, når du ser på bildet ovenfor er det du mest sannsynlig se en sebra, selv om bildet er bare en samling av svarte figurer., Tankene, fyller inn manglende informasjon for å skape et gjenkjennelig mønster basert på din erfaring.
Eksempler på nedleggelsen prinsippet
nedleggelse prinsippet brukes ofte i logo design til en rekke selskaper, inkludert IBM, NBC, Zendesk, og Finansiering Sirkel.
– Prinsippet #7: brennpunkt
Det sentrale punktet prinsippet sier at uansett hva som står ut visuelt vil fange og holde seerens oppmerksomhet først.,
Kilde: Smashing Magazine
Når du ser på bildet ovenfor, for eksempel, er det første du legger merke til er den røde plass fordi det er annerledes enn alle svarte sirkler rundt det. Det er det første punktet av interesse som fanger din oppmerksomhet, og fra det oppmerksomheten flyttes til andre deler av bildet.
Eksempler på det sentrale punktet prinsippet
Twilio bruker brennpunkt prinsippet å trekke øyet til deres call-to-action-knappen.,
i eksempelet nedenfor, Instacart kombinerer det sentrale punktet prinsippet med figur-bakken prinsippet å trekke øyet til den hvite forgrunnen, og deretter til den grønne «finne butikker» – knappen.
Siste tanker
Hvis du forstår hvordan det menneskelige sinn fungerer, det er enklere å lede folks oppmerksomhet til rett sted. Og holde disse prinsippene top-of-mind vil hjelpe deg å holde brukeren i sentrum av produktutviklingsprosessen., Hvis du ønsker å lære mer om Gestalt prinsipper for visuell persepsjon, anbefaler vi å sjekke ut de ressursene nedenfor.,
Videre lesing:
- Enkelhet, Symmetri og Mer: Gestalt Teori Og Design Prinsipper Det Fødte
- Design Prinsipper: Visuell Persepsjon Og Prinsippene For Gestalt
- The Designer ‘ s Guide til Gestalt Teori
- Andy Rutledge fem-del serien på Gestalt-persepsjon:
- Del 1: Figur-Bakken Relasjoner
- Del 2: Likhet
- Del 3: Nærhet, Uniform Samhørighet, og God Videreføring
- Del 4: Felles Skjebne
- Del 5: Avslutning
Vil du vite mer?,
for Å lære hvordan UserTesting kan hjelpe deg til å forstå dine kunder gjennom on-demand menneskelig innsikt, kontakt oss her.