Den menneskelige hjerne er wired til at se struktur, logik og mønstre. Det hjælper os med at få mening ud af verden. I 1920 ‘ erne udviklede en gruppe tyske psykologer teorier om, hvordan folk opfatter verden omkring dem, kaldet Gestaltprincipper.
for eksempel, Hvad ser du, når du ser på dette billede?,
Kilde: det inspirerede øje
Hvis du er som de fleste mennesker, ser du sandsynligvis en trekant. Men i virkeligheden, alt der er der er tre hvide ” pac mænd.”Vi ser trekanten, fordi vores hjerner tager den tvetydige visuelle information og organiserer den til noget, der giver mening for os—noget velkendt, ordnet, symmetrisk, og som vi forstår.
Når denne kognitive proces sparker ind, springer vores sind fra at forstå alle elementerne som individuelle og uafhængige komponenter til at se hele formen som helhed., Og som et resultat opfatter vi former og genstande, hvor ingen blev skabt.
for yderligere at illustrere denne proces, tjek GIF nedenfor. Din hjerne ser en hund gå, men det er ikke mere end en række bevægelige prikker.
kilde: Gi .modo
Dette er enkle eksempler, men de demonstrerer de typer genveje, som vores hjerner gør hele tiden for hurtigt at få mening ud af verden.
Hvad er Gestaltprincipperne?,
disse genveje er kendt som Gestalt-principperne for visuel opfattelse, og de beskriver, hvordan vores hjerner skaber struktur som standard. Men hvorfor er det vigtigt at forstå dette for designeb-og mobildesign?
Hvorfor designere bør bekymre sig om Gestalt-principperne
Store designere forstår den magtfulde rolle, at psykologi spiller i visuel perception. Hvad sker der, når en persons øje møder dine design kreationer? Hvordan reagerer deres sind på den meddelelse, dit stykke deler?, – Laura Busche, Brand Content strateg hos Autodesk
tænk over det citat i et minut. Når folk først ser dine designs, hvordan oplever de dem? For at forstå, hvad der gør UI design arbejde, skal du forstå psykologien i menneskets opfattelse.
den grundlæggende lov, der styrer et Gestalt-princip, er, at vi har en tendens til at bestille vores oplevelse på en måde, der er regelmæssig, ordnet og genkendelig. Dette giver os mulighed for at skabe mening i en kompleks og kaotisk verden., Og at have en solid forståelse af, hvordan disse principper fungerer, hjælper dig på tre måder.
- de hjælper dig med at bestemme, hvilke designelementer der er mest effektive i en given situation. For eksempel, hvornår man skal bruge visuelt hierarki, baggrundsskygge, gradienter, og hvordan man grupperer lignende genstande og skelner mellem forskellige.
- disse psykologiske principper har magt til at påvirke vores visuelle opfattelse, som gør det muligt for designere at rette vores opmærksomhed mod specifikke fokuspunkter, få os til at tage specifikke handlinger og skabe adfærdsændring.,
- Og endelig, på højeste niveau, Gestalt principper hjælpe dig med at designe produkter, der løser kundens problem eller opfylde brugerens behov på en måde, der er smuk, behagelig og intuitiv at bruge.
i denne artikel diskuterer vi syv Gestaltlove eller-principper, der direkte gælder for moderne design, og deler nogle eksempler på, hvordan de bruges i UI-design. Dette er ikke en udtømmende liste, men du vil hurtigt begynde at bemærke, at der er en overlapning mellem mange af principperne, og at de alle arbejder sammen flydende. Lad os dykke ind.,
- Figur-jorden
- Lighed
- Nærhed
- Common region
- Kontinuitet
- Lukning
- Fokale punkt
Princip #1: figur jorden
Det tal-jorden princip fastslår, at folk instinktivt opfatte objekter som enten være i forgrunden eller i baggrunden. De skiller sig enten fremtrædende foran (figuren) eller trækker sig tilbage i ryggen (jorden).,
Kilde: en dværg ved navn .arren
på billedet ovenfor ser for eksempel dit øje øjeblikkeligt et hvidt æble, der sidder på en sort baggrund.
denne bestemmelse vil ske hurtigt og ubevidst i de fleste tilfælde. Figur / Ground lader os vide, hvad vi skal fokusere på, og hvad vi sikkert kan ignorere i en sammensætning. – Steven Bradley, diebdesigner
Når folk bruger dit websiteebsted eller din mobilapp, er en af de første ting, de gør på hver skærm, at bestemme, hvilken figur der er, og hvilken er jorden.,
eksempler på figur-ground-princippet
Basecamp-hjemmesiden har en masse grafik, tekst, formularer og anden information. Og på grund af figur-ground-princippet kan du straks fortælle, at du skal fokusere på indholdet i de hvide forgrundsområder.
AngelList bruger figur-ground-princippet på to måder nedenfor. Først sidder teksten og logoet på venstre side af siden tydeligt øverst på baggrundsbilledet. For det andet står den hvide tekst i menuen til højre oven på den sorte baggrund.,
Princip #2: lighed
princippet om lighed, at når tingene synes at være ligner hinanden, vi gruppere dem sammen. Og vi har også en tendens til at tro, at de har den samme funktion.i dette billede ser det ud til at være to separate og forskellige grupper baseret på form: cirklerne og firkanterne.
kilde: Creative Beacon
en række designelementer, som farve og organisation, kan bruges til at etablere lignende grupper., På billedet nedenfor, for eksempel, selv om alle former er de samme, er det klart, at hver kolonne repræsenterer en særskilt gruppe:
Kilde: Andy Rutledge
Eksempler på lighed princippet
GitHub bruger lighed princippet på to måder på siden nedenfor. For det første bruger de det til at skelne mellem forskellige sektioner. Du kan straks fortælle, at den grå sektion øverst tjener et andet formål end den sorte sektion, som også er adskilt fra og anderledes end den blå sektion.,for det andet bruger de også farven blå til at skelne links fra almindelig tekst og til at kommunikere, at al blå tekst deler en fælles funktion.
Princip #3: nærhed
princippet om nærhed stater, at de ting, der er tæt på hinanden, synes at være mere beslægtede end ting, der sidder længere fra hinanden.
kilde: Andy Rutledge
nærhed er så kraftig, at den tilsidesætter lighed mellem farve, form og andre faktorer, der kan differentiere en gruppe objekter.,
kilde: Steven Bradley
Bemærk de tre grupper af sorte og røde prikker ovenfor? Objektets relative nærhed har en endnu stærkere indflydelse på gruppering end farve gør.
eksempler på nærhedsprincippet
nærheden af hvert billede og dets tilsvarende tekst kommunikerer, at de er relateret til hinanden.
og Vice bruger det til at skelne mellem billeder, overskrifter, beskrivelser og anden information for hver af dens historier.,
princip #4: fælles region
princippet om fælles region er meget relateret til nærhed. Det hedder, at når objekter er placeret inden for samme lukkede område, opfatter vi dem som grupperet sammen.
Kilde: Smashing Magazine
Tilføjelse grænser eller andre synlige barrierer er en fantastisk måde til at skabe en opfattelse af adskillelse mellem grupper af objekter, selv hvis de har samme nærhed, form, farve, osv.,
Eksempler på den fælles region princippet
I eksemplet fra Pinterest nedenfor, fælles region princip er anvendt til at adskille hvert pin—herunder dets billede, titel, beskrivelse, bidragyder, og andre detaljer—fra alle de andre stifter omkring det.
og det bruges i Facebook—eksemplet nedenfor til at kommunikere, at kommentarer, likes og interaktioner er forbundet med dette specifikke indlæg-og ikke de andre indlæg, der omgiver det.,
Princip #5: kontinuitet
Det, at princippet om kontinuitet hedder det, at elementer, der er arrangeret på en linje eller kurve, opfattes som mere beslægtede end elementer, der ikke på den linje eller kurve.
Kilde: Smashing Magazine
På billedet ovenfor, for eksempel, de røde prikker i den buede linje synes at være mere relateret til de sorte prikker på den buede linje, end at den røde prikker på vandret linje., Det skyldes, at dit øje naturligt følger en linje eller en kurve, hvilket gør fortsættelse til et stærkere signal om tilknytning end farveens lighed.
eksempler på kontinuitetsprincippet
Ama .on bruger kontinuitet til at kommunikere, at hvert af nedenstående produkter er ens og relateret til hinanden.
Kvist bruger det til at forklare den tre-trins proces til at bruge deres app.
og Credit Karma bruger det til at illustrere de fordele, deres tjenester giver.,
Princip #6: lukning
princippet om lukning fremgår det, at når vi ser på et komplekst system af visuelle elementer, er vi tilbøjelige til at se for en enkelt, genkendeligt mønster.
med andre ord, når du ser et billede, der mangler dele, vil din hjerne udfylde emnerne og lave et komplet billede, så du stadig kan genkende mønsteret.
Kilde: Eduard Volianskyi
For eksempel, når du ser på billedet ovenfor, at du højst sandsynligt se en zebra, selvom billedet er bare en samling af sorte figurer., Dit sind udfylder de manglende oplysninger for at skabe et genkendeligt mønster baseret på din oplevelse.
eksempler på lukningsprincippet
lukningsprincippet bruges ofte i logodesign hos en række virksomheder, herunder IBM, NBC, .endesk og Funding Circle.
Princip #7: omdrejningspunktet
omdrejningspunktet princip fastslår, at uanset skiller sig ud visuelt vil fange og holde beskuerens opmærksomhed først.,
Kilde: Smashing Magazine
Når du ser på billedet ovenfor, for eksempel, den første ting, du bemærker, er den røde plads, fordi det er anderledes end alle de sorte cirkler omkring det. Det er det første interessepunkt, der griber din opmærksomhed, og derfra flytter din opmærksomhed til andre dele af billedet.
eksempler på fokuspunktsprincippet
t .ilio bruger fokuspunktsprincippet til at trække dit øje til deres opfordring til handling-knap.,
Og i eksemplet nedenfor, Instacart kombinerer omdrejningspunktet princippet med figur-grund-princippet til at trække øjet at den hvide forgrunden, og derefter på den grønne “find butikker” – knappen.
Endelige tanker
Hvis du forstår hvordan det menneskelige sind virker, er det lettere at rette folks opmærksomhed på det rigtige sted. Og at holde disse principper top-of-mind vil hjælpe dig med at holde brugeren i centrum af din produktudviklingsproces., Hvis du vil lære mere om Gestalt-principperne for visuel opfattelse, anbefaler vi at tjekke ressourcerne nedenfor.,
Yderligere læsning:
- Enkelhed, Symmetri og Mere: Gestalt Teori Og Design Principper, Den fødte
- Design Principper: Visuel Perception Og Principperne For Gestalt
- Designer ‘ s Guide til Gestalt-Teorien
- Andy Rutledge fem-del serie om Gestalt opfattelse:
- Del 1: Figur-Grund Forhold
- Del 2: Lighed
- Del 3: Nærhed, Uniform Forbundethed, og God Fortsættelse
- Del 4: Fælles Skæbne
- Del 5: Lukning
Vil du vide mere?,
for at lære, hvordan UserTesting kan hjælpe dig med at forstå dine kunder gennem on-demand human insight, kontakt os her.