Mobile UI Design – User Centered Design and UI Best Practices

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

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

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

User Centered Design

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

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

Design and Implementation

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

Usability Evaluation
Conduct usability evaluation on the final design
Work with the design and development team to improve the product based on evaluation results
Repeat this process (production iteration) until the organizational/business
goals are met

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

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

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

Learnability
Efficiency
Memorability
Error Recovery
Simplicity
Mapping
Visibility
Feedback
Consistency
Satisfaction

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

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

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

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

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

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

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

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

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

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/

Design Guidelines

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

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

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

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

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

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

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

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

Usability Testing

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

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

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

Tour of Wavefront Usability Lab
14th floor

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)