Visuell hierarki i design

Visuell hierarki i design

Visuell hierarki är en enkel uppsättning principer som är till hjälp när man vill strukturera visuell information som t ex en webbsida, en restaurangmeny eller en instrumentpanel. Principerna för visuell hierarki fungerar nästan alltid även för att hitta en förklaring till varför en design upplevs som otydlig eller svår att förstå. Allt som är visuellt är samtidigt ett tillämpningsområde för visuell hierarki.

I den här artikeln ska vi diskutera

  • Vad är visuell hierarki?
  • Varför ska jag bry mig om visuell hierarki?
  • Hur fungerar principerna för visuell hierarki?

Vad är visuell hierarki?

Visuell hierarki: helheten är större än delarna.

Att helheten är större än delarna är en populariserad version av de gestaltteoretiska satserna. Den mänskliga hjärnan strävar alltid efter att skapa mening och sammanhang av sinnesintrycken. Vad är det första du ser i bilden? En triangel eller “pac man family reunion”?

Att helheten är större än delarna är en populariserad version av de gestaltteoretiska satserna. Den mänskliga hjärnan strävar alltid efter att skapa mening och sammanhang av sinnesintrycken. Vad är det första du ser i bilden? Tre pacman-gubbar som träffas eller en triangel?

Visuell hierarki beskriver ett system av olika elements relativa betydelse inom en yta, ett rum eller ett sammanhang.

