Gestaltprinsipper
Cecilie Dahl

Cecilie Dahl
Partner | Senior Rådgiver

cecilie@vidi.no
92878350

Gestaltprinsipper i UI-Design

Hvordan bli en mester med visuell kommunikasjon.

Hjernen vår prøver alltid å gi mening til verden ved å sammenligne tidligere erfaringer eller visuelle mønstre og koble det du ser mot noe kjent – “connect the dots”.  Hjernen har sin egen “rare” måte å oppfatte form og form på, gruppere informasjon og fylle ut hullene for å tegne det store bildet.

Du har sikkert sett på himmelen flere ganger og lagt merke til en uvanlig formet sky som lignet et kjent dyr eller en gjenstand. Har du noen gang lurt på, hvorfor eller hvordan du skaper denne knytningen bare ved å se på en sky?

Det hele skyldes hvordan hjernen vår fungerer.

Skyer

Fremragende designere forstår den viktige rollen psykologi spiller i visuell persepsjon. Hva skjer når noens øyne møter designet ditt? Hvordan reagerer tankene deres på budskapet du prøver å formidle?— Laura BuscheBrand Content Strategist at Autodesk

Å ha forståelse for hvordan hjernen din fungerer, vil hjelpe deg å bli en klokere designer og en mester i visuell kommunikasjon. Det kan hjelpe deg med å bestemme hvilke visuelle elementer som er mest effektive i en gitt situasjon, slik at du kan bruke dem til å påvirke persepsjon, rette oppmerksomhet og forårsake atferdsendring. Noe som er spesielt nyttig når det kommer til målrettet, problemløsende, intuitiv design; Brukergrensesnitt design også kalt UI design.

Hva er Gestalt?

Gestalt (form, form på tysk) er en gruppe prinsipper for visuell persepsjon utviklet av tyske psykologer i 1920-årene. Det bygger på teorien om at “en organisert helhet, oppfattes som større enn summen av delene”.

Gestaltprinsippene prøver å beskrive hvordan folk oppfatter visuelle elementer når visse forhold gjelder. De er bygget på fire viktige prinsipper:

Identifikasjon

Mennesker har en tendens til å identifisere elementer først i sin generelle skisserte form. Hjernen vår gjenkjenner et enkelt, veldefinert objekt raskere enn et detaljert objekt.

Gestalt prinsipper

Gruppering

Mennesker kan kjenne igjen gjenstander selv når det er deler av dem som mangler. Hjernen vår samsvarer med det vi ser med kjente mønstre som er lagret i minnet vårt og fyller ut hullene. Vi skaper et nytt objekt av flere seperate bestanddeler.

Gruppering av objekter

Helheten er noe annet enn summen av delene.— Kurt Koffka

Multi-Stabilitet

Folk vil ofte tolke tvetydige objekter på mer enn en måte. Hjernen vår ser frem og tilbake mellom alternativene i søken etter sikkerhet. Som et resultat vil det ene synspunktet bli mer dominerende, mens det andre blir vanskeligere å se.

Multistabilitet

Varianter

Mennesker kan gjenkjenne enkle objekter uavhengig av rotasjon, skala og oversettelse. Hjernen vår kan oppfatte gjenstander fra forskjellige perspektiver, til tross for at de er forskjellige.

Varianter

Optiske illusjoner

Informasjonen øyet vårt sender til hjernen utfordrer vår oppfatning av virkeligheten.

Gestalt - illusjon

Her er Gestalt-prinsippene som kan benyttes i dagens UI-design.

Nærhet

Elementer som er anordnet nær hverandre oppleves som mer beslektede enn de som er plassert lenger fra hverandre. På denne måten blir forskjellige elementer sett på hovedsakelig som en gruppe snarere enn som enkeltelementer.

Gestalt prinsipp nærhet

Hvordan gjelder nærhetsprinsippet for UI-design?

Vi kan bruke nærhetsprinsippet i UI-design for å gruppere lignende informasjon, organisere innhold og rydde i  oppsett. Korrekt bruk vil ha en positiv innvirkning på visuell kommunikasjon og brukeropplevelse.
Som prinsippet sier, skal gjenstander som er relatert til hverandre holde seg nær hverandre, mens de ikke-relaterte gjenstandene skal holde seg lenger fra hverandre.

Hvitt rom spiller en viktig rolle her, da det skaper kontrast som guider brukernes øyne i den tiltenkte retningen. Hvit plass kan øke det visuelle hierarkiet og informasjonsflyten, og bidra i lett å lese og skanne oppsett. Det vil hjelpe brukere med å oppnå målene sine raskere og dykke dypere i innholdet.

Kontinuitet

Felles område

På samme måte som nærhetsprinsippet, oppfattes elementer plassert i samme område som gruppert.

Likhet

Elementer som deler lignende visuelle egenskaper oppleves å være mer beslektede enn de som ikke deler lignende egenskaper.

Likhet Gestalt

Hvordan gjelder likhetsprinsippet for UI-design?

Vi har en tendens til å oppfatte lignende elementer som gruppert eller mønster. Vi tror kanskje at de tjener samme formål. Likhet kan hjelpe oss med å organisere og klassifisere objekter i en gruppe og knytte dem til en spesifikk betydning eller funksjon.

