Mobile UX Design


Published on

Effective UI's Juan Sanchez presented on mobile UX design at Boulder Digital Works on May 27, 2010.

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

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile UX Design

  1. 1. Mobile UX DesignBoulder Digital WorksMay 27, 2010
  2. 2. Hello.Juan SanchezUX Architect at
  3. 3. Gartner reported that theglobal mobile phone saleslast year reached around1.21 billion units.
  4. 4. Vendors shipped a total of 54.7million units in the first quarterof 2010 (1Q10), up 56.7% fromthe same quarter a year ago.via International Data Corporation
  5. 5. What is mobile?
  6. 6. Ah, technology
  7. 7. These are...
  8. 8. And these...
  9. 9. Are these?
  10. 10. More on the wayLeft to right: Windows Phone 7, Kin, Nokia Morph Concept
  11. 11. What does it take tocreate a great mobileexperience?
  12. 12. Know the hardware
  13. 13. Form FactorBest Buy makes a great device lab.
  14. 14. Screen SizeImages via
  15. 15. Screen Resolution 1024 x 768 at 132 ppi 480 x 320 at 163 ppi 800 x 480480 x 320
  16. 16. Orientation
  17. 17. Input MethodsKeyboard, wheels, touch, multi-touch, earbuds...
  18. 18. Other capabilitiesGPS, accelerometer, microphone, light, camera...Applications from left to right: iHandy Level, Stickybits, Square
  19. 19. Human FactorLeft vs. right handed, proximity of reach, fatigue...
  20. 20. Connected?
  21. 21. Define the app
  22. 22. Not a scaled downwebsite ≠Option + “=” on a Mac will give you a ≠
  23. 23. Web app vs. nativeLeft to right: Twitter Mobile Web and Tweetie iPhone App
  24. 24. What’s the soul of theapplication?
  25. 25. Primary touchpoint?Mobile is the main source of traffic.Applications from left to right: Ramp Champ, Convertbot
  26. 26. CompanionMobile app augments other experiences.Applications from left to right: Starbucks, iHome
  27. 27. Optimized UISame functionality but in an optimized way.Applications from left to right: Evernote, Gowalla
  28. 28. What’s the use case?How, where, when is an app going to be used?Who is using the app?Image via
  29. 29. Be clear on the useFrom icon to user interfaceAOL Radio
  30. 30. Mobile informsMobile apps can be a test bed for new features inother experiences. Design mobile first.
  31. 31. Where are peoplecoming from?What’s their technology ecology?iPhone? Android? Mac OS? Windows? Laptop?
  32. 32. Think about design
  33. 33. Consider brandChipotle
  34. 34. Consider the wholeexperienceThere’s more than the UI. There’s the icon, startupscreen, app store screens, etc.
  35. 35. Native UI vs.Custom UILeft to right: Wordpress, Epicurious
  36. 36. Understand thedifferent platformsAndroid, iPhone, Web OS, etc. all have different UIs
  37. 37. Review the HIG andother design guides
  38. 38. Make it touchableAreas of interaction need to be big enough to easilyinteract with.
  39. 39. OrientationDesign for the best experience in differentorientations.
  40. 40. Promote the primaryEliminate extra noise by subduing secondary actions.
  41. 41. Resolution is higherImage via
  42. 42. Rethink the metaphor★ Metaphors can create a shallow learning curve, but aren’t always appropriate★ Use metaphors that make sense★ People are coming from the web if not from another device
  43. 43. Think affordanceHow do people know to interact with things?
  44. 44. Use default gestures★ People enter with different gesture vocabularies.★ If you’re not sure, go default.★ You may be competing with other apps.Image via Touch Gesture Reference Guide on
  45. 45. iPhone vs. iPad
  46. 46. On-the-go vs.on the couch.Iamge on left via
  47. 47. View from all sidesUnlike a laptop, an iPad has no flip up screen to blockinteraction with others.Scrabble image via
  48. 48. Wide open spacesThings can get lost on larger screens.More space means more chances to get lost.
  49. 49. Focussed viewsEach screen has its own purpose.Apps from left to right: NewsRack,, Nike + iPod
  50. 50. Single ViewsSplit views, limited views, etc. on the iPad
  51. 51. In-context PopoversPresents information that would normally be in awhole other view on a phone.
  52. 52. Modal CardsAnother way to surface information without “leaving”the current view.
  53. 53. Beyond design
  54. 54. Review designs★ Create an HTML website with hotspots and share the URL for review★ Email images to be reviewed on a device
  55. 55. Get as close as youcan to the real thing★ Get set up with the dev environment★ Test and run on the simulators★ Even better, load on to a device★ Even add assets and commit
  56. 56. Test interactions★ Gestures and inputs★ UI overload/fatigue★ Scrolling and selecting★ Navigation flowImage via
  57. 57. Physical prototypes★ Don’t have the physical device? Fake it.★ Made a wooden iPad to test before device was availableImage via Jonathan Branam
  58. 58. Get user feedback★ Form a user testing plan★ Try to get “true” users★ Conduct your own “guerilla” user testing
  59. 59. Thanks!Questions?