Mattias Arvola

@mattiasarvola

Institutionen för datavetenskap

Linköpings universitet

Principer i gränssnitt och heuristisk utvärdering

1

Dagens föreläsning

• Principer i gränssnitt

• Heuristisk utvärdering

2

Principer i gränssnitt

• Syfte: Förklara gränssnittsprinciper i termer av kognitiv psykologi

• Problem: Ibland blir principer motsägande. Då måste man prioritera. För att prioritera måste man förstå vad som ligger bakom principerna.

3

Exempel på principer

• Enkel och naturlig dialog

• Tala användarens språk

• Minimera användarens minnesbelastning

• Var konsekvent

• Ge feedback

• Erbjud tydligt markerade utgångar

• Erbjud genvägar

• Bra felmeddelanden

• Förebygg fel

4

5

Neisser (1976)

Samples

Samples

Directs

Modifies

Directs

Modifies

Perceptualexploration

Actual present environment

(available infor-

mation)

Schema of present

environmentCognitive

map of nearby environment

Motion and travelling

Actual nearby environment (available information)

Affordance (handlingsinvit)Uppfattade och faktiska egenskaper hos ett ting som bestämmer vad man kan göra med den.

6

7 8

Reply

Forward

Print

Delete

Knappar på skärmen tycks ge en invit att trycka på dem men inte dra i dem eller redigera

Handlingsinviter sekvensieras

9

Handlingsinviter i GUIs sekvensieras också

10

Selected

Mouse Over

Unselected

Disabled

Vilken ger tydligaste inviten att scrolla?

11

List Item

List Item

List Item

List Item

List Item

List Item

List Item

United States

United Arab EmiratesUnited KingdomUnited StatesUS Minor Outlying Isl.Uruguay

12

Perceptuell)

JA

)informa0on

NEJ

Falsk Synlig

Korrekt0förkastad Gömd

NEJ JA

Handlinngsinvit

Mentala modellerAnvändares föreställningar om domänen och systemen de använder. Hur funkar det i deras värld?

13

Mentala modeller i designNorman (1988)

14

15

