Mobile UX Overview

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

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

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

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

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

outputs Visual Audible Physical (Vibration)

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

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

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

examples NPR Mobile Site ebay App. Contacts App.

examples Android Marketplace Delivery Status Touch App. Flickr App.

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

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

examples Sevnthsin Mobile Site myPANTONE App. Twitter App.

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

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

examples 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

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

examples Twitter App. Google Latitude Palm Contacts

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

http://infovizdes.iwiki.kent.edu	177
http://designtaylor.com	115
http://wiki.redtonic	53
http://www.designtaylor.com	26
http://if2b.com	21
http://www.petemachine.co.uk	7
http://moondaesa.tistory.com	6
http://www.bezier.com	4
http://www.slideshare.net	2
file://	2
http://www.if2b.com	2
http://intra.ipamad.com	2
http://movenations.tistory.com	1
http://static.slidesharecdn.com	1
http://paper.li	1
http://twitter.com	1

Mobile UX Overview

by DesignTaylor on Oct 25, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

16 Embeds 421

Statistics

Mobile UX Overview — Presentation Transcript