mobile ux design

Download Mobile UX Design

Post on 05-Dec-2014




1 download

Embed Size (px)


An overview presentation on designing mobile user experiences.


  • 1. Mobile UX Design Boulder Digital Works May 27, 2010
  • 2. Hello. Juan Sanchez UX Architect at EffectiveUI @juansanchez
  • 3. Gartner reported that the global mobile phone sales last year reached around 1.21 billion units.
  • 4. Vendors shipped a total of 54.7 million units in the first quarter of 2010 (1Q10), up 56.7% from the same quarter a year ago. via International Data Corporation
  • 5. What is mobile?
  • 6. Ah, technology
  • 7. These are...
  • 8. And these...
  • 9. Are these?
  • 10. More on the way Left to right: Windows Phone 7, Kin, Nokia Morph Concept
  • 11. What does it take to create a great mobile experience?
  • 12. Know the hardware
  • 13. Form Factor Best Buy makes a great device lab.
  • 14. Screen Size Images via
  • 15. Screen Resolution 1024 x 768 at 132 ppi 480 x 320 at 163 ppi 800 x 480 480 x 320
  • 16. Orientation
  • 17. Input Methods Keyboard, wheels, touch, multi-touch, earbuds...
  • 18. Other capabilities GPS, accelerometer, microphone, light, camera... Applications from left to right: iHandy Level, Stickybits, Square
  • 19. Human Factor Left vs. right handed, proximity of reach, fatigue...
  • 20. Connected?
  • 21. Define the app
  • 22. Not a scaled down website Option + = on a Mac will give you a
  • 23. Web app vs. native Left to right: Twitter Mobile Web and Tweetie iPhone App
  • 24. Whats the soul of the application?
  • 25. Primary touchpoint? Mobile is the main source of traffic. Applications from left to right: Ramp Champ, Convertbot
  • 26. Companion Mobile app augments other experiences. Applications from left to right: Starbucks, iHome
  • 27. Optimized UI Same functionality but in an optimized way. Applications from left to right: Evernote, Gowalla
  • 28. Whats the use case? How, where, when is an app going to be used? Who is using the app? Image via
  • 29. Be clear on the use From icon to user interface AOL Radio
  • 30. Mobile informs Mobile apps can be a test bed for new features in other experiences. Design mobile first.
  • 31. Where are people coming from? Whats their technology ecology? iPhone? Android? Mac OS? Windows? Laptop?
  • 32. Think about design
  • 33. Consider brand Chipotle
  • 34. Consider the whole experience Theres more than the UI. Theres the icon, startup screen, app store screens, etc.
  • 35. Native UI vs. Custom UI Left to right: Wordpress, Epicurious
  • 36. Understand the different platforms Android, iPhone, Web OS, etc. all have different UIs
  • 37. Review the HIG and other design guides
  • 38. Make it touchable Areas of interaction need to be big enough to easily interact with.
  • 39. Orientation Design for the best experience in different orientations.
  • 40. Promote the primary Eliminate extra noise by subduing secondary actions.
  • 41. Resolution is higher Image via
  • 42. Rethink the metaphor Metaphors can create a shallow learning curve, but arent always appropriate Use metaphors that make sense People are coming from the web if not from another device
  • 43. Think affordance How do people know to interact with things?
  • 44. Use default gestures People enter with different gesture vocabularies. If youre not sure, go default. You may be competing with other apps. Image via Touch Gesture Reference Guide on
  • 45.