Det er forskjellige måter å designe elementer som oppleves som like, og dermed relatert. Disse inkluderer likhet med farge, størrelse, form, tekstur, dimensjon og orientering; med noen av dem som er sterkere kommunikative enn andre (f.eks. farge> størrelse> form).

Når likhet oppstår, kan et objekt bli vektlagt ved å være forskjellig fra resten; dette kalles ‘Anomaly’ og kan brukes til å skape kontrast eller visuell vekt. Det kan trekke brukerens oppmerksomhet til et spesifikt innhold (fokuspunkt), samtidig som det hjelper med skannbarhet, oppdagbarhet og den totale flyten.

Skille seg ut

Lukking

En gruppe elementer blir ofte oppfattet som en enkelt gjenkjennelig form eller figur. Lukking skjer også når et objekt er ufullstendig, eller deler av det ikke er lukket.

Gruppering av objekter

Hvordan gjelder Lukke-prinsippet for UI-design?

Som lukkingsprinsippet sier, når hjernen blir presentert med riktig mengde informasjon, vil hjernen hoppe til konklusjoner ved å fylle ut hullene og skape en enhetlig helhet. På denne måten kan vi redusere antall elementer som trengs for å kommunisere informasjon, redusere kompleksiteten og gjøre design mer engasjerende.

Lukking kan hjelpe oss med å minimere visuell støy og formidle et budskap, og forsterke et konsept i et ganske lite rom.

Lukke prinsippet

Symmetri

Symmetriske elementer har en tendens til å oppleves som om de hører sammen uansett avstand, noe som gir oss en følelse av soliditet og orden

Symmetri

Hvordan gjelder symmetri-prinsippet i UI-design?

Symmetriske elementer er enkle, harmoniske og visuelt behagelige. Våre øyne søker disse egenskapene sammen med orden og stabilitet, for å gi mening til verden. Av denne grunn er Symmetri et nyttig verktøy for å kommunisere informasjon raskt og effektivt. Symmetri føles komfortabel og hjelper oss å fokusere på det som er viktig.

Symmetriske komposisjoner er tilfredsstillende, men de kan også bli litt kjedelige og statiske. Visuell symmetri har en tendens til å være mer dynamisk og interessant. Å legge et asymmetrisk element til et ellers symmetrisk design kan hjelpe med å trekke oppmerksomhet mens du gjør inntrykk; noe nyttig for alle interessante steder eller for eksempel en oppfordring til handling.

Symmetri, sammen med en sunn mengde asymmetri er viktig i ethvert design.

Asymmentri

Fortsettelse/kontinuitet

Elementer som er ordnet i en linje eller en myk kurve oppleves å være mer beslektet enn de som er ordnet tilfeldig eller i en tøff linje.

fortsettelse

Hvordan gjelder kontinuitetsprinsippet i UI-design?

Element som følger en kontinuerlig linje blir oppfattet som gruppert. Jo jevnere linjesegmenter, jo mer ser vi dem som en enhetlig form; vårt sinn foretrekker den minste motstandens vei. Kontinuitet hjelper oss med å tolke retning og bevegelse gjennom en komposisjon. Det skjer når du justerer elementer, og det kan hjelpe øynene våre til å bevege seg jevnt gjennom siden og hjelpe til med lesbarhet.

Kontinuitetsprinsippet styrker oppfatningen av gruppert informasjon, skaper orden og guider brukere gjennom forskjellige innholdssegmenter. Forstyrrelse av kontinuitet kan signalisere slutten av et avsnitt som vekker oppmerksomhet til et nytt innhold.

Kolonner

Det lineære arrangementet av rader og kolonner er gode eksempler på kontinuitet. Vi kan bruke dem i menyer og undermenyer, lister, produktopplegg, karuseller, tjenester eller prosess / fremdriftsvisninger.

Felles retning

Elementer som beveger seg i samme retning blir oppfattet som mer beslektede enn de som beveger seg i forskjellige retninger, eller som ikke beveger seg i det hele tatt.

bevegelse og retning

Hvordan gjelder Felles retning-prinsippet i UI-design?

Uansett hvor langt fra hverandre elementene er eller hvor forskjellige de kan vises, hvis de beveger seg eller endrer seg sammen, blir de oppfattet som beslektede. Denne effekten kan skje selv når bevegelse er underforstått, av andre visuelle elementer.
Felles retning-prinsippet er mer potent når elementer beveger seg synkronisert; i samme retning og på samme tid og hastighet. Det kan hjelpe med å gruppere relevant informasjon og knytte handlinger til resultater.

Forstyrrelse av en synkronisert bevegelse kan fange brukernes oppmerksomhet og rette den til et bestemt element eller funksjon. Det kan også etablere forhold mellom forskjellige grupper eller stater.

Konklusjon

Brukergrensesnittdesign handler ikke bare om pene piksler og vakker grafikk. Det handler hovedsakelig om kommunikasjon, ytelse og bekvemmelighet. Gestaltprinsipper er alltid gjeldende og hjelper oss med å nå disse målene; å skape en god opplevelse for brukerne og måloppnåelse for bedriften.