Designa en konceptuell modell(Dan Brown, http://www.uie.com/articles/concept_models) Metaforer

Att förstå en domän genom analogi till en annan domän (metaforiskt tänkande) är ett sätt att strukturera upp en konceptuell modell.

16

Det ska fungera som: (Marcus, 1995)

• Ett skrivbord: Drawers, files, folders, papers, paper clips, stick-on note sheets

• Ett dokument: Böcker, kapitel, bokmärken, bilder, tidningar, stycken, tidskrifter, artiklar, nyhetsbrev, formulär

• Ett foto: Albums, photos, photo brackets/holders

• TV: Program, kanaler, TV-bolag, reklam, TV-guide

• En kortlek: Kort, högar

• En behållare: Hyllor, lådor, fack

• Ett träd: Rötter, stam, grenar, löv

• En stad: Folk, områden, landmärken, vägar, byggnader, rum, fönster, skrivbord

17

Funktioner ska fungera som att:(Marcus, 1995)

• Traversera (målinriktat): navigera, köra, flyga, gå

• Browsa (mindre målinriktat sökande efter alternativ): snabbläsa, fönster-shoppa, bläddra

• Scanna (väldigt snabb browsing): rulla förbi, passera anslagstavlor längs motorvägen

• Lokalisera: peka, beröra, ringa in

• Välja: beröra, peta, ta tag, fånga med lasso, placera fingret på och dra

• Skapa: lägga till, kopiera

• Radera: kasta bort, förstöra, tappa, återvinna, makulera

18

Direktmanipulationhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx

Kontinuerligt representerade objekt och fysiska handlingar som ger direkt effekt.

19

Ej direktmanipulationhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx

20

Normans handlingscykel

214

BESTÄM HANDLING

FÖRVÄNTAN

MÅL

BEDÖMAAVSIKT

TOLKA

GENOMFÖR! UPPFATTA!

Feedback

Återkoppling på resultatet av en handling.

22

Copy

Moving 1,234 Files to "Keynotopia"

36.6 MB of 126.9 MB - About 10 seconds

Feedforward

23

Att man vet vad som ska hända innan man utför handlingen.http://www.transformatordesign.se/case/attention-2/

24

GULF OFEXECUTION

GULF OFEVALUATION

FYSISKTSYSTEM

MÅL

Gulf: avgrund, stup, skrämmande gap, bråddjup Execution: genomförandeEvaluation: bedömning

Uppmärksamhet och den magiska siffran 7±2

Om omgivningen stjäl fokus tappar man det som fanns i arbetsminnet

25

Därför:

• Hjälp folk att komma ihåg vad de gör och deras arbetsobjekts status

• Modes är både kraftfulla och riskabla

• Att komma ihåg instruktioner med många steg är svårt. Se till att användaren kan se dem samtidigt som de utför stegen.

26

27

Fitts lag Tiden det tar att flytta till ett föremål är beroende av avståndet och föremålets storlek

Hicks lag

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 de det: Primärt innehåll först snarare än navigation först.

28

http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/

29

http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/

30

Poka-Yoke-principenhttp://pbmo.wordpress.com/2012/09/08/poka-yoke/

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

31

80/20-regeln (The Pareto Principle)

En hög andel användare kommer använda en liten del av funktionaliteten

Använd användarstudier för att ta reda på vilka funktioner det är som kommer användas mest

Placera dem nära till hands

32

Användbarhet

Den grad i vilken specifika användare kan använda en produkt för att uppnå ett specifikt mål på ett ändamålsenligt, effektivt och för användaren tillfredsställande sätt i ett givet sammanhang. – ISO 9241-11

33

134

förra nästa

(av 5)

35

förra nästa

2 (av 5)

36

förra nästa

3 (av 5)

37

nästa förra

4 (av 5) Våra förväntningar beror på sammanhanget

38

39 40

41

Våra förväntningar beror på vilka mål vi har

42

43

Harry Brignull http://www.slideshare.net/harrybr/what-you-need-to-know-about-eye-tracking-new-uxlx-version

44

Harry Brignull http://www.slideshare.net/harrybr/what-you-need-to-know-about-eye-tracking-new-uxlx-version

Uppgift 1Räkna kolumnerna

Uppgift 2Räkna personerna

Konsekvenser för design

• Undvik tvetydighet

• Tolkar alla användare skärmbilden på samma sätt?

• Var konsekvent

• Konsekvent utformning genom hela systemet för det lätt för användare att upptäcka och känna igen objekt.

• Förstå användarnas mål

• Vad är de ute efter? Som helhet och i varje steg i interaktionen? Lyft fram det viktiga.

45

Vårt seende söker struktur

• Gestaltperception: Vårt seende är holistiskt och ser hela former, figurer och objekt snarare än enskilda linjer, kanter och ytor.

46

Närhetslagen:Saker som är nära hör ihop

47

Likhetslagen: Saker som är lika hör ihop

48

Kontinuerlighetslagen: Delarna fortsätter

49

Slutenhetslagen: Delar av en form bildar en helhet

50

Figur och grundDesigner Nathan Ford

51

Den gemensamma rörelsens lag gör att de som rör sig ihop hör ihop

52

VI SÖKER OCH ANVÄNDER OSS AV VISUELL STRUKTURExempel av Brandon Jones och Andy Rutledge

53

http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/

http://andyrutledge.com/quiet-structure.php

Storlek

54

Färg

55

Kontrast

56

Justering och upprepning

57

Justering och upprepning

58

Densitet och whitespace

59

Ryckig ögonbana

60

Lugn ögonbana

61

Konsekvent utformad grid

62

63

VÅRT PERIFERA SEENDE ÄR DÅLIGT

Exempel av Marc Van Rymenant, Simplifying interfaceshttp://www.simplifyinginterfaces.com/tag/peripheral-vision/

64

Öka synligheten på ett objekt genom att

• Placera det där folk tittar

• Flytta det bort från andra objekt

• Flytta bort omgivande objekt

• Lägga visuell tyngd på det

• Reducera den visuella tyngden på omgivande objekt

65

Dra till sig uppmärksamheten på ett burdust sätt genom att

• En modal dialog kastas upp i ansiktet

• Spela ljud som startar scanning

• Blinka och skaka: rörelse uppfattas perifert och drar automatiskt till sig uppmärksamhet

66

Vår uppmärksamhet är begränsad

• Uppmärksamheten funkar som en ficklampa

• Arbetsminnet används för att hålla fokus

• Om omgivningen stjäl fokus tappar man det som fanns i arbetsminnet

• Instruktioner glöms

• Vad man läste nyss tappas

• Man glömmer vad man höll på med

67

Därför:

• Hjälp folk att komma ihåg vad de gör och deras arbetsobjekts status

• Modes är både kraftfulla och riskabla:

• Gaspedalen beroende på växel fram, växel bak och friläge

• Är objekten i edit mode eller view mode i ritprogrammet?

• Att komma ihåg instruktioner med många steg är svårt. Se till att användaren kan se dem samtidigt som de utför stegen.

68

69

VÅRT MINNE ÄR INTE PERFEKT

Vi använder hjälpmedel

• Bokmärken

• Vi gör högar när vi räknar

• Vi använder penna och pappersrutiner för att dividera och multiplicera

• Vi gör kategorier för att hålla reda på objekts status (inkorg, arbetshög, utkorg)

70

Informationsvittring• Man har uppmärksamheten på sitt mål

• Man funderar inte mycket över instruktioner, det finns det inte uppmärksamhetsutrymme för

• Saker som inte har med ens mål att göra uppmärksammar man inte

• Man följer informationsspåret mot sitt mål och utvecklar t.ex. banner blindness

• När målet är uppfyllt avslutar man och glömmer att städa upp

71

Invanda banor

• Folk är vanemänniskor

• Att inte behöva komma ihåg går ofta fortare även om det är mer omständligt för system som används sällan

• Guida användare till de bästa banorna

• Hjälp erfarna användare att jobba snabbt

72

73

DET ÄR LÄTT ATT KÄNNA IGEN, MEN SVÅRT ATT KOMMA IHÅG

Recognition rather than recall

• Ikoner att känna igen

74

Känna igen var man är

75

Problemlösning och beräkning är svårt

• Låt folk se och upptäcka saker genom att få manipulera olika vyer på data snarare än att behöva räkna ut saker

• Använd datorn till det den är bra på: beräkningar

76

Ett par faktorer som påverkar lärande

• Vi lär oss göra saker bättre om gränssnittet är uppgifts-fokuserat, bekant, enkelt och konsekvent utformat

• Vi lär oss saker bättre när det inte är någon fara om det går fel

77

Interaktion är tidsbaserad

• Den kortaste paus vi kan höra:1 millisekund (0,001 sekund)

• Det kortaste stimulus vi kan se: 5 millisekunder (0,005 sekund)

• Den kortaste automatiska reflexen:80 millisekunder (0,08 sekund)

• Att bli medveten om vad vi ser:100 millisekunder (0,1 sekund)

• Max. tidsavstånd för att direkt uppfatta orsak och verkan: 140 millisekunder (0,14 sekund)

• Att medvetet reagera på synintryck: 700 millisekunder (0,7 sekund)

• Maximal paus i samtal som inte upplevs som tystnad: 0,5-2 sekunder

• Uppmärksamhet på en sak: 10 sekunder

• Att fatta ett kritiskt beslut i en nödsituation. 100 sekunder

78

Responsiva system

• Säger till direkt att det har fått input

• Säger hur lång tid saker tar

• Ger dig möjlighet att göra annat medan du väntar

• Hanterar händelser på kö, på ett smart sätt

• Städar och gör låg-prioriterade saker i bakgrunden

• Förutser dina vanligaste handlingar

79

Tidsmässiga designkonsekvenser

• Det finns ett antal deadlines som ett interaktivt system måste kunna möta

• Feedback på den lilla tidsskalan

• Rätt information på rätt plats på den stora tidsskalan

• Fuska:

• Fejka tung grafik vid drag-n-drop/rörelse

• Arbeta i förväg genom pre-load

• Responsivitet kan vara avgörande (iPhone vs. vissa Android-lurar)

80

Alltså, vad som gömmer sig bakom gränssnittsprinciper?

• Förväntningar

• Gestaltlagar

• Visuell struktur

• Uppmärksamhet

• Minne

• Handlingsbanor

• Tid

81

10 tumregler för användbarhet(Nielsen, 1993; övers. Ottersten & Berntsson, 2002)

1. Enkel och naturlig dialog

2. Använd ett naturligt språk

3. Minimera användarens minnesbelastning

4. Enhetlighet

5. Förse användaren med återkoppling

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

7. Effektiv användning

8. Bra felmeddelanden

9. Förhindra fel

10.Hjälp och dokumentation

82

1. Enkel och naturlig dialog

Ingen irrelevant eller sällan använd info

Relevant info ska vara synlig

Info ska komma i naturlig och logisk ordning

83

2. Använd ett naturligt språk

Använd ord som är bekanta för användaren

84

3. Minimera användarens minnesbelastning

Gör valbara objekt och funktioner synliga

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

85

4. Enhetlighet

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

Följ plattformsriktlinjer

86

5. Förse användaren med återkoppling

Systemet ska informera om vad som sker i det

87

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

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

88

7. Effektiv användning

Kortkommandon snabbar upp för experten

Stöd både erfarna och oerfarna användare

89

8. Bra felmeddelanden

Använd ett enkelt språk

Visa vad som är fel

Föreslå en lösning

90

9. Förhindra fel

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

91

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

92

Heuristisk utvärdering (Nielsen, 1993)

• Tag 3–5 experter och en utprovad lista med tumregler

• Utvärderare

• Bekantar sig med tumreglerna

• Går igenom systemet ett första varv

• Går igenom systemet noga

• Identifierar problem utifrån tumreglerna

• Output: lista med hittade problem kopplade till varje tumregel

• Sammanställ output från samtliga utvärderare

93

• Bäst resultat ges om utvärderaren har expertis inom både

• Användbarhet och tumreglerna

• Domänen i fråga

94

Hur många utvärderare

95

Bedömningar av allvarlighetsgrad

Frekvens: ofta eller sällan

Inverkan: enkelt eller svårt att åtgärda om det går snett

Persistens: problem en gång för användare som inte känner till it eller kommer de besväras av det varje gång.

96

5-gradig skala för allvarlighetsgrad

0. Jag håller inte med om att detta är ett användbarhetsproblem överhuvudtaget

1. Kosmetiskt problem – behöver inte åtgärdas om det inte finns tid över i projektet

2. Mindre användbarhetsproblem – att åtgärda det bör ges låg prioritet

3. Större användbarhetsproblem – viktigt att åtgärda, så det bör ges hög prioritet

4. Användbarhetskatastrof – tvunget och nödvändigt att åtgärda innan produkten släpps

97

Dagens föreläsning

• Principer i gränssnitt

• Heuristisk utvärdering

98

www.liu.se