Föreläsning 1 1ME403 Design av grafiska gränssni7, 7,5hp. Gränssni)ets sy-e. Rune Körnefors. Medieteknik Rune Körnefors rune.kornefors@lnu.

Transkript

1 Föreläsning 1 1ME403 Design av grafiska gränssni7, 7,5hp Gränssni)ets sy-e Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Områden Utvecklingsprocess Roller Användargränssni) Översikt av prototyper och användartest Målgruppsanalys (User Research) Olika metoder Intervjuer Användarmodell persona "Pa)erns" Behavioral Pa)erns Design Pa)erns 2 Bilder från freedigitalphotos.net

3 Li7eratur Tidwell, J. (2011). Designing Interfaces, 2nd edikon, O Reilly kap. 1. What Users Do Målgruppsanalys Design pa)erns (mönster, typexempel, goda föredömen, ) Behavioral pa)erns ( beteendemönster ) U.S. Department of Health & Human Services (2006). The Research- Based Web Design & Usability Guidelines, Enlarged/Expanded edikon. Washington: U.S. Government Princng Office. [ User Research Methods h)p:// to- and- tools/methods/user- research/index.html Intervjuer» h)p:// to- and- tools/methods/contextual- interview.html» h)p:// to- and- tools/methods/focus- groups.html» h)p:// to- and- tools/methods/individual- interviews.html Personas» h)p:// to- and- tools/methods/personas.html Användartest (usability test)» h)p:// to- and- tools/methods/usability- tescng.html 3

4 Utvecklingsprocess Idé Design Test Produkcon Underhåll Lansering, publicering Jmf. Garre7s modell Garre), J. J. (2011) The Elements of User Experience, 2nd edikon, New Riders 4

5 Human- oriented design Förstå användares önskemål, behov, mocvering och omgivning Förstå möjligheter, begränsningar och krav ucfrån verksamhet, område och teknik Ucfrån de)a skapa en design av form, innehåll och beteende, så a) produkten blir användbar, önskvärd, ekonomisk och teknisk möjlig Form Grafisk design Behavior Interakconsdesign Content Informacons- arkitektur Målinriktad design (Goal- Directed Design) Användarcentrerad design (User- Centered Design) - hänsyn tas Kll användares mål, behov och mokv 5

6 Personer som bidrar med och/eller lägger in innehåll Roller, olika intressenter "stakeholders" Beställare Informaconsägare System (program, webb applikacon, ) Målgrupp Olika grupper av användare Utvecklare Producenter Infrastruktur Underhåll - - Primära, sekundära användare Direkta, indirekta användare 6

7 Olika typer av program: - Desktop applicacon - Mobile applicacon - Help applicacon - Web Applicacon - Olika användning: - Upptar användarens huvudsakliga uppmärksamhet - Bakgrundsprogram - Tillfällig användning - Användare Användare har olika kunskap om programmet, webbplatsen, gränssni)et Beginners! Intermediates! Experts! Utveckla primärt för den största gruppen (intermediate users) Cooper, A., Reimann, R., Cronin, D. (2007) About Face 3: The EssenKals of InteracKon Design, Wiley Publishing, Inc. 7

8 Användarnas mål Upplevelsemål Hur man vill känna T.ex. ha kul, säker, effekcv, Slutmål Mocv cll a) usöra uppgi-er (cll a) använda programmet) T.ex. lära sig något, beställa en produkt, kontakta någon, Mål i livet Varför man vill uppnå slutmålen T.ex. karriär, högre lön, mer cd cll annat, 8

9 Andra mål Kunders mål Varför man skaffar en produkt, väljer webbplats, etc. T.ex. IT- chef köper/väljer produkter Verksamhetsmål (business, organizaconal goals) Vad man vill uppnå T.ex. ökad marknad, bä)re kundkontakt, effekcvare administracon, Tekniska mål (behov/krav) Krav på teknik för a) stödja användarmål och verksamhetsmål T.ex. fungera i olika webbläsare, responsiv, cllgänglighet, Se Kll a7 främst möta användarnas mål 9

10 Användargränssni7 User interface = Användargränssni) Människa- dator- interakcon Human Computer Interaccon (HCI) Computer Human Interaccon (CHI) Gränssni) mellan människan (användaren) och Användare Dator Program InformaKon Webbplats Människor OrganisaKon 10

11 Olika test Concept tescng Testa idéer, stämmer projektets mål med målgruppens behov? Prototyping Olika delar av systemet utvecklas och testas, o-a genom användartest Peer review / Expert review Kollegor (eller experter inom webbdesign eller interakconsdesign) ger synpunkter Usability test Test av användbarhet, kan användarna usöra sina uppgi-er? Field trial Test i användarnas naturliga miljö och med verkliga uppgi-er Acceptance test Slu)est för a) visa a) kravspecifikaconen är uppfylld. Godkänns av uppdragsgivaren. 11

12 Prototyper Prototyp Utkast eller enkel variant av systemet (programmet eller webbplatsen) Sy-e Testa olika alternacv Skapa en gemensam syn på systemet i utvecklingsteamet Usöra test med användare, t.ex. test av struktur/navigering, layout, vokabulär, Olika former av prototyper Pappersprototyp Skärmbilder i datorn Struktur, layout i t.ex. UXPin Struktur, layout i HTML och CSS (eller den teknik som systemet ska utvecklas i) 12

