Kognitionsvetenskaplig introduktion: Granskning av användargränssnitt

Kognitionsvetenskaplig

introduktion: Granskning av användargränssnitt

Introduktion till utvärderingsmetoder Heuristisk utvärdering

Principer för god gränssnittsdesign

Eva Ragnemalm

Att skapa interaktiva system

1.Förstå användningssituationen 2.Specifiera krav

3.Ta fram lösnings-
 förslag

4.Utvärdera Upprepa!

2

Utvecklingsprocess

Varv genom cirkeln

Färdigt system Prototyp

Skisser
 Scenarios Skiss

Format

Mål med utvärderingen

• Prioritera, revidera, förbättra, nyskapa -> Formativ – fokus på att hitta problem för att åtgärda.


• Beskriva, bedöma, betygsätta -> Summativ

– fokus på att undersöka till vilken nivå krav uppfylls (bättre än tidigare version, externa krav osv). Görs avslutningsvis för att bevisa att systemet uppfyller leveranskrav (eller på den tidigare versionen för att etablera baseline för jämförelse)

4

Typer av utvärdering

• Granskning

– expert granskar (inspekterar)

– (gruppuppgift i gränssnittsdesign, del 2)

• Användartest

– sätt en användare framför en prototyp eller systemet, prova

– (gruppuppgift i gränssnittsdesign, del 3)

Utvecklingsprocess

6

Färdigt system Prototyp

Skisser
 Scenarios Skiss

Varv genom cirkeln

Format

Typ av metoder

Användar- test

Användar- test

Formativ Formativ

(Summativ) Summativ (Formativ)

Mål med uvärdering

Formativ

Inspektion Inspektion Inspektion Inspektion

Granskningsmetoder

• Heuristisk utvärdering

• Kognitiv genomgång

• Pluralistisk genomgång

• …

• Logg-analys (inte granskning!)

• Prediktiva modeller (Fitts lag, GOMS…)

Heuristic Evaluation

• Baseras på heuristiker (tumregler,

rekommendationer, principer för god design)

• Expert granskar systemet eller någon illustration av systemet (en prototyp eller skisser osv)

8

Metod

1. Välj heuristik/lista av principer att använda (väl utprovad och bekant för experterna)

2. 2-5 användbarhetsexperter får en representation av systemet (skisser, prototyp, färdigt system)

3. Experterna utforskar systemet för att bekanta sig med det

4. Experterna granskar systematiskt mot principer och noterar avvikelser och problem (kopplade till

respektive princip)

5. Sammanställ listorna och analysera, prioritera

Nielsens 10 tumregler för användbarhet

(Nielsen, 1993; övers. Ottersten & Berntsson, 2002)

10

1.Enkel och naturlig dialog (Estetisk och minimalistisk design)

2.Använd ett naturligt språk (överensstämmelse system-verklighet)

3.Minimera användarens minnesbelastning (igenkänning snarare än erinran)

4.Enhetlighet (Konsekvens och standarder)

5.Förse användaren med återkoppling (Synlighet av status)

6.Förse användaren med klart markerade funktioner för att avbryta dialogen (användarkontroll och frihet)

7.Effektiv användning (Flexibilitet och effektivitet)

8.Bra felmeddelanden (Hjälp användaren diagnosticera o rätta till fel) 9.Förhindra (förebygga) fel

10.Hjälp och dokumentation

Resultat: upptäckta problem

• Situationer eller lägen där systemet inte följer principerna

– ex: laddning av bild 3 kan ta tid, visa pågående aktivitet (princip 5)

– ex: bild 4 har rubriken Skriva medan menyvalet som leder dit heter Utskrift (princip 4)

• Bäst resultat om experterna är kunniga både om principerna och domänen

• OBS: alla problem uppfattas inte som problem av användare

• OBS: Experterna hittar inte alla problem

Resultatet varierar

12

Hur många utvärderare

http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/

Sammanställning av resultat

• Sammanställ alla problem som hittats

• Gradera på:

– Frekvens (hur ofta kommer problemet att inträffa) – Effekt (hur svårt är det för användaren att hantera) – Envishet (är det bara ett problem första gången det

inträffar eller varje gång)

• Allvarlighetsgrad 0-4:

– Inte ett problem över huvud taget - Bara

kosmetiskt problem - Mindre problem - Större problem - Användbarhetskatastrof

14

Heuristisk utvärdering i andra områden

Idén att granska något utifrån principer går att

applicera på andra områden där det finns principer.

T.ex. interaktiva system som ska övertyga användaren om att ändra vanor (sluta röka, börja motionera...)

plus principer för vad som uppfattas som övertygande ger bedömning av potentiell övertygande förmåga

Nielsens 10

heuristiker

Nielsens 10 igen:

1.Enkel och naturlig dialog (Estetisk och minimalistisk design)

2.Använd ett naturligt språk (överensstämmelse system-verklighet)

3.Minimera användarens minnesbelastning (igenkänning snarare än erinran)

4.Enhetlighet (Konsekvens och standarder)

5.Förse användaren med återkoppling (Synlighet av status)

6.Förse användaren med klart markerade funktioner för att avbryta dialogen (användarkontroll och frihet)

7.Effektiv användning (Flexibilitet och effektivitet)

8.Bra felmeddelanden (Hjälp användaren diagnosticera o rätta till fel) 9.Förhindra (förebygga) fel

10.Hjälp och dokumentation

1. Enkel och naturlig dialog

18

Estetisk och minimalistisk design

•

