Your SlideShare is downloading. ×
0
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Mobile UX Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile UX Design

11,386

Published on

An overview presentation on designing mobile user experiences.

An overview presentation on designing mobile user experiences.

Published in: Technology, Business
6 Comments
25 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,386
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
234
Comments
6
Likes
25
Embeds 0
No embeds

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. Mobile UX Design Boulder Digital Works May 27, 2010
  • 2. Hello. Juan Sanchez UX Architect at EffectiveUI @juansanchez juanchez.com
  • 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 gamesradar.com
  • 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 mindingthegaps.com
  • 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 informationarchitects.jp
  • 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 lukew.com
  • 45. iPhone vs. iPad
  • 46. On-the-go vs. on the couch. Iamge on left via iLounge.com
  • 47. View from all sides Unlike a laptop, an iPad has no flip up screen to block interaction with others. Scrabble image via engadget.com
  • 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, Dictionary.com, 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 scopeblog.stanford.edu
  • 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? effectiveui.com @juansanchez juanchez.com

×