Shyamala Prayaga Mobile UI and Usability Guide
Objective <ul><li>Mobile Platform Overview </li><ul><li>iOS
Android
BlackBerry
Symbian
Windows Mobile </li></ul><li>Challenges involved in Mobile Application Designing
Mobile UI Design Principles </li></ul>
Objectives (Contd..) <ul><li>Usability Guidelines
Mobile Design Best Practices </li></ul>
iOS
Dimensions, Resolutions and Interaction 320-by-480 pixel 960-by-640 pixel 163  pixels per inch (ppi) 326  pixels per inch ...
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-Mob...
Android - Tablets Interaction Method Interaction Method TouchScreen TouchScreen Dimensions Dimensions 1280x800 pixels 1280...
BlackBerry BlackBerry 7100 Series 240 x 260 151 Trackwheel BlackBerry 8700 Series  320 x 240 154 Trackwheel BlackBerry 880...
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...
Symbian Nokia E72 320 x 240 pixels 166 ppi QWERTY keyboard Nokia 5230 Nuron 640 x 360 pixels 245 ppi Touch Screen  Nokia 5...
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 <ul><li>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  </li>...
Mobile UI Design Principles Efficiency <ul><li>Number of steps its takes a user to complete a task is very important
Key tasks should be made as efficient as possible </li></ul>
Mobile UI Design Principles Memorability <ul><li>Interface should be easier to use each time the user interacts with it
Frequency of use is the key factor in memorability </li></ul>
Mobile UI Design Principles Error Recovery <ul><li>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 </li></ul>
Mobile UI Design Principles Simplicity <ul><li>Graphics and display layouts should be uncluttered, crisp, and plain
Upcoming SlideShare
Loading in...5
×

Mobile ui and usability guide

3,575

Published on

Published in: Technology, News & Politics
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,575
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
125
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Mobile ui and usability guide

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

    Clipping is a handy way to collect important slides you want to go back to later.

×