Föreläsning 1 1ME403 Design av grafiska gränssni7, 7,5hp Gränssni)ets sy-e Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se
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
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. [www.usability.gov] User Research Methods h)p://www.usability.gov/how- to- and- tools/methods/user- research/index.html Intervjuer» h)p://www.usability.gov/how- to- and- tools/methods/contextual- interview.html» h)p://www.usability.gov/how- to- and- tools/methods/focus- groups.html» h)p://www.usability.gov/how- to- and- tools/methods/individual- interviews.html Personas» h)p://www.usability.gov/how- to- and- tools/methods/personas.html Användartest (usability test)» h)p://www.usability.gov/how- to- and- tools/methods/usability- tescng.html 3
Utvecklingsprocess Idé Design Test Produkcon Underhåll Lansering, publicering Garre7s modell Garre), J. J. (2011) The Elements of User Experience, 2nd edikon, New Riders 4
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
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
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
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
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
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
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
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
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
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
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
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
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
Intervju med olika intressenter och ämnesexperter Bilder från EU- projektet Virtuella glasakademin, 2002-2004 18
Intervju med användare och observakon (fältstudie) 19
Rundvandring ( fältstudie) 20
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
Personas Användarmodell Användarmodell för a) representera användarnas beteende tankar, a)ytyder förmågor önskemål mål och mocv Tidigare kund Åke 67 år, tre barn och sju barnbarn 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
"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 23
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 24