User experience & hur man designar för användaren

Deck from lecture at Berghs School of Communication

Transcript

1. BERGHS SCHOOL OF COMMUNICATION 1
2. BERGHS SCHOOL OF COMMUNICATION 2 Marcus Castenfors Associate Creative Director, Experience Design
3. BERGHS SCHOOL OF COMMUNICATION Så lite om vem jag är... 3
4. BERGHS SCHOOL OF COMMUNICATION 4
5. BERGHS SCHOOL OF COMMUNICATION USER EXPERIENCE & HUR MAN DESIGNAR FÖR ANVÄNDAREN 5 APRIL 14 2014
6. BERGHS SCHOOL OF COMMUNICATION Vad tror ni “User Experience” betyder? 6
7. BERGHS SCHOOL OF COMMUNICATION 7 Mina föreläsningar
   Måndag 14/4: Verktyg & metoder Onsdag 16/4: Upplevelsedesign & “Lean Startup”
8. BERGHS SCHOOL OF COMMUNICATION Det handlar om er 8
9. BERGHS SCHOOL OF COMMUNICATION Schema 9 18:00 - 18:50 - UX & strategi 18:50 - 19:20 - Grupparbete 19:20 - 19:40 - Rast 19:40 - 20:30 - Kartläggning & Visualisering
10. BERGHS SCHOOL OF COMMUNICATION Vad är egentligen “User Experience”? 10
11. BERGHS SCHOOL OF COMMUNICATION "User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products. 11 “ “ Jakob Nielsen
12. BERGHS SCHOOL OF COMMUNICATION Men... hur definierar man ett varumärke? 12
13. BERGHS SCHOOL OF COMMUNICATION A brand is the set of expectations, memories, stories and relationships that, taken together, account for a consumer’s decision to choose one product or service over another. 13 “ “ Seth Godin
14. BERGHS SCHOOL OF COMMUNICATION Empati medkänsla för andra; egenskapen att kunna känna med andra, sätta sig in i andras situationer 14
15. BERGHS SCHOOL OF COMMUNICATION 15 Kund Affär Teknik UX Kundtyper Beteende Plattformar Tekniska lösningar Affärsmål Strategi Portfölj
16. BERGHS SCHOOL OF COMMUNICATION Varför? Varför designar vi lösningen?
    För vem? Vilka är våra användare? Skiljer dom sig åt?
    Vad? Vad ska vi designa?
    16
17. BERGHS SCHOOL OF COMMUNICATION 17 Konkret Abstrakt Strategi Visualisering Kartläggning För vem? Vad? Varför?
18. BERGHS SCHOOL OF COMMUNICATION 18 Konkret Abstrakt Strategi Visualisering Kartläggning • Prototyper • Wireframes • Experience model & maps • User journeys • Personas • Research • Kundinsikter
19. BERGHS SCHOOL OF COMMUNICATION 19 Strategi Visualisering Kartläggning Utveckling Tid
20. BERGHS SCHOOL OF COMMUNICATION Strategi
    Hur besvarar vi “varför”? 20
21. BERGHS SCHOOL OF COMMUNICATION 21 Primär
    Användartest
    Kundintervjuer
    Kundservice & säljare Sekundär
    Google Planning Tools
    Rapporter Konkurrentanalys Kvantitativ
    Enkäter Social
    Social media Forum Bloggar
