Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UPPLEVELSEDESIGN    Överblick. Mobilt. Webbformulär.    Berghs School of Communication              Per Axbom             ...
Per AxbomExperience DesignerDigital StrategistAxbom Innovation ABTwitter: @axbom
Axbom InnovationLivscykel för framgångsrika idéer                 !         !!!!!!!!!                                     ...
Upplevelsedesign
http://www.youtube.com/watch?v=L1CxlyMoFRs
En röd knapp räcker.
Usability vs UXhttp://www.flickr.com/photos/seguin_maxim/80205117/sizes/z/in/photostream/
Usability är en kaffekopp.   UX är ett latteglas.
Allvarligt, skickadedu SMS med mig?
SMÄRTA      NYTTAuppoffring   fördelar
Usability   Kan göraUX          Vill göra            Vill göra igen            Rekommenderar
UI-designers tänker på detta...
UX-designers tänker också detta...
Guru-mytenDate
attractWow, did you             interactknow....? Check                           FAIL  this out...!                  WOW!...
Hur gör vi användaren ledsen?
Samma storlek                Samma färgLiten text                Miljontals valGöm länkar                Otydlig text...
Lista ut hur du skapar maximalsmärta för användaren. Gör tvärtom.
source: marketingprofs.com
67%                   11%-1%                   63%      source: marketingprofs.com
ACE YOUR WEBSITE AWE YOUR USERS
Extend   Attract          E AWow      W    C             Clarify       A E      Adapt    Engage
För                         som vill                                               . Tjänst:         målgrupp/persona     ...
MOBILT
En ny människa...
Flitiga mobildata-användare förväntastredubblas till en miljard år 2013.Upptagandet av mobilt internet är åttagånger snabb...
http://www.email-marketing-reports.com/wireless-mobile/smartphone-statistics.htm
MOBILT ÖKAR DIN   FÖRMÅGA
ALLA SÄGER “MOBILE FIRST”
VAD ÄR MOBILT?
Mobilt är allestädes närvarande -       inte ett separat silo.
FARAN MED MOBIL  WEBBPLATS
Separata kodbaser             Separata team             DubbelarbeteMobil                                                 ...
AlltMobil                                                       Desktop         däremellan?        Presentationsidé från: ...
Arbetsbelastning och risker ökarexponentiellt med antalet olika sajter              du skapar.
FARAN FÖR ANVÄNDARE
oavsiktlig                      geni-                       upplevelse- design                        design              ...
Mobila användare är alltid...på språngpå en långsam uppkoppling                                 ?bara intresserade av snab...
86% ANVÄNDER EN MOBIL ENHET FRAMFÖR TV-N http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-proce...
Vid val mellan att behålla mobil eller    TV skulle 64% välja mobilen!
SÅ OM ANVÄNDARNA KANKOMMA IN HUR SOM HELST?
DET ROLIGA MED APPAR
snabbtnärvaranderoliga effekter
UTMANINGEN MED APPAREn fast yta.Roterande skärm.Många skärmar!
Människor balanserar iPaden påmagen, lägga inte viktiga knappar              där.
http://gizmodo.com/5133070/iphone-app-store-hits-500-million-downloads-we-break-down-the-numbers
NATIVE VS WEBB?
NATIVEBor på telefonenLaddas ner till enhetenByggs specifikt för en enhetProgrammeringsspråk (Objective C/Java)
WEBBBor på webbenÅtkomst via en webbläsareByggd med “webbspråk” (HTML/CSS/JS)
Native                             WebbInbyggd marknadsföring             BilligareKräver mer för                     Kan ...
WEBBFORMULÄR
- Det kommer nästan ingen genom  den där dörren.Jag visste väl att    webben inte skulle leverera!
Requirement specification        ✓   User should be able to            log in.        ✓   It should be easy.
http://per.ax/rcube
The solution will depend......on the question asked.
Create a form foruploading images.
Help the user publishphotos immediatelyafter they are taken.
Have task-oriented requirements and you will get innovative solutions.
LET’S ZOOM OUT      95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
Impression              Entry                 Completion          Experience          Expectation           Interaction   ...
Market               Web                   BusinessImpression              Entry                 Completion          Exper...
Market               Web                   Business                                     Customer ServiceImpression        ...
FORM FLOW    114
115
CLEAR BUTTON     116
CLEAR BUTTON     117
DESIGN PATTERNS       118
119
120
121
122
AFFORDANCE AND   AREA CODES            Ibland kan det bli aktuellt att skicka            material. Ange din postadress om ...
PASSWORDSPassword *************                         Strong                         Nsv!1v8#              124
PASSWORDSPasswordfido  Hide password as I type            125
PURPOSE OF BIG FIELDS• See   what you are typing!• Fewer   mistakes• Draw    attention to the form                        ...
CONVERSATION(IT’S NOT CALLED A DIALOG BOX FOR NO REASON)                    127
Name?                                        Sara Andersson  Social security number?                820917-2654           ...
129
Hi, what’s your name?                                                     Sara Andersson         ok, what’s your social   ...
131
CONVERSATION     132
The web is a conversation. Make sure your website has a voice.
Talking web form!Label:                                               !   Required Field!Label:                        ...
MOBILE - TALKING WITH   YOUR FINGERS    Månadskostnader utöver lönekostnader                                              ...
MOBILE INPUThttp://www.elated.com/articles/banish-javascript-in-web-forms-with-html5/                               136
YOU CAN LOVE FORMS  TOOOO MUCH...        137
138
139
140
141
142
POST DRAFTPathOrderSizeTrimDisruptiveResponsiveAlignmentFeedbackTone
Gör om!144
JOTFORM!   145
Per Axbom +46 709 13 25 00  per@axbom.seTwitter: @axbom
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upplevelsedesign — Överblick. Mobilt. Webbformulär.
Upcoming SlideShare
Loading in …5
×

