top 10 usability challenges and how to solve...

Top 10 Usability Challenges –

and How to Solve Them

Bill Albert Executive Director, Design and Usability Center

Bentley University

Ryan Hennig

Vice President, Marketing

Miles Kimball Company

Usability Challenges:

Pre-Checkout Experience

Usability Challenge #1: Pre-Checkout Smart and Easy Search

• Search should be in a predictable location (top) and easy to notice (high visual

contrast).

• Search input box should be big enough to easily enter text.

• Search should guide the user to help narrow down the possibilities.

• The search engine should be smart and be able to differentiate different types of

terms, such as item numbers, ISBN’s, ticker symbols, etc.

• Search results should not show too much information – focus on the results, and

not ancillary information that is likely to be a distraction.

• Search results should show the most relevant results at the top, with a minimal

amount of distractions.

Usability Challenge #1: Pre-Checkout Smart and Easy Search

Tip: Search should be in a predictable location and easily noticed.

Do This

Not That

Usability Challenge #1: Pre Checkout Smart and Easy Search

Do This

Not That

Tip: Guide users with search, help them narrow the results.

Usability Challenge #1: Pre Checkout Smart and Easy Search

Do This Not That

Tip: Be flexible with search. Users want the search engine to know what

you are typing and return relevant results.

Usability Challenge #2: Pre-Checkout Intuitive Product Categories

• Avoid jargon, organizational, and overly stylized terms. Product categories

or labels need to make sense to the typical user, no special domain

knowledge or guessing should be required.

• Product categories should be at the same conceptual level (don’t mix

computers with sand paper at the same level).

• Product categories should have a minimum amount of conceptual overlap so

users are confident of their choices, and always feel they are on the correct

path.

• Allow users multiple ways to find the same product, even though the product

may “live” in just one area.

• Select the right level of granularity for product categories, so users don’t

have to look at every single product, or click more than 4-5 levels to find what

they are looking for.

Usability Challenge #2: Pre-Checkout Intuitive Product Categories

Do This Not That

Tip: Show the right level of granularity

of product categories, letting the user

drill down.

Usability Challenge #2: Pre-Checkout Intuitive Product Categories

Do This

Not That

Tip: Allow the user to access the

same product(s) in multiple ways.

Usability Challenge #2: Pre-Checkout Intuitive Product Categories

Do This Not That

Tip: Be careful with the product category labels.

Avoid jargon, organizational terms, or overly

stylized terms.

Usability Challenge #3: Pre-Checkout Narrowing Down Choices

• Include an easy and obvious way to filter a list of products. Filters are

typically located on the left side of the page.

• Let users filter in different ways, such as by price, brand, specs, date, and

other relevant attributes.

• Show the number of products within each criteria, so users know what to

expect from each filter applied.

• Don’t let users easily get to “0” results – they should understand the impact

each filter has on their results.

• Filters should automatically update the results, and allow the user to switch

their attention back/forth from the filters to the results page without having

to leave the page.

Usability Challenge #3: Pre-Checkout

Narrowing Down Choices

Tip: Show the number of results within each category.

Do This Not That

Usability Challenge #3: Pre-Checkout

Narrowing Down Choices

Do This

Not That

Tip: Provide relevant filters – know the user and their needs. Allow users

to expand/contract different filters if too many.

Usability Challenge #4: Pre-Checkout Showing Relevant Product Information

• Provide overview information about the product that is helpful to the user

and supports their decision making process. Address the most important

points about the product first.

• Provide information such as Photos, reviews, specs, and accessories –

use progressive disclosure (not showing all the information at once).

• Allow users to easily compare products, based on key features. Users

want to make sure they are choosing the right product.

• Don’t distract the user with irrelevant information or unrelated products –

let them focus on the product.

• Make it easy and obvious how to add the product into their shopping cart,

or save the product if they want to come back later.

Usability Challenge #4: Pre-Checkout Showing Relevant Product Information

Do This

Tip: Show relevant product

information, such as a

summary, photo, reviews,

videos, etc. Don’t throw

everything at the user at

once.

Usability Challenge #4: Pre-Checkout

Showing Relevant Product Information

Not That

Tip: Only show relevant information. Every other pixel is a distraction

from purchasing.

Usability Challenge #4: Pre-Checkout

Showing Relevant Product Information

Do This

Not That

Tip: Make product comparisons obvious, easy, and relevant.

Usability Challenge #5: Pre-Checkout Seamless Experience Across Touch Points

• Maintain a common look and feel across each touch point, including

visual design, interactions, terminology, and tone.

• Carry information about users across channels. Remember who they are,

and what they do/want.

• Each channel should be contextual – understanding the most common

use cases with each platform.

• Eliminate unnecessary touch points – don’t force the user to different

channels.

Examples from Miles Kimball:

Pre-Checkout Experience

Usability Challenge #1 Pre-Checkout: Smart and Easy Search

How would you

design your site

differently if your

average customer

age was:

18

or 70

Know Your

Audience!!

Usability Challenge #1 Pre-Checkout: Smart and Easy Search

Multiple Levels of Search Results = KISS Principle

1. Product Search Results

Usability Challenge #1 Pre-Checkout: Smart and Easy Search

Multiple Levels of Search Results = KISS Principle