22. BERGHS SCHOOL OF COMMUNICATION 22 Användartest Primär research
23. BERGHS SCHOOL OF COMMUNICATION 23 Är det någon av er som har erfarenhet från användartestning?
24. BERGHS SCHOOL OF COMMUNICATION 24
25. BERGHS SCHOOL OF COMMUNICATION 25 Testing one user early in the project is better than testing 50 near the end “ “ Steve Krug
26. BERGHS SCHOOL OF COMMUNICATION 26 Några tips: 1. Alla kan testa 2. Gör det så enkelt som möjligt 3. Använd enkla verktyg 4. Fastna inte i rapporter 5. Gör det till en tradition 6. Fixa de enklaste sakerna först
27. BERGHS SCHOOL OF COMMUNICATION 300 million dollar button 27
28. BERGHS SCHOOL OF COMMUNICATION 28 Register
29. BERGHS SCHOOL OF COMMUNICATION 29 Register Continue
30. BERGHS SCHOOL OF COMMUNICATION 30 UserTesting.com
31. BERGHS SCHOOL OF COMMUNICATION 31 Tweaky.se
32. BERGHS SCHOOL OF COMMUNICATION 32
33. BERGHS SCHOOL OF COMMUNICATION Kundintervjuer 33 Primär research
34. BERGHS SCHOOL OF COMMUNICATION 34
35. BERGHS SCHOOL OF COMMUNICATION 35 Exempel från intervjuprotokollet: ! • Berätta om hur du gör research inför ett köp • Berätta om dina favoritappar och varför du gillar dem • Hur använder du din smartphone i shoppingsyfte? • Har du köpt något online med din smartphone någon gång? I så fall, vad köpte du?
36. BERGHS SCHOOL OF COMMUNICATION 36 If I had asked people what they wanted, they would have said faster horses. “ “ Henry Ford
37. BERGHS SCHOOL OF COMMUNICATION Tips: 37 1. Använd ett intervjuprotokoll med ett tydligt syfte 2. Intervjua i den riktiga omgivningen 3. Be dem visa hur dom gör 4. Ta med en kollega 5. Leta efter mönster 6. Ta fram hypoteser
38. BERGHS SCHOOL OF COMMUNICATION Prata med kundservice & säljare 38 Primär research
39. BERGHS SCHOOL OF COMMUNICATION 39
40. BERGHS SCHOOL OF COMMUNICATION 40 Insikter: 1. Fanns ett stort behov av en ny produkt 2. Tillgänglighet av tjänster en av de vanligaste frågorna 3. Kundresan var inte helt linjär 4. Många av chattarna var från befintliga kunder
41. BERGHS SCHOOL OF COMMUNICATION Google Planning Tools 41 Sekundär research
42. BERGHS SCHOOL OF COMMUNICATION 42 Think With Google - Mobile Planet
43. BERGHS SCHOOL OF COMMUNICATION 43 32 Think With Google - Databoard
44. BERGHS SCHOOL OF COMMUNICATION Rapporter 44 Sekundär research
45. BERGHS SCHOOL OF COMMUNICATION 45 eMarketer
46. BERGHS SCHOOL OF COMMUNICATION 46 Forrester
47. BERGHS SCHOOL OF COMMUNICATION 47 E-barometern
48. BERGHS SCHOOL OF COMMUNICATION Konkurrentanalys 48 Sekundär research
49. BERGHS SCHOOL OF COMMUNICATION 49 Hemsida Facebook Twitter Nyhetsbrev Mobil Butik Kundservice Insikter
50. BERGHS SCHOOL OF COMMUNICATION 50 Exempel
51. BERGHS SCHOOL OF COMMUNICATION Enkäter 51 Kvantitativ
52. BERGHS SCHOOL OF COMMUNICATION 52 Tänk på: 1. Enkla att sätta upp (Surveymonkey, Wufoo) 2. Bra för att testa hypoteser från tidigare kundintervjuer 3. Visar data, men svarar inte på “varför?” 4. Öppna frågor kan ibland vara svåra att tolka
53. BERGHS SCHOOL OF COMMUNICATION Social listening 53 Social
54. BERGHS SCHOOL OF COMMUNICATION Tänk på 54 1. Bra för att förstå kunders attityder, mönster, pain points 2. Ger kunder ett “ansikte” 3. Kan användas för att ta fram benchmarks (sentiment analysis, ämnen)
55. BERGHS SCHOOL OF COMMUNICATION Exempel 55
56. BERGHS SCHOOL OF COMMUNICATION Övning: Användartest
    su.se
    56
