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.

Adaptive Mobile UX Design (Extended Version)

5,310 views

Published on

How can we craft compelling and useful mobile web experiences that gracefully adapt to different devices and contexts? We can learn through examining a few common mobile pitfalls that have ensnared some popular online retailers, and how to combat them through better understanding our users. Then, armed with user insight, industry research, and compelling content, we can use some some of the latest features in HTML5 and CSS3 to help build sites that are not only relevant on mobile, but just as compelling.

Published in: Design, Technology, Business
  • Be the first to comment

Adaptive Mobile UX Design (Extended Version)

  1. 1. Adaptive Mobile UX Design Pragmatic mobile web techniquesphoto: http://www.flickr.com/photos/matthijs/3514892055/
  2. 2. photo: http://www.flickr.com/photos/wyrmworld/4256386226/
  3. 3. photo: http://www.flickr.com/photos/wyrmworld/4256386226/
  4. 4. photo: Ashley Pomeroy
  5. 5. photo: http://www.flickr.com/photos/ferret111/4538338004/
  6. 6. photo: http://www.flickr.com/photos/kzirkel/2374822053/
  7. 7. What is Adaptive Mobile UX Design?
  8. 8. photo: http://www.flickr.com/photos/eugeneflores/3530886940/
  9. 9. photo: http://www.flickr.com/photos/toby_d1/2976481163/
  10. 10. photo: http://www.flickr.com/photos/toby_d1/2976479343/
  11. 11. photo: http://www.flickr.com/photos/toby_d1/2976476165/
  12. 12. photo: http://www.flickr.com/photos/toby_d1/2976474501/
  13. 13. photo: http://www.flickr.com/photos/toby_d1/3030796938/
  14. 14. photo: http://www.flickr.com/photos/gardenbeth/3466767207/
  15. 15. photo: http://www.flickr.com/photos/elmada/437435881/
  16. 16. Design considerations • • •
  17. 17. photo: http://www.ecardmedia.eu/data/media/16/Leaping%20Red%20Fox.jpg
  18. 18. @$%&?!!
  19. 19. User tasks and goals Tasks: Research prices Find local retailers Goal: Find price match policy Buy space heater Get warranty information Read customer reviews
  20. 20. Industry research
  21. 21. photo: http://www.flickr.com/photos/markkelley/1022720488/ photo: http://www.flickr.com/photos/viccastelo/352256906/photo: http://www.flickr.com/photos/darwinbell/3196413626/ photo: http://www.flickr.com/photos/simona_/4068354970/
  22. 22. Myth:"Most mobile Internet use is on-the-go."
  23. 23. Myth:"Most mobile Internet use is on-the-go."
  24. 24. Myth: "Most mobile Internet use is on-the-go." Where are people using mobile devices? 84% at home 80% during misc downtime throughout the day 76% waiting in lines / for appointments 69% while shopping 64% at work 62% while watching TV (alt. study claims 84%) 47% during commute in to workSource:Competes Quarterly Smartphone Report (via Luke Wroblewski)http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
  25. 25. Myth:"Mobile users don’t need the same content."
  26. 26. Myth:"Mobile users don’t need the same content."
  27. 27. Myth:"Mobile users don’t need the same content."
  28. 28. Myth:"Mobile users don’t need the same content."
  29. 29. Myth:"People won’t do that using their phones."
  30. 30. A balanced approach • • •
  31. 31. HTML5 features•••••
  32. 32. Smart web forms
  33. 33. Smart web forms <input type="number">
  34. 34. Smart web forms <input type="email">
  35. 35. Geolocation
  36. 36. Dynamic device orientation
  37. 37. Web-native video playback
  38. 38. Web-native video playback
  39. 39. Semantic web markup source: http://slides.html5rocks.com
  40. 40. CSS3: media queries • • •
  41. 41. Screen size
  42. 42. Screen size
  43. 43. Screen size <link rel="stylesheet" type="text/ css" media="screen and (max-device- width: 480px)" href="phone.css">
  44. 44. Screen orientation <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”> <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>source: http://robertnyman.com/css3/media-queries/media-queries.html
  45. 45. Screen resolution <link rel="stylesheet" type="text/css" media="screen and (max- device-width: 480px) and (resolution: 163dpi)" href="phone.css" />
  46. 46. Feature support in mobile web browsers source: http://mobilehtml5.org
  47. 47. • Think any device, any screen,any context• Don’t second-guess yourusers: do user and industryresearch to get the basics right• Modern smartphone browserscan handle HTML5 and CSS3,but use them to enhance a solidbaseline experience• Designers and developers:prototype ideas, collaborate photo: http://www.flickr.com/photos/andreasl/4558473029/
  48. 48. Additional readingSites PeopleMobile Web Resources From to follow on TwitterBreaking Development @lukewhttp://www.lukew.com/ff/entry.asp?1406 @future_friendlyMedia Queries @grigshttp://mediaqueri.es/ @globalmoxieDive Into HTML5http://diveintohtml5.info/ @brad_frost @stephanierieger @bryanrieger
  49. 49. photo: http://www.flickr.com/photos/whiteafrican/3142019382/
  50. 50. THANK YOUphoto: http://www.flickr.com/photos/whiteafrican/3142019382/

×