1. Shyamala Prayaga Mobile UI and Usability Guide

2. Objective

Mobile Platform Overview

iOS

3. Android 4. BlackBerry 5. Symbian 6. Windows Mobile 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 163pixels per inch (ppi) 326pixels per inch (ppi) iPhone 2G, 3G iPhone 4S Interaction Method Touchscreen 12. MultiTouch Gestures 13. 1024-by-768-pixel132 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 inchTouch Screen and Trackball HTC Magic (T-Mobile myTouch) 320 x 480 pixels 181pixels per inchTouch Screen and Trackball HTC Hero (T-Mobile G2) 320 x 480 pixels 181 pixels per inchTouch Screen and Trackball Motorola DROID 480 x 854 pixels 252pixels per inchTouch Screen and Trackball Google Nexus One 480 x 800 pixels 252pixels per inchTouch Screen and Trackball Motorola Cliq 320 x 480 pixels 181pixels per inchTouch 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 252pixels per inchTouch 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 Series320 x 240 154 Trackwheel BlackBerry 8800 Series 320 x 240 163Trackball BlackBerry Bold 9000 smartphone 480 x 320 217Trackball BlackBerry Curve 8300 Series BlackBerry Curve 8350i smartphone BlackBerry Curve 8500 Series 320 x 240163Trackball, Trackpad,BlackBerry Curve 8900 smartphone 480 x 360 245Trackball BlackBerry Pearl 8100 Series 240 x 260161Trackball BlackBerry Pearl Flip 8200 Series 240 x 320 166Trackball BlackBerry Storm 9500 Series 360 x 480 184TouchScreen BlackBerry Tour 9600 Series 480 x 360 245Trackball 18. BlackBerry - Tablet 1024 x 600 pixels TouchScreen Interaction Method Dimensions 19. Windows Mobile HTC HD mini 320 X 480 pixels 181 ppi Touch ScreenHTC HD2 480 X 800 pixels 252 ppi Touch ScreenHTC Touch Diamond2 480 X 800 pixels 252 ppi Touch ScreenHTC P6500 240 X 320 pixels 166 ppi Touch ScreenHTC P3470 240 X 320 pixels 166 ppi Touch ScreenHTC 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 ScreenNokia 5230 640 x 360 pixels 245 ppi Touch ScreenNokia 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 tofind 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 errorsbroken 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?