Your SlideShare is downloading. ×

Mobile UX Design


Published on

An overview presentation on designing mobile user experiences.

An overview presentation on designing mobile user experiences.

Published in: Technology, Business
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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. What’s 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. What’s 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? What’s their technology ecology? iPhone? Android? Mac OS? Windows? Laptop?
  • 32. Think about design
  • 33. Consider brand Chipotle
  • 34. Consider the whole experience There’s more than the UI. There’s 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 aren’t 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 you’re not sure, go default. ★ You may be competing with other apps. Image via Touch Gesture Reference Guide on
  • 45. iPhone vs. iPad
  • 46. On-the-go vs. on the couch. Iamge on left via
  • 47. View from all sides Unlike a laptop, an iPad has no flip up screen to block interaction with others. Scrabble image via
  • 48. Wide open spaces Things can get lost on larger screens. More space means more chances to get lost.
  • 49. Focussed views Each screen has its own purpose. Apps from left to right: NewsRack,, Nike + iPod
  • 50. Single Views Split views, limited views, etc. on the iPad
  • 51. In-context Popovers Presents information that would normally be in a whole other view on a phone.
  • 52. Modal Cards Another way to surface information without “leaving” the current view.
  • 53. Beyond design
  • 54. Review designs ★ Create an HTML website with hotspots and share the URL for review ★ Email images to be reviewed on a device
  • 55. Get as close as you can 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. Test interactions ★ Gestures and inputs ★ UI overload/fatigue ★ Scrolling and selecting ★ Navigation flow Image via
  • 57. Physical prototypes ★ Don’t have the physical device? Fake it. ★ Made a wooden iPad to test before device was available Image via Jonathan Branam
  • 58. Get user feedback ★ Form a user testing plan ★ Try to get “true” users ★ Conduct your own “guerilla” user testing
  • 59. Thanks! Questions? @juansanchez