Upplevelsedesign — Överblick. Mobilt. Webbformulär.

1,335 views

Published on

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

Published in: Technology
  • Be the first to comment

Upplevelsedesign — Överblick. Mobilt. Webbformulär.

  1. 1. UPPLEVELSEDESIGN Överblick. Mobilt. Webbformulär. Berghs School of Communication Per Axbom 2011-11-24
  2. 2. Per AxbomExperience DesignerDigital StrategistAxbom Innovation ABTwitter: @axbom
  3. 3. Axbom InnovationLivscykel för framgångsrika idéer ! !!!!!!!!! !!!!!!!! ! ! Mekanismer för återkoppling. Omvärld. Trender. version 1.0 !
  4. 4. Upplevelsedesign
  5. 5. http://www.youtube.com/watch?v=L1CxlyMoFRs
  6. 6. En röd knapp räcker.
  7. 7. Usability vs UXhttp://www.flickr.com/photos/seguin_maxim/80205117/sizes/z/in/photostream/
  8. 8. Usability är en kaffekopp. UX är ett latteglas.
  9. 9. Allvarligt, skickadedu SMS med mig?
  10. 10. SMÄRTA NYTTAuppoffring fördelar
  11. 11. Usability Kan göraUX Vill göra Vill göra igen Rekommenderar
  12. 12. UI-designers tänker på detta...
  13. 13. UX-designers tänker också detta...
  14. 14. Guru-mytenDate
  15. 15. attractWow, did you interactknow....? Check FAIL this out...! WOW! CONVERSION
  16. 16. Hur gör vi användaren ledsen?
  17. 17. Samma storlek Samma färgLiten text Miljontals valGöm länkar Otydlig text...
  18. 18. Lista ut hur du skapar maximalsmärta för användaren. Gör tvärtom.
  19. 19. source: marketingprofs.com
  20. 20. 67% 11%-1% 63% source: marketingprofs.com
  21. 21. ACE YOUR WEBSITE AWE YOUR USERS
  22. 22. Extend Attract E AWow W C Clarify A E Adapt Engage
  23. 23. För som vill . Tjänst: målgrupp/persona behov namn på produkt/tjänst Extend AttractWow Extend Attract Clarify E A Wow W C Clarify A E Adapt Engage Adapt Engage
  24. 24. MOBILT
  25. 25. En ny människa...
  26. 26. Flitiga mobildata-användare förväntastredubblas till en miljard år 2013.Upptagandet av mobilt internet är åttagå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 perdag med mobila applikationer.
  27. 27. http://www.email-marketing-reports.com/wireless-mobile/smartphone-statistics.htm
  28. 28. MOBILT ÖKAR DIN FÖRMÅGA
  29. 29. ALLA SÄGER “MOBILE FIRST”
  30. 30. VAD ÄR MOBILT?
  31. 31. Mobilt är allestädes närvarande - inte ett separat silo.
  32. 32. FARAN MED MOBIL WEBBPLATS
  33. 33. Separata kodbaser Separata team DubbelarbeteMobil Desktop Osynkade Presentationsidé från: http://underthebedstudios.com/blog/why-mobile-first-isnt-enough/
  34. 34. AlltMobil Desktop däremellan? Presentationsidé från: http://underthebedstudios.com/blog/why-mobile-first-isnt-enough/
  35. 35. Arbetsbelastning och risker ökarexponentiellt med antalet olika sajter du skapar.
  36. 36. FARAN FÖR ANVÄNDARE
  37. 37. oavsiktlig geni- upplevelse- design design design själv- aktivitets- design design http://vimeo.com/20881152
  38. 38. Mobila användare är alltid...på språngpå en långsam uppkoppling ?bara intresserade av snabb interaktion
  39. 39. 86% ANVÄNDER EN MOBIL ENHET FRAMFÖR TV-N http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html
  40. 40. Vid val mellan att behålla mobil eller TV skulle 64% välja mobilen!
  41. 41. SÅ OM ANVÄNDARNA KANKOMMA IN HUR SOM HELST?
  42. 42. DET ROLIGA MED APPAR
  43. 43. snabbtnärvaranderoliga effekter
  44. 44. UTMANINGEN MED APPAREn fast yta.Roterande skärm.Många skärmar!
  45. 45. Människor balanserar iPaden påmagen, lägga inte viktiga knappar där.
  46. 46. http://gizmodo.com/5133070/iphone-app-store-hits-500-million-downloads-we-break-down-the-numbers
  47. 47. NATIVE VS WEBB?
  48. 48. NATIVEBor på telefonenLaddas ner till enhetenByggs specifikt för en enhetProgrammeringsspråk (Objective C/Java)
  49. 49. WEBBBor på webbenÅtkomst via en webbläsareByggd med “webbspråk” (HTML/CSS/JS)
  50. 50. Native WebbInbyggd marknadsföring BilligareKräver mer för Kan integreras i befintlig webbkundkännedom Snabb utveckling ochAccess till enheten (kamera, uppdateringskontrollmikrofon, accelerator) Inga tredjepartsavgifterAccess till andra appar TillgänglighetHosting Browserfunktionalitet (IP- ochStatistik GPS-baserad geolocation)Betala för att utveckla... Spara lokaltDet finns många enheter! Swipe detection (JS) http://vimeo.com/6353874
  51. 51. WEBBFORMULÄR
  52. 52. - Det kommer nästan ingen genom den där dörren.Jag visste väl att webben inte skulle leverera!
  53. 53. Requirement specification ✓ User should be able to log in. ✓ It should be easy.
  54. 54. http://per.ax/rcube
  55. 55. The solution will depend......on the question asked.
  56. 56. Create a form foruploading images.
  57. 57. Help the user publishphotos immediatelyafter they are taken.
  58. 58. Have task-oriented requirements and you will get innovative solutions.
  59. 59. LET’S ZOOM OUT 95
  60. 60. 96
  61. 61. 97
  62. 62. 98
  63. 63. 99
  64. 64. 100
  65. 65. 101
  66. 66. 102
  67. 67. 103
  68. 68. 104
  69. 69. 105
  70. 70. 106
  71. 71. 107
  72. 72. 108
  73. 73. 109
  74. 74. 110
  75. 75. Impression Entry Completion Experience Expectation Interaction Exit 111
  76. 76. Market Web BusinessImpression Entry Completion Experience Expectation Interaction Exit 112
  77. 77. Market Web Business Customer ServiceImpression Entry Completion Experience Expectation Interaction Exit 113
  78. 78. FORM FLOW 114
  79. 79. 115
  80. 80. CLEAR BUTTON 116
  81. 81. CLEAR BUTTON 117
  82. 82. DESIGN PATTERNS 118
  83. 83. 119
  84. 84. 120
  85. 85. 121
  86. 86. 122
  87. 87. 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
  88. 88. PASSWORDSPassword ************* Strong Nsv!1v8# 124
  89. 89. PASSWORDSPasswordfido Hide password as I type 125
  90. 90. PURPOSE OF BIG FIELDS• See what you are typing!• Fewer mistakes• Draw attention to the form 126
  91. 91. CONVERSATION(IT’S NOT CALLED A DIALOG BOX FOR NO REASON) 127
  92. 92. 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
  93. 93. 129
  94. 94. 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
  95. 95. 131
  96. 96. CONVERSATION 132
  97. 97. The web is a conversation. Make sure your website has a voice.
  98. 98. Talking web form!Label:   ! Required Field!Label:   ! Required Field!
  99. 99. 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
  100. 100. MOBILE INPUThttp://www.elated.com/articles/banish-javascript-in-web-forms-with-html5/ 136
  101. 101. YOU CAN LOVE FORMS TOOOO MUCH... 137
  102. 102. 138
  103. 103. 139
  104. 104. 140
  105. 105. 141
  106. 106. 142
  107. 107. POST DRAFTPathOrderSizeTrimDisruptiveResponsiveAlignmentFeedbackTone
  108. 108. Gör om!144
  109. 109. JOTFORM! 145
  110. 110. Per Axbom +46 709 13 25 00 per@axbom.seTwitter: @axbom

×