Usability - Reducing Friction & Boosting Conversion

Reducing Friction &
USABILITY Boosting Conversion

Mike Perla
@mikeperla

@mikeperla #convcon linkedin.com/in/mikeperla mperla@fathomdelivers.com
©Fathom SEO, LLC, all rights reserved 2012

Who is this Guy?
Aren’t Charles Nicholls and Jay Berkowitz presenting in the other rooms?

 Mike Perla – Director of Conversion Optimization
 Fathom – Digital Marketing & Analytics with Results that Matter
www.fathomdelivers.com
 Director of Event Planning - Northeast Ohio Usability Professional’s
Association (NEOUPA)
 Advisory Board - WhichTestWon.com
 Founder - Conversion Rate Optimization Professional Association (CROPA)
 10+ years of experience in marketing, UX design, development, video
production, information architecture, etc.


ABILITY
Give Visitors the Ability to Convert


ABILITY
Give Visitors the Ability to Convert

readABILITY
useABILITY
absorbABILITY

readABILITY
Effortless Reading Comprehension

 Font Choice – typeface, weight & size
 Line Height

Monotype Corsiva is hard to read.
Verdana is much easier to read.

Limit web pages to the usage of
5 fonts or less. Less is better.


readABILITY

Measure the relative luminance of each letter (unless they are all uniform) using the formula:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:
if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
and RsRGB, GsRGB, and BsRGB are defined as:
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
The "^" character is the exponentiation operator.

Is your text W3C compliant?
Use Colour Contrast Check


readABILITY

A B

WhichTestWon.com

readABILITY

A B

+38.36%

WhichTestWon.com

readABILITY

"I notice that you use plain, simple language, short
words and brief sentences. That is the way to write
English--it is the modern way and the best way. Stick to
it; don't let fluff and flowers and verbosity creep in. When
you catch an adjective, kill it. No, I don't mean utterly, but
kill most of them--then the rest will be valuable."

Mark Twain, letter to D. W. Bowser, March 1880

Use a readability test
tool like read-able.com


readABILITY

Reading from a computer screen is 20-30% slower than reading from paper –
The University of Texas

The man who makes a success of an important The man who makes a success of an important
venture never wails for the crowd. He strikes out for venture never wails for the crowd. He strikes out for
himself. It takes nerve, it takes a great lot of grit; but himself. It takes nerve, it takes a great lot of grit; but
the man that succeeds has both. Anyone can fail. The the man that succeeds has both. Anyone can fail.
public admires the man who has enough confidence
in himself to take a chance. These chances are the The public admires the man who has enough
main things after all. The man who tries to succeed confidence in himself to take a chance. These
must expect to be criticized. Nothing important was chances are the main things after all.
ever done but the greater number consulted
previously doubted the possibility. Success is the
accomplishment of that which most people think can't The man who tries to succeed must expect to be
be done. criticized. Nothing important was ever done but the
greater number consulted previously doubted the
possibility. Success is the accomplishment of that
which most people think can't be done.

Reading on a computer screen
is 20-30% slower than paper


readABILITY

List items are small, discrete “chunks” that are physically easier on the eye and
easier to follow and comprehend.

Enterasys offers leadership network solutions for Take complete control of your wired and wireless
higher education in terms of manageability via a networks with OneFabric networking solutions:
single pane of glass, security for BYOD, and integrity
with fault-tolerance and life-time warrant. Our • Lowest total cost of ownership in the industry
OneFabric networking solutions deliver the best user • Manageable via a single pane of glass
experience, best-in-class application services, and
lowest total cost of ownership in the industry. • Security for BYOD (Bring Your Own Device)
• Integrity with fault-tolerance
• Best-in-class application services
• Life-time warranty

Visitors have time to read only 20% of
your copy during an average visit


readABILITY

A B

ABtests.com

readABILITY

A B

+15.21%

ABtests.com

useABILITY
Easy & Intuitive

 Usability issues in terms of conversion rate optimization is called “Friction”
 Friction arises from any element of the conversion process that causes
frustration, mental fatigue or confusion.

Friction causes aggravation,
mental fatigue or confusion


useABILITY
Easy & Intuitive

