Download Optimizing Self Service on the Web

Optimizing SelfService on the Web
Usability Matters
Chris Bond
Portland General Electric
October 22, 2008
What is usability?
2
Usability is the least amount of effort
required to complete a task in the least
amount of time with the fewest number
of errors or problems.
Usability can be observed, measured
and engineered into the design.
3
Why the Online Customer
Experience is Important
Online users today have limited time
and are becoming increasingly
impatient.
They have a low tolerance level for
tasks that require too much physical
and cognitive effort.
Expectations are continually being
established by previous online
experiences.
4
Risks of leaving the user out of the
design process
•
•
•
•
Site is unusable
Site is hard to navigate
Hard to find things
Waste time and money with
rework
• Increased support costs
• Angry callers
5
Functionality vs. Usability
Functionality
Usability
Is what the system
does for the end user
(is it useful?)
Is how easy it is for
the user to accomplish
goals (how easily can
it be used?)
Both are equally important to the success of a design.
Warning: Even if a product works “as specified” there is no
guarantee the customer will find it “useful” or “usable.”.
6
Functionality vs. Usability
Functionality
Usability
I love paying my
bills online
I just wish it didn’t take so
many steps
7
Performance vs. Preference
Performance
Preference
Speed of throughput,
number of errors,
problems, assists and
number of task
failures.
Feelings,
perceptions,
and subjective
experience.
Both are equally important to the success of a design.
They might love it but not be able to use it or it might be easy to
use and they hate it.
The consequences in the real world are the same: product failure.
8
Usability Principles
1.
2.
3.
4.
5.
Minimize the burden on the user’s memory;
use recognition versus recall.
Automate unwanted workload (function
allocation).
Reduce uncertainty; display data in a clear
and obvious manner.
Fuse data; reduce the cognitive load by
bringing together lower level data into a
higher level summation.
Group data in consistently meaningful ways
to decrease search time.
9
Usability Principles
6.
Help users recognize, diagnose and recover
from errors.
7. Include in displays only that information
needed by the user to complete the task (allow
users to focus on critical data, exclude
extraneous data not relevant to the task).
8. Use terminology that matches user goals and
intentions.
9. Provide adequate feedback (positive and
negative).
10. Put the user in control (personalization,
settings, etc.).
10
Usability Principles
1.
Minimize the burden on the user’s memory;
use recognition versus recall.
Billing & Payments
View Bill
Pay Bill
View Billing & Payment History
Enroll in Automatic Monthly Payments
Versus . . .
Search:
Go!
11
Usability Principles
2.
Automate unwanted workload (function
allocation).
Strengths of Humans
Strengths of Computers
• Good at recognizing patterns
• Good at making rapid responses
• Drawing upon past experiences
• Storing information accurately
• Adopting decisions to a situation
• Retrieving stored information
• Selecting alternatives
• Applying logical rules
• Inductive Reasoning
• Performing calculations
• Generalizing from observation
• Alert users of unexpected conditions
• Sensing unusual events
• Remembering facts
• Subjective evaluation
• Performing routine tasks
12
Usability Principles
3.
Reduce uncertainty; display data in a clear
and obvious manner.
Name
Address
City
State
V ZIP
13
Usability Principles
4.
Fuse data; reduce the cognitive load by
bringing together lower level data into a
higher level summation.
Categories of information; more choices,
fewer levels
14
Usability Principles
5.
Group data in consistently meaningful ways
to decrease search time.
Name of Bank
Name on Account
Bank Routing Number
Checking Account Number
Re-enter Account Number
15
Usability Principles
6.
Help users recognize, diagnose and recover
from errors.
The e-mail address appears to be incomplete. Be sure to
include all characters (such as the @ sign).
E-mail Address
Retype E-mail
[email protected]
4 chris@usabilityconcepts
16
Usability Principles
7.
Include in displays only that information
needed by the user to complete the task (allow
users to focus on critical data, exclude
extraneous data not relevant to the task).
17
Usability Principles
8.
Use terminology that matches user goals and
intentions.
Pay Your Bill
instead of . . .
E-billing, EZ Pay, EFT, OBV
18
Usability Principles
9.
Provide adequate feedback (positive and
negative).
19
Usability Principles
10. Put the user in control (personalization,
settings, etc.).
20
There is a disconnect between the
designer’s mental model and the user’s
mental model.
21
Myth: The User is Just Like Me
Typical Developer . . .
Typical User . . .
• Has incredibly good eyesight
• Prefers 1024 X 768 resolution
• Knows logo links to home page
• Thinks logos are nice to look at
• Understands privacy/security
• Thinks privacy/security are the same
• Knows how to use web controls
• Uses BACK button as main navigation
• Knows how to use dropdowns
• Often bypasses dropdowns
• Loves multiple browsers
• Is confused by multiple browsers
• Likes innovative new designs
• Doesn’t like surprises
• Blames the user
• Blames himself
22
The self-service conceptual model
bridges the gap between the designer and
the user.
23
Components of User Interaction
The User’s Mental Model
Intention
Action
Evaluation
Goal:
Intent:
Pay My Bill
Pay My Bill Online
Steps:
Sign-in or Register
Select Payment Method
Enter Payment Amount
Enter Bank Information
Authorize Payment
Interpret:
Detect and Correct Errors
Summarize: Verify and Submit Payment
Confirm:
Receive Online Confirmation
Receive E-mail Confirmation
24
Components of Self-Service
The Designer’s Mental Model
Home Page
Sign-In
Registration
Intention
Manage Your
Account
Account Summary
Navigation
Action
&
Fill-in Form
Wording
Error Handling
Evaluation
Summary
Page
Confirmation
Page
Confirmation
E-mail
25
Components of Usability
Bridging the Gap
Home Page
Sign-In
Registration
Intention
Manage Your
Account
Navigation
Action
&
Wording
Account Summary
Principles
Design Fill-in
Goals
Form
Guidelines
Error Handling
Evaluation
Summary
Page
Confirmation
Page
Confirmation
E-mail
26
Most utility web sites offering self-service
are poorly designed, requiring too much
physical and cognitive effort.
27
Objectives of the Self-Service
Conceptual Model
•
Provides a basis for understanding the needs and preferences of web
users
•
Establishes a common vocabulary for articulating the online experience
•
Promotes consistency in web design
•
Furnishes guidelines and standards for developing self-service
functionality
•
Fosters teamwork for more cohesive, cross-departmental web
development
•
Makes the development process more predictable by providing examples
of what deliverables should look like
•
Allows for informed decision-making based on knowledge of the
techniques for optimizing self-service on the web
•
Improves speed of throughput, adoption rates and customer satisfaction
•
Decreases task abandonment rates
•
Prevents web support phone calls
28
User Centered Design
The key to efficient online self-service is simplicity
in design. One of the best ways to achieve simplicity
is through task-oriented design. Focusing on
discrete tasks can:
• Eliminate unnecessary work steps and complexity
• Minimize the effort required to perform a selfservice task
• Reduce the overall cycle time
• Decrease errors and problems
• Improve customer satisfaction
29
How Do We Design for the User?
Human Factors Techniques:


