den perceptuelle proces gør det muligt for os at opfatte verden gennem vores sanser af syn, lugt, lyd, smag og berøring. Især behandler vores visuelle system enorme mængder information i sit miljø. I stedet for at opfatte elementer separat, organiserer vores hjerne mønstre, objekter og former i hele former, som vi kan forstå.gestalt-grupperingsprincipperne for visuel opfattelse beskriver denne organisation som et sæt principper, der forklarer, hvordan vi opfatter og organiserer denne enorme mængde visuelle stimuli. Gestalt-principperne-lighed, nærhed, lukning, figurjord, fortsættelse og fælles skæbne-er et populært værktøj, der bruges af designere til visuelt at organisere information. Som visuel designer og nu interaktionsdesigner anvender jeg disse principper regelmæssigt for at skabe relationer og forskelle mellem elementer i mine designs. At forstå, hvordan disse principper fungerer, og hvordan du bruger dem i dine designs, producerer stærkere og mere engagerende arbejde.

er du klar til at forbedre dine designs? Lad os begynde med at grave i lighed.

lighed

gestaltprincippet om lighed siger, at elementer, der ligner hinanden, opfattes som mere beslægtede end elementer, der er forskellige. Lighed hjælper os med at organisere objekter ved deres tilknytning til andre objekter i en gruppe og kan påvirkes af attributterne farve, størrelse, form og orientering.

brug af farve til at tildele relationer

lighed påvirkes især af farve. I eksemplet nedenfor skal du bemærke, hvordan de farvede figurer har en stærk effekt ved tildeling af en gruppering eller relation, selv når forskellige figurer er inkluderet.

brug af størrelse til at tildele relationer

størrelse er et andet nyttigt værktøj, vi kan bruge til at skabe lighed. I eksemplet nedenfor får lighed i størrelse de større figurer til at skille sig ud og danne en gruppe, selvom alle figurerne er de samme.

brug af form til at tildele relationer

form er nyttig til gruppering efter lighed, men den har den svageste grupperingseffekt sammenlignet med farve og størrelse. I det eksempel, der ses her, får form os til at fortolke elementer som kolonner med cirkler og firkanter i modsætning til rækker med skiftende cirkler og firkanter.

brug af orientering til at tildele relationer

orientering kan også bruges til at gruppere efter lighed. Ved at dreje nogle af firkanterne i denne gruppe med 45 grader foretages en separat gruppering, der opfattes som relateret. De ser næsten ud til at bevæge sig sammen i en lignende retning sammenlignet med figurerne omkring dem. Dette berører faktisk gestalt-princippet om fælles skæbne, et princip, vi kommer ind på i en fremtidig artikel. Men du er velkommen til at hoppe videre og Google det (efter at du har læst denne artikel, selvfølgelig!). Det er et fascinerende princip, der ofte sker rundt omkring dig.

mere om farve

som tidligere nævnt påvirkes lighed især af farve og kan tilsidesætte andre attributter. For eksempel kan vi tilsidesætte eksemplet på lighed i form ved at tilføje farve. Nu opfatter vi skiftende rækker af røde og hvide former i modsætning til kolonner af cirkler og firkanter. Prøv det. Prøv at se kolonnerne af cirkler og firkanter. Muligt, men ret hårdt nu, er det ikke?

derudover kan farve tilsidesætte størrelse. Når vi tilføjer farve til eksemplet på lighed i størrelse, opretter vi to grupperinger adskilt fra hinanden. Nu opfatter vi de store røde firkanter som en gruppe og den enkelte store hvide firkant som en separat, uafhængig (og ensom) gruppe.

disse to eksempler illustrerer, hvor kraftig farve kan være ved tildeling af forhold mellem elementer. Prøv at bruge farve i dit arbejde til at differentiere elementer, og du vil blive overrasket over, hvor meget stærkere dine grupperinger er.

lighed i praksis

når vi designer, kan vi bruge lighed til at formidle organisation og foreninger ved at vise, hvilke elementer der er relateret eller ikke relateret til hinanden. For eksempel er de to sektioner vist på Salons side nedenfor grupperet efter deres relative størrelser. Vi opfatter tydeligt to separate grupper med tophistorier til venstre og mest læste til højre. Selvom begge sektioner giver den samme funktion — visning af artikler, der skal læses — gruppering efter størrelse tildeler mere opmærksomhed til venstre gruppering, hvilket gør det muligt for Salon at lede opmærksomheden på deres tophistorier.

i modsætning hertil giver manglen på størrelsesforskelle i dette eksempel ikke nogen særlig betydning for et enkelt afsnit. På trods af dette opnås lighed stadig ved brug af gentagelse af lignende størrelse og form, hvilket får os til at opfatte rækker af genstande.

lignende farvebrug

