optimizing self- service on the web usability matters chris bond portland general electric october...

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

chris@usabilityconcepts.comE-mail 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

Contact Information

Chris Bond

(503) 522-5216

chris.bond@pgn.com