Principer i gränssnitt och heuristisk utvärdering729G44/fo3-granssnittsprinciper.pdfRecognition...
Transcript of Principer i gränssnitt och heuristisk utvärdering729G44/fo3-granssnittsprinciper.pdfRecognition...
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
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