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

638

Published on

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

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
638
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
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 DesignBoulder Digital WorksMay 27, 2010
  • 2. Hello.Juan SanchezUX Architect at EffectiveUI@juansanchezjuanchez.com
  • 3. Gartner reported that theglobal mobile phone saleslast year reached around1.21 billion units.
  • 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. What is mobile?
  • 6. Ah, technology
  • 7. These are...
  • 8. And these...
  • 9. Are these?
  • 10. More on the wayLeft to right: Windows Phone 7, Kin, Nokia Morph Concept
  • 11. What does it take tocreate a great mobileexperience?
  • 12. Know the hardware
  • 13. Form FactorBest Buy makes a great device lab.
  • 14. Screen SizeImages via gamesradar.com
  • 15. Screen Resolution 1024 x 768 at 132 ppi 480 x 320 at 163 ppi 800 x 480480 x 320
  • 16. Orientation
  • 17. Input MethodsKeyboard, wheels, touch, multi-touch, earbuds...
  • 18. Other capabilitiesGPS, accelerometer, microphone, light, camera...Applications from left to right: iHandy Level, Stickybits, Square
  • 19. Human FactorLeft vs. right handed, proximity of reach, fatigue...
  • 20. Connected?
  • 21. Define the app
  • 22. Not a scaled downwebsite ≠Option + “=” on a Mac will give you a ≠
  • 23. Web app vs. nativeLeft to right: Twitter Mobile Web and Tweetie iPhone App
  • 24. What’s the soul of theapplication?
  • 25. Primary touchpoint?Mobile is the main source of traffic.Applications from left to right: Ramp Champ, Convertbot
  • 26. CompanionMobile app augments other experiences.Applications from left to right: Starbucks, iHome
  • 27. Optimized UISame 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 useFrom icon to user interfaceAOL Radio
  • 30. Mobile informsMobile apps can be a test bed for new features inother experiences. Design mobile first.
  • 31. Where are peoplecoming from?What’s their technology ecology?iPhone? Android? Mac OS? Windows? Laptop?
  • 32. Think about design
  • 33. Consider brandChipotle
  • 34. Consider the wholeexperienceThere’s more than the UI. There’s the icon, startupscreen, app store screens, etc.
  • 35. Native UI vs.Custom UILeft to right: Wordpress, Epicurious
  • 36. Understand thedifferent platformsAndroid, iPhone, Web OS, etc. all have different UIs
  • 37. Review the HIG andother design guides
  • 38. Make it touchableAreas of interaction need to be big enough to easilyinteract with.
  • 39. OrientationDesign for the best experience in differentorientations.
  • 40. Promote the primaryEliminate extra noise by subduing secondary actions.
  • 41. Resolution is higherImage 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 affordanceHow 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 sidesUnlike a laptop, an iPad has no flip up screen to blockinteraction with others.Scrabble image via engadget.com
  • 48. Wide open spacesThings can get lost on larger screens.More space means more chances to get lost.
  • 49. Focussed viewsEach screen has its own purpose.Apps from left to right: NewsRack, Dictionary.com, Nike + iPod
  • 50. Single ViewsSplit views, limited views, etc. on the iPad
  • 51. In-context PopoversPresents information that would normally be in awhole other view on a phone.
  • 52. Modal CardsAnother 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 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. Test interactions★ Gestures and inputs★ UI overload/fatigue★ Scrolling and selecting★ Navigation flowImage via scopeblog.stanford.edu
  • 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. Get user feedback★ Form a user testing plan★ Try to get “true” users★ Conduct your own “guerilla” user testing
  • 59. Thanks!Questions?effectiveui.com@juansanchezjuanchez.com

×