57. BERGHS SCHOOL OF COMMUNICATION Stockholms Universitet 57 Para upp er i grupper om två: en är testledare, en är användare Du är intresserad av söka till programmet “Interaktionsdesign” på Stockholms Universitet. Navigera till su.se. ! Timing 10-15 minuter för testet 5-10 minuter återkoppling 20 minuter rast
58. BERGHS SCHOOL OF COMMUNICATION Stockholms Universitet 58 Du är intresserad av söka till programmet “Interaktionsdesign” på Stockholms Universitet. Navigera till su.se med din smartphone. 1. Utan att klicka runt, berätta om vad du tycker och tänker kring startsidans utseende 2. Utan att använda sökfunktionen, hitta information om programmet “interaktionsdesign” 3. Ta reda på hur du kan ansöka till programmet 4. Ta reda på hur du kan ansöka om boende 5. Hur tyckte du att uppgiften gick? Vad tyckte du var tydligt/otydligt? 6. Om du var webbdesigner, vad skulle vara det första du skulle vilja ändra med Stockholms Universitets hemsida? Att tänka på: ! • Få användaren att “tänka högt” när de använder hemsidan • Ställ gärna följdfrågor
59. BERGHS SCHOOL OF COMMUNICATION Läs mer... 59
60. BERGHS SCHOOL OF COMMUNICATION 60 Digital Strategy Toolbox
61. BERGHS SCHOOL OF COMMUNICATION Kartläggning
    Hur besvarar vi “för vem”? 61
62. BERGHS SCHOOL OF COMMUNICATION 62 Konkret Abstrakt Strategi Visualisering Kartläggning • Experience model & maps • User journeys • Personas
63. BERGHS SCHOOL OF COMMUNICATION Personas 63
64. BERGHS SCHOOL OF COMMUNICATION 64 First name, last name, age Goals and motivators Attitudes and needs Demographic information Ålder, boende- & familjesituation Mål, pain points Känslor & behov
65. BERGHS SCHOOL OF COMMUNICATION Exempel 65
66. BERGHS SCHOOL OF COMMUNICATION Bra för 66 1. Skapar empati 2. Referenspunkt i en designfas
67. BERGHS SCHOOL OF COMMUNICATION Tänk på 67 1. Fastna inte i detaljerna 2. Kan lätt bli politiskt
68. BERGHS SCHOOL OF COMMUNICATION Experience Model & Maps 68
69. BERGHS SCHOOL OF COMMUNICATION Kartlägga kunden 69
70. BERGHS SCHOOL OF COMMUNICATION 70 Prospect New Existing Customer behavior Primary purpose Business objective Brand proposition Modus Insikter Affärsmål Varumärkesmål
71. BERGHS SCHOOL OF COMMUNICATION 71 Research & Planning Booking Pre-travel Website Email Mobile Customer service Steg Post-travel Kanaler
72. BERGHS SCHOOL OF COMMUNICATION Exempel 72
73. BERGHS SCHOOL OF COMMUNICATION Bra för 1. Tänka holistiskt på alla kanaler och kontaktpunkter 2. Lägga in olika mål dvs affärsmål, varumärkesmål 73
74. BERGHS SCHOOL OF COMMUNICATION User journeys 74
75. BERGHS SCHOOL OF COMMUNICATION Exempel 75
76. BERGHS SCHOOL OF COMMUNICATION Bra för 76 1. För att bryta ner en Experience Model eller Map på en lägre nivå 2. Tänka holistiskt istället för att gå rätt in i en lösning
77. BERGHS SCHOOL OF COMMUNICATION Övning: Experience Map 77
78. BERGHS SCHOOL OF COMMUNICATION Experience Map för Stockholms Universitet 78 Para upp er i grupper om två. Använd penna och papper ! Briefen: • Stockholms Universitet ska designa om sin hemsida och sina mobiltjänster • Skapa en Experience Map för de kontaktpunkter och de steg som studenter tar inför att söka till ett program • Brainstorma kring vilka typer av tjänster vi kan ge studenter och hjälpa dem i olika situationer
79. BERGHS SCHOOL OF COMMUNICATION 79 Research & planering Ansöka Inskrivning Hemsida Social media Mobil Onboarding Kundbehov
80. BERGHS SCHOOL OF COMMUNICATION Visualisering
    80