Teorierna om visuell hierarki har sitt ursprung i gestaltpsykologin som växte fram i Tyskland under slutet av 1800-talet och början av 1900-talet. Gestaltpsykologin beskriver den mänskliga varseblivningsförmågan som en förmåga att strukturera och organisera sinnesintrycken (http://de.wikipedia.org/wiki/Gestaltpsychologie). Låter det abstrakt och komplicerat? Som tur är så är själva principerna enkla.

Ur gestalpsykologin växte sedan gestaltteorin fram i 1920-talets Berlin och de flesta av principerna för visuell hierarki stammar från denna teori som fått en enorm spridning och användning. Principerna för visuell hierarki är en praktiskt tillämpad version av gestaltteorin med tydlig inriktning på design.

Varför ska jag bry mig om visuell hierarki?

Kaffemaskin på MINC i Malmö. Ett exempel på svårtolkad visuell hierarki.

Bilden ovan visar kaffeautomaten på MINC i Malmö. Den har gett upphov till många intressanta samtal och en del oförutsedda händelser när någon som vill ha kaffe istället får kokande tevatten sprutat bredvid sin mugg rakt ner genom gallret. Det har också förekommit spekulationer om skillnaden mellan det gula kaffet och det vita. Det finns ingen skillnad, men ändå låter pilarna påskina detta.

Pilarna (som borde varit knappar) är till för att berätta var man ska ställa sin kopp. Såvida du inte vill ha tevatten, då är pilen tydligen inte rätt metafor för “ställ koppen här”, utan tre vågiga horisontella linjer “pekar” på platsen där muggen ska stå. Knapparna för “vitt” och “gult” kaffe är placerade i en rak linje ovanför platsen där drycken sprutas ut. Knappen för tevatten är placerad diagonalt i relation till platsen där tevattnet kommer ut och till höger om knappen för “gult kaffe”. Kaffemaskinen är ett exempel på vad som händer när principerna för visuell hierarki sätts ur spel.

Visuell hierarki förekommer överallt även om vi inte är medvetna om det. Och även om de som har skapat ordningen/hierarkin inte heller är medvetna om den. Det kan handla om hur ett rum är inrett eller om hur en kaffeautomat är utformad. På webben och i appar är visuell hierarki särskilt viktig eftersom den yta som används har färre restriktioner och är mer flytande än i t ex traditionell print-design. Visuell hierarki är ett sätt att hjälpa användarna förstå stora mängder information eller välja bland många handlingsalternativ på ett organiserat sätt. Med visuell hierarki kan vi hjälpa användarna att förstå vilken information som är viktig, vad de förväntas göra och vad de förväntas uppmärksamma i första hand, andra hand, tredje hand osv.

Visuell hierarki hjälper till att

  • Skapa ordning ur kaos
  • Skapa meningsfull kommunikation
  • Undvika dumma misstag

I all design måste något element ta överhanden över de andra. Om du är designer har du säkert haft kunder som vill att du lägger till mer och mer i layouten hela tiden. ”Det här är också viktigt. Vi måste feta det här. Gör den här rubriken större. Lägg in en ruta här.”

Det går förstås utmärkt att göra tillägg och framhäva saker, men man måste vara medveten om hierarkin. Allting kan inte vara lika viktigt i en design, utan något måste ta överhanden och vara det framträdande elementet. Om man inte har har en fungerande hierarki uppstår förvirring istället.

Attribution: https://www.flickr.com/photos/83823904@N00/

Bild: Wikipedia Creative Commons, http://en.wikipedia.org/wiki/File:Airbus_A380_cockpit.jpg

Men lösningen för att skapa en tydlig, fungerande och bra design är inte alltid så enkel som att reducera och rensa ut. Det finns nämligen tillfällen då det inte går att reducera och rensa bland de element som måste ingå i en design.

Ett bra exempel på det är en flygplanscockpit. Det går inte bara att börja rensa ut och plocka bort knappar, paneler och reglage i en cockpit. Alla instrumenten som finns i en cockpit finns där av ett skäl och för att de behövs (får vi förmoda). I en sådan situation är visuell hierarki ett värdefullt verktyg för att skapa ordning. Genom att rangorda kan man prioritera och därmed skapa en design som är, om inte perfekt alltid, så i varje fall bättre.

För piloterna är flygplanets höjd och riktning väsentligt viktigare än belysningen i kabinen och därför har ingenjörerna på Airbus valt att framhäva viktiga instrument genom att göra dem större. Detsamma ser vi exempel på i vanliga bilar, där hastighetsmätaren är mer central och framhävd än luftkonditioneringen. Men det finns förstås lustiga undantag från den regeln:

Den här bilen har fyra däck och två motorer

Ett bra sätt analysera vad som är mest framträdande i en design och därmed vad som är främst i den visuella hierarkin är att kisa med ögonen. Eller i det här sammanhanget att använda ett filter för oskärpa:

electric-hybrid-blur

Exemplet är hämtat från en elektrisk hybridbil och sannolikt har de som designat panelen velat att panelen ska informera om andelen av bilens kraft som kommer från batteri respektive förbränningsmotor. Men vad är mest framträdande och vad berättar instrumentpanelen? Jo, att bilen har fyra däck och två motorer. Kanske inte den mest väsentliga informationen när man sitter och kör i hög fart på en motorväg eller i hektisk stadstrafik. Här är ett bättre exempel på hur en annan hybridbilstillverkare valt att förmedla samma information:

hastighet i centrum

Informationen om fördelningen av kraftkälla mellan förbränningsmotor (ASST) och batteri (CHRG) ligger tillgänlig som ett komplement på samma nivå i den visuella hierarkin som vilken växel som används (PRNDSL). Exemplet är hämtat från Jared Ponchots föreläsning på DrupalCon Chicago 2011.

Åtta principer för visuell hierarki

I den artikeln kommer vi att titta på åtta principer för visuell hierarki. Vissa källor har fler och vissa har färre. I vissa fall överlappar de principerna från gestaltteorin och i vissa fall kompletterar de dem:

  • Position
  • Proportioner
  • Närhet
  • Symmetri
  • Likhet
  • Alignment
  • Kontrast
  • Färg

Läs nästa del: Principer för visuell hierarki.

Källor:
Jared Ponchot, Visual Hierarchy 1, 2, 3: This MUST Be Important!
http://chicago2011.drupal.org/sessions/visual-hierarchy-1-2-3-must-be-important

Gestaltpsychologie
http://de.wikipedia.org/wiki/Gestaltpsychologie

Gestalttheorie
http://www.uni-weimar.de/medien/wiki/images/Gestalttheorie.pdf

One thought on “Visuell hierarki i design

Comments are closed.