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

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. Axbom Innovation
Livscykel för framgångsrika idéer
!
!!!!!!!!!
!!!!!!!!
!
!
Mekanismer för återkoppling. Omvärld. Trender.
version 1.0 !

5. Upplevelsedesign

6. http://www.youtube.com/watch?v=L1CxlyMoFRs

8. En röd knapp räcker.

9. Usability vs UX
http://www.flickr.com/photos/seguin_maxim/80205117/sizes/z/in/photostream/

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. Guru-myten
Date

18. attract
Wow, did you interact
know....? Check FAIL
this out...!
WOW! CONVERSION

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. 67% 11%
-1% 63%
source: marketingprofs.com

31. ACE YOUR WEBSITE
AWE YOUR USERS

32. Extend Attract
E A
Wow
W C Clarify
A E
Adapt Engage

33. För som vill . Tjänst:
målgrupp/persona behov namn på produkt/tjänst
Extend Attract
Wow Extend Attract Clarify
E A
Wow
W C Clarify
A E
Adapt Engage
Adapt Engage

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
Mobil Desktop
Osynkade
Presentationsidé från: http://underthebedstudios.com/blog/why-mobile-first-isnt-enough/

48. Allt
Mobil Desktop
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. oavsiktlig geni- upplevelse-
design design design
själv- aktivitets-
design 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 Webb
Inbyggd marknadsföring Billigare
Kräver mer för Kan integreras i befintlig webb
kundkännedom
Snabb utveckling och
Access till enheten (kamera, uppdateringskontroll
mikrofon, accelerator)
Inga tredjepartsavgifter
Access till andra appar
Tillgänglighet
Hosting
Browserfunktionalitet (IP- och
Statistik GPS-baserad geolocation)
Betala för att utveckla... Spara lokalt
Det finns många enheter! 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

96. 96

97. 97

98. 98

99. 99

100. 100

101. 101

102. 102

103. 103

104. 104

105. 105

106. 106

107. 107

108. 108

109. 109

110. 110

111. Impression Entry Completion Experience
Expectation Interaction Exit
111

112. Market Web Business
Impression Entry Completion Experience
Expectation Interaction Exit
112

113. Market Web Business
Customer Service
Impression Entry Completion Experience
Expectation Interaction Exit
113

114. FORM FLOW
114

115. 115

116. CLEAR BUTTON
116

117. CLEAR BUTTON
117

118. DESIGN PATTERNS
118

119. 119

120. 120

121. 121

122. 122

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.
Adress
Postnr Postadress
Spara
123

124. PASSWORDS
Password *************
Strong
Nsv!1v8#
124

125. PASSWORDS
Password
fido
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? Sara Andersson
Social security number? 820917-2654
Phone? 0705451234
sara@andersson.net
E-mail?
Your message? My broadband
isn’t working!
You said social security number
in the wrong format. Please go what?
back and repeat.
128

129. 129

130. Hi, what’s your name?
Sara Andersson
ok, what’s your social
security number? 820917-2654
thanks, and 0705451234
your phone
number?
sara@andersson.net
mm, and e-mail?
ok, and your My broadband
message is? isn’t working
Great, thanks! Let me just
double check. Did you say Yep.
sara@andersson.net?
130

131. 131

132. CONVERSATION
132

133. The web is a conversation. Make
sure your website has a voice.

134. Talking web form!
Label:


! Required Field!
Label:


! Required Field!

135. MOBILE - TALKING WITH
YOUR FINGERS
Månadskostnader utöver lönekostnader
14 000 kr
Under 2011 fyller jag
26 år eller 66 år eller
27-65 år
mindre mer
135

136. MOBILE INPUT
http://www.elated.com/articles/banish-javascript-in-web-forms-with-html5/
136

137. YOU CAN LOVE FORMS
TOOOO MUCH...
137

138. 138

139. 139

140. 140

141. 141

142. 142

143. POST DRAFT
Path
Order
Size
Trim
Disruptive
Responsive
Alignment
Feedback
Tone

144. Gör om!
144

145. JOTFORM!
145

147. Per Axbom
+46 709 13 25 00
per@axbom.se
Twitter: @axbom