• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile ui and usability guide
 

Mobile ui and usability guide

on

  • 3,528 views

 

Statistics

Views

Total Views
3,528
Views on SlideShare
3,235
Embed Views
293

Actions

Likes
8
Downloads
108
Comments
0

5 Embeds 293

http://www.shyamalaprayaga.com 249
http://www.linkedin.com 24
http://www.weebly.com 15
https://www.linkedin.com 4
https://twitter.com 1

Accessibility

Upload Details

Uploaded via as OpenOffice

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile ui and usability guide Mobile ui and usability guide Presentation Transcript

    • Shyamala Prayaga Mobile UI and Usability Guide
    • Objective
      • Mobile Platform Overview
        • iOS
        • Android
        • BlackBerry
        • Symbian
        • Windows Mobile
      • Challenges involved in Mobile Application Designing
      • Mobile UI Design Principles
    • Objectives (Contd..)
      • Usability Guidelines
      • Mobile Design Best Practices
    • iOS
    • Dimensions, Resolutions and Interaction 320-by-480 pixel 960-by-640 pixel 163 pixels per inch (ppi) 326 pixels per inch (ppi) iPhone 2G, 3G iPhone 4S Interaction Method Touchscreen
    • MultiTouch Gestures
    • 1024-by-768-pixel 132 pixels per inch (ppi) iPad Dimensions, Resolutions and Interaction Interaction Method Touchscreen
    • MultiTouch Gestures
    • Android - Mobile HTC Dream (T-Mobile G1) 320 x 480 pixels 181 pixels per inch Touch Screen and Trackball HTC Magic (T-Mobile myTouch) 320 x 480 pixels 181 pixels per inch Touch Screen and Trackball HTC Hero (T-Mobile G2) 320 x 480 pixels 181 pixels per inch Touch Screen and Trackball Motorola DROID 480 x 854 pixels 252 pixels per inch Touch Screen and Trackball Google Nexus One 480 x 800 pixels 252 pixels per inch Touch Screen and Trackball Motorola Cliq 320 x 480 pixels 181 pixels per inch Touch Screen and Trackball HTC Tattoo 240 x 320 pixels 166 pixels per inch Touch Screen and Trackball HTC Wildfire 240 x 320 pixels 166 pixels per inch Touch Screen HTC Desire 480 x 800 pixels 252 pixels per inch Touch Screen
    • Android - Tablets Interaction Method Interaction Method TouchScreen TouchScreen Dimensions Dimensions 1280x800 pixels 1280x800 pixels
    • BlackBerry BlackBerry 7100 Series 240 x 260 151 Trackwheel BlackBerry 8700 Series 320 x 240 154 Trackwheel BlackBerry 8800 Series 320 x 240 163 Trackball BlackBerry Bold 9000 smartphone 480 x 320 217 Trackball BlackBerry Curve 8300 Series BlackBerry Curve 8350i smartphone BlackBerry Curve 8500 Series 320 x 240 163 Trackball, Trackpad, BlackBerry Curve 8900 smartphone 480 x 360 245 Trackball BlackBerry Pearl 8100 Series 240 x 260 161 Trackball BlackBerry Pearl Flip 8200 Series 240 x 320 166 Trackball BlackBerry Storm 9500 Series 360 x 480 184 TouchScreen BlackBerry Tour 9600 Series 480 x 360 245 Trackball
    • BlackBerry - Tablet 1024 x 600 pixels TouchScreen Interaction Method Dimensions
    • Windows Mobile HTC HD mini 320 X 480 pixels 181 ppi Touch Screen HTC HD2 480 X 800 pixels 252 ppi Touch Screen HTC Touch Diamond2 480 X 800 pixels 252 ppi Touch Screen HTC P6500 240 X 320 pixels 166 ppi Touch Screen HTC P3470 240 X 320 pixels 166 ppi Touch Screen HTC Touch 240 X 320 pixels 166 ppi Touch Screen
    • Symbian Nokia E72 320 x 240 pixels 166 ppi QWERTY keyboard Nokia 5230 Nuron 640 x 360 pixels 245 ppi Touch Screen Nokia 5230 640 x 360 pixels 245 ppi Touch Screen Nokia N97 640 x 360 pixels 245 ppi Touch Screen
    • Challenges involved in Mobile Application Designing Diversified Platforms and Devices
    • Challenges involved in Mobile Application Designing Diversified Screen Size and Display Resolution
    • Challenges involved in Mobile Application Designing Diversified Operating System
    • Challenges involved in Mobile Application Designing Limited Memory
    • Challenges involved in Mobile Application Designing Diversified Interaction
    • Challenges involved in Mobile Application Designing Diversified Usage Context
    • Diversified User Needs Challenges involved in Mobile Application Designing
    • Mobile UI Design Principles Learnability
      • Easy to use from the first time the user interacts with it
      • Amount of functionality presented to the user should be limited to exactly what the user requires to get their goal
    • Mobile UI Design Principles Efficiency
      • Number of steps its takes a user to complete a task is very important
      • Key tasks should be made as efficient as possible
    • Mobile UI Design Principles Memorability
      • Interface should be easier to use each time the user interacts with it
      • Frequency of use is the key factor in memorability
    • Mobile UI Design Principles Error Recovery
      • User should not be given chance to make mistakes
      • Even if mistake happens, interface should give chance to rectify the error
      • User should be informed of the error without being inconvenienced
      • Attempts should be made to make the failure “graceful” such that no information is lost
    • Mobile UI Design Principles Simplicity
      • Graphics and display layouts should be uncluttered, crisp, and plain
      • Text fonts should be clear and comfortable to read
      • Displays should show the most important information clearly, rather than squeezing in as much data as possible
      • The interaction, display texts, graphics, and sound design should be consistent and harmonious
      • Usual task should be easy and less common task should be possible
      • Avoid unnecessary functionality, keep the visual design and layout uncluttered
      • Display information in a way that makes effective use of the small screen
      • The user should be able to find all needed functions , without getting tangled in secondary issues
    • Mobile UI Design Principles Mapping
      • What the user expects to happen when they interact with the interface is exactly what should happen
    • Mobile UI Design Principles Visbility
      • Important information should be the most visible and less important should be less visible
      • Understanding the users goals is critical
    • Mobile UI Design Principles Feedback
      • User should always be in control of the interface and not the other way round
      • The interface should be responsive by giving instant feedback to the user
    • Mobile UI Design Principles Consistency
      • Like items should always be displayed and act the same way across the entire application
      • Use of color, widgets should also be consistant across the entire application
    • User Inputs Mobile UI Design Principles Provide pre-selected default values where possible
    • Customization Mobile UI Design Principles
    • Satisfaction Mobile UI Design Principles
    • Usability Guidelines
      • Address user requirement as quickly as possible
      • Make user inputs simpler
      • Indicate clearly what is selected
      • Inessential stuff should be kept out
      • Make sure the basic controls are always available
      • Cater for Easy and Intuitive Interaction
      • Strive for Consistency
      • Do not make the mobile application a technology-limited version of your desktop application
      • Offer Instantaneous, Informative Feedback
      • Apply 80/20 rule
    • Mobile Design Best Practices
      • Do not blindly mimic designs intended to run on desktop devices
      • Present the minimum number of options possible on any single screen
      • Minimize screen density but don't split content/interaction across so many screens that users get lost
      • Design the UI to behave similarly to other applications on the device with which users are familiar
      • If designing for multiple devices, follow established design conventions for each device
      • Avoid the pitfall of trying to make the application behave the same across all platforms
      • Make sure forms are easy to use and navigation between fields is predictable
      • Provide clear methods for the user to recover from errors broken links and other problems, particularly if the device does not have a simple back button
      • Avoid complex interaction patterns that require close user attention for long periods of time
      • The less text input, the better
      • Exploit the unique capabilities of each device (GPS, accelerometer, screen size, input methods) to create the most engaging user experience possible
      • Use highly structured workflows or wizards for infrequent tasks
      • Provide clear feedback on progress and the status of task completion
      • Use high contrast text color and select typefaces for maximum readability
      Mobile Design Best Practices
      • Carefully and consistently use color throughout the design
      • Use simple navigation structures that focus on one specific task at a time
      Mobile Design Best Practices
    • Questions?