Content Workshop - Creating Effective Content for Your Website

C H A N C E B L I S S

V P , U S E R E X P E R I E N C E

CONTENT

WORKSHOP

© 2016 Copyright iMedia Inc. Proprietary & Confidential


“BEST PRACTICES“

“People don’t come for

technology, web design

or an experience, they

come for content. “


Interface design is dictated by user behavior


EYE TRACKING

Studies show that users scan

pages quickly in search of

key information.

Eye movement begins in upper

left corner and moves diagonally

to the lower right corner.

This area is prime real estate

and should be taken

advantage of.

PAGE FOLD

Valuable and critical content

must be available above

the fold.

Page Fold

People read in an F-pattern


Implement a customer-centric framework


Body Content & Contextual Link Cross-Pollination Links

Header & Branding

Section Navigation

Call-to-Action

Cross & Upsell

Related Links

Marketing Promotions

Writing content for scanability


In a recent study 79% of test users scan pages before making

a next steps decision.

Control Study Paragraph

Promotional writing using the "marketese" found on many commercial

websites.

Nebraska is filled with internationally recognized attractions that draw large

crowds of people every year, without fail. In 1996, some of the most popular

places were Fort Robinson State Park (355,000 visitors), Scotts Bluff

National Monument (132,166), Arbor Lodge State Historical Park &

Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie

Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).



Scannable Layout – 58% ImprovementUsing the same text as the control condition in a layout that facilitated

scanning.

Nebraska is filled with internationally recognized attractions that draw large

crowds of people every year, without fail. In 1996, some of the most popular

places were:

• Fort Robinson State Park (355,000 visitors)

• Scotts Bluff National Monument (132,166)

• Arbor Lodge State Historical Park & Museum (100,000)

• Carhenge (86,598)

• Stuhr Museum of the Prairie Pioneer (60,002)

• Buffalo Bill Ranch State Historical Park (28,446).



Scannable Layout Simplified - 124% ImprovementUsing the same text as the control condition in a layout that facilitated

scanning.

In 1996, six of the most-visited places in Nebraska were:

• Fort Robinson State Park

• Scotts Bluff National Monument

• Arbor Lodge State Historical Park & Museum

• Carhenge

• Stuhr Museum of the Prairie Pioneer

• Buffalo Bill Ranch State Historical Park

“People won’t read web

content unless the text is

clear, the sentences are

simple and easy to

understand.“



ReadabilityLegibility

Comprehension

Scannable

Content

Legibility Guidelines


How easily you can distinguish letters

• Use appropriate fonts for screen viewing

• Use appropriate font weights, cases and capitalization

• Use appropriate letter spacing (kerning)

Legibility Examples


FONT FAMILY

Sans-serif typefaces are effective

Roman typefaces are effective

Decorative typefaces are not as effective

Condensed typefaces are not as effective

FONT STYLE & CASE

Upper and lowercase type is effective

Italic type is not as effective

ALL CAPS IS NOT AS EFFECTIVE

LETTER SPACING (KEARNING)

This letter spacing is effective

This letter spacing is no as effective

Readability Guidelines


How easily can you read words

• Larger font sizes for headers and body copy (16px+)

• High contrast between the font color and background

• Proper line height (font size times 1.5)

• Line length width between 560 - 620px

• White space to break up content

• Headers and sub-headers to break up content

• Direct, short headlines

• Short paragraphs (1-5 sentences)

• Lists (bullets and numbers)

• Action oriented terms (e.g. “Apply Online”) for links and buttons

Readability Examples


LINE SPACING (LEADING)

This line spacing is effective. In

typography, leading refers to the distance

between the baselines of successive

lines of type. The term originated in the

days of hand-typesetting, when thin

strips of lead were inserted into the forms

to increase the vertical distance between

lines of type.

This line spacing is not as effective. In typography, leading refers to the distance between the baselines of successive lines of type. The term originated in the days of hand-typesetting, when thin strips of lead were inserted into the forms to increase the vertical distance between lines of type.



CONTENT WIDTH

This is an effective content width. In order to avoid the

drawbacks of too long and too short lines, but still energize

your readers and keep them engaged, we suggest keeping

your text within the range of 50-75 characters per line (or

between 560 - 620px wide).

This is not as an effective content width. In order to avoid the drawbacks of too long and

too short lines, but still energize your readers and keep them engaged, we suggest

keeping your text within the range of 50-75 characters per line (or between 560 - 620px

wide).



FONT COLOR CONTRAST

This font color and background are

effective.

This font color and background are not

as effective.

FONT SIZE

This type size is effective

This type size is not as effective

Comprehension Guidelines


How easy is it to understand

A language and tone that is appropriate to your audience segments

