1
Lecture 13: Web Usability
Wendy Liu CSC309F – Fall 2007
2
Outline
Web Usability Principles
Usability Evaluations
3
What Makes Web Application Development Hard?
Target audience can be difficult to define
Due to the global nature of the Web and the wide range of demographics
Diversity in end user configurations
Hardware, software, browsers, connectivity, and bandwidth
Short development schedules
Little time to incorporate user-centred design techniques
Keeping users interested is challenging
User has many options and has not made any 4
Top Ten Web Design Mistakes
1. Legibility problems
2. Non-standard links
3. Excessive use of Flash
4. Content that's not written for the web
5. Bad search
6. Browser incompatibility
7. Cumbersome forms
8. No contact information or other company info
9. Frozen layouts with fixed page widths
10.Inadequate photo enlargement [Nielsen, 2005]
http://www.useit.com/alertbox/designmistakes.html
5
Usability
Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use
[ ISO 9241 Specification: Ergonomic Requirements for Office Work with Visual Display Terminals ]
A usable Web interface is one that is accessible, appealing, consistent, clear, simple, navigable and forgiving of user blunders
[ Murray and Costanzo, Usability and the Web: An Overview, August 1999 ]
Usability problems refer to aspects that make the application ineffective, inefficient, and difficult to learn and use
6
Why Usability Matters?
Web users are notoriously impatient and fickle
Bad usability may result in
Loss of clients or reduced revenues due to unsuccessful transactions
Users unable to find the information they need
Determine the acceptance level of a web application
Is it easy to find useful information
Is it organized and well-structured
Access and navigation
Web Usability Principles
Usability Principles
Learnability
Easy to learn the functionality and behavior of the system
Easy to find what services are available and how to look them up
Efficiency
A high level of attainable productivity
Easy to reach content and orient oneself within the site
Few errors
Help users to avoid errors and recover from errors easily
E.g., correct data still in the form after using the back button
9
Usability Principles (Cont’d)
Memorability
Easy to remember the system functionality
So to avoid re-learning
Easy to re-orient oneself on site/page
User satisfaction
Make the system pleasant to use
Make the user feel in control and understand the content and site navigation mechanism
[Nielsen’93]
10
Design Dimensions
Data/content
Hypertext links/navigation
Presentation (UI)
Focus on information finding, browsing, and user orientation
11
Content Visibility
Core information concepts
Content objects and classes
Answers to user’s (information) requests
Hypertext modularity
Help users to identify location of core concepts
Organize hypertext into areas
Group pages of homogeneous content together
Define areas as global landmarks accessible through links
Use global navigation bars to display on all pages
Within each area, define most representative pages as local landmarks
Reachable in local navigation bars, display on pages of the area
(Landmarks – highlighted content)
To enhance user orientation, learnability, memorability, and error recovery
12 local navigation bar
global navigation bar
page navigation bar
Example
13
Navigation
Navigating access
Access paths
Multi-level index
Navigate from pages with high visibility (e.g., home page) to pages of core concepts
Match the conceptual content hierarchy
Direct access
Keyword-based search mechanisms
One-step jump to desired information
14
Accessibility
Universal access by any class of users and technology
Properties of markup that make page “readable” by technologies assisting impaired users
Cross-modality/device access
E.g., text to voice
Rules of thumb
Separating presentation from content and navigation design
Augmenting multimedia content with textual descriptions
Creating documents that can be accessed by different types of hardware devices
E.g., pages should work without a pointing device
Nielsen’s “Golden Rules”
Visibility of system status
Keep users informed about what is going on, through appropriate feedback within reasonable time
Mapping between system and the real world
Speak the users' language
With words, phrases and concepts familiar to the user
Follow real-world conventions
Making information appear in a natural and logical order
User control and freedom
Users may choose system functions by mistake and need a
"emergency exit" to leave the unwanted state
Support undo and redo
Consistency and conformance to conventions
Do different words, situations, or actions mean the same thing
Follow platform conventions
Nielsen’s “Golden Rules” (cont’d)
Error prevention
Eliminate error-prone conditions
Check for errors and provide confirmation option before committing to an action
Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible
The user should not have to remember information from one part of the dialogue to another
Instructions for use of the system should be visible or easily retrievable whenever appropriate
Flexibility and efficiency of use
Allow users to tailor frequent actions (expert users)
17
Nielsen’s “Golden Rules” (cont’d)
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed
Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility
Help users to recognize, diagnose, and recover from errors
Error messages should be expressed in plain language
Precisely indicate the problem
Constructively suggest a solution
Help and documentation
Easy to search
Focused on the user's task
List concrete steps to be carried out
18
Good Design Guidelines
Text users can read
Content that answers their questions
Navigation and search that help them find what they want
Short and simple forms (streamlined registration, checkout, and other workflow)
No bugs, typos, or corrupted data; no linkrot; no outdated content
19
Iterative Design Process Iterate
Iterate 1. Design
Guidelines for how to organize the application by means of usable solutions
Prevent designers from adopting solutions that can lead to unusable applications
2. Prototype implementation 3. Evaluation
Benchmarks for usability assessment
4. Deployment
20
Usability Evaluations
21
Evaluation Goals
Assess application’s functionality
Verify that users can easily retrieve and browse content
Verify that users can easily invoke available services and operations
22
Evaluation Categories
Formative evaluations
Take place during design stage
Check design team’s understanding of user requirements
Test design choices quickly and informally
Summative evaluations
Take place after product release
Identify user difficulties using the application
Help improve the final product or prototype
Evaluation Methods
User testing
Usability inspections
Web usage analysis
User Testing
Investigate how real users interact with applications
Representative sample of user population
Users perform a set of well-defined tasks
Investigator observes and gathers data
E.g., execution time, number of errors, user satisfaction
Use the collected data to analyze and improve
application’s usability
25
User Test Steps
Define test goals
E.g., evaluate the effectiveness of a navigation bar, or the readability of labels
Define user sample
Should be representative of user population
About 5 users are enough to find 90% of usability problems
Select tasks and scenarios
Tasks need to be realistic
Define how you plan to measure usability
Metrics can be qualitative
e.g., user satisfaction; more difficulty to use
Or quantitative
e.g., task completion time, number and type of errors, rate of successfully accomplished tasks, number of times users required help
Prepare material and experimental environment
Conduct pilot to check and refine test procedure
Other issues:
Guarantee participant anonymity
Provide participants with test results
26
Data Gathering Techniques
Observation
Experimenter notes, also audio and video recording
Think aloud
Subject is asked to talk while performing task, and explain the action they are performing
Co-discovery
Two participants execute task together helping each other
Active intervention
Investigator asks participants to reflect upon the events of the test session
Surveys
Questionnaires and interviews
