2 Dagens föreläsning Gränssnittsprinciper och granskning Granskning: Heuristisk utvärdering Principer i gränssnitt Mattias Arvola 3 10 tumregler för användbarhet (Nielsen, 1993; övers. Ottersten & Berntsson, 2002) 4 Heuristisk utvärdering 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 5 6 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 2. Använd ett naturligt språk Använd ord som är bekanta för användaren
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 7 4. Enhetlighet Användare ska inte behöva fundera på om olika ord, situationer eller handlingar i systemet betyder samma sak Följ plattformsriktlinjer 8 5. Förse användaren med återkoppling Systemet ska informera om vad som sker i det 9 10 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 11 12 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
13 14 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 15 16 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 Hur många utvärderare http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/ 17 Bedömningar av allvarlighetsgrad 18 Frekvens Hög: Tre eller fler av deltagarna upplever problemet Mellan: Två av deltagarna upplever problemet Låg: En av deltagarna upplever problem Inverkan Hög: Hindrar användaren från att klara uppgiften (kritiskt fel) Mellan: Orsakar användaren besvär, men uppgiften kan slutföras (icke-kritiskt fel) Låg: Mindre problem som inte hindrar användaren från att klara uppgiften
19 20 Prioritering av användbarhetsproblem Hög 3 2 1 Mellan 5 4 2 Låg 6 5 3 Andra granskningsmetoder Kognitiv genomgång utifrån Normans handlingscykel för walk-up-and-use-system http://hcibib.org/tcuid/chap-4.html#4-1 GOMS - KLM för effektivitetsanalys Goals, Operators, Methods, Selection rules - Keystroke Level Model https://en.wikipedia.org/wiki/goms Inverkan Frekvens Låg Mellan Hög 21 Neisser (1976) Principer i gränssnitt Actual nearby environment (available informa5on) 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. Modifies Modifies Actual present environment (available infor- ma5on) Samples Samples Schema of present environment Cogni5ve map of nearby environment Directs Perceptual explora5on Mo5on and traveling Directs 23 Artists Ghost 24 Affordance (handlingsinvit) 0:04-3:21 Spirit Meliora Repeat Shuffle Uppfattade och faktiska egenskaper hos ett ting som bestämmer vad man kan göra med den. En invit att trycka, dra eller redigera?
25 26 Handlingsinviter sekvensieras Mentala modeller Användares föreställningar om domänen och systemen de använder. Hur funkar det i deras värld? Selected Mouse Over Unselected Disabled Mental models in design https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/mental-models Norman (1988) 27 28 Designa en konceptuell modell (Dan Brown, http://www.uie.com/articles/concept_models) Metaforer 29 Det ska fungera som: (Marcus, 1995) 30 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. 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, TVbolag, 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
Funktioner ska fungera som att: (Marcus, 1995) 31 Direktmanipulation http://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx 32 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 Kontinuerligt representerade objekt och fysiska handlingar som ger direkt effekt. 33 MÅL 34 Ej direktmanipulation http://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx AVSIKT FÖRVÄNTAN BEDÖMA BESTÄM HANDLING Normans handlingscykel TOLKA GENOMFÖR! UPPFATTA! 4 35 36 Feedback Återkoppling på resultatet av en handling. Feedforward Att man vet vad som ska hända innan man utför handlingen. http://www.transformatordesign.se/case/attention-2/ Copy Moving 1,234 Files to "Keynotopia" 36.6 MB of 126.9 MB - About 10 seconds
37 38 Uppmärksamhet och den magiska siffran 7±2 FYSISKT SYSTEM GULF OF EXECUTION MÅL Om omgivningen stjäl fokus tappar man det som fanns i arbetsminnet GULF OF EVALUATION Gulf: avgrund, stup, skrämmande gap, bråddjup Execu;on: genomförande Evalua;on: bedömning 39 40 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. Fitts lag Tiden det tar att flytta till ett föremål är beroende av avståndet och föremålets storlek 41 42 Hicks lag http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/ 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.
43 44 http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/ 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) 45 Användbarhet 46 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 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 Neisser (1976) 47 Förväntningar Modifies Schema of present environment Cogni5ve map of nearby environment Actual nearby environment (available informa5on) Modifies Actual present environment (available infor- ma5on) Directs Samples Perceptual explora5on Samples Mo5on and traveling 1 (av 5) Directs förra nästa 48
49 2 (av 5) 3 (av 5) förra nästa förra nästa 50 52 4 (av 5) Förväntningar beror på sammanhanget nästa förra 51
56 Förväntningar beror på målen 57 58 Uppgift 1: Räkna kolumnerna Uppgift 2: Räkna personerna Harry Brignull hgp://www.slideshare.net/harrybr/what-you-need-to-know-about-eye-tracking-new-uxlx-version Harry Brignull hgp://www.slideshare.net/harrybr/what-you-need-to-know-about-eye-tracking-new-uxlx-version 59 60 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. Lapsus memoriae
61 62 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) 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 63 64 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 Det är lätt att känna igen, men svårt att komma ihåg 65 66 Känna igen var man är Recognition rather than recall
Problemlösning och beräkning är svårt 67 Ett par faktorer som påverkar lärande 68 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 Vi lär oss göra saker bättre om gränssnittet är uppgifts-fokuserat, bekant, enkelt och konsekvent utformat Använd datorn till det den är bra på: beräkningar Vi lär oss saker bättre när det inte är någon fara om det går fel 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 69 Responsiva system (ej samma som responsive design) 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 70 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) 71 Alltså, vad som gömmer sig bakom gränssnittsprinciper? Förväntningar Gestaltlagar Uppmärksamhet Minne Handlingsbanor Tid Visuell struktur (egen föreläsning) 72
73 Summa summarum Tumregler Heuristisk utvärdering Principer Användbarhet mattias.arvola@liu @mattiasarvola www.liu.se