• First person singular and plural voice

• Active rather than the passive voice

• Plainspoken language

• Avoid jargon, acronyms, abbreviations or made-up terms

• Most to least important information (inverted pyramid)

• Break content into multiple sections

• Images, videos or infographics rather than words to explain ideas (1

image to 75 words)

Comprehension Examples


COMPLEX

The app highlights long, complex

sentences and common errors; if you see

a yellow sentence, shorten or split it. If

you see a red highlight, your sentence is

so dense and complicated that your

readers will get lost trying to follow its

meandering, splitting logic — try editing

this sentence to remove the red.

SIMPLIFIED

This application helps you make complex

sentences shorter.

Instructions

• Shorten or split yellow sentences

• Rewriting red sentences

SEO Guidelines


Identify and use key search terms in your:

• Page titles

• Meta descriptions

• Headers and sub headers

• Body content

• Hyperlink text and tags

• Image alt tags

The Big 5


Users are searching for the best, most specific answers to their question,

need or problem.

1. Problems & Issues

2. Cost & Prices

3. Comparisons

4. Reviews

5. Frequently Asked Questions


RelevantInformative

Interesting

Good

Content

Structured Content


GIVE IT A PURPOSE

Each piece of content should be given a purpose.

• Who is the primary audience for this page?

• What’s the point of this page?

• What’s the most important takeaway?

BREAK IT DOWN

For each content type identified, break them down into their core components.

• Headline

• Teaser

• Author’s name

• Date and time published

• Body Content

• Images

• Videos

• Categories

Writing Compelling Copy


• Conversational

• Clarity

• Brevity

• Stories

• Benefits

• Answers

Source:

https://boagworld.com/content-strategy/7-way-great-copywriter-crafts-compelling-web-copy/


Categories

Headline

Publish Date

Image

Body

Video

Related

Effective Content Lengths


Headlines – 6 Words

“Man Has Loyalty to Pretzel Brand”

Email Subject Line – 50 characters

“Snyder’s has the best crunch in pretzels!”

Facebook Post – 80 characters

“I love Synder's. They have the best crunch in pretzels. I always get them.”

Twitter Post – 100 characters

“I love Synder's. They have the best crunch in pretzels. I always get them

for holiday parties.”

Effective Content Lengths


Email Subject Line – 50 characters or less

“Snyder’s has the best crunch in pretzels!”

Facebook Post – 80 characters

“I love Synder's. They have the best crunch in pretzels. I always get them.”

Twitter Post – 100 characters

“I love Synder's. They have the best crunch in pretzels. I always get them

for holiday parties.”

Content Governance


WORKFLOW

Establish a clear and simple workflow

• Who are the content writers?

• Who is reviewing the content?

• Who approves the publishing of content?

MAINTENANCE

Plan periodic content and web analytics reviews

• Adding new content

• Updating existing content

• Retiring old content

Web Writing Tools


GATHERCONTENT

Gather and manage content

www.gathercontent.com

HEMINGWAY EDITOR

Write bold and clear copy

www.hemingwayapp.com

GRAMMARLY

Writing app with grammar and spell

checking

www.grammarly.com

READABILITY SCORE

Measure readability

www.readability-score.com

TITLECAP

Automatically capitalize your headlines

and titles

www.titlecapitalization.com


“How content is organized

is key to a website’s

performance.“

Content Organization Guidelines


• Think about the context of the user in their daily activities, tasks and

environment

• Provide users with a clear and consistent conceptual structure

• Prioritize your content categories

• Establish a relationship between categories

• Don’t over-categorize content

Wrike Example


Wrike Example


Wrike Example


Common ways to organize content


USER NEED

“Find a New Doctor”

AUDIENCE

“Patients”

USER TASK

“Make an Appointment”

TOPIC

“Arthritis”

CONTENT TYPE

“Video”

CALL TO ACTION

“Find the closest doctor”

Workshop


AUDIENCES

• Lifecycle

• Needs

• Tasks

BUSINESS

• Goals

• Objectives

• Messaging

CONTENT

• Structure

• Types

• Tone & Voice

User Journey


Quickbooks Example


Customer Lifecycle


Maintain Buy

LearnEvaluate

Workshop


Who exactly do you anticipate will be using this website?

• [Insert User Group]

• [Insert User Group]

Workshop


What are their pain points?

• [Insert Pain Point]

Workshop


What problem is this website solving for them?

• [Insert problem and solution]

Workshop


What will they accomplish by using this website?

• [Insert goal]

THANK YOU

CHANCE BLISS

VP, User Experience

iMedia Inc.

973.224.5154

[email protected]

Imediainc.com


Internet

Content Workshop - Creating Effective Content for Your Website