Conversion Optimization and Site Usability

Milestone Confidential
Conversion Optimization
and Site Usability

2
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Milestone at a glance
Drive online revenue and profitability for our clients
Silicon Valley ~ Chicago ~ India
180 employees ~1500 Clients
Digital marketing software and services for hospitality

3Milestone Confidential
Conversion Optimization
by Improving Usability
Information
Architecture
Color &
Images
Speed &
Performance
Legibility &
Eyetracking

Key Component of Conversion
Optimization
Conversion Optimization by
Improving Usability
Information Architecture
Page Layout
Categorization
Organization
Labeling
Prioritization
Navigation
Primary
Secondary
Third Level
Footer
Utilities
Site Search
Bread Crumbs
Eyetracking/Legibility
Legible
Scannable
Eyetracking
Heat Maps
Colors & Images
Geography
Gender
Psychology
Legibility
Speed and
Performance
Speed
Avoid flash
Avoid too many
images
Avoid image
text
Avoid too many
scripts
Performance
Devices – I, Preview,
Mobile, Handheld, Print
Browser
CMS
Social & Natural Search

Usability
 Usability tests measure:
 Whether or not participants complete a
desired task or a series of tasks.
 How quickly can a visitor book a
hotel?
 How quickly can a visitor book a
package?
 How participants navigate and
use a website?
 Can visitor find the information they
need: things to do, location and
directions, who to contact, etc

Case study
Good Design Bad Design

What is the point of usability?
Target your
audience
Improve
Conversions
Deliver USP

Jacob Nielsen Usability Study

Usability Testing
Audience
Navigation
Content
Distractions
Design
Implementation

Information Architecture - Navigation
 Types of Navigations
 Primary navigation
 Home, Location, Accommodation,
Services & Features, Things to Do,
Meeting or Dining, Contact Us
 Secondary navigation
 Specials & Packages, Manager’s
Special
 Tertiary level navigation
 Photo Gallery, Emap, Email Offers,
Guest Reviews
Primary
Tertiary
SecondarySecondary

Expectations
Company logo is
expected to be
on the top, left
hand side.

Information Architecture - Page Layout
 Categorization – classification,
arranged in a hierarchical
structure.
 Organization - arranged by Task,
topic, audience
 Labeling – unique, easy to
understand and scannable.
 Prioritization – Number of links
you will put in navigation.
2
2
1
3

Pass the 6-foot test
 Usability tip:
 Headline,
 Hero shot (image/video)
 CTA should be legible
CTA
Headline
Hero shot

Pass the 5-second test
 Who is the company?
 Do they appear
credible?
 What are they
offering?
 What’s the call to
action?
Credibility and Company
USP
Call to Action?

CTA – What and Why
 Always present a CTA
with both “what” and
“why”. A good CTA
completes this
sentence:
 What/Why CTA lines can
be interchangeable
Why?
What?

 When information is not
properly architected
 Banner blindness
 Mismatched priority - too many
types of interface elements
 Unclear terminology
 Leads to task failure
1
2
3

Distractions

Links on the right
look like ads ->
ignored by visitors

Eyetracking
/Legibility

Legibility
 Legibility refers to the clarity of visually-presented text, affected
for instance by:
 Size of the text
 Contrast between similar letters
 Quality of printing or display (whether the text is damaged or blurred)
 Line spacing
 Word spacing
 Shape and style of individual letters

Scannable Text
 highlight keywords;
 use meaningful subheadings;
 use bulleted lists;
 include one idea per paragraph;
 use “inverted pyramid” style,
starting with the conclusion;
 half the word count or less of
conventional writing;

Break up
paragraphs into
scannable chunks

How people spend time? – Eyetracking
Eyetracking – How Do People
Spend Time?

Ultimate Heat Map –
People Looking for Content

Superfluous Images:
Nielsen, J. and Pernice, K. (2010). Eyetracking Web
Usability. Berkeley, CA: New Riders. Page 198.
Users are ignoring
the large graphic
images and
focusing on site
navigation and
text.

Colors & Images

Colors
 Geography
 India, Yellow = Success
 Gender
 Men – Blue, Green, Black, Red
 Women – Blue, Purple, Green,
Red
 Psychology
 Blue - Dignified, trustworthy,
professional
 Black - Powerful, sophisticated,
strong, sexy
 Orange - Energy, cheerfulness,
activity, excitement
 Legibility
 Black/White offers highest
contrast
 Target Audience
 Primary colors are often used for
midscale and tertiary or
complex colors are used for
upscale
1
3
6
5

Colors
Colors associated with trust: Colors associated with high quality:
Colors associated with cheap/inexpensive: Colors associated with fun:

