Webbgrafik

Grafisk Design

Varför grafisk design?
Den grafiska/visuella utformningen av gränssnittet kan:

• Öka användbarheten
• Öka snabbheten och effektiviteten
• Förebygga problem i interaktionen och stödja en god felhantering
• Kan göra gränssnittet visuellt mer tilltalande

Layout (rutnät och gruppering)

God layout kan användas för att:

• Skapa struktur (vägleda användaren)
• Skapa balans (god komposition)
• Markera betydelse

Grundregel
Komposition och gruppering
- Använd rutnät (för god komposition)
- Gruppera gränssnittets delar enligt en naturlig "semantisk" modell

Tips!

• Rutnätet bör vara "osynligt" (utnyttja harmoniska proportioner)
• Undvik "plottrighet" (strukturera och gruppera)
• På ett "uppslag" kan man ha 6 till 12 informationsgrupper (välgrupperade och med likartad struktur)
• I första hand gruppering m h a mellanrum (och rutnät)
• Utnyttja först därefter (vid behov)
  
  • Text/rubriker (se webbtext)
  • linjer (varsamt)
  • ramar (varsamt)
  • färg (försiktigt)

Färg

Färger kan användas för att:

• Gruppera information
• Skapa/visa på associationer
• Indikera betydelse, viktighet och struktur
• Göra gränssnitt mer visuellt tilltalande (roligare och trevligare)

men tänk på att:

• många färger medför ofta "visuell förvirring" och "visuell trötthet"
• ca 8% färgblinda (i olika grad)
• färgpsykologi (delvis kulturellt betingat)

Grundregel

• Var sparsam med färger

Tips!

• Designa först monokromt - addera sedan färg försiktigt/sparsamt

- Max 5 betydelsebärande färger
- Diskreta bakgrundsfärger
- Var konsekvent!

• Gör färgkodningen redundant (form-färg, text-färg)
• Var försiktig med starka färger och starka kontraster
• Se upp med:
  - Blått på svart (mörkt)- Blått på svart (mörkt)
  - Kombinationen blått och rött- Kombinationen blått och rött

Generellt så kräver färgerna rött, orange, gult och grönt mindre mer visuell fokusering än extremerna blått och rött. Blått och rött ligger på var sin ände av färgspektrat. Kombinerar man dessa två färger försvåras ögats fokusering. Ögat kan inte fokusera på rött och blått samtidigt.

Spatial effekt, termisk effekt, psykologisk effekt (OH)
Man kan använda färgers spatiella (rumsliga) effekt för att framhäva eller minska informationen som visas på skärmen. Mörka färger försvinner/rör sig bort från observatören. Ljusa färger närmar sig observatören. Blå färger rör sig bort från observatören.

	Spatial effekt	Termisk effekt	Psykologisk effekt
Grön	Avlägsen	Kall	Vilsam
Gul	Nära	Varm	Stimulerande
Blå	Avlägsen	Kall	Vilsam
Röd	Mycket nära	Varm	Mycket stimulerande
Brun	Klaustrofobisk	Neutral	Stimulerande

Färger kan även ge associationer enligt nedan (kanske är vi alla inte överens om alla associationer, men ändå!)

Grön	Harmoni, balans, kreativitet
Gul	Glädje, stimulans, optimism
Blå	Exklusivt, lyxigt, svalt
Röd	Livslust, provocerande, varmt
Brun	Ombonat, mysigt, varmt
Grå	Neutralt, sobert, anonymt
Svart	Rebelliskt, syndigt
Vit	Renhet, fräschör

Ikoner

Ikoner kan användas för att:

• Öka begripligheten
• Underlätta hågkomst
• Spara utrymme
• Göra gränssnittet mer visuellt tilltalande

men ikoner kan vara svåra att förstå och besvärliga att designa (måste ha rätt abstraktionsnivå)

Grundregel
Ikoner bör vara enkla och bygga på substantiv

Synvinkel som framhäver karaktärerna
Att effektivt karakterisera ett föremål på en ikon beror en hel del på att hitta den synvinkel som tar bort oviktiga detaljer och framhäver föremålets karaktärer. Man överdriver eller förstärker de karakteristiska egenskaperna hos föremålet. T ex vingar på flygplan, taxiskylten på biltaket.

Tips!

• Gör ikoner enhetliga (storlek, form, färg)
• Testa om ikonerna är lätta att förstå
• Kombinera gärna ikon + text

Användbarhetsanalys

Det finns flera olika delvis överlappande definitioner och analysmetoder (som alla liknar varandra mer eller mindre). En vanlig modell för analys av användbarhet är REALmodellen.

Effektivitet
Kan delas upp i två olika effektivitetsmått:

1. Hur snabbt användarna löser de uppgifter som systemet ska stödja (snabbhet).
2. Hur ofta användarna gör fel (felfrekvens).

Lärbarhet
Kan delas upp i två olika lärbarhetsmått:

1. Hur lätt är det för användarna att lära sig systemet vid en första introduktion (förstagångsinlärning).
2. Hur bra minns användarna från gång till gång (hågkomst över tid).

Attityd
Användarnas (subjektiva) inställning till systemet.

OBS! REAL-modellen är relativ med avseende på olika användare och användargrupper.

Källor:

Riktlinjer för utformning av webbplatser, www.nada.kth.se

Web Style Guide, By Patrick Lynch and Sarah Horton

Universal Usability, Access by Design by Sarah Horton