2. Item Detail Results

Multiple Levels of Search Results = KISS Principle

3. Information/FAQ Results

Usability Challenge #1 Pre-Checkout: Smart and Easy Search

Usability Challenge #2: Pre-Checkout Intuitive Product Categories

How do they shop?

What terminology do they use?

Know Your Audience!!

Usability Challenge #3: Pre-Checkout

Narrowing Down Choices

Usability Challenge #3: Pre-Checkout

Narrowing Down Choices

Usability Challenge #3: Pre-Checkout

Narrowing Down Choices

Usability Challenge #3: Pre-Checkout

Narrowing Down Choices

Limited the number of

options in our filters

We had to aggregate:

Sizes

Colors

Vary our filters by

product search

Usability Challenge #4: Pre-Checkout

Showing Relevant Product Information

From To

Usability Challenges:

Checkout Experience

32

Usability Challenge #6: Checking Out Collecting “Just Enough” Personal Information

* Jared Spool, The $300 Million Button:

http://www.uie.com/articles/three_hund_million_button

Your user has selected products, put them in the

shopping cart, and is ready to check out.

They want to get through the process quickly without

being asked for unnecessary information about

themselves:

“I'm not here to enter into a relationship.

I just want to buy something.”*

You want to know everything about your user so you

can cross-sell and reach out to them in the future.

33

Usability Challenge #6: Checking Out Collecting “Just Enough” Personal Information

Do This

Not That

Tip: Let users check out without forcing them to register or

set up an account and password.

34

Usability Challenge #6: Checking Out Collecting “Just Enough” Personal Information

Tip: When asking for information that might be perceived as irrelevant

(e.g., phone number) to the checkout process, provide an explanation for

why this is being asked and reassurance for how it will be used

Do This

Not That

35

Usability Challenge #6: Checking Out Collecting “Just Enough” Personal Information

Tip: Only ask for information that’s truly necessary for the purchase. Any

other information should be optional, and defaulted to unselected.

Not This Or That

36

Usability Challenge #7: Checking Out Supporting and Validating the Checkout Decision

• Users may have questions about shipping, returns, the safety of

their credit card information, or other aspects of their order.

• If they can’t get these questions answered, they may abandon

their purchase on your site and go to another site instead.

37

Usability Challenge #7: Checking Out Supporting and Validating the Checkout Decision

Tip: Highlight the security of the site during the checkout process.

Do This

38

Usability Challenge #7: Checking Out Supporting and Validating the Checkout Decision

Tip: Provide easy access to shipping costs and descriptions.

Do This Not That

39

Usability Challenge #8: Checking Out Preventing and Correcting Errors

• Users want to complete the checkout process quickly, and have

strong expectations for how certain information should be entered

(based on their experience using other sites).

• If they make a mistake entering information, they want to be told

exactly what they need to do in order to correct their mistake.

40

Usability Challenge #8: Checking Out Preventing and Correcting Errors

Tip: Allow users to enter information in any format (e.g., phone

numbers, addresses).

Do This Not That (image from the No Dashes Or Spaces Hall of

Shame: http://unixwiz.net/ndos-shame.html)

41

Usability Challenge #8: Checking Out Preventing and Correcting Errors

Do This Not That

Tip: If the user makes an error, be

specific about what needs to be done to

correct the error. Use more than just

color to indicate the problem!

Examples from Miles Kimball:

Checkout Experience

Usability Challenge #6: Checking Out Collecting Just Enough Personal Information

From To

Usability Challenge #8: Checking Out Preventing and Correcting Errors

Usability Challenge #8: Checking Out Preventing and Correcting Errors

From

To

Usability Challenges:

After the Purchase

47

Usability Challenge #9: After the Purchase Checking on Order Status and Returns

• Once a user has completed a purchase, their relationship with you

is not over.

• They are expecting a confirmation for their order, estimated arrival

and tracking information, and reassurance that they will receive

what they purchased.

48

Usability Challenge #9: After the Purchase Checking on Order Status

Tip: Send a confirmation email

immediately after the user has

completed a purchase,

including estimated arrival dates

and links for tracking the order.

Do This

49

Usability Challenge #10: After the Purchase Remember the User

If a user returns to a site they’ve previously purchased

from, they expect the site to:

• Remember who they are and what they’ve done, and

• Make that information available to them.

50

Usability Challenge #10: After the Purchase Remember the User

Tip: Provide easy access to order status for current orders and

information about previous orders.

Do This

51

Usability Challenge #10: After the Purchase Remember the User

Tip: Remember the

information they’ve

previously used for

purchasing, and

default to those

options.

Do This

Examples from Miles Kimball:

After the Purchase

Usability Challenge #9: After the Purchase Checking Order Status

Providing Immediate

Confirmation of the Order.

- If you do not, the

customer will wonder if the

order went through and will

contact you!

Usability Challenge #9: After the Purchase Checking Order Status

What if order confirmations are delayed from your system?

Questions?

Bill Albert, PhD

Executive Director, Design and Usability Center

Bentley University

walbert@bentley.edu

www.usability.bentley.edu

@UXMetrics | @BentleyDUC

Ryan Hennig

Vice President, Marketing

Miles Kimball Company

RHennig@mileskimball.com

www.mileskimball.com