Psychology of Colors
Color name Meanings
Black Powerful, sophisticated, strong, expensive
Blues Dignified, trustworthy, professional, secure,
Browns Natural, durability, reliability, warmth, comfort
Greens Nature, growth, fruitfulness, freshness, renewal
Grays Dignified, intelligent, high tech, neutral
Oranges Energy, cheerfulness, activity, excitement
Purples Spirituality, mysticism, magic, faith, dignity
Reds Energy, warmth, strength, impulse, powerful
White Pure, spiritual, clean, sterile, truthful, peaceful
Yellows Cheerfulness, hope, vitality, luminosity

Colors
 Best Practices
 Think about target audience and message you like to communicate before
deciding colors
 Try to limit use of two to three colors on the site. Too many colors can create
clutter or confusion
 Consider your target audience - Geography, Gender, Psychology and
Culture
 Use color consistently. For example, if you use a shade of blue to
communicate clickable text, do not use that same color (or formatting) to
communicate unclickable text.
 Use colors judiciously. For example, the colors orange or yellow can be used
to display sale prices or specials on a travel site.

Complementary color for CTA
 My rule: “clockwork
conversion color”. Do not use
color within 15 minutes (+/-7)
on color wheel “clock” to
ensure it stands out.
 Use true color for CTA. Tints
(+white) and shades (+black)
for all other
Complimentary color

Images
 Images Best Practice:
 Choose images that are
highly relevant to the focus
of each page
 Original images preferred

Speed and
Performance

Speed & Performance
Minimize HTTP
requests
( Reduce number of requests
going to the server to improve
page performance)
Minify JS & CSS
(Source code on page
should be kept minimum
to reduce download time)
Optimized
images
(Reducing size of images
reduces load time and
increase page load speed)
GZIP components
(Gzipping files reducing the
size of the files sent from your
server, reducing sizes of
pages by up to 70%)
Just one second delay in page-load can cause
7% loss in customer conversions!

Page Speed
 Fast and optimized
pages lead to
 Visitor engagement
 Retention
 Conversions
 Tools to measure site’s
speed
 Page Speed
 Yslow
 WebPagetest
 Google Webmaster

Milestone Client Site
Minify CSS
Optimized
images
Minify JavaScript

High Performance Site – 14 Rules
 Tracking Web Performance
 Where is time spent?
 The Performance Golden
Ruleshttp://stevesouders.com
/hpws/rule-min-http.php
 Rule 1: Make Few HTTP Request
 Rule 2: Use a Content Delivery
Network
 Rule 3: Add an Expire Header
 Rule 4: Gzip Compression
 Rule 5: Put Stylesheets at the Top
 Rule 6: Put Scripts at the Bottom
 Rule 7: Avoid CSS Expressions
 Rule 8: Make Javascripts and CSS
External
 Rule 9: Reduce DNS Lookup
 Rule 10: Minify Javascript
 Rule 11: Avoid Redirects
 Rule 12: Remove Duplicate Scripts
 Rule 13: Configure Etags
 Rule 14: Make Ajax Cacheable

Crawlability
HTML CSS
< > xml
HTML
validation
performed on W3C
to make sure page
complies with HTML
standards and helps
cross-browser, cross-
platform and future
compatibility
CSS
validation
to ensure no errors
found in style sheets
and all browsers aim
towards compliance
with the existing
standards
Link checker
to ensure no broken
links on pages and all
links are properly
working
Canonical
tags
to avoid duplicate
content issues and
penalties
Sitemap XML
for website & images
submitted to Google
Webmaster

Milestone Client Site
HTML validation
CSS validation
Sitemap
submission
Link checker

Relevant Fresh Engaging Search
Optimized Content
Optimized meta
tags are structured tags
that go in page head
section so the browser can
understand it
Heading tags –
H1, H2, H3 are present in
body content
Photos,
images and
map optimized
and indexed for
image and map
search
meta <h1>
Schemas for
semantic web
is micro data and rich
snippets that helps search
engine index most critical
data fast and helps
improve click-through rates

Responsive Websites - Desktop, Mobile,
Tablet Versions
DESKTOP SITE TABLET SITE MOBILE SITE
 New Gestures
 Jquery Swiping
(photo gallery)
 Pixel Width of
average finger

Case Studies

Event Form

Sort and Simple Forms
 Cut any questions that are not
needed.
 Don't make fields mandatory
unless they truly are.
 Support autofill to the max by
avoiding unusual field labels
(just use Name, Address, etc.).
 Set the keyboard focus to the
first field when the form is
displayed. This saves a click.
 Allow flexible input of phone
numbers, credit card numbers,
and the like.

Navigation

Clear Navigation

47
Millwood Inn
2.4 %

48

Implementation