Ingen irrelevant eller överflödig info

•

Info ska komma i naturlig och logisk ordning

•

Relevant info ska vara synlig (synas)

Enkel?

Synlig information?

• Hur små detaljer kan man egentligen se?

• Hur liten kontrast kan man urskilja?

– Färgkontraster kan vara besvärliga

• Synsvaga

• Färgblinda

20

• Normal ”rödblind” ”röd/grön”

Färgseende

Att lägga märke till det man ser

22

Vad vi uppfattar styrs av uppmärksamhet

• Funkar som ficklampa

• Styrs av förväntningar, uppgift och sammanhang

24

förra nästa

1 ^{(av 5)}

förra nästa

2 ^{(av 5)}

förra nästa

3 ^{(av 5)}

nästa förra

4 ^{(av 5)}

5 ^{(av 5)}

förra nästa

2. Använd ett naturligt språk

Överensstämmelse system - verklighet

•

Inte olika ord för samma sak

•

Används ord/bilder som är bekanta för användaren?

3. Minimera användarens minnesbelastning

34

Igenkänning snarare än erinran

• korttidsminnet är begränsat!

– blir man störd tappar man det man hade i minnet – kan inte lita på att användaren minns var de var i

uppgiften eller instruktioner som nyss gavs!

– Speciellt viktigt i mobila sammanhang, används ofta i stökiga miljöer!

3 forts. Minimera minnesbelastningen

• Därför:

-

Kan användaren se vad de gjorde och vilken status det de arbetar med har?

-

Användaren ska inte behöva komma ihåg saker från en del av produkten till en annan.

-

Instruktioner ska vara synliga (eller lätta att få fram) medan stegen utförs.

-

Vad som ska/kan göras härnäst ska vara tydligt

3 forts. Handlingsinviter (affordances)

36

• Faktiska och uppfattade egenskaper hos ett ting som berättar vad vi kan göra med den.

Handlingsinviter följer på varandra

• Handtag (grepp): ta tag i det – det sviktar: tryck ner

• Knapp (val): För pekaren över – den markeras: klicka

• Manipulering (rutan): För pekaren över hörnet – pekaren ändras: klicka och dra

4. Enhetlighet

38

Konsekvens och standarder

•

Likadana interaktionsobjekt ska se likadana ut, använda samma ord och helst likna allt annat som användaren använder

•

Följ plattformsriktlinjer

•

Användare ska inte behöva fundera på om olika ord, situationer eller handlingar i systemet betyder samma sak

5. Förse användaren med återkoppling

Synlighet av systemstatus

•

Det ska synas vad som pågår

-

Använd progress-bars, timglas etc

•

Vid direktmanipulation viktigt att det man petar på rör sig

-

visa att aktion mottagits (knappar som trycks in, markörer som ändrar utseende osv.)

-

Använd skuggfigurer om grafiken är för långsam

6. Förse användaren med klart markerade funktioner för att avbryta dialogen

40

Användarkontroll och användarfrihet

•

Det är lätt att välja fel av misstag

•

En tydligt markerad nödutgång behövs för att hitta tillbaka

•

Gör det möjligt att ångra och reparera

7. Effektiv användning

Flexibilitet och användningseffektivitet

•

Uppgifter ska inte kräva onödigt många steg

•

Kortkommandon snabbar upp för experten

– Men stöd både erfarna och oerfarna användare

•

På den lilla skalan: Fitts lag

•

På den större skalan: Hicks lag och Pareto-principen

Fitt´s lag

• Tiden det tar att peka ut ett föremål beror av

avståndet mellan startposition och mål samt målets storlek:

– ju längre avstånd desto längre tid – ju mindre mål desto längre tid

• Därför:

– Placera handlingar som hör ihop bredvid varandra – Ha inte för små knappar/interaktionsobjekt

– Mac-ens menyer i skärmkant är mäktiga pga oändlig yta

– Kaskad-menyer är svåra

42

Hicks lag

44

•

För varje valmöjlighet ökar tiden det tar att välja.

-

Ta bort det onödiga.

•

Folk delar upp sina val i kategorier om det går vilket minskar tiden att välja.

•

Om något sticker ut väljer man det.

80/20-regeln (The Pareto Principle)

•

80% av användarna kommer använda 20% av funktionaliteten

•

Bör då vara nära varandra både i tid och rum

8. Bra felmeddelanden

46

Hjälp användaren känna igen, diagnosticera och få hjälp att rätta till fel

•

Användarens språk (inga felkoder!)

•

Visa vad som är fel

•

Föreslå en lösning

9. Förhindra fel

Förebyggande av fel

•

Bättre än ett bra felmeddelande är att utforma produkten så att problemet inte uppstår

•

bekräftelse

•

Poka-Yoke-principen

Poka-Yoke-principen

http://pbmo.wordpress.com/2012/09/08/poka-yoke/

48

•

Att felsäkra, antingen genom att förebygga fel eller göra det lätt att upptäcka fel

10. Hjälp och dokumentation

•

Hjälp och dokumentation ska vara lätt att söka i

•

Fokuserad på användarens uppgift

•

Lista konkreta arbetssteg

•

Inte vara för omfattande

Uppgiften

• Gör en heuristisk utvärdering av bokningssystemet (de delar av systemet som behövs för en komplex boking)

– Läs noga igenom principerna så att ni vet vad ni ska titta efter!

– Var och en granskar!

– Sammanställ problemen tumregel för tumregel med tydlig hänvisning till var i systemet.

– Prioritera

50

www.liu.se