The document discusses best practices for mobile user experience design, providing tips on choosing between a mobile website or app, prioritizing user goals and context, designing for different mobile devices and contexts, and emphasizing simplicity, voice interaction, and working within the physical constraints of mobile. It also provides resources for mobile design templates.

1. Mobile UX
Jenifer Hanen @msjen
& Cindy Li @cindyli
1

2. “Sworn by oath to
uphold you, we are.” -Yoda
MobileUX
Jenifer Hanen & Cindy Li 2
2

3. Choose a path:
A. mobile web
B. mobile app?
MobileUX
Jenifer Hanen & Cindy Li 3
3

4. Keeping the essence of
your website or product
MobileUX
Jenifer Hanen & Cindy Li 4
4

5. What is your goal?
• Features (camera, microphone,
notifications)
• Location
• Light weight version of website
MobileUX
Jenifer Hanen & Cindy Li 5
5

6. It depends...
MobileUX
Jenifer Hanen & Cindy Li 6
6

7. It’s about context
MobileUX
Jenifer Hanen & Cindy Li 7
7

8. “Clear, your mind must be
if you are to discover the
real villains behind the
plot”-Yoda
MobileUX
Jenifer Hanen & Cindy Li 8
8

9. The Villain is the
download speed
MobileUX
Jenifer Hanen & Cindy Li 9
9

10. “If into the security
recordings you go, only
pain will you find” -Yoda
MobileUX
Jenifer Hanen & Cindy Li 10
10

11. Give users the same
features for their
security aka privacy
preferences
MobileUX
Jenifer Hanen & Cindy Li 11
11

12. Case Study: Gowalla
MobileUX
Jenifer Hanen & Cindy Li 12
12

13. 13
13

14. “Decide you must how
to serve them best...”
-Yoda
MobileUX
Jenifer Hanen & Cindy Li 14
14

15. Allowing users
possibilities
MobileUX
Jenifer Hanen & Cindy Li 15
15

16. Case Study: Twitter (m.twitter.com)
MobileUX
Jenifer Hanen & Cindy Li 16
16

17. One phone to rule them all?
You know which one I am talking about.
MobileUX
Jenifer Hanen & Cindy Li 17
17

18. I think not.
There are many
mobile devices,
many manufacturers, &
many cultures &
user needs to be met.
MobileUX
Jenifer Hanen & Cindy Li 18
18

19. Don’t Assume
that because you & your tribe love & depend on
'_________' mobile that everyone else does, too.
MobileUX
Jenifer Hanen & Cindy Li 19
19

20. What are the User's
desires, wants, and
needs?
Do User Research, Work up Personas,
Test and then Watch your site's statistics.
MobileUX
Jenifer Hanen & Cindy Li 20
20

21. This brings us back to Choice.
MobileUX
Jenifer Hanen & Cindy Li 21
21

22. WAIT!
Does this mean we have to return to 1999?
Design & Code two or more sites depending on who is
visiting on what multiple devices?
((O.o))
MobileUX
Jenifer Hanen & Cindy Li 22
22

23. Take the time
to consider your internal &
external users
Will simplicity or more
complexity serve them
better?
MobileUX
Jenifer Hanen & Cindy Li
23
23

24. One Web Site?
Or a Mobile & a Web
Site? Or More?
Does it serve the user and the available resources
better to have one site using progressive enhancement,
or a web & a mobile site with a sniffer, or several mini-
sites for major devices?
MobileUX
Jenifer Hanen & Cindy Li 24
24

25. Always give the user
choice to escape any
walled mobile garden.
MobileUX
Jenifer Hanen & Cindy Li 25
25

26. MobileUX
Jenifer Hanen & Cindy Li
A KISS for the User 26
26

27. Keep it Simple, Sweety
Click me, Baby!
1-5 clicks vs. 15-20 clicks
MobileUX
Jenifer Hanen & Cindy Li 27
27

28. Perhaps?
For a mobile app put as much complexity in the user
settings & allow the user to determine the simplicity or
complexity of their own experience.
MobileUX
Jenifer Hanen & Cindy Li 28
28

29. Designing for Context
means never forgetting
voice.
Don't forget the power of voice, sms/text,
MobileUX and sensors as well as web or app functions.
Jenifer Hanen & Cindy Li 29
29

