"Top 10 Conversion Factor Trends, Backed by Science"
As with most tactics in digital marketing, your sure-fire methods from last year may be a total flop today. Benu will walk through what's working now, along with supporting case studies and data. From the Searchmetrics conference "SEO, Content Marketing & Analytics
The Three Pillars of Online Marketing Success in 2014" held at the Hotel Vitale in San Francisco.
4. 4Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
5. 5Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
12. 12Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
20. 20Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
21. 21Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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;
27. 27Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
29. 29Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
30. 30Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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.
31. 31Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
34. 34Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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!
37. 37Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
38. 38Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
40. 40Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
44. 44Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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.
50. 50Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
52. 52
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Milestone Confidential
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
54. 54Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Information Architecture
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
56. 56Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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.
58. 58Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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)
60. 60Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
71. 71Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
72. 72Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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