Föreläsning 5 1ME403 Design av grafiska gränssni8, 7,5hp Kommunicera design och utvärdering Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se
Områden Kapitel i boken och andra källor InterakConsflöde Utvärdering Varför utvärdera (testa)? Olika former av utvärdering SummaCv och formacv utvärdering Användartest Verbal metod, experiment Scenario Eye tracking Planering av användartest 2 Bilder från freedigitalphotos.net
Li8eratur Tidwell, J. (2011). Designing Interfaces, 2nd edikon, O Reilly kap. 1. What Users Do RepeCCon och återkoppling. Beteendemönster för användare. kap. 11. Making It Look Good: Visual Style and AestheKcs Webbplatsens utseende påverkar trovärdigheten. Visuell design, färg, typsniz, etc. van Gorp, T. (2008). Design for EmoCon and Flow. Boxes and Arrows hzp://boxesandarrows.com/design- for- emocon- and- flow/ usability.gov: hzp://www.usability.gov/how- to- and- tools/methods/user- research/index.html Användartest hzp://www.usability.gov/how- to- and- tools/methods/running- usability- tests.html hzp://www.usability.gov/how- to- and- tools/methods/planning- usability- tescng.html hzp://www.usability.gov/how- to- and- tools/methods/eye- tracking.html hzp://www.usability.gov/how- to- and- tools/methods/scenarios.html 3
Visuell design Egenskaper som färg, form, etc. Se även förra föreläsningen Colors in different cultures av Felicia Bratu (2010) hzp://www.wintranslacon.com/cross- cultural- colours/ "A8racKve things work be8er" (Norman, 2002) "Interfaces actually become more usable when people enjoy using them" (Tidwell, 2011) Norman, D. (2002). EmoCon and design: AZracCve things work bezer. InteracKons Magazine, ix (4), 36-42. [hzp://jnd.org/dn.mss/emocon_design_azraccve_things_work_bezer.html] Tidwell, J. (2011) Designing Interfaces, 2nd edikon, O'Reilly 4
Kapitel 11 Exempel på olika "pa8erns" Deep Background Svagt tonad bild eller gradient bakgrund. Ger djup och en visuell effekt av az innehållet flyter framför bakgrunden. Few Hues, Many Values Använd endast ez fåtal färger. Skapa nyanser av dessa. Skapa en färgpalez med färgnyanser som ska användas i gränssnizet. Corner Treatments Var konsekvent i umormning av gränssnizets objekt och bakgrunder, vad det gäller rundade hörn, etc. Borders That Echo Fonts Använd samma färgnyans och tjocklek i kantlinjer som i någon av texterna (t.ex. de som används i rubriker). Hairlines Använd tunna (1 pixel) kantlinjer för az markera rubriker och avgränsningar. ContrasCng Font Weights Använd olika kontrast i texten, för az markera olika nivåer eller typer av informacon eller olika vikt. Skins and Themes Låt användaren skapa siz eget utseende, t.ex. välja mellan olika teman. Exempel Webbplatsen för kursen 1ME101 hzp://medieteknik.lnu.se/1me101 www.ica.se Denna presentacon i PowerPoint Google drive 5
InterakKonsflöde InteracKon flow, AcKvity flow Cooper: Product posture = look and bahavior The user's way to think and interpret User s goals ReacCon Gulf of execucon SCmuli Feedback AcCon Gulf of evaluacon Response Physical system Designer's representacon of the goals Designprinciper för harmonisk interakcon Follow users' mental models Less is more Enable users to direct, don't force them to discuss Keep tools close at hand Provide modeless feedback Design for the probable; provide for the possible Provide comparisions Provide direct manipulacon and graphical input Reflect object and applicacon status Avoid unnecessary reporcng Avoid blank slates DifferenCate between command and configuracon Provide choices, don't ask quescons Hide the ejector seat levers OpCmize for responiveness; accommodate latency Cooper, A., Reimann, R., Cronin, D. (2007) About Face 3: The EssenKals of InteracKon Design, Wiley Publishing, Inc. 6
Undvik sådant som är onödigt Eliminera onödiga steg i interakconen, men det ska formarande vara enkelt för nybörjare och ej omständigt för expertanvändare Rena onödigheter elimineras helt Avbryt inte användarens arbetsflyt T.ex. popupfönster med bekräuelser eller felmeddelanden som borde kunna hanteras ändå Tvinga inte användaren az gå Cll olika gränssniz då man formarande arbetar med samma sak Det som kan ändras ska kunna ändras där det visas Cooper, A., Reimann, R., Cronin, D. (2007) About Face 3: The EssenKals of InteracKon Design, Wiley Publishing, Inc. 7
Designa för flöde "Start by removing distrackons or impediments wherever possible." (van Gorp, 2008) "Less is be8er" (Tidwell, 2011, kap. 3) ängslan, oro (otålig) u8råkad van Gorp (2008): - Clear NavigaCon - Immediate Feedback - Balance the PercepCon of Challenge With the User s Skill van Gorp, T. (2008). Design for EmoCon and Flow. Boxes and Arrows. [hzp://boxesandarrows.com/design- for- emocon- and- flow/] 8
Varför utvärdera? Testa en design (prototyp) Idéer, funkcon, "look and feel", IdenCfiera problem och behov av förbäzringar Testning Testa designteamets förståelse av användarnas krav och behov Förstå användarnas omgivning, mål och uppgiuer Görs under målgruppsanalysen, men kan sedan komplezeras med fler test Feedback på utvecklingen Jämföra olika idéer och designalternacv Testa projektets mål Krav på kvalitét, bäzre än föregående version, bäzre än konkurrenters produkt, 9
Olika former av utvärdering FormaCv utvärdering Görs medan man utvecklar programmet Ger designteamet feedback på sin design med kvalitacv bedömning Umörs oua och med ez fåtal testpersoner och en begränsad del av programmet varje gång Syue az idencfiera problem och se vad som behöver förbäzras SummaCv utvärdering Görs då programmet är klart eller då man vill ta fram underlag för nästa version Umörs med flera testpersoner Ger kvanctacv data (stacsck) eller svar på hur programmet fungerar för användarna Syue az verifiera designen eller idencfiera problem Testperson 2 och 5 har problem med a8 hi8a sökfunkkonen. Testperson 1, 3 och 5 går fel i navigeringen. 80% av användarna tycker a8 de ueör sina arbetsuppgifer mer effekkvt med programmet. 25% upplever a8 det är krångligt a8 lägga in ny data. 10
Användartest Syue med testet Tydligt syue och mål Testa inte allt på en gång, utan välj en del av programmet, en uppgiu eller mål för användaren, etc. ObservaCon Direkt observacon t.ex. observera och för anteckningar medan användaren testar Indirekt observacon t.ex. loggning (inspelning) av testpersonen och hur denne använder programmet Exempel på vad som kan observeras Hur programmet används (navigering och andra interakcva funkconer) ReakConer, tvekan, misstag Musrörelser, ögonrörelser 11
Verbal metod "Tänka högt" ("Thinking Out Loud" / "Thinking Aloud") Några olika metoder Användaren får en uppgiu az umöra och uppmanas az "tänka högt" genom az beräza vad han/hon ser och gör Observera och för anteckningar Kan komplezeras med ez samtal euer testet T.ex. komplezerande frågor eller gemensamt gå igenom anteckningarna Experiment Syue och genomförande Vad är konstant, vad ändras (oberoende variabler), vad mäts (beroende variabler) Beskrivning av testet Eventuellt en hypotes (formuleras så az den kan testas) Mätning av data ObservaConer, loggning, inspelning, 12
Tolkning av testresultat KriCsk granskning av resultaten Storlek på effekten Hur stora är skillnaderna? Vilken prakcsk betydelse har de? AlternaCva tolkningar Finns det alternacva tolkningar? Kan andra variabler ha hau någon betydelse? RelaCon mellan beroende variabler Ger de olika variabler ez konsekvent resultat? Om olika variabler visar på olika resultat bör fler experiment umöras. Generalisering av resultaten Kan resultatet generaliseras eller är det speciellt just för testsituaconen? Kan man se en tendens? 13
Scenario EZ scenario fokuserar på användare och användarens interakcon med programmet Används i flera steg i utvecklingsprocessen Olika typer av scenarios: Goal- or Task- Based Scenario Fokuserar på mål och uppgiu Tar ej upp hur man genomför uppgiuerna Används för az presentera en uppgiu för en testperson Elaborated Scenario (Context Scenario) Mer genomtänkt, detaljerat scenario Fler detaljer om användarens och dennes beteende Används t.ex. i personas Ger designteamet en bäzre förståelse av användarna Full Scale task Scenario (Key Path Scenario) Inkluderar hur användaren umör uppgiuer och interagerar med programmet Används för az testa designidéer usability.gov (2013). Scenarios. [hzp://www.usability.gov/how- to- and- tools/methods/scenarios.html] 14
Planering av test Scope Vad ska testas och i vilken omfazning? Purpose Vad är det vi bryr oss om i testet? Vilka frågor vill vi få svar på? Schedule & LocaCon Hur många test? Hur mycket Cd har vi? Var ska testen genomföras? Sessions Beskrivning av testet. Planering av Cd för ez test (introdukcon, genomförande, diskussion/frågor eueråt, byte Cll nästa testperson). Equipment Utrustning som behövs för testpersonen samt för dokumentering av testet. ParCcipants Antal testpersoner. Kriterier för testpersoner och hur de ska rekryteras. Scenarios Beskrivning av vilka uppgiuer som testpersonen ska få. Metrics Variabler i testet. Både bakgrundsvariabler (ålder, kön, etc.) och vad som ska mätas/ observeras i testet. QuanCtaCve metrics Vilka kvanctacva data som ska mätas (Cd az genomföra en uppgiu, antal fel, etc.) Roles Vilka personer som ska delta och vilka roller de har (testledare, observatörer, antecknare, sköta utrustning, mozagning, etc.) usability.gov (2013). Planning a Usability Test. [hzp://www.usability.gov/how- to- and- tools/methods/planning- usability- tescng.html] 15
Saker a8 observera eller mäta under e8 test Förslag på vad som kan mätas / analyseras Lyckas testpersonen genomföra uppgiuen? Allvarliga fel som görs Mindre allvarliga fel Lyckas testpersonen komma Cllbaks euer fel Tid az umöra en uppgiu Testpersonens egna kommentarer om hur programmet upplevdes Testpersonens rekommendaconer Jämför användarens säz az genomföra uppgiuerna med det säz som du tänkt dig då du designat programmet Ger bra insikt i om informaconsarkitekturen och navigeringen fungerar eller behöver justeras usability.gov (2013). Planning a Usability Test. [hzp://www.usability.gov/how- to- and- tools/methods/planning- usability- tescng.html] usability.gov (2013). Scenarios. [hzp://www.usability.gov/how- to- and- tools/methods/scenarios.html] 16
Eye Tracking Mätning av var ögat fokuserar eller ögonrörelser Andra saker az mäta Hur lång Cd man fokuserar på något Hur fokus förändras mellan olika delar av sidan Vilken del man fokuserar på först Vilka delar man missar Vilka delar man återkommer Cll usability.gov (2013). Eye tracking. [hzp://www.usability.gov/how- to- and- tools/methods/eye- tracking.html] 17
18 Test e8 Kdigare år