Dagens föreläsning Principer i gränssnitt och heuristisk utvärdering Principer i gränssnitt Heuristisk utvärdering Mattias Arvola @mattiasarvola Institutionen för datavetenskap Linköpings universitet 1 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. 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 3 4
5 Neisser (1976) Modifies Actual nearby environment (available information) Actual present environment (available information) Samples Affordance (handlingsinvit) Uppfattade och faktiska egenskaper hos ett ting som bestämmer vad man kan göra med den. Modifies Samples Schema of present environment Cognitive map of nearby environment Directs Perceptual exploration Motion and travelling Directs 6 Knappar på skärmen tycks ge en invit att trycka på dem men inte dra i dem eller redigera Reply Forward Print Delete 7 8
Handlingsinviter sekvensieras Handlingsinviter i GUIs sekvensieras också Selected Mouse Over Unselected Disabled 9 10 Vilken ger tydligaste inviten att scrolla? JA Falsk Synlig United States United Arab Emirates United Kingdom United States US Minor Outlying Isl. Uruguay List Item List Item List Item List Item List Item List Item Perceptuell) informa0on NEJ Korrekt0förkastad NEJ Gömd JA Handlingsinvit 11 12
Mentala modeller Användares föreställningar om domänen och systemen de använder. Hur funkar det i deras värld? Mentala modeller i design Norman (1988) 13 14 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. 15 16
Det ska fungera som: (Marcus, 1995) Funktioner ska fungera som att: (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 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 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 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 TV: Program, kanaler, TVbolag, reklam, TV-guide Lokalisera: peka, beröra, ringa in 17 18 Direktmanipulation http://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx Ej direktmanipulation http://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx Kontinuerligt representerade objekt och fysiska handlingar som ger direkt effekt. 19 20
AVSIKT MÅL FÖRVÄNTAN BEDÖMA Feedback Återkoppling på resultatet av en handling. BESTÄM HANDLING Normans handlingscykel TOLKA Copy Moving 1,234 Files to "Keynotopia" GENOMFÖR! UPPFATTA! 36.6 MB of 126.9 MB - About 10 seconds 214 22 Feedforward Att man vet vad som ska hända innan man utför handlingen. http://www.transformatordesign.se/case/attention-2/ FYSISKT SYSTEM GULF OF EXECUTION MÅL GULF OF EVALUATION Gulf: avgrund, stup, skrämmande gap, bråddjup Execution: genomförande Evaluation: bedömning 23 24
Uppmärksamhet och den magiska siffran 7±2 Om omgivningen stjäl fokus tappar man det som fanns i arbetsminnet 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. 25 26 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. 27 28
http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/ http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/ 29 30 Poka-Yoke-principen http://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 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 31 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 1 (av 5) förra nästa 33 34 2 (av 5) 3 (av 5) förra nästa förra nästa 35 36
37 4 (av 5) Våra förväntningar beror på sammanhanget nästa förra 38 39 40
41 Våra förväntningar beror på vilka mål vi har 42 Uppgift 1 Räkna kolumnerna Uppgift 2 Räkna personerna Harry Brignull http://www.slideshare.net/harrybr/what-you-need-to-know-about-eye-tracking-new-uxlx-version Harry Brignull http://www.slideshare.net/harrybr/what-you-need-to-know-about-eye-tracking-new-uxlx-version 43 44
Konsekvenser för design Vårt seende söker struktur 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. Gestaltperception: Vårt seende är holistiskt och ser hela former, figurer och objekt snarare än enskilda linjer, kanter och ytor. 45 46 Närhetslagen: Saker som är nära hör ihop Likhetslagen: Saker som är lika hör ihop 47 48
Kontinuerlighetslagen: Delarna fortsätter Slutenhetslagen: Delar av en form bildar en helhet 49 50 Figur och grund Designer Nathan Ford Den gemensamma rörelsens lag gör att de som rör sig ihop hör ihop 51 52
Storlek VI SÖKER OCH ANVÄNDER OSS AV VISUELL STRUKTUR Exempel av Brandon Jones och Andy Rutledge http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/ http://andyrutledge.com/quiet-structure.php 53 54 Färg Kontrast 55 56
Justering och upprepning Justering och upprepning 57 58 Densitet och whitespace Ryckig ögonbana 59 60
Lugn ögonbana Konsekvent utformad grid 61 62 VÅRT PERIFERA SEENDE ÄR DÅLIGT Exempel av Marc Van Rymenant, Simplifying interfaces http://www.simplifyinginterfaces.com/tag/peripheral-vision/ 63 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 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 65 66 Vår uppmärksamhet är begränsad Därför: 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 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. 67 68
69 Vi använder hjälpmedel VÅRT MINNE ÄR INTE PERFEKT 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 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 71 72
73 Recognition rather than recall Ikoner att känna igen DET ÄR LÄTT ATT KÄNNA IGEN, MEN SVÅRT ATT KOMMA IHÅG 74 Känna igen var man är 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 75 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 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) Interaktion är tidsbaserad 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 77 78 Responsiva system Tidsmässiga designkonsekvenser 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 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) 79 80
Alltså, vad som gömmer sig bakom gränssnittsprinciper? 10 tumregler för användbarhet (Nielsen, 1993; övers. Ottersten & Berntsson, 2002) Förväntningar Gestaltlagar Visuell struktur Uppmärksamhet Minne Handlingsbanor Tid 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 81 82 1. Enkel och naturlig dialog 2. Använd ett naturligt språk Ingen irrelevant eller sällan använd info Relevant info ska vara synlig Info ska komma i naturlig och logisk ordning Använd ord som är bekanta för användaren 83 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 4. Enhetlighet Användare ska inte behöva fundera på om olika ord, situationer eller handlingar i systemet betyder samma sak Följ plattformsriktlinjer 85 86 5. Förse användaren med återkoppling Systemet ska informera om vad som sker i det 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 87 88
7. Effektiv användning Kortkommandon snabbar upp för experten Stöd både erfarna och oerfarna användare 8. Bra felmeddelanden Använd ett enkelt språk Visa vad som är fel Föreslå en lösning 89 90 9. Förhindra fel Bättre än ett bra felmeddelande är att utforma produkten så att problemet inte uppstår 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 91 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 Bäst resultat ges om utvärderaren har expertis inom både Användbarhet och tumreglerna Domänen i fråga 93 94 Hur många utvärderare 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. 95 96
5-gradig skala för allvarlighetsgrad Dagens föreläsning 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 Principer i gränssnitt Heuristisk utvärdering 97 98 www.liu.se