Principer för visuell hierarki

Visuell hierarki i design

I föregående artikeln Visuell hierarki i design gav jag lite bakgrund och några exempel på varför visuell hierarki i design är relevant. I den här artikeln tittar vi på åtta principer för visuell hierarki.

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

1. Position

Visuell hierarki: position

Principen om position handlar om att vi tolkar element inom ett given yta efter deras position. I vår västerländska kultur är vi programmerade att tolka saker från vänster till höger och uppifrån och ner.

Position är en princip som är lätt att förstå, men det är ändå fascinerande hur stark dess verkan är.

Visuell hierarki: position (2)

I det här exemplet har vi en meningslös kombination av bokstäver (ovan). Men det räcker att vi ordnar elementen enligt principen om position (nedan) för att vi ska få fram en text som är lätt för oss att tolka, trots att texten är skriven med versaler och inte innehåller de mellanrum och skiljetecken som en korrekt mening förväntas innehålla.

Visuell hierarki: position (3)

2. Proportioner

Visuell hierarki: proportioner

Principen om proportioner innebär att stora element automatiskt ges stor betydelse. Det klassiska uttrycket ”storleken har betydelse” är giltigt även inom design. I exemplet med kvadraterna ovan gör storleken på den högra kvadraten att den automatiskt får störst betydelse och ges störst vikt och går därmed före principen om position som vi tittade på nyss. Man kan tänka sig detta tillämpat på en tidningslayout eller en instrumentpanel. Större element är viktigare.

3. Närhet

Visuell hierarki: närhet

Principen om närhet innebär att element som är nära varandra upplevs höra ihop i högre grad än element som inte är nära varandra. I exemplet nedan ser vi i den vänstra delen att det ser ut som två rader med vardera tre kvadrater och en text. Efter en ändring av närhetsförhållandena bildar samma element istället tre rader och ger ett annat intryck.

Visuell hierarki: närhet (2)

Principen om närhet är en väldigt påtaglig princip som ofta används inom design för att gruppera saker som hör ihop.

Visuell hierarki: närhet (3)

Närhet är en så stark princip att även om andra principer, som t ex kontrast, används samtidigt, så är närhet ändå den starkare faktorn.

Visuell hierarki: närhet (4)

4. Symmetri

Principen om symmetri handlar om att när vi betraktar något vill vår hjärna se symmetriska figurer som formar sig runt en mittpunkt.

Visuell hierarki: symmetri

Den mänskliga hjärnan gillar symmetri och saker som är kompletta. Detta gäller även om figurerna har ett större mellanrum, och går till och med före principen om närhet. Hjärnan uppfattar snabbt att det rör sig om tre symmetriska figurer.

Visuell hierarki: symmetri (2)

5. Likhet

Principen om likhet: saker som upplevs som lika upplevs höra ihop i högre grad än saker som inte uppfattas som lika. Ett bra exempel på detta är former. Hjärnan lägger märke till dem snabbt och flyttar dem uppåt i den visuella hierarkin så att de bildar grupper fast att de inte är grupperade genom närhet.

Visuell hierarki: likhet

Visuell hierarki: likhet (2)

6. Justering

Justering och linjering är inte en av Gestalt-principerna, men det är en kraftfull designprincip och ett bra sätt att skapa visuella relationer mellan element. När man använder justering behöver man vara medveten om invanda tolkningsmönster som indrag och trädstrukturer. Om man har slumpmässiga indrag som inte följer någon logisk struktur i användargränssnitt kan det skapa mycket förvirring.

Visuell hierarki: justering

Justering är tillräckligt kraftfullt för att ha företräde över andra principer som färg och kontrast.

Visuell hierarki: justering (2)

7. Kontrast

Visuell hierarki: kontrast

Principen om kontrast är ett enkelt koncept som alla förstår. Effekten uppnås genom ändring av värde eller färg, men kan också uppnås genom ändring av former. Kontrast är när två saker har något tydligt drag som avviker från varandra.

8. Färg

Visuell hierarki: färg

Färg påverkar ett elements visuella vikt/betydelse. Varma färger uppfattas ofta som att de framträder ur bakgrunden och kommer emot en. Kalla färger uppfattas ofta som att de faller tillbaka. Det beror förstås mycket på färgkartan och vad som händer i övrigt.

Visuell hierarki: färg (2)

Färg är väldigt användbart för att skapa visuell betydelse. Bra exempel på det är att färgen grön associeras med ”ok/bra” och röd med ”varning/fel”, vilket man ofta ser exempel på i t ex trafikljus, statusmeddelande i mjukvara eller varningslampor i bilar.

Visuell hierarki: färg statusmeddelanden i Bootstrap

Statusmeddelanden i webbdesignramverket Bootstrap