Your SlideShare is downloading. ×
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

61,851

Published on

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

Published in: Technology, Business
14 Comments
255 Likes
Statistics
Notes
No Downloads
Views
Total Views
61,851
On Slideshare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
0
Comments
14
Likes
255
Embeds 0
No embeds

No notes for slide

Transcript of "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 />

×