W hy“Mobi e First”                      isn’t enough:      Developing a better user experience.#bcn11expfirst@kevinmpowell...
1. What is “mobile first”?2. The dangers of “mobile first” thinking.3. How should we approach “mobile”?4. The challenges &...
1      ?    2           3What is “mobile first”?
Luke Wroblewski               Blogger                Author               SpeakerFormer Chief Design Architect at Yahoo!
“Mobile First.”Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933
Why “Mobile First”?                                             rnet Usage*                                               ...
“Mobile forces you to focus”Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933
“Mobile extends your capabilities”           GPS,                                            i has teh      Accelerometer,...
“Mobile First” has gotten   BIG
The book comes out next week
Even the big guys are on board                     “Mobile first in                     everything.”                      ...
#1!Helpful as a design tool
MOBILE              FIRST!!!Is this our battle cry?
!The dangers of “mobile first”         thinking.
“Mobile First” forces us tofocus on a device.                It’s all about                     me!!!
My “mobile”
His “mobile”
Her “mobile”
His “mobile”
Her “mobile”
His “mobile”         really ?!!!
His “mobile”?
There is no one“mobile.”   Are you sure? I   am an iPhone
“Mobile First” causes us to  isolate our websites.
This is bad.
Bad technologically,            separate           codebases         separate teamsMobile                      Desktop    ...
doesn’t scale.     Tablet?
But moreimportantly, it’sbad for ourusers.
The adventures of Alexa’s top 100 US sites.      and the perils of isolation.
Both screenshotstaken at the sametime.
*click*, I mean *tap* -This is not the iPhoneI’m looking for...
Separate “mobile” and“desktop” sites make iteasy for content to get outof sync.       Not to mention the missed sales     ...
Welcoming to prospectivecustomers.Prominent log in for existingcustomers.Allows users to transition fromdirect mail market...
Assumes I’m already a member.Offers me an option to find abranch / ATM location.Gives me an option todownload a native app...
Mobile                   DesktopAssumes I’m already a    Welcoming tomember.                  prospective customers.Offers...
Mobile                 DesktopWe wouldn’t do this in a bricks and         mortar store.
Are all mobile users alreadymembers?
Are all mobile users alreadymembers?
“Mobile First” leads to user  context stereotypes.
Mobile users are:      “in a hurry”“on a slow connection”“only interested in quick      interactions”
Wi-Fi   laxedre             ka nd      yq uic  Ver       ta sk?    hurried
86% of mobile internet users are usingtheir devices while watching TV.                                                    ...
37% of those are browsing the internet(content unrelated to the show) while they watch                      unrelate      ...
Mobile users aren’t always on the go.
Mobile users aren’t always impatient.
on a slowMobile users aren’t always connection.
When we stereotype usercontext we createexperiences that serve thatstereotype.
And we seem aware that theseexperiences are insufficient.Not what you wanted? Click this little link and have funpinching ...
“Mobile First” yieldsincomplete experiences.
Let’s play a game!Let’s make a purchase on Walmart’smobile site. Imagine you’re the one goingthrough this experience, and ...
Raise your hand if you would abandon the process.DemoVideo
“The study by e-commerce agency Screen Pages lookedat more than 1.5m visitors to 30 non-optimisedwebsites, and found that ...
25% conversion                       15% conversion                   vs.             http://econsultancy.com/us/blog/8096...
Users don’t want tojump from this,       to this.
The dangers of “Mobile First” thinking.       Forces us to focus on a device.       Causes us to isolate our websites.    ...
“Mobile First”is not enough.
How should weapproach “mobile”?           I’m still here and I          brought my friends.
we need to focus on“Experience First”
Talking about this.Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
Unintentional Design           Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
Self Design              Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
Genius Design          I’m the             expert.          Jared Spool - Anatomy of a design decision - http://vimeo.com/...
Activity Focused Design           Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
Activity Focused Design          Research & categorize users.          Build the features they want.          sound famili...
Experience Focused Design“Experience focused design looks atdiscrete activities and all of the thingsthat happen in betwee...
We’re back here now.Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
How does“Experience First”    apply to “mobile”?
Forces us to focus on a device.“Experience First”Forces us to focus on the experience
http://bostonglobe.com
It’s not about a device.                     http://vimeo.com/28926711
Causes us to isolate our websites.“Experience First”encourages a common experience                   one set of URLs
mobile.yoursite.com view full site
m.yoursite.commobile.yoursite.comyoursite.com/mobile
ook Po stsFa ce b              Email Cam         arks           paignsB oo km         Tweets      na lA ds ShareExte r    ...
Leads to user context stereotypes.“Experience First”Leads to context-aware dynamic          experiences.
Cater to actual user context.        Where are they?          Home, work, in your store?Are they relaxed or in a hurry?   ...
Yields incomplete experiences.“Experience First”Delivers the complete experience
Another Alexa top 100 site.
“Experience First”               Forces us to focus on the               experience.yoursite.com   Encourages a common exp...
What do I want my users to experience?
“Experience First”    Tailoring the experience   “Mobile First” Design            Responsive DesignMedia Queries     Geolo...
The Challenges      &The Challenge
A lot of factorsaffect an experience.
Content                                  User Traits                                         NameDevice Capabilities      ...
It’s time-consumingand expensive.
If you do “experiencefirst” well, much ofyour effort will gounnoticed.But they’ll notice when you don’t!
You have to sell thisconcept to: clients,stakeholders, designers,developers, that guy whohas to approve everything.       ...
But start   small.
It won’t happen overnight.
You don’t have to rebuildyour entire website.
Though that does make things easier.
Change your thinking.
No longer,“mobile”   vs.   “desktop”
just       users               and experiences
ExperienceFirst.
Resources“Mobile First”Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?933Book - http://www.abookapart.com/products/mobil...
ThanksThe Dave Ramsey Web Team    Nick at ModerNash    Luke at FoxyCart  My amazing wife, Sara.
ExperienceFirst.#bcn11expfirstKevin PowellUX Consultant / Developer   kevin@underthebedstudios.com   underthebedstudios.co...
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
Upcoming SlideShare
Loading in...5
×

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

