optimizing self- service on the web usability matters chris bond portland general electric october...
TRANSCRIPT
Optimizing Self-Service on the Web
Usability Matters
Chris BondPortland General Electric
October 22, 2008
2
What is usability?
3
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.
4
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.
Why the Online Customer Experience is Important
5
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
6
Functionality vs. Usability
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.”.
Functionality
Is what the system does for the end user (is it useful?)
Usability
Is how easy it is for the user to accomplish goals (how easily can it be used?)
7
Functionality vs. Usability
Usability
I just wish it didn’t take so many steps
Functionality
I love paying my bills online
8
Performance vs. Preference
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.
Performance
Speed of throughput, number of errors, problems, assists and number of task failures.
Preference
Feelings, perceptions, and subjective experience.
9
Usability Principles
1. Minimize the burden on the user’s memory; use recognition versus recall.
2. Automate unwanted workload (function allocation).
3. Reduce uncertainty; display data in a clear and obvious manner.
4. Fuse data; reduce the cognitive load by bringing together lower level data into a higher level summation.
5. Group data in consistently meaningful ways to decrease search time.
10
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.).
11
Usability Principles
1. Minimize the burden on the user’s memory; use recognition versus recall.
Search: Go!
Billing & Payments
View Bill
Pay Bill
View Billing & Payment History
Enroll in Automatic Monthly Payments
Versus . . .
12
Usability Principles
2. Automate unwanted workload (function allocation).
Strengths of Humans Strengths of Computers
• Good at recognizing patterns
• Drawing upon past experiences
• Adopting decisions to a situation
• Selecting alternatives
• Inductive Reasoning
• Generalizing from observation
• Sensing unusual events
• Subjective evaluation
• Good at making rapid responses
• Storing information accurately
• Retrieving stored information
• Applying logical rules
• Performing calculations
• Alert users of unexpected conditions
• Remembering facts
• Performing routine tasks
13
Usability Principles
3. Reduce uncertainty; display data in a clear and obvious manner.
NameAddressCity State ZIPV
14
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
15
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
16
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).
chris@usabilityconcepts
[email protected] Address
Retype E-mail
17
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).
18
Usability Principles
8. Use terminology that matches user goals and intentions.
E-billing, EZ Pay, EFT, OBV
instead of . . .
Pay Your Bill
19
Usability Principles
9. Provide adequate feedback (positive and negative).
20
Usability Principles
10. Put the user in control (personalization, settings, etc.).
21
There is a disconnect between the designer’s mental model and the user’s
mental model.
22
Typical Developer . . . Typical User . . .
• Has incredibly good eyesight
• Knows logo links to home page
• Understands privacy/security
• Knows how to use web controls
• Knows how to use dropdowns
• Loves multiple browsers
• Likes innovative new designs
• Blames the user
• Prefers 1024 X 768 resolution
• Thinks logos are nice to look at
• Thinks privacy/security are the same
• Uses BACK button as main navigation
• Often bypasses dropdowns
• Is confused by multiple browsers
• Doesn’t like surprises
• Blames himself
Myth: The User is Just Like Me
23
The self-service conceptual model bridges the gap between the designer and
the user.
24
Goal: Pay My BillIntent: Pay My Bill Online
Steps: Sign-in or Register Select Payment Method Enter Payment Amount Enter Bank Information Authorize Payment
Interpret: Detect and Correct ErrorsSummarize: Verify and Submit Payment Confirm: Receive Online Confirmation Receive E-mail Confirmation
Intention
Action
Evaluation
Components of User InteractionThe User’s Mental Model
25
Intention
Action
Evaluation
Manage Your Account
Summary Page
Confirmation Page
Confirmation E-mail
Navigation
&
Wording
Account Summary
Fill-in Form
Error Handling
Home Page Sign-In Registration
Components of Self-ServiceThe Designer’s Mental Model
26
Components of UsabilityBridging the Gap
Intention
Action
Evaluation
Manage Your Account
Summary Page
Confirmation Page
Confirmation E-mail
Navigation
&
Wording
Account Summary
Fill-in Form
Error Handling
Home Page Sign-In Registration
PrinciplesDesign GoalsGuidelines
27
Most utility web sites offering self-service are poorly designed, requiring too much
physical and cognitive effort.
28
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
29
User Centered Design
• Eliminate unnecessary work steps and complexity• Minimize the effort required to perform a self-
service task• Reduce the overall cycle time• Decrease errors and problems• Improve customer satisfaction
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:
30
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
31
Usability Testing
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
Making design decisions strictly on designers’ preference will not lead to optimal performance.
Usability testing of actual users with performance-oriented measures is the only reliable way to ensure systems will meet acceptable levels of performance.
32
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
33
Usability TestingTest Measures
Observations
Problem Lists
Performance Measures
Task times, number of errors, number of assists and task failures.
Subjective Measures
Perceptions such as ease-of-use, confidence, convenience, etc.
Post-test Questionnaires
Data Sheets
User actions and reactions as observed during the task.
34
Test Participan
t
Video Camera
Data Sheets
Observer
Web Access
Task Scenarios
Usability TestingRoom Layout
35
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.
Usability TestingFive myths . . .
36
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
Usability TestingWhy is it important?
37
Usability Design Goals
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
should take about
38
Deconstructing Web Self-Service
Stage Web Component Usability Principles Usability Guidelines
Intention Home PageRegistration/Sign-inAccount SummaryManage My Account
Clarity of WordingVisibilityBreadth vs DepthDesign for Repeat VisitsRepetitionCategories of Information Consistency
Use trigger words for links.Provide meaningful links on the home page.
Action Fill-in Form Density – Screen ClutterWhite SpaceVertical OrientationProximity of DataPre-population of DataLeft-justificationProgressive Disclosure
Show correct entry format.Auto-skip between fixed-length fields.Display data in logical groupings.
Evaluation Error HandlingSummary PageConfirmation Page
Clarity of WordingAbility to Undo or EditFeedbackCross-sellingReturn 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.
39
Setting Design Goals
Design for breadth instead of depth.
This web site displays key tasks for the primary users on the home page.
40
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
41
Setting Design Goals
Avoid anything that looks like advertising.
42
Setting Design Goals
Minimize bandwidth intensive graphics.
43
Setting Design Goals
Avoid pop-up dialogs.
44
Setting Design Goals
Do NOT use horizontal scrolling.
45
Setting Design Goals
Avoid vertical scrolling.
Important information and key links that are below the fold are often never seen by the user.
46
Setting Design Goals
Minimize attention-getting techniques.
47
Setting Design Goals
Avoid the use of pdf files.
48
Setting Design Goals
Minimize the number of steps requiredto complete a process.
1
Self-Service Form
2
Summary Page
3
Confirmation Page
49
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
50
Inductive User Interface Design
A screen with a single, clearly stated, explicit purpose is easier to understand than a page without such a purpose.
51
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.
52
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.
53
click here
click here
click here
click here
Can you read me now?
Can you read me now?
Can you read me now?
Can you read me now?
Can you read me now?
Alt Tag
Edit
Edit
Edit
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.
Accessibility and the Web
Pay BillAmount Due: $89.56
View BillDue Date: 3/15/2007
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
