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

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

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

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

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

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

Visual
Audible
Physical (Vibration)
outputs

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

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

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

NPR Mobile Site ebay App.
Contacts App. examples

Android Marketplace Delivery Status Touch
App. Flickr App. examples

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

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

Sevnthsin Mobile Site myPANTONE App.
Twitter App. examples

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

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

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

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

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

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

Twitter App. Google Latitude Palm
Contacts examples

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