Mobile UX Design


Boulder Digital Works
May 27, 2010
Hello.
Juan Sanchez
UX Architect at EffectiveUI

@juansanchez
juanchez.com
Gartner reported that the
global mobile phone sales
last year reached around
1.21 billion units.
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 a...
What is mobile?
Ah, technology
These are...
And these...
Are these?
More on the way




Left to right: Windows Phone 7, Kin, Nokia Morph Concept
What does it take to
create a great mobile
experience?
Know the hardware
Form Factor
Best Buy makes a great device lab.
Screen Size




Images via gamesradar.com
Screen Resolution
                                               1024 x 768 at 132 ppi




                        480 x 3...
Orientation
Input Methods
Keyboard, wheels, touch, multi-touch, earbuds...
Other capabilities
GPS, accelerometer, microphone, light, camera...




Applications from left to right: iHandy Level, Sti...
Human Factor
Left vs. right handed, proximity of reach, fatigue...
Connected?
Define the app
Not a scaled down
website


                                          ≠
Option + “=” on a Mac will give you a ≠
Web app vs. native




Left to right: Twitter Mobile Web and Tweetie iPhone App
What’s the soul of the
application?
Primary touchpoint?
Mobile is the main source of traffic.




Applications from left to right: Ramp Champ, Convertbot
Companion
Mobile app augments other experiences.




Applications from left to right: Starbucks, iHome
Optimized UI
Same functionality but in an optimized way.




Applications from left to right: Evernote, Gowalla
What’s the use case?
How, where, when is an app going to be used?
Who is using the app?




Image via mindingthegaps.com
Be clear on the use
From icon to user interface




AOL Radio
Mobile informs
Mobile apps can be a test bed for new features in
other experiences. Design mobile first.
Where are people
coming from?
What’s their technology ecology?
iPhone? Android? Mac OS? Windows? Laptop?
Think about design
Consider brand




Chipotle
Consider the whole
experience
There’s more than the UI. There’s the icon, startup
screen, app store screens, etc.
Native UI vs.
Custom UI




Left to right: Wordpress, Epicurious
Understand the
different platforms
Android, iPhone, Web OS, etc. all have different UIs
Review the HIG and
other design guides
Make it touchable
Areas of interaction need to be big enough to easily
interact with.
Orientation
Design for the best experience in different
orientations.
Promote the primary
Eliminate extra noise by subduing secondary actions.
Resolution is higher




Image via informationarchitects.jp
Rethink the metaphor
★ Metaphors can create a shallow learning curve, but
  aren’t always appropriate
★ Use metaphors that...
Think affordance
How do people know to interact with things?
Use default gestures
★ People enter with different gesture vocabularies.
★ If you’re not sure, go default.
★ You may be co...
iPhone vs. iPad
On-the-go vs.
on the couch.




Iamge on left via iLounge.com
View from all sides
Unlike a laptop, an iPad has no flip up screen to block
interaction with others.




Scrabble image vi...
Wide open spaces
Things can get lost on larger screens.
More space means more chances to get lost.
Focussed views
Each screen has its own purpose.




Apps from left to right: NewsRack, Dictionary.com, Nike + iPod
Single Views
Split views, limited views, etc. on the iPad
In-context Popovers
Presents information that would normally be in a
whole other view on a phone.
Modal Cards
Another way to surface information without “leaving”
the current view.
Beyond design
Review designs
★ Create an HTML website with hotspots and share
  the URL for review
★ Email images to be reviewed on a de...
Get as close as you
can to the real thing
★ Get set up with the dev environment
★ Test and run on the simulators
★ Even be...
Test interactions
★ Gestures and inputs
★ UI overload/fatigue
★ Scrolling and selecting
★ Navigation flow




Image via sc...
Physical prototypes
★ Don’t have the physical device? Fake it.
★ Made a wooden iPad to test before device was
  available
...
Get user feedback
★ Form a user testing plan
★ Try to get “true” users
★ Conduct your own “guerilla” user testing
Thanks!
Questions?

effectiveui.com

@juansanchez
juanchez.com
Upcoming SlideShare
Loading in …5
×

Mobile UX Design

16,123 views

Published on

An overview presentation on designing mobile user experiences.

Published in: Technology, Business
7 Comments
27 Likes
Statistics
Notes
No Downloads
Views
Total views
16,123
On SlideShare
0
From Embeds
0
Number of Embeds
2,576
Actions
Shares
0
Downloads
245
Comments
7
Likes
27
Embeds 0
No embeds

No notes for slide

Mobile UX Design

  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

×