Your SlideShare is downloading. ×
Mobile ui and usability guide
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Mobile ui and usability guide

3,374
views

Published on

Published in: Technology, News & Politics

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,374
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
122
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Shyamala Prayaga Mobile UI and Usability Guide
  • 2. Objective
    • Mobile Platform Overview
    • Challenges involved in Mobile Application Designing
    • 7. Mobile UI Design Principles
  • 8. Objectives (Contd..)
    • Usability Guidelines
    • 9. Mobile Design Best Practices
  • 10. iOS
  • 11. 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
  • 12. MultiTouch Gestures
  • 13. 1024-by-768-pixel 132 pixels per inch (ppi) iPad Dimensions, Resolutions and Interaction Interaction Method Touchscreen
  • 14. MultiTouch Gestures
  • 15. 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
  • 16. Android - Tablets Interaction Method Interaction Method TouchScreen TouchScreen Dimensions Dimensions 1280x800 pixels 1280x800 pixels
  • 17. 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
  • 18. BlackBerry - Tablet 1024 x 600 pixels TouchScreen Interaction Method Dimensions
  • 19. 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
  • 20. 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
  • 21. Challenges involved in Mobile Application Designing Diversified Platforms and Devices
  • 22. Challenges involved in Mobile Application Designing Diversified Screen Size and Display Resolution
  • 23. Challenges involved in Mobile Application Designing Diversified Operating System
  • 24. Challenges involved in Mobile Application Designing Limited Memory
  • 25. Challenges involved in Mobile Application Designing Diversified Interaction
  • 26. Challenges involved in Mobile Application Designing Diversified Usage Context
  • 27. Diversified User Needs Challenges involved in Mobile Application Designing
  • 28. Mobile UI Design Principles Learnability
    • Easy to use from the first time the user interacts with it
    • 29. Amount of functionality presented to the user should be limited to exactly what the user requires to get their goal
  • 30. Mobile UI Design Principles Efficiency
    • Number of steps its takes a user to complete a task is very important
    • 31. Key tasks should be made as efficient as possible
  • 32. Mobile UI Design Principles Memorability
    • Interface should be easier to use each time the user interacts with it
    • 33. Frequency of use is the key factor in memorability
  • 34. Mobile UI Design Principles Error Recovery
    • User should not be given chance to make mistakes
    • 35. Even if mistake happens, interface should give chance to rectify the error
    • 36. User should be informed of the error without being inconvenienced
    • 37. Attempts should be made to make the failure “graceful” such that no information is lost
  • 38. Mobile UI Design Principles Simplicity
    • Graphics and display layouts should be uncluttered, crisp, and plain
    • 39. Text fonts should be clear and comfortable to read
    • 40. Displays should show the most important information clearly, rather than squeezing in as much data as possible
    • 41. 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
    • 42. Avoid unnecessary functionality, keep the visual design and layout uncluttered
    • 43. Display information in a way that makes effective use of the small screen
    • 44. The user should be able to find all needed functions , without getting tangled in secondary issues
  • 45. Mobile UI Design Principles Mapping
    • What the user expects to happen when they interact with the interface is exactly what should happen
  • 46. Mobile UI Design Principles Visbility
    • Important information should be the most visible and less important should be less visible
    • 47. Understanding the users goals is critical
  • 48. Mobile UI Design Principles Feedback
    • User should always be in control of the interface and not the other way round
    • 49. The interface should be responsive by giving instant feedback to the user
  • 50. Mobile UI Design Principles Consistency
    • Like items should always be displayed and act the same way across the entire application
    • 51. Use of color, widgets should also be consistant across the entire application
  • 52. User Inputs Mobile UI Design Principles Provide pre-selected default values where possible
  • 53. Customization Mobile UI Design Principles
  • 54. Satisfaction Mobile UI Design Principles
  • 55. Usability Guidelines
    • Address user requirement as quickly as possible
    • 56. Make user inputs simpler
    • 57. Indicate clearly what is selected
    • 58. Inessential stuff should be kept out
    • 59. Make sure the basic controls are always available
    • 60. Cater for Easy and Intuitive Interaction
    • 61. Strive for Consistency
    • 62. Do not make the mobile application a technology-limited version of your desktop application
    • 63. Offer Instantaneous, Informative Feedback
    • 64. Apply 80/20 rule
  • 65. Mobile Design Best Practices
    • Do not blindly mimic designs intended to run on desktop devices
    • 66. Present the minimum number of options possible on any single screen
    • 67. Minimize screen density but don't split content/interaction across so many screens that users get lost
    • 68. Design the UI to behave similarly to other applications on the device with which users are familiar
    • 69. If designing for multiple devices, follow established design conventions for each device
    • 70. Avoid the pitfall of trying to make the application behave the same across all platforms
    • 71. Make sure forms are easy to use and navigation between fields is predictable
  • 72.
    • 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
    • 73. Avoid complex interaction patterns that require close user attention for long periods of time
    • 74. The less text input, the better
    • 75. Exploit the unique capabilities of each device (GPS, accelerometer, screen size, input methods) to create the most engaging user experience possible
    • 76. Use highly structured workflows or wizards for infrequent tasks
    • 77. Provide clear feedback on progress and the status of task completion
    • 78. Use high contrast text color and select typefaces for maximum readability
    Mobile Design Best Practices
  • 79.
    • Carefully and consistently use color throughout the design
    • 80. Use simple navigation structures that focus on one specific task at a time
    Mobile Design Best Practices
  • 81. Questions?