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

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.
Topics Covered<br />Introduction User Centered Design principles<br />Interaction Design Principles<br />Design Guidelines<br />Usability testing<br />

4.
User Centered Design<br />

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.
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.
Design and Implementation <br /><ul><li>Revise user interface based on concept evaluation

8.
Apply style and look and feel to design

9.
Create the user interface using standards-compliant code

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.
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.
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.
Understanding the Contexts of Use<br />Think of the whole experience:<br />Environment<br />Time<br />Device<br />Culture<br />

14.
Interaction Design Principles<br />

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.
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.
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.
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.
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.
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.
Mapping<br />What the user expects to happen when they interact with the interface is exactly what should happen<br />

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.
Feedback<br />User should always be in control of the interface and not the other way around<br />

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.
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.
Design Guidelines<br />

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.
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.
3. Provide Useful Feedback<br />Identify critical feedback<br />Employ alternative feedback modalities intelligently<br />Ensure quick system response time<br />

30.
4. Maintain Existing Design Standards<br />Use Existing Standards<br />Use Real World Metaphors<br />

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

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.
Context of Use<br />http://www.giantant.com/publications/mobile_context_model.pdf<br />

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.
Usability Testing<br />

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.
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.
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.

40.
Tour of Wavefront Usability Lab<br />14th floor<br />

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 />