This document provides an overview of important considerations for mobile user experience design. It discusses screen size and input/output capabilities of mobile devices, as well as common touch controls and navigation patterns. The basics section outlines screen properties and input methods like taps, drags and gestures. Layout is discussed in terms of utilizing available screen real estate and organizing content. Examples are given of navigation menus, contextual menus and other interface elements. The document concludes with recommendations for design patterns and best practices.

1. Mobile UX
An overview of touch-based mobile user experience considerations.

2. agenda
Basic Considerations
Inputs and Outputs
Mobile Layout
Common Touch Controls
Navigation Menus
Contextual Menus
Pattern & Best Practices

3. Screen Size and
Proportions
Direct Interaction
with Display
Interface Built for
Touch
Variable Screen
Orientation
the basics
iPhone
HTC Evo
Droid 2
Palm Pre
BlackBerry Bold

4. Single Screen
Experience
Limited Discovery
No Roll-overs
No Tool-tips
Established Device
Standards
Limited Resource
Battery
Connectivity
Memory
the basics

5. Tap
Drag
Flick
Swipe
Double tap
Pinch open/close
Touch and hold
Simultaneous
Touch-Points
Gesture
Physical Buttons
and Keyboards
inputs: touch

6. Accelerometer
Motion
Shake
GPS
Ambient Light
Microphone
Voice
Music
Ambient Audio
Orientation
Camera
Photos
Visual Codes
inputs: other

7. Visual
Audible
Physical (Vibration)
outputs

8. Small Screen
Screen as Interface
layout: real estate
Best Touch Real Estate
Best Viewable Real Estate

9. Navigate Left to
Right
Back Button
Swipe to Page
Consume Content
Top to Bottom
layout: pages
1 3
2

10. Formats
Apps
Web
Widgets (Android)
Alerts & Notification
Elements
Status Bar (1)
Navigation Bar (2)
Tab Bar (3)
Toolbar (3)
Content
Header (1)
Rows (2)
Section Breaks (3)
layout: anatomy
1
2
2
1
3
3

11. NPR Mobile Site ebay App. Contacts App.
examples

12. Android Marketplace Delivery Status Touch App. Flickr App.
examples

13. Single Tap Buttons
Toggles
Switch
Check Box
Sliders
Horizontal
Vertical
Dials and Knobs
Tabs
Tab Bars
Dragable Items
System Supported
Input Fields
Drop-downs
touch controls
Button
One Two ThreeON
Tab 2 Tab 2Tab 1
Search

14. Photomizer App. Settings Screen
examples
Obama Mobile Website Android Drop Down Interface

15. Sevnthsin Mobile Site myPANTONE App. Twitter App.
examples

16. ConversionBot App. Where To App. Ringtone Designer Pro App.
examples

17. Navigational Home
Screen
Tabs
Fly-outs
Take Overs
Push Down
Overlay
Button Grid
Previous / Next
Buttons
navigation menus

18. ASICS Australia Mobile Site The Weather Channel App. Google Docs Mobile Site
examples

19. Facebook Mobile App. New York Times Mobile Site Sobe Mobile Site
examples

20. Nike Lab Mobile App. Hotel Monterilla Mobile Site MIT Mobile Site
examples

21. Appear Only When
Needed
Focused Relevant
Choices
System, Site, or
App Generated
Take Many Forms
Alert
Hidden
Push-down
Overlay
contextual menus

22. Twitter App. Google Latitude Palm Contacts
examples

23. Keep it simple and focused
Be consistent
Keep the user’s context in mind
Task
Location / Environment
Mind set
Always provide visual feedback
Limit scrolling to one direction
Put the most important content first
Limit image use, leverage styles
Review and test on target device
Clearly identify link targets
Include button to clear input fields
Define field type
Provide link to full site
Explore gestural patterns
Unlock
Delete
Avoid
Pop ups
Redirects
Auto refresh
patterns / best practices