Föreläsning 1 1ME403 Design av grafiska gränssni7, 7,5hp Gränssni)ets sy-e Rune Körnefors Medieteknik 1 © 2014 Rune Körnefors [email protected] 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 Jmf. Garre7s modell Underhåll Garre), J. J. (2011) The Elements of User Experience, 2nd ediKon, New Riders Lansering, publicering 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 Form Content Grafisk design 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 Målinriktad design (Goal-‐Directed Design) Användarcentrerad design (User-‐Centered Design) -‐ hänsyn tas Kll användares mål, behov och moKv 5 Informacons-‐ arkitektur Behavior Interakconsdesign Roller, olika intressenter "stakeholders" Personer som bidrar med och/eller lägger in innehåll Beställare Informaconsägare System (program, webb– applikacon, …) Målgrupp Olika grupper av användare -‐ -‐ Utvecklare Producenter Infrastruktur Underhåll 6 Primära, sekundära användare Direkta, indirekta användare Användare 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 -‐ … Beginners! Användare har olika kunskap om programmet, webbplatsen, gränssni)et 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 10 InformaKon Webbplats Människor OrganisaKon 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 Verccal Billigare implementering än den slutliga versionen, t.ex. -‐ pappersprototyp -‐ skärmbilder i Powerpoint, Photoshop, etc. 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 a•tyder, ö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 • Personas – användarmodeller • Scenarios, case studies • Avvägning mellan användarnas, verksamhetens och teknikens krav 21 Resultat: En uppsä)ning beteendemönster med associerade mål Resultat: En kravlista på vilka behov produkten ska fylla 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 • Personas är e) hjälpmedel för a): – – – – Tidigare kund 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. 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 Personas – Användarmodell 1. Identifiera variabler för beteenden" • Utgå från observerat beteende 2. Fördela intervjuobjekten till variablerna" • Fokusera på följande typer av variabler: 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" – 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 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" stor" 1" 5" 2" 6" 4" 3" Besöker biblioteket! ofta" aldrig" 2" 4" 24 5" 1" 3" 6" 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 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" • 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 7. Utse persona-typer" • Beskriv mål och karaktärsdrag i punksorm 26 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 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 a•tyder, 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 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 "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 Exempel från boken Inte rädd för a) prova och se vad som händer • 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 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
© Copyright 2024