#sejsf: conversion optimization and site usability
DESCRIPTION
"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.TRANSCRIPT
Milestone Confidential
Conversion Optimization and Site Usability
2
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Milestone Confidential
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
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Conversion Optimization by Improving Usability
Information Architectur
e
Color & Images
Speed & Performance
Legibility & Eyetracking
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
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
6Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Case study
Good Design Bad Design
7Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
What is the point of usability?
Target your
audience
Improve Conversions
Deliver USP
8Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Jacob Nielsen Usability Study
9Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Usability Testing
Audience
Navigation
Content
Distractions
Design
Implementation
10Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
11Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Expectations
Company logo is expected to be on the top, left hand side.
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
13Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Pass the 6-foot test
Usability tip: Headline, Hero shot (image/video) CTA should be legible
CTA
Headline
Hero shot
14Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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?
15Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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?
16Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Information Architecture
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
17Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Distractions
Optimizationimages
videos
ads buttons
site speed
404s
18Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Links on the right look like ads -> ignored by visitors
Milestone Confidential
Eyetracking /Legibility
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
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;
22Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Break up paragraphs into scannable chunks
23Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
How people spend time? – Eyetracking Eyetracking – How Do People
Spend Time?
24Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Ultimate Heat Map – People Looking for Content
25Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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.
Milestone Confidential
Colors & Images
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
65
28Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Colors
Colors associated with trust: Colors associated with high quality:
Colors associated with cheap/inexpensive: Colors associated with fun:
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
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.
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
32Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Images
Images Best Practice: Choose images that are
highly relevant to the focus of each page
Original images preferred
Milestone Confidential
Speed and Performance
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 cause7% loss in customer conversions!
35Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Page Speed
Fast and optimized pages lead to
Visitor engagement Retention Conversions
Tools to measure site’s speed
Page Speed Yslow WebPagetest Google Webmaster
36Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Milestone Client Site
Minify CSS
Optimized images
Minify JavaScript
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
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 tagsto avoid duplicate content issues and penalties
Sitemap XML for website & images submitted to Google Webmaster
39Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Milestone Client Site
HTML validation
CSS validation
Sitemap submission
Link checker
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
41Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Responsive Websites - Desktop, Mobile, Tablet Versions
DESKTOP SITE
TABLET SITE
MOBILE SITE
New Gestures
Jquery Swiping (photo gallery)
Pixel Width of average finger
Milestone Confidential
Case Studies
43Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Event Form
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.
45Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Navigation
46Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Clear Navigation
47
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Milestone Confidential
Millwood Inn
2.4 %
48
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Milestone Confidential
49Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Implementation
Testing Analysis Change
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
51Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Thank You
Questions?
www.milestoneinternet.com
blog.milestoneinternet.com
http://twitter.com/milestonemktg
http://www.facebook.com/Milestoneinc
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
53
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Milestone Confidential
Back ups
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
55Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Images
Images Best Practice: Choose simple images with a
single focus. Avoid busy pictures or busy backgrounds
56Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Culture has an effect
Red Yellow Green Blue White
China Happiness
BirthWealthPower
Ming DynastyHeavensClouds
HeavensClouds
DeathPurity
France Aristocracy Temporary Criminality FreedomNeutralityPeace
IndiaLifeCreativity Success
ProsperityFertility
KrishnaSpirituality
DeathPurity
JapanAngerDanger
GraceNobility
FutureYouthEnergy Villainy Death
USADangerStop
CowardiceCaution
SafetyGo Masculinity Purity
Galitz, W.O. (1998) The Essential Guide to User-Interface Screen Design. New York: Wiley.
57Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Images
Images Best Practice: Use compelling images of real
people doing real things
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)
59Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Optimization Parameters
Value Proposition
Relevance
Clarity
Anxiety
Distraction
Urgency
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
61Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Target your audience
62Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
After re-design
Target the audience
What is important to them?
63Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Most Valuable Links on Home Page
64Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
All Pages
65Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Filtered All Pages
66Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Special Packages
67Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Segment: Visits with Conversions
68Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
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
69Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Conversions
70Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Five Simple Rules of Web Design
Easy To Read Content
Easy to Navigate
Easy To Find
Consistency of Design & Layout
Download / Perception
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
72Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg
Conversion Flow
First Interaction
Second Interaction
Third Interaction
HomeStarting pages
Rooms
Specials
Things to Do
Amenities
Location
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
73Milestone Confidential
www.milestoneinternet.com blog.milestoneinternet.com @milestonemktg