13 Olika sorters prototyper Requirements animacon Möjliga krav demonstreras i en prototyp Rapid prototyping Enkel implementering av en specifik del av systemet. Sy-et är a) testa prototypen mot användare och utvärdera testet. Prototypen slängs sedan bort. Incremental prototyping Systemet konstrueras inkrementellt, en del i taget. Passar för stora system som kan brytas ner i flera mer eller mindre självständiga delar. Evoluconary prototyping Prototypen utvärderas. Däre-er bygger man vidare för a) få fram en ny och bä)re prototyp, clls man cll slut har det färdiga systemet. 13

14 Tekniker för prototyper Low- fidelity prototype Billigare implementering än den slutliga versionen, t.ex. - pappersprototyp - skärmbilder i Powerpoint, Photoshop, etc. Verccal Innehåller funkconer på både hög och låg nivå för en begränsad del av systemet Horizontal Innehåller alla funkconer på hög nivå, men saknar detaljer High- fidelity prototype Hög kvalitet som demonstrerar upplevelsen, t.ex. - en video som visar hur det färdiga systemet kommer a) fungera - webbsidor med komple) funkconalitet (fast kanske sämre prestanda) 14

15 Användartest Användartest är ej test av användare, utan med användare! Användartest Test av användbarhet User teskng Usability teskng Test med användare Testa om målgruppen kan uppfylla sina mål, om behoven cllgodoses Testa anpassning cll målgruppen Rä) vokabulär, arbetssä), förståelse, etc. Testa upplevelse Upptäcka problem med ovanstående Utvärdering (test) som ej usörs av användare Är projektets mål uppfyllda? Validering mot kravspecifikaconen Teknisk kontroll Koden korrekt, funkar alla länkar, anpassning cll olika skärmstorlekar, näthascghet, etc. 15

16 KvalitaKv undersökning Olika akcviteter: Marknadsanalys Intervju med intressenter Intervju med ämnesexperter Intervju med användare och kunder Fältstudie av användare, observaconer (etnografisk metod) "Li)eraturstudie" (li)eratur i produktens domän) Utvärdering av konkurrerande eller liknande produkter 16

17 Intervju Fältstudie, observacon, contextual interview Studera hur användarna arbetar i sin naturliga miljö Ge inte testpersonerna någon uppgi-, utan observera och ställ frågor Kan observera typ av uppgi-er, problem, teknik, Fokusgrupp Intervju/diskussion med flera personer samcdigt Kan få fram atyder, önskemål, förväntningar, Individuella intervjuer Usörs med en enskild person face- to- face, via telefon, chat, Ger en djupare förståelse av den enskilde individens mål, beteende, Vem, varför, vad, hur, när? 17

18 Intervju med olika intressenter och ämnesexperter Bilder från EU- projektet Virtuella glasakademin,

19 Intervju med användare och observakon (fältstudie) 19

20 Rundvandring ( fältstudie) 20

21 Målgruppsanalys Fältstudie Intervjuer Analys av liknande produkter Resultat: En uppsä)ning beteendemönster med associerade mål Personas användarmodeller Scenarios, case studies Avvägning mellan användarnas, verksamhetens och teknikens krav Resultat: En kravlista på vilka behov produkten ska fylla 21

22 Personas Användarmodell Användarmodell för a) representera användarnas beteende tankar, a)ytyder förmågor önskemål mål och mocv Åke 67 år, tre barn och sju barnbarn Tidigare kund Bor i andra änden av stan, men tycker a) Gretas blommor har bra kvalitét och trevlig personal. Köper blommor c:a en gång i månaden. Lite fler cll helger. Har cdigare arbetat på kontor och har vana av a) arbeta med Word och Excel. Brukar också gå ut på nätet och söka e-er sådant som han vill veta mer om. Vill gärna c)a på webben och få inspiracon, innan han går cll bucken och handlar. Personas är e) hjälpmedel för a): avgöra vad produkten ska göra och hur den ska bete sig kommunicera med intressenter, utvecklare och designers skapa samförstånd och engagemang testa designval och mäta effekcvitet Cooper, A., Reimann, R., Cronin, D. (2007) About Face 3: The EssenKals of InteracKon Design, Wiley Publishing, Inc. 22

23 Personas Användarmodell 1. Identifiera variabler för beteenden" 2. Fördela intervjuobjekten till variablerna" 3. Identifiera signifikanta beteendemösnter" 4. Utforma karaktärsdrag och relevanta mål" 5. Kontrollera redundans och fullständighet" 6. Utöka beskrivningen av kännetecken och beteenden" 7. Utse persona-typer" Utgå från observerat beteende Fokusera på följande typer av variabler: AkKviteter Vad användaren gör Agtyder Vad användaren tycker om teknik och produktens område Förmågor Utbildning, inlärningsförmåga MoKv Varför användaren är engagerad i produktens område Skicklighet Användarens kapacitet vad det gäller teknik och produktens område 23

