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

1. Introduction to Mobile User Interface Design Selma Zafar OpenRoad Communications selma@openroad.ca

2. About me Senior User Experience Designer, OpenRoad Communications Instructor: Human Factors and Information Design Classes Langara College – CID Program My background: Degree in Human Kinetics from University of Windsor Specializing in Movement Science (Human Factors & Cog Sci) Have worked with: Nokia Microsoft YVR Mountain Equipment Co-op Ronald McDonald House Charities Telus Ontario Power Generation

3. Topics Covered Introduction User Centered Design principles Interaction Design Principles Design Guidelines Usability testing

4. User Centered Design

5. User Requirements Analysis Decide on product goals Determine the user needs Conduct one of many usability evaluations: Heuristic evaluation Competitive analysis User interviews and surveys

6. Conceptual Design, Prototypes, and Evaluation Sketch out a high-level product design Rapidly create visual representations (mockups) or interactive representations (prototypes) of the product. Evaluate usability through: Heuristic evaluation Focus groups Usability Testing Iterate design with evaluation results

8. Apply style and look and feel to design

9. Create the user interface using standards-compliant code

11. Launch and Maintenance Document everything Continue to collect feedback from users/customers to improve the product in future releases Surveys Focus Groups

12. You have an idea! Now what? Two toughest questions: Who are you designing for? What do you want them to do?

13. Understanding the Contexts of Use Think of the whole experience: Environment Time Device Culture

14. Interaction Design Principles

15. Interaction Design Principles Learnability Efficiency Memorability Error Recovery Simplicity Mapping Visibility Feedback Consistency Satisfaction

16. Learnability An interface should be 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 to their goal

17. Efficiency Number of steps it takes for a user to complete a task Key tasks should be made as efficient as possible

18. Memorability Interface should be easier to use each time the user interacts with it. Frequency of use is the key factor in memorability

19. Error Recovery In a perfect user interface, users should never be allowed to make a mistake http://www.flickr.com/photos/jamescridland/346988504/

20. Simplicity Usual tasks should be easy and less common tasks should be possible. Avoid unnecessary functionality and keep the visual design and layout uncluttered

21. Mapping What the user expects to happen when they interact with the interface is exactly what should happen

22. Visibility Important information should be the most visible and less important information should be less visible Understanding the users goals is critical

23. Feedback User should always be in control of the interface and not the other way around

24. Consistency Like-items should always be displayed and act the same way across the entire application (and even between applications). UI standards

25. Satisfaction How much the user enjoys or dislikes using the software http://www.flickr.com/photos/adunne/286285676/ http://www.flickr.com/photos/cmbellman/2349786756/ http://www.flickr.com/photos/hamster95/2178602835/ http://www.flickr.com/photos/torquil/3609784146/

26. Design Guidelines

27. 1. Design for Simplicity Relate visual precedence to task importance Reduce functionality Keep navigation narrow and shallow Avoid extraneous information on each screen Reduce or remove preferences Use Progressive Disclosure

28. 2. Design with Small Screen in Mind Minimize user input Minimize vertical scrolling and avoid horizontal scrolling Use hyperlinking effectively Provide Useful Error Messages Prioritize the information on each screen

29. 3. Provide Useful Feedback Identify critical feedback Employ alternative feedback modalities intelligently Ensure quick system response time

30. 4. Maintain Existing Design Standards Use Existing Standards Use Real World Metaphors

31. 5. Respect both the physical and mental effort Use wizards to simplify complex interactions Design for efficiency

32. Meeting Universal Design Challenges Device Usability Discoverability of application Annoyances imposed on others Part of a larger system (that has higher priority functions)

33. Context of Use http://www.giantant.com/publications/mobile_context_model.pdf

34. Mobile UI Standards Apple iPhone http://tuvix.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html Nokia http://www.forum.nokia.com/Tools_Docs_and_Code/Documentation/Usability/UI_Style_and_Visual_Guidelines.xhtml

35. Usability Testing

36. Heuristic Evaluation Systematic evaluation of an interface against a standard set of usability rules (heuristics) Completed by one or more usability professionals Findings are given a severity ranking and recommendations

37. Interface Design Heuristics Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation

38. Usability Testing in a Lab Scenario Based testing Participants are recruited (7 – 9) Up to 1.5 hours per session Benefits Observe sessions to get first hand feedback Helps to vet design concepts with target users

40. Tour of Wavefront Usability Lab 14th floor

41. References Masterton, C; Mauney, D "Small Screen Interfaces" in Beyond The GUI edited by Philip Kortum (Morgan Kaufmann, 2008). Mayhew, D. The Usability Engineering Lifecycle: A Practitioner's Handbook for User Interface Design (Morgan Kaufmann, 1999)