Vi ved, at farve er en stærk indikator for lighed, der hjælper med at organisere og gøre indhold forståeligt. I dette eksempel fra Cars.com, lignende farvebrug hjælper os med at skelne mellem, hvad der er en overskrift, kropskopi og linktekst. (Fuld offentliggørelse: Jeg arbejder på Cars.com som interaktionsdesigner.) Ved at bruge forskellige farver til hvert af disse elementer forventer vi, at de fungerer på samme måde og i tilfælde af den blå linktekst opfører sig på samme måde.

nærhed

gestalt-nærhedsprincippet siger, at elementer, der er tættere på hinanden, opfattes som mere relaterede end elementer, der er længere fra hinanden. Som med lighed hjælper nærhed os med at organisere objekter ved deres tilknytning til andre objekter. Nærhed er det stærkeste princip for at indikere sammenhæng mellem objekter, hvilket hjælper os med at forstå og organisere information hurtigere og mere effektivt.

eksemplerne på cirkler nedenfor viser, hvordan nærhed kan bruges til at hjælpe os med at opfatte objekter som relaterede. Som vi ser her, er cirklerne spredt ud og udviser ingen relation, hvor hver opfattes som et separat objekt.

men når cirklerne trækkes i tæt rumlig nærhed til hinanden, tildeles de en relation og opfattes ikke længere som separate objekter.

hvidt rum

hvidt rum er et uvurderligt værktøj til at skabe nærhed. At tage den samme gruppe cirkler og tilføje mellemrum hjælper os med at opfatte tingene anderledes. Nu til venstre får formernes nærhed os til at opfatte de to grupper som kolonner, hver sin egen gruppe. Til højre får formernes nærhed os til at opfatte de to grupper som rækker, igen hver sin egen gruppe. Brug hvidt rum i dine designs til at styrke grupperinger såvel som at differentiere dem fra andre elementer.

Nærhedskraften

nærhed er stærk nok til at overmande andre elementer af variation. Bemærk, hvordan nærhed stadig vinder ud, selv når andre attributter, såsom farve og form, tilføjes. Prøv som de måtte, farve og form overstyrer ikke nærhed her, og hver gruppering opfattes stadig som et separat element.

nærhed i praksis

når vi organiserer information i vores designs, kan vi bruge nærhed til at skabe relationer mellem elementer for at hjælpe med at forstå de præsenterede oplysninger. For eksempel ved at gruppere disse billeder fra Apple Store sammen i nærheden, tildeler vi et forhold til hele gruppen. Vi opfatter dem som relaterede og forventer, at indholdet er ens.

men når vi fjerner centerkolonnen, opfatter vi pludselig to separate grupper og har en forventning om forskelligt indhold mellem dem.

kombination af nærhed og lighed

gruppering efter nærhed kan også kombineres med lighed for at skabe stærkere relationer. Gruppering efter nærhed og lighed i størrelse får os til at opfatte to separate grupperinger og tildeler mere fremtrædende plads til venstre-gruppen.

nærhed og hierarki

nærhed er fremragende til at organisere hierarkiske elementer. I dette eksempel fra Crate & tønde grupperes indstillinger under almindelige overskrifter, hvilket skaber relationer, hvilket gør scanning og finde information meget lettere.

Når overskrifterne fjernes, og indstillingerne grupperes uden nærhed, mister vi de forhold, der blev oprettet, og det bliver meget sværere at hurtigt scanne og finde de ønskede oplysninger. Prøv det selv. Gå videre og se, hvor hurtigt du kan finde kaffekrus i grupperingen med overskrifter versus grupperingen uden overskrifter. Lidt sværere at hurtigt springe til det, er det ikke?

konklusion

forståelse af, hvordan man bruger lighed og nærhed til at påvirke forholdet mellem elementer i dit arbejde, hjælper dig med at oprette design, der muliggør lettere organisering og forbedrer anvendeligheden af dit arbejde. Brug lighed og nærhed til at skabe både relationer og forskelle mellem elementer i dine designs. Eksperimenter med brugen af hvidt rum, farve, størrelse, form og orientering af elementer og bland begge principper sammen for at producere meget stærke og engagerende relationer.

i den næste del af denne serie vil vi se på lukning og figur-jorden og undersøge, hvordan disse to gestalt-principper bruger positivt og negativt rum til at skabe enkle, men kraftfulde relationer.

ressourcer og god læser

• Gestalt principper om Scholarpedia.
• “Organisationslove i perceptuelle former”: tekst af maks.Universal Principles of Design revideret og opdateret: 125 måder at forbedre brugervenlighed, påvirke opfattelsen, øge appellen, træffe bedre designbeslutninger og undervise gennem design. Rockport Pub, 2010.
• Informationsvisualisering: Perception for Design, af Colin. Elsevier, 2012.

• design principper: Visuel opfattelse og principperne for Gestalt
• tilslutning og adskillelse af elementer gennem kontrast og lighed
• Kompositionsbalance, symmetri og asymmetri
• Sådan forbedres din e-mail-arbejdsgang med modulært Design
• forbedring af brugeroplevelsen med realtidsfunktioner

(ml, da, og, JB, il)