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.

Why "mobile first" isn't enough - Developing a better user experience

"Mobile first," is a concept that serves us well as a design tool, putting constraints on our messaging, layout, etc. But to use "mobile first" as a complete mobile strategy can lead to some dangerous lines of thought.

There's a bigger picture that needs to be seen, and it's what we've always done when developing experiences for the web. We need to put the "Experience First." Then we can think about "mobile", "desktop", "lean-back", and whatever other technologies are released in the next several years. It's not about devices, it's about users and experiences.

Presentation first given at BarCamp Nashville in October of 2011.

Why "mobile first" isn't enough - Developing a better user experience

  1. 1. W hy“Mobi e First” isn’t enough: Developing a better user experience.#bcn11expfirst@kevinmpowell view full presentation
  2. 2. 1. What is “mobile first”?2. The dangers of “mobile first” thinking.3. How should we approach “mobile”?4. The challenges & the challenge
  3. 3. 1 ? 2 3What is “mobile first”?
  4. 4. Luke Wroblewski Blogger Author SpeakerFormer Chief Design Architect at Yahoo!
  5. 5. “Mobile First.”Luke Wroblewski -
  6. 6. Why “Mobile First”? rnet Usage* InteHeavy mobile data users are projectedto triple to one billion by 2013.Mobile internet adoption has outpaceddesktop internet adoption by eight times.Smartphone sales will surpassworldwide PC sales by the end of 2011.Over half of Android and iPhone usersspend more than 30 minutes per dayusing mobile applications. Desktop Mobile *chart not “scientificallyLuke Wroblewski - accurate”
  7. 7. “Mobile forces you to focus”Luke Wroblewski -
  8. 8. “Mobile extends your capabilities” GPS, i has teh Accelerometer, Compass, Cheese interwebz GraterLuke Wroblewski -
  9. 9. “Mobile First” has gotten BIG
  10. 10. The book comes out next week
  11. 11. Even the big guys are on board “Mobile first in everything.” - Eric Schmidt Google Chief Executive
  12. 12. #1!Helpful as a design tool
  13. 13. MOBILE FIRST!!!Is this our battle cry?
  14. 14. !The dangers of “mobile first” thinking.
  15. 15. “Mobile First” forces us tofocus on a device. It’s all about me!!!
  16. 16. My “mobile”
  17. 17. His “mobile”
  18. 18. Her “mobile”
  19. 19. His “mobile”
  20. 20. Her “mobile”
  21. 21. His “mobile” really ?!!!
  22. 22. His “mobile”?
  23. 23. There is no one“mobile.” Are you sure? I am an iPhone
  24. 24. “Mobile First” causes us to isolate our websites.
  25. 25. This is bad.
  26. 26. Bad technologically, separate codebases separate teamsMobile Desktop twice the work out of sync with each other
  27. 27. doesn’t scale. Tablet?
  28. 28. But moreimportantly, it’sbad for ourusers.
  29. 29. The adventures of Alexa’s top 100 US sites. and the perils of isolation.
  30. 30. Both screenshotstaken at the sametime.
  31. 31. *click*, I mean *tap* -This is not the iPhoneI’m looking for...
  32. 32. Separate “mobile” and“desktop” sites make iteasy for content to get outof sync. Not to mention the missed sales opportunities...
  33. 33. Welcoming to prospectivecustomers.Prominent log in for existingcustomers.Allows users to transition fromdirect mail marketing to aconversion on the site.
  34. 34. Assumes I’m already a member.Offers me an option to find abranch / ATM location.Gives me an option todownload a native app for myphone.
  35. 35. Mobile DesktopAssumes I’m already a Welcoming tomember. prospective customers.Offers me an option Prominent log in forto find a branch / ATM existing customers.location.Gives me an option to Allows users to transitiondownload a native app from direct mail marketingfor my phone. to a conversion on the site.
  36. 36. Mobile DesktopWe wouldn’t do this in a bricks and mortar store.
  37. 37. Are all mobile users alreadymembers?
  38. 38. Are all mobile users alreadymembers?
  39. 39. “Mobile First” leads to user context stereotypes.
  40. 40. Mobile users are: “in a hurry”“on a slow connection”“only interested in quick interactions”
  41. 41. Wi-Fi laxedre ka nd yq uic Ver ta sk? hurried
  42. 42. 86% of mobile internet users are usingtheir devices while watching TV. 14% 86%
  43. 43. 37% of those are browsing the internet(content unrelated to the show) while they watch unrelate d
  44. 44. Mobile users aren’t always on the go.
  45. 45. Mobile users aren’t always impatient.
  46. 46. on a slowMobile users aren’t always connection.
  47. 47. When we stereotype usercontext we createexperiences that serve thatstereotype.
  48. 48. And we seem aware that theseexperiences are insufficient.Not what you wanted? Click this little link and have funpinching and zooming the rest of our site!
  49. 49. “Mobile First” yieldsincomplete experiences.
  50. 50. Let’s play a game!Let’s make a purchase on Walmart’smobile site. Imagine you’re the one goingthrough this experience, and raise yourhand if at any point you would abandonthe process.
  51. 51. Raise your hand if you would abandon the process.DemoVideo
  52. 52. “The study by e-commerce agency Screen Pages lookedat more than 1.5m visitors to 30 non-optimisedwebsites, and found that conversion rates were anaverage of 41% lower on mobile.” commerce-visits-but-converts-at-half-the-rate
  53. 53. 25% conversion 15% conversion vs. commerce-visits-but-converts-at-half-the-rate
  54. 54. Users don’t want tojump from this, to this.
  55. 55. The dangers of “Mobile First” thinking. Forces us to focus on a device. Causes us to isolate our websites. Leads to user context stereotypes. Yields incomplete experiences.
  56. 56. “Mobile First”is not enough.
  57. 57. How should weapproach “mobile”? I’m still here and I brought my friends.
  58. 58. we need to focus on“Experience First”
  59. 59. Talking about this.Jared Spool - Anatomy of a design decision -
  60. 60. Unintentional Design Jared Spool - Anatomy of a design decision -
  61. 61. Self Design Jared Spool - Anatomy of a design decision -
  62. 62. Genius Design I’m the expert. Jared Spool - Anatomy of a design decision -
  63. 63. Activity Focused Design Jared Spool - Anatomy of a design decision -
  64. 64. Activity Focused Design Research & categorize users. Build the features they want. sound familiar? Jared Spool - Anatomy of a design decision -
  65. 65. Experience Focused Design“Experience focused design looks atdiscrete activities and all of the thingsthat happen in between those discreteactivities.” - Jared Spool Jared Spool - Anatomy of a design decision -
  66. 66. We’re back here now.Jared Spool - Anatomy of a design decision -
  67. 67. How does“Experience First” apply to “mobile”?
  68. 68. Forces us to focus on a device.“Experience First”Forces us to focus on the experience
  69. 69.
  70. 70. It’s not about a device.
  71. 71. Causes us to isolate our websites.“Experience First”encourages a common experience one set of URLs
  72. 72. view full site
  73. 73.
  74. 74. ook Po stsFa ce b Email Cam arks paignsB oo km Tweets na lA ds ShareExte r d Lin ks
  75. 75. Leads to user context stereotypes.“Experience First”Leads to context-aware dynamic experiences.
  76. 76. Cater to actual user context. Where are they? Home, work, in your store?Are they relaxed or in a hurry? How long are they spending on each page? What types of content are they viewing? Note: these have nothing to do with device.
  77. 77. Yields incomplete experiences.“Experience First”Delivers the complete experience
  78. 78. Another Alexa top 100 site.
  79. 79. “Experience First” Forces us to focus on the Encourages a common experience Detects and adapts dynamically to user context Delivers the complete experience
  80. 80. What do I want my users to experience?
  81. 81. “Experience First” Tailoring the experience “Mobile First” Design Responsive DesignMedia Queries Geolocation Social Media Integration
  82. 82. The Challenges &The Challenge
  83. 83. A lot of factorsaffect an experience.
  84. 84. Content User Traits NameDevice Capabilities Age Portability Gender Display Size Language Display Resolution Locale Location Awareness (GPS) Disabilities Directional Awareness (Compass) Proficiency with technology (power user vs. Battery Life novice) Bandwidth Capacity Input Type (touch/keyboard/other) User Context Bandwidth Available (3G, Wi-Fi, dialup) Camera Location (home? work? at your business?) Flash Support Patience level (in a hurry, relaxed, etc.) Orientation Awareness (Accelerometer) Prior experience with your site/applicationBrowser Capabilities Javascript capable User Preferences CSS version/supported features Favorites (color, restaurant, wish lists) HTML version/supported features File system accessibility Device feature accessibility
  85. 85. It’s time-consumingand expensive.
  86. 86. If you do “experiencefirst” well, much ofyour effort will gounnoticed.But they’ll notice when you don’t!
  87. 87. You have to sell thisconcept to: clients,stakeholders, designers,developers, that guy whohas to approve everything. Feeling overwhelmed yet?
  88. 88. But start small.
  89. 89. It won’t happen overnight.
  90. 90. You don’t have to rebuildyour entire website.
  91. 91. Though that does make things easier.
  92. 92. Change your thinking.
  93. 93. No longer,“mobile” vs. “desktop”
  94. 94. just users and experiences
  95. 95. ExperienceFirst.
  96. 96. Resources“Mobile First”Luke Wroblewski -“Responsive Web Design”Ethan Marcotte -“Pragmatic Responsive Design”Stephanie Rieger“Adaptation”Bryan Rieger - Awesome pics for presentations!
  97. 97. ThanksThe Dave Ramsey Web Team Nick at ModerNash Luke at FoxyCart My amazing wife, Sara.
  98. 98. ExperienceFirst.#bcn11expfirstKevin PowellUX Consultant / Developer @kevinmpowell