Upplevelsedesign — Överblick. Mobilt. Webbformulär.

Presentation vid föreläsning på kursen Digital Management på Berghs School of Communication.

Transcript

1. UPPLEVELSEDESIGN Överblick. Mobilt. Webbformulär. Berghs School of Communication Per Axbom 2011-11-24
2. Per Axbom Experience Designer Digital Strategist Axbom Innovation AB Twitter: @axbom
4. Mekanismer för återkoppling. Omvärld. Trender. !!!!!!!!! ! !!!!!!!!! ! Axbom Innovation Livscykel för framgångsrika idéer version 1.0 !
5. Upplevelsedesign
6. http://www.youtube.com/watch?v=L1CxlyMoFRs
8. En röd knapp räcker.
9. http://www.flickr.com/photos/seguin_maxim/80205117/sizes/z/in/photostream/ Usability vs UX
10. Usability är en kaffekopp. UX är ett latteglas.
11. Allvarligt, skickade du SMS med mig?
13. SMÄRTA NYTTA uppoffring fördelar
14. Usability Kan göra UX Vill göra Vill göra igen Rekommenderar
15. UI-designers tänker på detta...
16. UX-designers tänker också detta...
17. Date Guru-myten
18. attract interact FAIL WOW! CONVERSION Wow, did you know....? Check this out...!
20. Hur gör vi användaren ledsen?
21. Samma storlek Samma färg Liten text Miljontals val Göm länkar Otydlig text...
24. Lista ut hur du skapar maximal smärta för användaren. Gör tvärtom.
29. source: marketingprofs.com
30. source: marketingprofs.com 67% 11% -1% 63%
31. ACE YOUR WEBSITE AWE YOUR USERS
32. Attract Clarify Engage Adapt Wow Extend A C E A W E
33. Attract Clarify Engage Adapt Wow Extend A C E A W E För målgrupp/persona som vill behov namn på produkt/tjänst . Tjänst: Attract Clarify Engage Adapt Wow Extend
34. MOBILT
35. En ny människa...
39. Flitiga mobildata-användare förväntas tredubblas till en miljard år 2013. Upptagandet av mobilt internet är åtta gånger snabbare än desktop. Smartphone-försäljning slår ut global PC- försäljning innan 2012. Över hälften av Android och iPhone- användare spenderar mer än 30 minuter per dag med mobila applikationer.
40. http://www.email-marketing-reports.com/wireless-mobile/smartphone-statistics.htm
41. MOBILT ÖKAR DIN FÖRMÅGA
42. ALLA SÄGER “MOBILE FIRST”
43. VAD ÄR MOBILT?
45. Mobilt är allestädes närvarande - inte ett separat silo.
46. FARAN MED MOBIL WEBBPLATS
47. Separata kodbaser Separata team Dubbelarbete Osynkade Mobil Desktop Presentationsidé från: http://underthebedstudios.com/blog/why-mobile-first-isnt-enough/
48. Mobil Desktop Allt däremellan? Presentationsidé från: http://underthebedstudios.com/blog/why-mobile-first-isnt-enough/
49. Arbetsbelastning och risker ökar exponentiellt med antalet olika sajter du skapar.
50. FARAN FÖR ANVÄNDARE
59. själv- design oavsiktlig design geni- design aktivitets- design upplevelse- design http://vimeo.com/20881152
60. Mobila användare är alltid... på språng på en långsam uppkoppling bara intresserade av snabb interaktion ?
61. 86% ANVÄNDER EN MOBIL ENHET FRAMFÖR TV-N http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html
63. Vid val mellan att behålla mobil eller TV skulle 64% välja mobilen!
64. SÅ OM ANVÄNDARNA KAN KOMMA IN HUR SOM HELST?
66. DET ROLIGA MED APPAR
67. snabbt närvarande roliga effekter
68. UTMANINGEN MED APPAR En fast yta. Roterande skärm. Många skärmar!
71. Människor balanserar iPaden på magen, lägga inte viktiga knappar där.
76. http://gizmodo.com/5133070/iphone-app-store-hits-500-million-downloads-we-break-down-the-numbers
77. NATIVE VS WEBB?
78. NATIVE Bor på telefonen Laddas ner till enheten Byggs specifikt för en enhet Programmeringsspråk (Objective C/Java)
79. WEBB Bor på webben Åtkomst via en webbläsare Byggd med “webbspråk” (HTML/CSS/JS)
80. Native Inbyggd marknadsföring Kräver mer för kundkännedom Access till enheten (kamera, mikrofon, accelerator) Access till andra appar Hosting Statistik Betala för att utveckla... Det finns många enheter! Webb Billigare Kan integreras i befintlig webb Snabb utveckling och uppdateringskontroll Inga tredjepartsavgifter Tillgänglighet Browserfunktionalitet (IP- och GPS-baserad geolocation) Spara lokalt Swipe detection (JS) http://vimeo.com/6353874
82. WEBBFORMULÄR
83. - Det kommer nästan ingen genom den där dörren.Jag visste väl att webben inte skulle leverera!
84. Requirement specification ✓ User should be able to log in. ✓ It should be easy.
89. http://per.ax/rcube
90. The solution will depend... ...on the question asked.
91. Create a form for uploading images.
92. Help the user publish photos immediately after they are taken.
94. Have task-oriented requirements and you will get innovative solutions.
95. LET’S ZOOM OUT 95
111. Expectation Impression Interaction Completion Entry Exit Experience 111
112. Market Web Business 112 Expectation Impression Interaction Completion Entry Exit Experience
113. Customer Service 113 Market Web Business Expectation Impression Interaction Completion Entry Exit Experience
114. FORM FLOW 114
116. CLEAR BUTTON 116
117. CLEAR BUTTON 117
118. DESIGN PATTERNS 118
123. AFFORDANCE AND AREA CODES Ibland kan det bli aktuellt att skicka material. Ange din postadress om det är ok att skicka material till dig. Postnr Postadress Adress Spara 123
124. PASSWORDS ************* Password Strong Nsv!1v8# 124
125. PASSWORDS fido Password Hide password as I type 125
126. PURPOSE OF BIG FIELDS • See what you are typing! • Fewer mistakes • Draw attention to the form 126
127. CONVERSATION (IT’S NOT CALLED A DIALOG BOX FOR NO REASON) 127
128. Name? Social security number? Phone? Your message? Sara Andersson 820917-2654 You said social security number in the wrong format. Please go back and repeat. E-mail? 0705451234 sara@andersson.net My broadband isn’t working! what? 128
130. Hi, what’s your name? ok, what’s your social security number? thanks, and your phone number? ok, and your message is? Sara Andersson 820917-2654 Great, thanks! Let me just double check. Did you say sara@andersson.net? mm, and e-mail? 0705451234 sara@andersson.net My broadband isn’t working Yep. 130
132. CONVERSATION 132
133. The web is a conversation. Make sure your website has a voice.
134. Label: ! Required Field!   Label: ! Required Field!   Talking web form!
135. MOBILE - TALKING WITH YOUR FINGERS 26 år eller mindre 27-65 år 66 år eller mer Under 2011 fyller jag Månadskostnader utöver lönekostnader 14 000 kr 135
136. MOBILE INPUT 136 http://www.elated.com/articles/banish-javascript-in-web-forms-with-html5/
137. YOU CAN LOVE FORMS TOOOO MUCH... 137
143. POST DRAFT Disruptive Responsive Alignment Feedback Tone Path Order Size Trim
144. 144 Gör om!
145. JOTFORM! 145
147. Per Axbom Twitter: @axbom +46 709 13 25 00 per@axbom.se