Mobile UI Design – User Centered Design and UI Best Practices


Published on

Overview on user-centered design, Interaction design best practices and design principles for mobile user interface design.

Published in: Technology, Business
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile UI Design – User Centered Design and UI Best Practices

  1. 1. Introduction to Mobile User Interface Design<br />Selma Zafar<br />OpenRoad Communications<br /><br />
  2. 2. About me<br />Senior User Experience Designer, OpenRoad Communications<br />Instructor: Human Factors and Information Design Classes<br />Langara College – CID Program<br />My background:<br />Degree in Human Kinetics from University of Windsor<br />Specializing in Movement Science (Human Factors & Cog Sci)<br />Have worked with:<br />Nokia<br />Microsoft<br />YVR<br />Mountain Equipment Co-op<br />Ronald McDonald House Charities<br />Telus<br />Ontario Power Generation<br />
  3. 3. Topics Covered<br />Introduction User Centered Design principles<br />Interaction Design Principles<br />Design Guidelines<br />Usability testing<br />
  4. 4. User Centered Design<br />
  5. 5. User Requirements Analysis <br />Decide on product goals<br />Determine the user needs<br />Conduct one of many usability evaluations:<br />Heuristic evaluation<br />Competitive analysis<br />User interviews and surveys <br />
  6. 6. Conceptual Design, Prototypes, and Evaluation <br />Sketch out a high-level product design<br />Rapidly create visual representations (mockups) or interactive representations (prototypes) of the product.<br />Evaluate usability through:<br />Heuristic evaluation<br />Focus groups<br />Usability Testing<br />Iterate design with evaluation results<br />
  7. 7. Design and Implementation <br /><ul><li>Revise user interface based on concept evaluation
  8. 8. Apply style and look and feel to design
  9. 9. Create the user interface using standards-compliant code
  10. 10. Design for accessibility</li></li></ul><li>Usability Evaluation <br />Conduct usability evaluation on the final design<br />Work with the design and development team to improve the product based on evaluation results<br />Repeat this process (production iteration) until the organizational/business<br /> goals are met <br />
  11. 11. Launch and Maintenance<br />Document everything<br />Continue to collect feedback from users/customers to improve the product in future releases<br />Surveys<br />Focus Groups<br />
  12. 12. You have an idea! Now what?<br />Two toughest questions:<br />Who are you designing for?<br />What do you want them to do?<br />
  13. 13. Understanding the Contexts of Use<br />Think of the whole experience:<br />Environment<br />Time<br />Device<br />Culture<br />
  14. 14. Interaction Design Principles<br />
  15. 15. Interaction Design Principles<br />Learnability<br />Efficiency<br />Memorability<br />Error Recovery<br />Simplicity<br />Mapping<br />Visibility<br />Feedback<br />Consistency<br />Satisfaction<br />
  16. 16. Learnability<br />An interface should be easy to use from the first time the user interacts with it.<br />Amount of functionality presented to the user should be limited to exactly what the user requires to get to their goal<br />
  17. 17. Efficiency<br />Number of steps it takes for a user to complete a task<br />Key tasks should be made as efficient as possible<br />
  18. 18. Memorability<br />Interface should be easier to use each time the user interacts with it. <br />Frequency of use is the key factor in memorability<br />
  19. 19. Error Recovery<br />In a perfect user interface, users should never be allowed to make a mistake<br /><br />
  20. 20. Simplicity<br />Usual tasks should be easy and less common tasks should be possible. <br />Avoid unnecessary functionality and keep the visual design and layout uncluttered<br />
  21. 21. Mapping<br />What the user expects to happen when they interact with the interface is exactly what should happen<br />
  22. 22. Visibility<br />Important information should be the most visible and less important information should be less visible<br />Understanding the users goals is critical <br />
  23. 23. Feedback<br />User should always be in control of the interface and not the other way around<br />
  24. 24. Consistency<br />Like-items should always be displayed and act the same way across the entire application (and even between applications). <br />UI standards<br />
  25. 25. Satisfaction<br />How much the user enjoys or dislikes using the software<br /><br /><br /><br /><br />
  26. 26. Design Guidelines<br />
  27. 27. 1. Design for Simplicity<br />Relate visual precedence to task importance<br />Reduce functionality<br />Keep navigation narrow and shallow<br />Avoid extraneous information on each screen<br />Reduce or remove preferences<br />Use Progressive Disclosure<br />
  28. 28. 2. Design with Small Screen in Mind<br />Minimize user input<br />Minimize vertical scrolling and avoid horizontal scrolling<br />Use hyperlinking effectively<br />Provide Useful Error Messages<br />Prioritize the information on each screen<br />
  29. 29. 3. Provide Useful Feedback<br />Identify critical feedback<br />Employ alternative feedback modalities intelligently<br />Ensure quick system response time<br />
  30. 30. 4. Maintain Existing Design Standards<br />Use Existing Standards<br />Use Real World Metaphors<br />
  31. 31. 5. Respect both the physical and mental effort<br />Use wizards to simplify complex interactions<br />Design for efficiency<br />
  32. 32. Meeting Universal Design Challenges<br />Device Usability<br />Discoverability of application<br />Annoyances imposed on others<br />Part of a larger system (that has higher priority functions)<br />
  33. 33. Context of Use<br /><br />
  34. 34. Mobile UI Standards<br />Apple iPhone<br /><br />Nokia<br /><br />
  35. 35. Usability Testing<br />
  36. 36. Heuristic Evaluation<br />Systematic evaluation of an interface against a standard set of usability rules (heuristics)<br />Completed by one or more usability professionals<br />Findings are given a severity ranking and recommendations<br />
  37. 37. Interface Design Heuristics<br />Visibility of system status<br />Match between system and the real world <br />User control and freedom <br />Consistency and standards <br />Error prevention <br />Recognition rather than recall <br />Flexibility and efficiency of use <br />Aesthetic and minimalist design <br />Help users recognize, diagnose, and recover from errors <br />Help and documentation<br />
  38. 38. Usability Testing in a Lab<br />Scenario Based testing<br />Participants are recruited (7 – 9)<br />Up to 1.5 hours per session<br />Benefits<br />Observe sessions to get first hand feedback<br />Helps to vet design concepts with target users<br />
  39. 39.
  40. 40. Tour of Wavefront Usability Lab<br />14th floor<br />
  41. 41. References<br />Masterton, C; Mauney, D &quot;Small Screen Interfaces&quot; in Beyond The GUI edited by Philip Kortum (Morgan Kaufmann, 2008). <br />Mayhew, D. The Usability Engineering Lifecycle: A Practitioner&apos;s Handbook for User Interface Design (Morgan Kaufmann, 1999)<br />