Key take aways
 Understand what your customer want
 Optimize your site - Images, Colors, Download time
 Focus on your Site Architecture and Page layout - Simple, Easy
 Set up conversion funnels and goals
 A/B testing will humble even the greatest optimizers
 Remember, if it is good for user, it is good for search engines

Thank You
Questions?
www.milestoneinternet.com
blog.milestoneinternet.com
http://twitter.com/milestonemktg
http://www.facebook.com/Milestoneinc

52
Know Great People?
http://jobs.milestoneinternet.com
 Director of Client Services
(Chicago)
 Recruiter (Chicago)
 Sr. Manager, Paid Search
(Chicago)
 Account Managers (Chicago
and Santa Clara)
 Social Media AM (Chicago)
 Social Media Account Manager
(Chicago)
Top Reasons to Work for Milestone
 Great place to learn with
phenomenal growth opportunity
 Work with a fun, amazing,
talented team
 Benefits: Medical, dental, vision,
401K, vacation, sick and holiday
pay
 Exciting and innovative work
environment
 Breakfast and Happy hour every
Friday
 Monthly events and quarterly
outings

53
Back ups

 Best practices:
 Site navigation should reflect the site’s information architecture
 Navigation labels should be distinguishable and look clickable
 Show locational breadcrumbs for current page
 Use descriptive links in body text
 Distinguish visited and unvisited links
 Implement clear and consistent visual affordance (clickable elements should
look clickable and non-clickable elements should not look clickable)
 Rule of thumb: Things that look alike should act alike

Images
 Choose simple images with a
single focus. Avoid busy
pictures or busy backgrounds

Culture has an effect
Red Yellow Green Blue White
China Happiness
Birth
Wealth
Power
Ming Dynasty
Heavens
Clouds
Heavens
Clouds
Death
Purity
France Aristocracy Temporary Criminality Freedom
Neutrality
Peace
India
Life
Creativity Success
Prosperity
Fertility
Krishna
Spirituality
Death
Purity
Japan
Anger
Danger
Grace
Nobility
Future
Youth
Energy Villainy Death
USA
Danger
Stop
Cowardice
Caution
Safety
Go Masculinity Purity
Galitz, W.O. (1998) The Essential Guide to User-Interface Screen Design. New York: Wiley.

Images
 Use compelling images of real
people doing real things

Images
 Best Practice:
 Choose images that are highly relevant to the focus of each page and use
them purposefully to enhance the message you are trying to communicate.
 Choose simple images with a single focus. Avoid busy pictures or busy
backgrounds (especially important with small thumbnails) so the focus and
purpose is explicit and easy to recognize
 Use compelling images of real people doing real things
 Original images preferred
 Less is more with images (Use the white space)

Optimization Parameters
Value Proposition
Relevance
Clarity
Anxiety
Distraction
Urgency

Analysis example
Clarity: Reservations box does not
stand out
Clarity: Telephone number is not
very visible
Distraction: Rotating banner
Anxiety: few reviews
Relevance: Free high speed
wifi – is.
Clarity: Hotel amenities are
not clearly defined

Target your audience

After re-design
Target the audience
What is
important
to them?

Most Valuable Links on Home Page

All Pages

Filtered All Pages

Special Packages

Segment: Visits with Conversions

Advanced Bed and Breakfast
Whimsical Winter: $0.00 / $0.57
Spring Super Saver: $0.00 / $0.49
Bed & Breakfast: $4.49 / $0.57
Total Turtle Package: $0.00 / $0.23
Dora & Diego Adventure Package: $0.00 / $0.33

Conversions

Five Simple Rules of Web Design
 Easy To Read Content
 Easy to Navigate
 Easy To Find
 Consistency of Design & Layout
 Download / Perception

Process
 Look at the website.
 Home Page
 Specials and Packages
 Main product pages (weddings, meetings, retreats, etc.)
 Evaluate content in Analytics
 Content -> Site Content -> All Pages
 Navigation
 Distractions
 Look at user activity in Analytics
 User Flow
 Conversions
 Site Search

Conversion Flow
First
Interaction
Second
Interaction
Third
Interaction
Home
Starting
pages
Rooms
Specials
Things to
Do
Ameniti
es
Locatio
n
BOOK
Benefits
 We can find places in the site
where we are losing traffic
 We can find the best path to
conversion
 We can see what type of
content is effective
 We can gauge this data
across all tested sites to look for
trends
 Update content, page
layout, meta, navigation
anchors
 Product suggestions

Conversion Optimization and Site Usability

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (20)

Similar to Conversion Optimization and Site Usability

Similar to Conversion Optimization and Site Usability (20)

More from Benu Aggarwal

More from Benu Aggarwal (20)

Recently uploaded

Recently uploaded (20)

Conversion Optimization and Site Usability