Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introduction to Mobile User Interface Design<br />Selma Zafar<br />OpenRoad Communications<br />selma@openroad.ca<br />
About me<br />Senior User Experience Designer, OpenRoad Communications<br />Instructor: Human Factors and Information Desi...
Topics Covered<br />Introduction User Centered Design principles<br />Interaction Design Principles<br />Design Guidelines...
User Centered Design<br />
User Requirements Analysis <br />Decide on product goals<br />Determine the user needs<br />Conduct one of many usability ...
Conceptual Design, Prototypes, and Evaluation <br />Sketch out a high-level product design<br />Rapidly create visual repr...
Design and Implementation <br /><ul><li>Revise user interface based on concept evaluation
Apply style and look and feel to design
Create the user interface using standards-compliant code
Design for accessibility</li></li></ul><li>Usability Evaluation <br />Conduct usability evaluation on the final design<br ...
Launch and Maintenance<br />Document everything<br />Continue to collect feedback from users/customers to improve the prod...
You have an idea! Now what?<br />Two toughest questions:<br />Who are you designing for?<br />What do you want them to do?...
Understanding the Contexts of Use<br />Think of the whole experience:<br />Environment<br />Time<br />Device<br />Culture<...
Interaction Design Principles<br />
Interaction Design Principles<br />Learnability<br />Efficiency<br />Memorability<br />Error Recovery<br />Simplicity<br /...
Learnability<br />An interface should be easy to use from the first time the user interacts with it.<br />Amount of functi...
Efficiency<br />Number of steps it takes for a user to complete a task<br />Key tasks should be made as efficient as possi...
Memorability<br />Interface should be easier to use each time the user interacts with it. <br />Frequency of use is the ke...
Error Recovery<br />In a perfect user interface, users should never be allowed to make a mistake<br />http://www.flickr.co...
Simplicity<br />Usual tasks should be easy and less common tasks should be possible. <br />Avoid unnecessary functionality...
Mapping<br />What the user expects to happen when they interact with the interface is exactly what should happen<br />
Visibility<br />Important information should be the most visible and less important information should be less visible<br ...
Feedback<br />User should always be in control of the interface and not the other way around<br />
Consistency<br />Like-items should always be displayed and act the same way across the entire application (and even betwee...
Satisfaction<br />How much the user enjoys or dislikes using the software<br />http://www.flickr.com/photos/adunne/2862856...
Design Guidelines<br />
1. Design for Simplicity<br />Relate visual precedence to task importance<br />Reduce functionality<br />Keep navigation n...
2. Design with Small Screen in Mind<br />Minimize user input<br />Minimize vertical scrolling and avoid horizontal scrolli...
3. Provide Useful Feedback<br />Identify critical feedback<br />Employ alternative feedback modalities intelligently<br />...
4. Maintain Existing Design Standards<br />Use Existing Standards<br />Use Real World Metaphors<br />
5. Respect both the physical and mental effort<br />Use wizards to simplify complex interactions<br />Design for efficienc...
Meeting Universal Design Challenges<br />Device Usability<br />Discoverability of application<br />Annoyances imposed on o...
Context of Use<br />http://www.giantant.com/publications/mobile_context_model.pdf<br />
Mobile UI Standards<br />Apple iPhone<br />http://tuvix.apple.com/iphone/library/documentation/UserExperience/Conceptual/M...
Usability Testing<br />
Heuristic Evaluation<br />Systematic evaluation of an interface against a standard set of usability rules (heuristics)<br ...
Interface Design Heuristics<br />Visibility of system status<br />Match between system and the real world <br />User contr...
Usability Testing in a Lab<br />Scenario Based testing<br />Participants are recruited (7 – 9)<br />Up to 1.5 hours per se...
Upcoming SlideShare
Loading in …5
×

Mobile UI Design – User Centered Design and UI Best Practices

75,159 views

Published on

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

Published in: Technology, Business
  • Login to see the comments

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 />selma@openroad.ca<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 />http://www.flickr.com/photos/jamescridland/346988504/<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 />http://www.flickr.com/photos/adunne/286285676/<br />http://www.flickr.com/photos/cmbellman/2349786756/<br />http://www.flickr.com/photos/hamster95/2178602835/<br />http://www.flickr.com/photos/torquil/3609784146/<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 />http://www.giantant.com/publications/mobile_context_model.pdf<br />
  34. 34. Mobile UI Standards<br />Apple iPhone<br />http://tuvix.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html<br />Nokia<br />http://www.forum.nokia.com/Tools_Docs_and_Code/Documentation/Usability/UI_Style_and_Visual_Guidelines.xhtml<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 />

×