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