Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile UX Overview

9,836 views

Published on

Not sure how well this presentation stands on it's own, so you might want to check out the accompanying blog post http://www.springbox.com/insight/post/Getting-Started-with-Mobile-UX-Design.aspx

Published in: Design, Technology

Mobile UX Overview

  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

×