Why "mobile first" isn't enough - Developing a better user experience
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 10,800 views
Uploaded 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......

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
10,800
On Slideshare
6,544
From Embeds
4,256
Number of Embeds
19

Actions

Shares
Downloads
97
Comments
0
Likes
18

Embeds 4,256

http://axbom.se 3,348
http://iy103-w14.hibbittsdesign.com 483
http://hotelbizdevelop.blogspot.fr 244
http://paper.li 75
http://rascasse.com 41
http://www.bagtheweb.com 24
http://www.hotelbizdevelop.blogspot.fr 23
http://underthebedstudios.com 3
http://btw-staging.herokuapp.com 2
https://twitter.com 2
http://feeds.feedburner.com 2
http://a0.twimg.com 2
http://www.bonweb.fr 1
http://udo.se 1
http://rss.qoli.de 1
http://interaktionsdesign.collected.info 1
http://us-w1.rockmelt.com 1
http://www.google.se 1
http://webcache.googleusercontent.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. W hy“Mobi e First” isn’t enough: Developing a better user experience.#bcn11expfirst@kevinmpowell view full presentation
  • 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. 1 ? 2 3What is “mobile first”?
  • 4. Luke Wroblewski Blogger Author SpeakerFormer Chief Design Architect at Yahoo!
  • 5. “Mobile First.”Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933
  • 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. “Mobile forces you to focus”Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933
  • 8. “Mobile extends your capabilities” GPS, i has teh Accelerometer, Compass, Cheese interwebz GraterLuke Wroblewski - http://www.lukew.com/ff/entry.asp?933
  • 9. “Mobile First” has gotten BIG
  • 10. The book comes out next week
  • 11. Even the big guys are on board “Mobile first in everything.” - Eric Schmidt Google Chief Executive
  • 12. #1!Helpful as a design tool
  • 13. MOBILE FIRST!!!Is this our battle cry?
  • 14. !The dangers of “mobile first” thinking.
  • 15. “Mobile First” forces us tofocus on a device. It’s all about me!!!
  • 16. My “mobile”
  • 17. His “mobile”
  • 18. Her “mobile”
  • 19. His “mobile”
  • 20. Her “mobile”
  • 21. His “mobile” really ?!!!
  • 22. His “mobile”?
  • 23. There is no one“mobile.” Are you sure? I am an iPhone
  • 24. “Mobile First” causes us to isolate our websites.
  • 25. This is bad.
  • 26. Bad technologically, separate codebases separate teamsMobile Desktop twice the work out of sync with each other
  • 27. doesn’t scale. Tablet?
  • 28. But moreimportantly, it’sbad for ourusers.
  • 29. The adventures of Alexa’s top 100 US sites. and the perils of isolation.
  • 30. Both screenshotstaken at the sametime.
  • 31. *click*, I mean *tap* -This is not the iPhoneI’m looking for...
  • 32. Separate “mobile” and“desktop” sites make iteasy for content to get outof sync. Not to mention the missed sales opportunities...
  • 33. Welcoming to prospectivecustomers.Prominent log in for existingcustomers.Allows users to transition fromdirect mail marketing to aconversion on the site.
  • 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. 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. Mobile DesktopWe wouldn’t do this in a bricks and mortar store.
  • 37. Are all mobile users alreadymembers?
  • 38. Are all mobile users alreadymembers?
  • 39. “Mobile First” leads to user context stereotypes.
  • 40. Mobile users are: “in a hurry”“on a slow connection”“only interested in quick interactions”
  • 41. Wi-Fi laxedre ka nd yq uic Ver ta sk? hurried
  • 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. 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. Mobile users aren’t always on the go.
  • 45. Mobile users aren’t always impatient.
  • 46. on a slowMobile users aren’t always connection.
  • 47. When we stereotype usercontext we createexperiences that serve thatstereotype.
  • 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. “Mobile First” yieldsincomplete experiences.
  • 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. Raise your hand if you would abandon the process.DemoVideo
  • 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. 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. Users don’t want tojump from this, to this.
  • 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. “Mobile First”is not enough.
  • 57. How should weapproach “mobile”? I’m still here and I brought my friends.
  • 58. we need to focus on“Experience First”
  • 59. Talking about this.Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  • 60. Unintentional Design Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  • 61. Self Design Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  • 62. Genius Design I’m the expert. Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  • 63. Activity Focused Design Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  • 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. 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. We’re back here now.Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
  • 67. How does“Experience First” apply to “mobile”?
  • 68. Forces us to focus on a device.“Experience First”Forces us to focus on the experience
  • 69. http://bostonglobe.com
  • 70. It’s not about a device. http://vimeo.com/28926711
  • 71. Causes us to isolate our websites.“Experience First”encourages a common experience one set of URLs
  • 72. mobile.yoursite.com view full site
  • 73. m.yoursite.commobile.yoursite.comyoursite.com/mobile
  • 74. ook Po stsFa ce b Email Cam arks paignsB oo km Tweets na lA ds ShareExte r d Lin ks yoursite.com
  • 75. Leads to user context stereotypes.“Experience First”Leads to context-aware dynamic experiences.
  • 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. Yields incomplete experiences.“Experience First”Delivers the complete experience
  • 78. Another Alexa top 100 site.
  • 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. What do I want my users to experience?
  • 81. “Experience First” Tailoring the experience “Mobile First” Design Responsive DesignMedia Queries Geolocation Social Media Integration
  • 82. The Challenges &The Challenge
  • 83. A lot of factorsaffect an experience.
  • 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. It’s time-consumingand expensive.
  • 86. If you do “experiencefirst” well, much ofyour effort will gounnoticed.But they’ll notice when you don’t!
  • 87. You have to sell thisconcept to: clients,stakeholders, designers,developers, that guy whohas to approve everything. Feeling overwhelmed yet?
  • 88. But start small.
  • 89. It won’t happen overnight.
  • 90. You don’t have to rebuildyour entire website.
  • 91. Though that does make things easier.
  • 92. Change your thinking.
  • 93. No longer,“mobile” vs. “desktop”
  • 94. just users and experiences
  • 95. ExperienceFirst.
  • 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. ThanksThe Dave Ramsey Web Team Nick at ModerNash Luke at FoxyCart My amazing wife, Sara.
  • 98. ExperienceFirst.#bcn11expfirstKevin PowellUX Consultant / Developer kevin@underthebedstudios.com underthebedstudios.com @kevinmpowell