#sejsf: 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 Architectur

e

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

Optimizationimages

videos

ads buttons

site speed

404s



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

65



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 cause7% 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

http://code.google.com/speed/page-speed/

http://developer.yahoo.com/yslow/

http://www.webpagetest.org/

http://www.google.com/webmasters/



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

http://stevesouders.com/hpws/rule-min-http.php





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



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

Testing Analysis Change



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

http://www.milestoneinternet.com/

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

http://jobs.milestoneinternet.com/

http://jobs.milestoneinternet.com/

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

Images Best Practice: Choose simple images with a

single focus. Avoid busy pictures or busy backgrounds



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.



Images

Images Best Practice: 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

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

#sejsf: conversion optimization and site usability

Marketing