10,889

Published on

"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.

Published in: Technology, Business
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,889
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
107
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

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 - http://www.lukew.com/ff/entry.asp?933
  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 - http://www.lukew.com/ff/entry.asp?933 accurate”
  7. 7. “Mobile forces you to focus”Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933
  8. 8. “Mobile extends your capabilities” GPS, i has teh Accelerometer, Compass, Cheese interwebz GraterLuke Wroblewski - http://www.lukew.com/ff/entry.asp?933
  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% http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html
  43. 43. 37% of those are browsing the internet(content unrelated to the show) while they watch unrelate d http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html
  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.” http://econsultancy.com/us/blog/8096-mobile-accounts-for-10-of-e- commerce-visits-but-converts-at-half-the-rate
  53. 53. 25% conversion 15% conversion vs. http://econsultancy.com/us/blog/8096-mobile-accounts-for-10-of-e- 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 - http://vimeo.com/20881152
  60. 60. Unintentional Design Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  61. 61. Self Design Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  62. 62. Genius Design I’m the expert. Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  63. 63. Activity Focused Design Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  64. 64. Activity Focused Design Research & categorize users. Build the features they want. sound familiar? Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  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 - http://vimeo.com/20881152
  66. 66. We’re back here now.Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  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. http://bostonglobe.com
  70. 70. It’s not about a device. http://vimeo.com/28926711
  71. 71. Causes us to isolate our websites.“Experience First”encourages a common experience one set of URLs
  72. 72. mobile.yoursite.com view full site
  73. 73. m.yoursite.commobile.yoursite.comyoursite.com/mobile
  74. 74. ook Po stsFa ce b Email Cam arks paignsB oo km Tweets na lA ds ShareExte r d Lin ks yoursite.com
  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 experience.yoursite.com 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 Wroblewskihttp://www.lukew.com/ff/entry.asp?933Book - http://www.abookapart.com/products/mobile-first“Responsive Web Design”Ethan Marcottehttp://www.alistapart.com/articles/responsive-web-design/Book - http://www.abookapart.com/products/responsive-web-design“Pragmatic Responsive Design”Stephanie Riegerhttp://www.slideshare.net/yiibu/pragmatic-responsive-design“Adaptation”Bryan Riegerhttp://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-serverModernizrhttp://www.modernizr.com/Flickr - Awesome pics for presentations!http://www.flickr.com/
  97. 97. ThanksThe Dave Ramsey Web Team Nick at ModerNash Luke at FoxyCart My amazing wife, Sara.
  98. 98. ExperienceFirst.#bcn11expfirstKevin PowellUX Consultant / Developer kevin@underthebedstudios.com underthebedstudios.com @kevinmpowell
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×