Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

1

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

2

© 2016 Copyright iMedia Inc. Proprietary & Confidential
“BEST PRACTICES“

3

“People don’t come for
technology, web design
or an experience, they
come for content.“
© 2016 Copyright iMedia Inc. Proprietary & Confidential

4

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

5

People read in an F-pattern
© 2016 Copyright iMedia Inc. Proprietary & Confidential

6

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

7

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).

8

Writing content for
scanability
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Scannable Layout – 58% Improvement
Using 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).

9

Writing content for
scanability
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Scannable Layout Simplified - 124% Improvement
Using 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

10

“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

11

© 2016 Copyright iMedia Inc. Proprietary & Confidential
ReadabilityLegibility
Comprehension
Scannable
Content

12

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)

13

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
Thisletterspacingisnoaseffective

14

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

15

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.

16

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).

17

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

18

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)

19

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

20

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

21

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

22

© 2016 Copyright iMedia Inc. Proprietary & Confidential
RelevantInformative
Interesting
Good
Content

23

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

24

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/

25

© 2016 Copyright iMedia Inc. Proprietary & Confidential
Categories
Headline
Publish Date
Image
Body
Video
Related

26

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.”

27

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.”

28

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

29

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

30

© 2016 Copyright iMedia Inc. Proprietary & Confidential
“How content is organized
is key to a website’s
performance.“

31

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

32

Wrike Example
© 2016 Copyright iMedia Inc. Proprietary & Confidential

33

Wrike Example
© 2016 Copyright iMedia Inc. Proprietary & Confidential

34

Wrike Example
© 2016 Copyright iMedia Inc. Proprietary & Confidential

35

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”

36

Workshop
© 2016 Copyright iMedia Inc. Proprietary & Confidential
AUDIENCES
• Lifecycle
• Needs
• Tasks
BUSINESS
• Goals
• Objectives
• Messaging
CONTENT
• Structure
• Types
• Tone & Voice

37

User Journey
© 2016 Copyright iMedia Inc. Proprietary & Confidential

38

Quickbooks Example
© 2016 Copyright iMedia Inc. Proprietary & Confidential

39

Customer Lifecycle
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Maintain Buy
Learn
Evaluate

40

Workshop
© 2016 Copyright iMedia Inc. Proprietary & Confidential
Who exactly do you anticipate will be using this website?
• [Insert User Group]
• [Insert User Group]

41

Workshop
© 2016 Copyright iMedia Inc. Proprietary & Confidential
What are their pain points?
• [Insert Pain Point]

42

Workshop
© 2016 Copyright iMedia Inc. Proprietary & Confidential
What problem is this website solving for them?
• [Insert problem and solution]

43

Workshop
© 2016 Copyright iMedia Inc. Proprietary & Confidential
What will they accomplish by using this website?
• [Insert goal]

44

THANK YOU
CHANCE BLISS
VP, User Experience
iMedia Inc.
973.224.5154
cbliss@imediainc.com
Imediainc.com
© 2016 Copyright iMedia Inc. Proprietary & Confidential

More Related Content

Content Workshop - Creating Effective Content for Your Website

  • 1. 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
  • 2. © 2016 Copyright iMedia Inc. Proprietary & Confidential “BEST PRACTICES“
  • 3. “People don’t come for technology, web design or an experience, they come for content.“ © 2016 Copyright iMedia Inc. Proprietary & Confidential
  • 4. 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
  • 5. People read in an F-pattern © 2016 Copyright iMedia Inc. Proprietary & Confidential
  • 6. 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
  • 7. 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).
  • 8. Writing content for scanability © 2016 Copyright iMedia Inc. Proprietary & Confidential Scannable Layout – 58% Improvement Using 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).
  • 9. Writing content for scanability © 2016 Copyright iMedia Inc. Proprietary & Confidential Scannable Layout Simplified - 124% Improvement Using 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
  • 10. “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
  • 11. © 2016 Copyright iMedia Inc. Proprietary & Confidential ReadabilityLegibility Comprehension Scannable Content
  • 12. 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)
  • 13. 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 Thisletterspacingisnoaseffective
  • 14. 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
  • 15. 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.
  • 16. 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).
  • 17. 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
  • 18. 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)
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. © 2016 Copyright iMedia Inc. Proprietary & Confidential RelevantInformative Interesting Good Content
  • 23. 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
  • 24. 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/
  • 25. © 2016 Copyright iMedia Inc. Proprietary & Confidential Categories Headline Publish Date Image Body Video Related
  • 26. 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.”
  • 27. 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.”
  • 28. 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
  • 29. 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
  • 30. © 2016 Copyright iMedia Inc. Proprietary & Confidential “How content is organized is key to a website’s performance.“
  • 31. 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
  • 32. Wrike Example © 2016 Copyright iMedia Inc. Proprietary & Confidential
  • 33. Wrike Example © 2016 Copyright iMedia Inc. Proprietary & Confidential
  • 34. Wrike Example © 2016 Copyright iMedia Inc. Proprietary & Confidential
  • 35. 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”
  • 36. Workshop © 2016 Copyright iMedia Inc. Proprietary & Confidential AUDIENCES • Lifecycle • Needs • Tasks BUSINESS • Goals • Objectives • Messaging CONTENT • Structure • Types • Tone & Voice
  • 37. User Journey © 2016 Copyright iMedia Inc. Proprietary & Confidential
  • 38. Quickbooks Example © 2016 Copyright iMedia Inc. Proprietary & Confidential
  • 39. Customer Lifecycle © 2016 Copyright iMedia Inc. Proprietary & Confidential Maintain Buy Learn Evaluate
  • 40. Workshop © 2016 Copyright iMedia Inc. Proprietary & Confidential Who exactly do you anticipate will be using this website? • [Insert User Group] • [Insert User Group]
  • 41. Workshop © 2016 Copyright iMedia Inc. Proprietary & Confidential What are their pain points? • [Insert Pain Point]
  • 42. Workshop © 2016 Copyright iMedia Inc. Proprietary & Confidential What problem is this website solving for them? • [Insert problem and solution]
  • 43. Workshop © 2016 Copyright iMedia Inc. Proprietary & Confidential What will they accomplish by using this website? • [Insert goal]
  • 44. THANK YOU CHANCE BLISS VP, User Experience iMedia Inc. 973.224.5154 cbliss@imediainc.com Imediainc.com © 2016 Copyright iMedia Inc. Proprietary & Confidential

Editor's Notes

  1. Segmentation by Need
  2. Segmentation by Need
  3. Segmentation by Need
  4. Segmentation by Audience
  5. Customer Lifecycle