Customer Personas, Task Analysis
Structured Interviews/Structured
Observations (task analysis)

Human Factors Research

Information Architecture/Card Sorts

User-Interface Style Guide

Error Handling and Feedback

Heuristic Reviews

Usability Testing
30
Usability Testing
Making design decisions strictly on designers’ preference
will not lead to optimal performance.
Usability testing of actual users with performanceoriented measures is the only reliable way to ensure
systems will meet acceptable levels of performance.
System designers frequently use their own
preferences to make decisions, and then
make major inferences about how users
will perform with their system.
Robert W. Bailey, Ph.D.
Human Factors International
31
Usability Testing
A formal study in which 10 - 12 users are observed
individually performing tasks with a system.
Findings and recommendations are made
according to objective data from the test such as
number of errors, task times, and problems.

Exploratory

Validation

Comparative
32
Usability Testing
Test Measures
Performance
Measures
Subjective
Measures
Observations
Task times,
number of
errors, number
of assists and
task failures.
Perceptions
such as
ease-of-use,
confidence,
convenience,
etc.
User actions
and reactions
as observed
during the task.
Data
Sheets
Post-test
Questionnaires
Problem
Lists
33
Usability Testing
Room Layout
Web Access
Task
Scenarios
Video
Camera
Data Sheets
Test
Participant
Observer
34
Usability Testing
Five myths . . .
1. Usability testing is the same as focus groups.
2. Usability tests identify system defects.
3. Usability testing can be done late in the project.
4. If the system functions as specified, all is well.
5. Only the really big problems need to be fixed.
35
Usability Testing
Why is it important?

Identifies design flaws early

Gets users involved in the design

Provides the basis for making improvements

Resolves disagreements among designers

