Slideshare how to write for the web

BRIGHT ORANGE THREAD
How to Write for the WebHow to Write for the Web
Friday, December 12, 14

1. Deﬁning usability
2. Relevant usability research
Consider it motivation to write effectively!
3. Our best practices for writing
The real value of the slide deck
4. Easy-to-implement tips to get started
So you see quick results
5. Links to where we got our stuff
This slide deck is about…
Best practices for effective writing
…but it really breaks down this way

Warning!

Make sure your content targets users and contains the information
they’re looking for.
Compelling content is content that:
• Hooks users
• Engages users
• Encourages users to keep reading
You are the subject matter expert. You monitor the needs of your audience.
Compelling content is your domain!
Smart structure can’t ﬁx boring,
valueless information

• People from leaving your page right away
• People from clicking around
endlessly to ﬁnd stuff
Smart structure prevents…

So, what will you learn?

1. How to structure content so users
will read (and read more)
2. Best practices for helping users ﬁnd
and use the nugget of information
they want
3. Ways to effectively deliver your key
message to users
This slide deck will teach you

First the research
Best practices are important.
But ﬁrst, you need to understand why they matter!

Usability testing…
• Measures how users consume
content and read on the web.
• Identiﬁes issues that keep users
from meeting the usability
goals of a web site
Usability is how easily a user can
interact with a website

