• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Mobile UX Overview

on

  • 7,615 views

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

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

Statistics

Views

Total Views
7,615
Views on SlideShare
6,777
Embed Views
838

Actions

Likes
53
Downloads
0
Comments
5

20 Embeds 838

http://designtaylor.com 322
http://infovizdes.iwiki.kent.edu 182
http://www.designtaylor.com 74
http://iakm60102sp13.iwiki.kent.edu 60
http://wiki.redtonic 59
http://alpfeiffer23.wordpress.com 46
http://www.petemachine.co.uk 41
http://if2b.com 21
http://moondaesa.tistory.com 13
http://www.bezier.com 6
file:// 2
http://www.slideshare.net 2
http://www.if2b.com 2
http://intra.ipamad.com 2
http://twitter.com 1
http://paper.li 1
http://movenations.tistory.com 1
http://www.m.techgig.com 1
http://static.slidesharecdn.com 1
http://www.techgig.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • This is a extraordinary presentation of mobile ux
    Are you sure you want to
    Your message goes here
    Processing…
  • This looks awesome! We’re running a competition to win a 3M PocketProjector MP180 at the moment and this fits perfectly in the ‘3MGenius’ category. Just tag your presentation with 3MGenius to be entered - Head over to our page for more details!
    Are you sure you want to
    Your message goes here
    Processing…
  • i also need it
    http://www.toypf.com
    Are you sure you want to
    Your message goes here
    Processing…
  • I just drafted a post with more details: http://www.springbox.com/insight/post/Getting-Started-with-Mobile-UX-Design.aspx
    Are you sure you want to
    Your message goes here
    Processing…
  • can i get the slide, or u can email me... tx
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile UX Overview Mobile UX Overview Presentation Transcript

    • 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