Eliminates the risk associated with making design
assumptions
36
Usability Design Goals
should take about
Online registration
2:00
minutes
View bill or account balance
1:30
minutes
Pay bill
3:00
minutes
Auto Pay enrollment
2:30
minutes
Paperless Billing enrollment
2:00
minutes
Forgot Password
1:00
minute
Online search
2:00
minutes
37
Deconstructing Web Self-Service
Stage
Web Component
Usability Principles
Usability Guidelines
Intention
Home Page
Registration/Sign-in
Account Summary
Manage My Account
Clarity of Wording
Visibility
Breadth vs Depth
Design for Repeat Visits
Repetition
Categories of Information
Consistency
Use trigger words for
links.
Provide meaningful links
on the home page.
Action
Fill-in Form
Density – Screen Clutter
White Space
Vertical Orientation
Proximity of Data
Pre-population of Data
Left-justification
Progressive Disclosure
Show correct entry format.
Auto-skip between fixedlength fields.
Display data in logical
groupings.
Evaluation
Error Handling
Summary Page
Confirmation Page
Clarity of Wording
Ability to Undo or Edit
Feedback
Cross-selling
Return to Landing Page
Tell the user what went
wrong, why it’s wrong and
how to correct it.
Provide a Done button on
confirmation page.
38
Setting Design Goals
Design for breadth instead of depth.
This web site
displays key
tasks for the
primary users on
the home page.
39
Setting Design Goals
Keep links short.
Poor
I want to stop the hassle of writing checks
I need to make an online payment right now
I want to pay right now by credit card or debit card
Improved
Sign up for Auto Pay
Pay Bill
Pay by credit card or debit card
40
Setting Design Goals
Avoid anything that looks like advertising.
41
Setting Design Goals
Minimize bandwidth intensive graphics.
42
Setting Design Goals
Avoid pop-up dialogs.
43
Setting Design Goals
Do NOT use horizontal scrolling.
44
Setting Design Goals
Avoid vertical scrolling.
Important information
and key links that are
below the fold are
often never seen by
the user.
45
Setting Design Goals
Minimize attention-getting techniques.
46
Setting Design Goals
Avoid the use of pdf files.
47
Setting Design Goals
Minimize the number of steps required
to complete a process.
Self-Service Form
1
Summary Page
2
Confirmation Page
3
48
Setting Design Goals
Do not use splash pages.
• Users find them annoying
• They’re unnecessary
• They require an extra click
• And are generally a waste of time,
especially for repeat visitors
49
Inductive User Interface Design
A screen with a single, clearly stated, explicit
purpose is easier to understand than a page
without such a purpose.
50
Inductive User Interface Design
1.
Focus each page on a single, discrete task – overly
ambitious pages confuse users.
2.
State the task clearly – presence of conjunctions (“and”,
“or”) suggest the page is trying to do more than one task.
Additionally, imperative verbs suggest action and are much
more compelling to end users (e.g., pay your bill, sign-up for
paperless, etc.).
3.
Make the page contents match the task – do not include
superfluous information; ask only for the data necessary to
complete the task (pre-populate information where possible).
4.
Offer links to secondary tasks – but only upon task
completion.
51
Inductive User Interface Design
•
Use consistent screen templates – this reinforces predictability and
familiarity so users can easily develop a mental model of where things
are and how things work.
•
Provide screens for starting tasks – comprehensive landing pages
or specially designated areas on the page with task-oriented options
are the most effective ways for users to quickly identify and select the
task they want to accomplish.
•
Make it obvious how to carry out the task with the controls on the
screen – use standard links and controls versus flash and roll overs.
•
Provide an easy way to complete a task and start a new one – at
confirmation provide other options that are relevant to the task the user
has just completed.
•
Make the next navigational step obvious – use of a Next or Done
button.
52
Accessibility and the Web
click here
click here
click here
Save yourself time and money and
the price of a stamp by enrolling in our
monthly payment option, click here if
you would like to take advantage of
this wonderful opportunity, or you can
learn more . . . about this fantastic
offer that is sure to enhance your life.
Edit
Edit
Edit
click here
Can you read me now?
Can you read me now?
Alt Tag
Can you read me now?
Can you read me now?
Can you read me now?
53
Amount Due: $89.56
Pay Bill
Due Date:
3/15/2007 View Bill
Payments:
$78.92
View History
The Power of the Account Summary
56
57
After clicking on the Done button, users
are presented with the Account Summary.
In this example, the user sees what he
owes after sign-in, selects Pay Bill from the
Account Summary, follows the Pay Bill
steps, and then views his new account
balance at 0.00 after making the payment.
58
Contact Information
Chris Bond
(503) 522-5216
[email protected]