View
78
Download
1
Category
Preview:
Citation preview
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
“BEST PRACTICES“
“People don’t come for
technology, web design
or an experience, they
come for content. “
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Interface design is dictated by user behavior
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Implement a customer-centric framework
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Body Content & Contextual Link Cross-Pollination Links
Header & Branding
Section Navigation
Call-to-Action
Cross & Upsell
Related Links
Marketing Promotions
Writing content for scanability
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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).
Writing content for scanability
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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).
Writing content for scanability
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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.“
© 2016 Copyright iMedia Inc. Proprietary & Confidential
© 2016 Copyright iMedia Inc. Proprietary & Confidential
ReadabilityLegibility
Comprehension
Scannable
Content
Legibility Guidelines
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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.
Readability Examples
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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).
Readability Examples
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
RelevantInformative
Interesting
Good
Content
Structured Content
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
• Conversational
• Clarity
• Brevity
• Stories
• Benefits
• Answers
Source:
https://boagworld.com/content-strategy/7-way-great-copywriter-crafts-compelling-web-copy/
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Categories
Headline
Publish Date
Image
Body
Video
Related
Effective Content Lengths
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
“How content is organized
is key to a website’s
performance.“
Content Organization Guidelines
© 2016 Copyright iMedia Inc. Proprietary & Confidential
• 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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Wrike Example
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Wrike Example
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Common ways to organize content
© 2016 Copyright iMedia Inc. Proprietary & Confidential
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
© 2016 Copyright iMedia Inc. Proprietary & Confidential
AUDIENCES
• Lifecycle
• Needs
• Tasks
BUSINESS
• Goals
• Objectives
• Messaging
CONTENT
• Structure
• Types
• Tone & Voice
User Journey
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Quickbooks Example
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Customer Lifecycle
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Maintain Buy
LearnEvaluate
Workshop
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Who exactly do you anticipate will be using this website?
• [Insert User Group]
• [Insert User Group]
Workshop
© 2016 Copyright iMedia Inc. Proprietary & Confidential
What are their pain points?
• [Insert Pain Point]
Workshop
© 2016 Copyright iMedia Inc. Proprietary & Confidential
What problem is this website solving for them?
• [Insert problem and solution]
Workshop
© 2016 Copyright iMedia Inc. Proprietary & Confidential
What will they accomplish by using this website?
• [Insert goal]
THANK YOU
CHANCE BLISS
VP, User Experience
iMedia Inc.
973.224.5154
cbliss@imediainc.com
Imediainc.com
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Recommended