Sources of Friction
 Length of Pages – Scrolling in effort to find important content or information
 Page Layout and Design – Confusing layout, no visual hierarchy
 Button Design – Easy to overlook CTA; conflicting color usage
 Number of Options – Decision paralysis (3 or 4 options – Weinschenk)
 Nature and Number of Form Fields – Irrelevant fields or private information
 Form Field Layout – Form can appear shorter due to layout
 Number of Steps in Process – The less the better
 Page Load Speed – Faster the load speed, the better
 Discontinuity – Design, message, offer
Reducing page load speed &
the # of form fields is a no-brainer


useABILITY
Easy & Intuitive

A B


useABILITY
Easy & Intuitive

A B

+77.47%


useABILITY
Easy & Intuitive

A B

+368.5%


useABILITY
Easy & Intuitive

 Decision Support Tools aid the users’ decision making process. These tools
help users navigate though numerous options and with making difficult
decisions.
 Examples:
 Comparison Charts
 Quiz and Interactive Videos
 Search Options
 Calculators
 Comparison Shopping Options

Decision support tools can
help negate decision paralysis


useABILITY
Easy & Intuitive

 Determine what features or aspects are important to compare: price, ease-
of-use, ease of maintenance, weight, warranty length, etc.
 Decide the best metric for representing the comparisons: check mark,
number of stars, actual numbers, etc.
 Mark one as best value or most popular, further guiding selection
 Include tooltips for more details

Label an option as “best value” or
“most popular” when possible


useABILITY
Easy & Intuitive

Lead visitors through a decision
process with an interactive quiz


useABILITY
Easy & Intuitive

 Suggested search
 Basic search allows user to determine what specialties are available
 Advance search allows for more search criteria


useABILITY
Easy & Intuitive

 Calculators help with big-ticket item decisions
 Do I qualify for financial aid? What are the out-of-pocket expenses?
 What kind of loan should I get?


useABILITY
Easy & Intuitive

The “Technidiot” Test
 Does your Grandma, Mother or technically challenged friend find the website
intuitive to use?

DIY user testing - observe the
technically impaired


absorbABILITY
Making Sense of Digital Surroundings

Visitors form an opinion about your web page in 50 milliseconds and will leave
within 7 seconds or less.

So, what do your visitors see?

 Are the purpose, benefits and differentiators easy to locate and
comprehend?
 Is it easy to decipher what is most important on the page?
 Is it clear what action they are supposed to take?

You have milliseconds to make
an impact on a new visitor


absorbABILITY

Use the “Squint” Chrome App
to quickly assess your layout


absorbABILITY

A B

WhichTestWon.com

absorbABILITY

A B

+31.4%

WhichTestWon.com

absorbABILITY

A B


absorbABILITY

A B

+210%


Overcoming Objections
Use Hard Evidence

http://snook.ca/technical/colour_contrast/colour.html


Use Hard Evidence

http://www.read-able.com/


Use Hard Evidence

https://chrome.google.com/webstore/search/squint


Use Hard Evidence

 http://www.clicktale.com/
 Visitor Recordings
 Click Heatmaps
 Mouse Move Heatmaps
 Attention Heatmaps (Scroll)
 Form Analytics
 Conversion Funnels (Create funnels after collecting data)


Use Hard Evidence

Control Treatment

+77.47%


Use Hard Evidence

 http://www.userlytics.com/
 Scenario and tasks
 Up to 5 follow-up questions: Keep them open ended; if using yes/no make
sure to include “Why?”
 Tester Demographics: country, gender, age, education, employment and
family status (recruit your own participants or custom recruiting available)
 Review onscreen interactions, verbal feedback and facial expressions
 Set annotation points throughout video playback

Visit userlytics.com/cc and use
promo code FACC12


Use Hard Evidence

Control Treatment

+17.5%


Closing Thought
You Must Show ROI

Go beyond the % conversion lift
Tie your conversion efforts to $

$>%
You need to tie your
conversion efforts to ROI


Final Slide
Time to Say Goodbye

 Twitter @mikeperla & @CROProA
 LinkedIn http://www.linkedin.com/in/mikeperla
 LinkedIn Group: Conversion Rate Optimization Professionals’ Association
 www.cropa.net


Usability - Reducing Friction & Boosting Conversion

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Usability - Reducing Friction & Boosting Conversion

Ähnlich wie Usability - Reducing Friction & Boosting Conversion (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Usability - Reducing Friction & Boosting Conversion

Hinweis der Redaktion