30. Mobile apps and web should
take voice and text usage
into account.
One Simple fix you can do today is make sure that all
the phone numbers on business mobile sites use <a
href="tel:17145551212">1.714.555.1212</a>
MobileUX
Jenifer Hanen & Cindy Li 30
30

31. But, think very carefully
before linking to a sms:
<a href="sms:17145551212">Text me!</a>
MobileUX
Jenifer Hanen & Cindy Li 31
31

32. Be consistent and coherent
in the design choices.
Would it serve the user better to use common
interface & interactions or to innovate?
MobileUX
Jenifer Hanen & Cindy Li 32
32

33. Last but not least
don't forget about the physicality of
a mobile device in the palm of one's hand.
It is an object with limitations of screen, input,
battery, and connectivity.
How do we as designers work within these constraints
to create a great user experience?
MobileUX
Jenifer Hanen & Cindy Li 33
33

34. Resources
MobileUX
Jenifer Hanen & Cindy Li 34
34

35. iPhone templates
Omnigraffle:
http://graffletopia.com/stencils/413
Fireworks:
http://blog.metaspark.com/2009/02/fireworks-toolkit-for-
creating-iphone-ui-mockups/
Photoshop:
http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/
MobileUX
Jenifer Hanen & Cindy Li 35
35

36. iPad:
http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd
Android template photoshop:
http://www.matcheck.cz/androidguipsd/
Nokia Templates, Icons and UX Docs:
http://www.forum.nokia.com/Tools_Docs_and_Code/
Documentation/Usability/
Palm pre template:
http://www.teehanlax.com/blog/2009/07/08/palm-pre-gui-psd/
MobileUX
Jennifer Hanen & Cindy Li 36
36

37. Assets to send to Apple
MobileUX
Jennifer Hanen & Cindy Li 37
37

38. Icon: Png format:
512x512: for display in the App store
57x57: for App icon
29x29: for spotlight search
Title Treatment:
Min size:600x600: Title treatment/logo for app should be easy
to read. Format: vector, eps, ai; transparent psd or tif
Launch images:
320x480: include status bar area to display status bar color
you’ve chosen. First image after launching. Don’t use the splash
screen, or an about page.
•Do not submit with rounded corner, shine or a drop shadow
MobileUX
Jenifer Hanen & Cindy Li 38
38

39. Standard System
Buttons and Icons
MobileUX
Jenifer Hanen & Cindy Li 39
39

40. Toolbar icons: 20x20 (PNG)
Light is 90° (top of the icon)
Tab Bar icons: 30x30 (PNG)
Standard Buttons in Table Rows/UI element: 30x30 (PNG)
MobileUX
Jenifer Hanen & Cindy Li 40
40

41. Mobile Web Resources:
Design for Mobile Wiki:
http://patterns.design4mobile.mobi
PPK's Mobile browser testing and articles:
http://www.quirksmode.org/mobile/
MobiForge's Mobile Emulators:
http://mobiforge.com/emulators/page/mobile-emulators
Mobile Web Application Best Practices:
http://www.w3.org/TR/mwabp/
MobileUX
Jenifer Hanen & Cindy Li 41
41

42. Books:
Barbara Ballard,
"Designing the Mobile User Experience", 2007, Wiley
Brian Fling,
"Mobile Design and Development", 2009, O'Reilly Media
Matt Jones,
"Mobile Interaction Design", 2006, Wiley
MobileUX
Jenifer Hanen & Cindy Li 42
42

43. Flickr CC Photo Credits:
C-Monster's Donald Judd photo: http://www.flickr.com/photos/arte/4532448832/
Urban Don's Time Machine 3026 photo: http://www.flickr.com/photos/donpezzano/
2724171374
Nataliej's Kiss Me photo: http://www.flickr.com/photos/nataliejohnson/1862352885/
Ms. Jen's Cubicle Gangsta photo: http://www.flickr.com/photos/msjen/14282969/
MobileUX
Jenifer Hanen & Cindy Li 43
43

44. Thank You!
Cindy Li, @cindyli, cindyli.com
Jenifer Hanen, @msjen, blackphoebe.com
MobileUX
Jenifer Hanen & Cindy Li
44