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
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