24 Personas Användarmodell 1. Identifiera variabler för beteenden" 2. Fördela intervjuobjekten till variablerna" 3. Identifiera signifikanta beteendemösnter" 4. Utforma karaktärsdrag och relevanta mål" 5. Kontrollera redundans och fullständighet" 6. Utöka beskrivningen av kännetecken och beteenden" 7. Utse persona-typer" Varje intervjuobjekt placeras ut på en skala för varje variabel T.ex. Internetvana! liten" 1" Besöker biblioteket! aldrig" 2" 4" 5" 1" 3" 5" stor" 3" 2" 6" 4" 6" ofta" 24

25 Personas Användarmodell 1. Identifiera variabler för beteenden" 2. Fördela intervjuobjekten till variablerna" 3. Identifiera signifikanta beteendemösnter" 4. Utforma karaktärsdrag och relevanta mål" 5. Kontrollera redundans och fullständighet" Leta e-er klungor med samma intervjuobjekt Befinner de sig i samma klunga i flera variabler (6-8) representerar de e) signifikant beteendemönster T.ex. intervjuobjekt 2 och 4 i föregående bild De)a beteendemönster blir en bas cll en persona 6. Utöka beskrivningen av kännetecken och beteenden" 7. Utse persona-typer" 25

26 Personas Användarmodell 1. Identifiera variabler för beteenden" 2. Fördela intervjuobjekten till variablerna" 3. Identifiera signifikanta beteendemösnter" 4. Utforma karaktärsdrag och relevanta mål" 5. Kontrollera redundans och fullständighet" 6. Utöka beskrivningen av kännetecken och beteenden" 7. Utse persona-typer" Ta fram detaljer för varje signifikant beteendemönster ucfrån data insamlad i intervjuer och observaconer Sammanställ mål ucfrån varje personas beteende, dvs "syntecsera" mål som skulle leda cll de)a beteende Målen är slutmål och ska relatera cll produkten som ska designas 3-5 mål Beskriv mål och karaktärsdrag i punksorm 26

27 Personas Användarmodell 1. Identifiera variabler för beteenden" 2. Fördela intervjuobjekten till variablerna" Jämför resultatet från steg 2 med resultatet från steg 4, dvs intervjuobjektens utplacering på variablerna med uppsä)ningen av personas 3. Identifiera signifikanta beteendemösnter" 4. Utforma karaktärsdrag och relevanta mål" 5. Kontrollera redundans och fullständighet" 6. Utöka beskrivningen av kännetecken och beteenden" 7. Utse persona-typer" 27

28 Personas Användarmodell 1. Identifiera variabler för beteenden" 2. Fördela intervjuobjekten till variablerna" 3. Identifiera signifikanta beteendemösnter" 4. Utforma karaktärsdrag och relevanta mål" 5. Kontrollera redundans och fullständighet" Skriv om punktlistan med karaktärsdrag cll en berä)ande text för varje persona Berä)elsen ska ge u)ryck för atyder, behov och problem Redogör kort för jobb och livsscl och beskriv sedan "en dag i livet" Komple)era med namn och foto 6. Utöka beskrivningen av kännetecken och beteenden" 7. Utse persona-typer" 28

29 Personas Användarmodell 1. Identifiera variabler för beteenden" 2. Fördela intervjuobjekten till variablerna" 3. Identifiera signifikanta beteendemösnter" 4. Utforma karaktärsdrag och relevanta mål" 5. Kontrollera redundans och fullständighet" 6. Utöka beskrivningen av kännetecken och beteenden" 7. Utse persona-typer" Prioritera de olika personas Olika typer av personas Primär persona (endast en) Sekundär persona (ej fler än 3-4, men ej nödvändig) Komple)erande persona Kundpersona Betjänad persona Negacv persona Fokusera designen av gränssni7et på den primära personan 29

30 "Pa7erns" Beahavioral Pa)ern Beteendemönster Design Pa)ern Mönster, typexempel, goda föredömen, "best praccce", Tidwell, J. (2011) Designing Interfaces, 2nd edikon, O Reilly 30

31 Exempel från boken Behavioral Pa)erns Safe Exploracon Instant Gracficacon Sacsficing Changes in Midstream Deferred Choices Incremental Construccon Habituacon Microbreaks Spacal Memory Prospeccve Memory Streamlined Repeccon Keyboard Only Other People s Advice Personal Recommendacon Inte rädd för a) prova och se vad som händer Vill snabbt se resultat posicv feedback Chansar på det som verkar cllräckligt bra Användarens mål ändras cllfälligt Skjuta upp det som inte är nödvändigt cll e) senare cllfälle Lite i taget, i olika delar Det som funkar i andra program, borde också fungera här Har en kort stund över och vill göra något Kommer ihåg var det finns, men inte vad det heter Planerar för a) göra något vid e) senare cllfälle Vill skapa en "mall" för sådant som ska upprepas Gör all input via tangentbordet Vad har andra gjort i samma situacon? Dela med andra och kolla vad kompisarna gjorde Tidwell, J. (2011) Designing Interfaces, 2nd edikon, O Reilly 31