Online & New MediaTools of Digital Marketing

SNC-MKTG350September 23, 2013

Tonight’s Agenda: User Interface• Read Chapters 3+4 in Don’t Make Me Think text• Quiz 5• 0 blog posts to review• Creating Good User Experience– User interface concepts– Reliable framework

- Menus, expectations- Sitemaps

– Heat mapping– A/B testing

Key Points: Don’t Make Me Think #3

• Design for scanning– Simple language– Universal language– Consistent colors– Verbs first

Key Points: Don’t Make Me Think #4

• Simplify choices:– The user might do what you want

them to– Helps them move through a desirable

pathway– Remember conversions?

From Tools to Building…

• We’ve taken a survey of online marketing tools

• Now to evaluate if we’re delivering good marketing offerings with our tools

User Interface Concepts

• What is a user?• What is an interface?

Goal: make it easy for a visitor to do what they want to do on your site.– Includes information structure– Includes design decisions

Sitemaps help you organize

Becomes your menu

Sitemaps help you organize

Becomes your menu

Sitemaps for content structure…

User interface for design structure

User Interface Concepts

• Do they know where to go?• Can they find what they’re looking for?• Have you made it easy to sell your wares or

information?• Does your design add to your credibility?• Does your design add to your sales effort?

User Interface Conventions

• Menu on top or left, reading left to right• 3-7 menu items• Upper left logo = home• Links are underlined or “hot”• Page content limited to 1-2 ideas• Sounds, music are user-prompted• No more Flash• No “hunting” required

User Interface Example – Focal Point

User Interface Example – First Step?

User Interface Example – Credibility

User Interface Example – Credibility

User Interface Example – Unfamiliar

User Interface Example - Hunting

User Interface Example - Speed

User Interface – Why Do We Care?

• Increase sales• Reduce bounce rate• Increase time on site• Reduce complaints• Increase site visibility on search• Keep your job

Fixing UI - Heatmaps

Fixing UI - Heatmaps

Fixing UI - Heatmaps

Heatmaps – What have we learned?

• Readers don’t read everything you write• We are culturally anchored to the left• The first two paragraphs must have the most

important info• Start sub-heads, paragraphs and bullets with

info-packed words (like verbs??)

Fixing UI – A/B Testing

• Roll out two versions of a page, email, design, banner ad, etc.

• On a small scale, see which one converts better

Fixing UI – A/B Testing

Fixing UI – A/B Testing

• What can you test?– The call to action’s (i.e. the button’s) wording, size, color

and placement– Headline or product description– Form’s length and types of fields– Layout and style of website– Product pricing and promotional offers– Images on landing and product pages– Amount of text on the page (short vs. long)

A/B Testing – What have we learned?

• Try it: see what your audience prefers• Have to have analytics in place• Little tests provide a lot of information• Testing doesn’t have to be complicated

Next session: Wed, Sept 25

• Read Chapters 6 in Don’t Make Me Think text• Read Chapter 5 in Persuasion text• 3 blog posts to review• Creating Good User Experience– Persuasive design– User comments/peer recommendations