Good Usability Helps People…
Find what they want to find
Users train of thought is sacred.
Does your site make it easy to find the answer to find
that golden nugget of information?
Great! Once your site answers that
question, goodwill toward your site
and brand increase!
YES! =) No… =(
It’s time to get to work. Until that
question is answered, much of your
site is irrelevant.

Now REALLY the research

Eye-tracking studies recorded
how 232 users looked at
thousands of web pages.
Tracking varies with the web
page, but a there is a fairly
consistent pattern.
Can you see the red ‘F’?
Users scan pages in an
F-shaped pattern
Jakob Nielson, the NN group
<-- http://bit.ly/19XbzjS

“F” is for Fast!
http://bit.ly/19XbzjS -->
Test suggests users won’t read
your text thoroughly
Users read the first 3 words.
The first 3 words are the deciding factor
on whether they should keep reading.

Users make
Accurate snap judgments
Study found that people can judge the visual look of a website just
1/20 of a second (http://bit.ly/1oHHYj1)
If it looks too busy, they won’t want to read. Which homepage looks better to you?

People rarely read web pages
• “F is for FAST”
• Reading a lot of text on a screen is tiring
• Millions of web pages competing for a user’s attention (and business)
• Users often come to a site looking for just one thing
What does this mean?
Users rarely read, they scan

Bonus research!

Users don’t like photos of
“generic” people
Thinking of using photos as content?
• Find images that convey
character and personality
• Images must tell a story
Image of Yale students has little to do
with the application process. People
ignored it!
Users Avoid Stock Photos
Jakob Nielson, the NN group http://bit.ly/1grwpK4

Pictures of real people
make for good content
Users spent
10% more time
looking at the portraits
than reading the bios
Users like
Authentic pictures of real people
Jakob Nielson, the NN group http://bit.ly/1grwpK4

Curious if this applies to you?

If you have more than 500
average page visits, you can
dig a little deeper.
• What’s the average
time on site?
• What is the average
time on page?
• How many pages to people
look at per visit?
Analyze this info to see where and
how you can improve.
Track your website
Check out Google Analytics

Chunkify:
Bright Orange Thread’s
best practices for writing for the web

Support users’ scanning behavior
(recall the F-shaped pattern)
• Be succinct
• Above the fold
• Front-loading
• Reduce word count
• Headings for each paragraph
• List when possible
• Remove useless introduction
• Descriptive links
• Concluding sentences
“Chunkify” - for easy skimming

Why an outline?
• Naturally Chunkiﬁed!
• The information is more manageable
• Lots of headings, subheadings
• Convert points into 3-sentence paragraphs
• Help us brainstorm document structures
because they’re easier to scan
Outlines are Chunkiﬁed

Remember…
Users scan in an F-shaped pattern
http://bit.ly/19XbzjS -->
Inverted Pyramid Style for the Web
First two paragraphs must state
most important information
Subhead, paragraphs must
have information-
carrying words
Supporting
copy last

Most important newspaper stories
placed above the fold
This is where people look ﬁrst.
Web users spend 80% time above fold
Place your most important content where
users don’t need to scroll. Users will only
scroll if you give them incentive.
Place high-valued content
Above the fold

• Start with the real value
• Users look at
first 3 words
• First on page,
first in the sentence
• Eliminate redundant
information
This is called Front-loading
So…
Place most important message first

PMA consumer research
reports are free to all PMA
member companies and
their employees.
Original Offer Front-loaded Offer
Front-loading = benefit-first
x benefit of reports not explained
x “who” is buried in the copy
Free to Members
Identify consumers’ purchasing
behaviors, trends, and patterns
with our Consumer Research
Reports.
✓ explains benefit FIRST
✓ direct & informative
✓ “Who” is foremost
✓ “Free” offer is enticing

Active Voice
Bright Orange Thread offers
a Free Email Template for
clients who sign a contract
today!
Passive Voice
Free Email Template offered
for clients who sign a
contract today with Bright
Orange Thread!
Active voice begins with the subject
(who is giving the offer), then states
the action/benefit (what the client
gets from signing a contract).
Passive voice puts the benefit first
(what the client gets from signing a
contract), then states the subject
(who is giving the offer).
Place benefit first with passive voice

Get to the point without unnecessary verbiage.
Readers want to know exactly what they’re getting, and fast!
• Reduce your word count…
• Free Email Template for clients
who sign a contract today!
• 3 sentences or less in paragraphs
• Think about mobile - long paragraphs are longer on small screens!
KISS your content
Keep It Short & Simple

• Increase scannability with headings
• Headings let users know which
paragraph contains the information
they seek
• Sub-headings need to summarize
the content underneath too!
• Create headlines that are direct and
informational
Headings start every paragraph

You get the gist of the article without
any of the supporting copy.
Users should be able to understand the
whole article after reading each
paragraph’s heading.
Headings can tell
the whole story
Can you tell what these paragraphs are about?

One-word headings not allowed!
• You can’t explain a paragraph with one word!
• Use short phrases or sentences
5 Key Marketing Trends for 2015 - which version provides more insight?

• Lists are easier to scan
• Visual differentiator from long
paragraph content
• Shoot for 5 bullets or less
• Create focus on perhaps the key
point of your page
screengrab of visual
differentiation
Use at least one list per page

Remove useless introduction
• Introductions are time
consuming and
ineffective
• Users only want to read
relevant information
• Skip to the important
information right away

Writing Links: A little know-how
• Avoid “click here”
• Don’t paste the URL
• Use descriptive phrase as link text
• Use phrases that conﬁrm action
e.g. “Download White Paper”
• Underline & use different color
• Links with phrases improve site’s
SEO value
Descriptive links conﬁrm actions

When you start writing, you have no idea what to write about
By the end, you have everything written out with complete ideas
The concluding sentence often summarizes the whole point
That point could often become the page headline
Avoid having that sentence summarize better than your page headline does
Make sure the
Concluding sentence is not better
than page headline

Bonus marketing best practice!

Consultant-out
x Focus is on you/the company
x Trying to prove your expertise
We have 30+ years
of experience!
Increase leads and
generate more
online conversions
Focus on how your client beneﬁts
Client-in
✓ How your clients/prospects will
beneﬁt from using your services
✓ Refer to your messaging
platform document

More tricks of the trade…

Jakob Nielsen’s Alertbox on useit.com
http://www.useit.com/alertbox/9710a.html
How Users Read on the Web
http://www.useit.com/alertbox/reading_pattern.html
http://www.useit.com/alertbox/whyscanning.html
F-Shaped Pattern for Reading Web Content
Why Web Users Scan Instead of Read
http://www.useit.com/alertbox/headlines-bbc.html
World’s Best Headlines: BBC News
http://www.useit.com/alertbox/scrolling-attention.html
Scrolling and Attention
Helpful references & further reading

37 Signals - Signal vs. Noise Blog
http://37signals.com/svn/posts/1539-writing-decisions-saving-space-without-losing-meaning
Writing Decisions: Saving Space Without Losing Meaning
Helpful references & further reading

✓ Page headline summarizes
page content
✓ Sub-headings summarize
paragraph/list below
✓ Headings and sub-headings are
front-loaded, passive voice
✓ Each paragraph has a heading,
almost
✓ No one-word headings,
use a sentence or phrase
✓ Paragraphs 3 sentences or less,
40 words per paragraph
✓ One list per page, at least
✓ One list per 4 paragraphs,
for long pages
& more!
Free Download
Checklist for web writing (PDF)
Download Writing for the Web Checklist!

Slideshare how to write for the web

Recommended

Recommended

More Related Content

Featured

Featured (20)

Slideshare how to write for the web