Mobile UI Design – User Centered Design and UI Best Practices

Introduction to Mobile User Interface Design,[object Object],Selma Zafar,[object Object],OpenRoad Communications,[object Object],selma@openroad.ca,[object Object]

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

Topics Covered,[object Object],Introduction User Centered Design principles,[object Object],Interaction Design Principles,[object Object],Design Guidelines,[object Object],Usability testing,[object Object]

User Centered Design,[object Object]

User Requirements Analysis ,[object Object],Decide on product goals,[object Object],Determine the user needs,[object Object],Conduct one of many usability evaluations:,[object Object],Heuristic evaluation,[object Object],Competitive analysis,[object Object],User interviews and surveys ,[object Object]

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

Design and Implementation ,[object Object],[object Object]

Apply style and look and feel to design

Create the user interface using standards-compliant code

Design for accessibility,[object Object]

Launch and Maintenance,[object Object],Document everything,[object Object],Continue to collect feedback from users/customers to improve the product in future releases,[object Object],Surveys,[object Object],Focus Groups,[object Object]

You have an idea! Now what?,[object Object],Two toughest questions:,[object Object],Who are you designing for?,[object Object],What do you want them to do?,[object Object]

Understanding the Contexts of Use,[object Object],Think of the whole experience:,[object Object],Environment,[object Object],Time,[object Object],Device,[object Object],Culture,[object Object]

Interaction Design Principles,[object Object]

Interaction Design Principles,[object Object],Learnability,[object Object],Efficiency,[object Object],Memorability,[object Object],Error Recovery,[object Object],Simplicity,[object Object],Mapping,[object Object],Visibility,[object Object],Feedback,[object Object],Consistency,[object Object],Satisfaction,[object Object]

Learnability,[object Object],An interface should be easy to use from the first time the user interacts with it.,[object Object],Amount of functionality presented to the user should be limited to exactly what the user requires to get to their goal,[object Object]

Efficiency,[object Object],Number of steps it takes for a user to complete a task,[object Object],Key tasks should be made as efficient as possible,[object Object]

Memorability,[object Object],Interface should be easier to use each time the user interacts with it. ,[object Object],Frequency of use is the key factor in memorability,[object Object]

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

Simplicity,[object Object],Usual tasks should be easy and less common tasks should be possible. ,[object Object],Avoid unnecessary functionality and keep the visual design and layout uncluttered,[object Object]

Mapping,[object Object],What the user expects to happen when they interact with the interface is exactly what should happen,[object Object]

Visibility,[object Object],Important information should be the most visible and less important information should be less visible,[object Object],Understanding the users goals is critical ,[object Object]

Feedback,[object Object],User should always be in control of the interface and not the other way around,[object Object]

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

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

Design Guidelines,[object Object]

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

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

3. Provide Useful Feedback,[object Object],Identify critical feedback,[object Object],Employ alternative feedback modalities intelligently,[object Object],Ensure quick system response time,[object Object]

4. Maintain Existing Design Standards,[object Object],Use Existing Standards,[object Object],Use Real World Metaphors,[object Object]

5. Respect both the physical and mental effort,[object Object],Use wizards to simplify complex interactions,[object Object],Design for efficiency,[object Object]

Meeting Universal Design Challenges,[object Object],Device Usability,[object Object],Discoverability of application,[object Object],Annoyances imposed on others,[object Object],Part of a larger system (that has higher priority functions),[object Object]

Context of Use,[object Object],http://www.giantant.com/publications/mobile_context_model.pdf,[object Object]

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

Usability Testing,[object Object]

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

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

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

Mobile UI Design – User Centered Design and UI Best Practices

Mobile UI Design – User Centered Design and UI Best Practices

Mobile UI Design – User Centered Design and UI Best Practices

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Mobile UI Design – User Centered Design and UI Best Practices

Similar to Mobile UI Design – User Centered Design and UI Best Practices(20)

Recently uploaded

Recently uploaded(20)

Mobile UI Design – User Centered Design and UI Best Practices