81. BERGHS SCHOOL OF COMMUNICATION 81 Konkret Abstrakt Strategi Visualisering Kartläggning • Klickbara prototyper • Pappersprototyper • Wireframes • Experience model & maps • User journeys • Personas • Research • Kundinsikter
82. BERGHS SCHOOL OF COMMUNICATION 82 Hög detaljnivå Låg detaljnivå Mycket interaktivitet Lite interaktivitet Wireframes Klickbara- Prototyper Pappers- Prototyper Skisser
83. BERGHS SCHOOL OF COMMUNICATION 83 Mycket tid Lite tid Wireframes Klickbara- Prototyper Pappers- Prototyper Skisser
84. BERGHS SCHOOL OF COMMUNICATION Skisser 84
85. BERGHS SCHOOL OF COMMUNICATION 85 Källa: http://uxdesign.smashingmagazine.com/2013/06/24/sketching-for-better-mobile-experiences/
86. BERGHS SCHOOL OF COMMUNICATION 86 Bra för: 1. Snabbt & enkelt 2. Alla kan göra det 3. Bra att använda i workshops 4. Allt som behövs är en penna och papper 5. Tänka utanför “boxen”
87. BERGHS SCHOOL OF COMMUNICATION 87 Inte så bra för: 1. Användas för presentationer 2. Detaljer
88. BERGHS SCHOOL OF COMMUNICATION Pappersprototyper 88
89. BERGHS SCHOOL OF COMMUNICATION 89 Källa: http://arielwaldman.com/projects/interaction-design/
90. BERGHS SCHOOL OF COMMUNICATION 90 Bra för: 1. Snabbt & enkelt visa interaktivitet 2. Att testa koncept tidigt i projektet
91. BERGHS SCHOOL OF COMMUNICATION 91 Inte så bra för: 1. Att visa komplexa interaktioner 2. Kan inte delas på ett enkelt sätt med teamet
92. BERGHS SCHOOL OF COMMUNICATION 92
93. BERGHS SCHOOL OF COMMUNICATION Wireframes 93
94. BERGHS SCHOOL OF COMMUNICATION 94
95. BERGHS SCHOOL OF COMMUNICATION 95
96. BERGHS SCHOOL OF COMMUNICATION 96
97. BERGHS SCHOOL OF COMMUNICATION 97 Bra för: 1. Specificera detaljer i interaktionerna 2. Gillas av utvecklarna 3. Gillas av designers
98. BERGHS SCHOOL OF COMMUNICATION Inte så bra för 1. Att få folk att läsa allt det finstilta 2. Kan lätt bli ett väldigt tungt dokument 3. Att visa interaktivitet 98
99. BERGHS SCHOOL OF COMMUNICATION 99
100. BERGHS SCHOOL OF COMMUNICATION 100 Excel Keynote Omnigraffle Fireworks Illustrator Visio
101. BERGHS SCHOOL OF COMMUNICATION Exempel 101
102. BERGHS SCHOOL OF COMMUNICATION Klickbara prototyper 102
103. BERGHS SCHOOL OF COMMUNICATION Exempel 103
104. BERGHS SCHOOL OF COMMUNICATION 104
105. BERGHS SCHOOL OF COMMUNICATION 105 Bra för: 1. Visa komplexa interaktioner 2. Skapa en känsla av den “skarpa” lösningen 3. Att visa responsivitet
106. BERGHS SCHOOL OF COMMUNICATION 106 Inte så bra för: 1. Att ge till designers & utvecklare 2. Att dokumentera
107. BERGHS SCHOOL OF COMMUNICATION 107 Tänk på: 1. Kan ta mycket tid 2. Man kan fastna i detaljerna 3. Kan lätt bli komplext
108. BERGHS SCHOOL OF COMMUNICATION 108 Thank you! ! Marcus Castenfors @mcastenfors | mcastenfors.com | mcastenfors@gmail.com