Download Web Content Workshop OIST 18 Aug 2006 .pps

Web Content Development
Workshop for OIST
18 August 2006
Ainslie Smith
Department of External Relations
Workshop Objectives
•
•
•
•
Write for online readers
Repurpose print materials for the web
Guide colleagues who contribute content
Apply copyright correctly on web documents
Session Outline
• Introduction, objectives
• User needs, usability
• Comparing web content (activity)
• Break
• Web writing guidelines
• More tips
• Recommended homepage design
Content Usability
•
•
•
•
•
•
•
•
differences between print & online text
reading online
managing long articles
global English
effective hyperlinking techniques
fonts, graphics, logos
credibility
copyright
Usability Quiz
1. How much longer -- in % -- does it take to read
online compared to hard copy?
26%
2. What % of users scan rather than read word-byword?
85%
3. What % of users are prepared to scroll down?
16%
How does reading online differ
from reading print?
•
•
•
•
•
•
it’s nonlinear
it’s slower
it causes fatigue
it involves clicking & scrolling
readers skim text
online docs are not portable
How does reading online differ
from reading print? (cont.)
•
•
•
•
latest information available
access to different languages
web needs more navigation
checking references is easier on the
web
• easy to copy & paste, harder to edit
Content Matters
• Most web users are goal-driven to
•
find specific information
•
buy something
•
solve a problem
•
Content is the most important part of a
website. It should provide the information
needed by users.
Time matters
• Users are in a hurry to achieve their
goals:
• “ Is this the right web page?”
• On the web, time is a currency
• attention economy
• content must provide value quickly or
users will leave
Write for your Reader
•
Always ask the question:
What do I want the reader to do after they
have this piece of content?
Findings from the Morke
Nielsen Study
•
•
•
•
•
•
Users want the information quickly
Summaries are popular
Simple writing is preferred
Source credibility is important
Scanning is the norm
Text should be concise
Embrace user-centered, not
provider-centered design
• What we know users hate -- contents:
•
•
•
•
•
•
•
•
•
too long
not webbified Example of shovel ware
not relevant
lack of summaries
inconsistency in language – style and tone
typos and grammar mistakes
too much scrolling
flashing “what’s new” animation, Cuteness
Out of date http://www.adb.org/Law/default.asp
Embrace user-centered, not
provider-centered design
• What we know users hate -- navigation:
•
•
•
•
•
•
•
•
Inability to find content
Too many clicks to get to content
Too many links
Poorly labeled links
Buttons that look like links, but aren’t
Icons that are links, but don’t look like it
Getting lost
Dead-end pages/under construction pages
• http://www.sanx.net/an/this_pages_is_under_construction.htm
Embrace user-centered, not
provider-centered design
• What we know users hate -- design:
•
•
•
•
•
Too many fonts and colors
Too much clutter
Slow downloads because of too much graphic material
Pop-up windows
examples
• http://www.dawn.com/2006/04/24/index.htm
•
http://www.webpagesthatsuck.com/dailysucker/
What we know readers need to
know
•
•
•
•
how it fits with what they already know
if it offers anything new or different
what it will help them do
how they will do it
Guidelines for successful web
writing
1.
2.
3.
4.
5.
keep text short and simple
use plain language
organize material by chunking text
provide scannable content
make content interactive
Guideline 1: Keep text short
• use the active voice
• use action verbs
• keep transition phrases short or remove
them
• divide long sentences into two
Active Voice
•
The active voice is generally more concise
and direct.
•
It follows how we think & process
information.
Active Voice
•
•
•
•
•
P: The man was bitten by the dog
A:
The dog bit the man
P:
The project was approved by the Board
A:
The Board approved the project
P: The proposals will be discussed at the
conference
• A: We will discuss the proposals at the
conference
Would you say
• “Dinner was greatly enjoyed by me?”
Action verbs are strong verbs
• W: We will make the arrangements for you to be met
at Manila airport
• S: An ADB staff will meet you at Manila airport
• W: Click here to complete the online application form
• S: Apply online
• W :
You may email the secretariat with
suggestions, comments, and feedback to [email protected]
• S: Send your feedback
Reduce or remove transition
phrases or words
•
•
•
•
•
•
In connection with
In order to
Moreover
Not withstanding
Herewith
On the other hand
Concise text
•
General guideline – use 50% less text
than print
• Ideal length depends on user goals,
type of content
•
e.g., if the goal is to find a poem,
then you can’t cut the poem
Be concise
•
•
•
•
•
•
•
•
a majority
most
despite the fact that
although
consensus of opinion
consensus
still continues
continues
Be concise
•
•
•
•
•
•
•
•
in view of the fact that
since/because
is designed to be
is
for a period of
for
terminate
end
Guideline 2: Use Plain
Language
•
•
•
•
Write simply, without jargon
Have one idea per paragraph
Use concrete language
Use global English
Global English
•
•
•
•
•
•
Almost 1 billion people speak English as a foreign
language
Write the date in full, e.g.,
9/11/01 (US)
11/9/01 (UK)
01/9/11(Japan)
11 September 2001
• Specify dates (don’t use seasons)
• Use complete phone numbers, including international code
•
•
+ 612 8270 9444
Global English
• Specify the currency
•
RM100, NZD100, HKD100, CAD100
• Avoid double negatives
•
it is not incompatible – it is compatible
•
it is not impossible – it is possible
• Replace idioms
•
at the end of the day – ultimately
•
it’s as easy as pie – it’s simple
•
up and running –operational
Guidelines 3: Organize
material by chunking text
• Challenge
• Most users read only what is “above the fold”
• Only 16% scroll beyond what they can see
• Solution
• Use the inverted pyramid technique : put the
conclusion first
Organizing web material
Bite : the headline
Snack: short summary that links to the
Meal: full chapter/document
Buffet: if you have many documents, give
each section the bite, snack, meal treatment.
A good chunk
•
•
•
•
•
is short, minimizes scrolling
can stand on its own
links to other chunks, sites, a general page
is consistent with other chunks
puts important information first
Guideline 4: Scannable Content
• Users’ time & energy should be spent on
content they care about – they forage/scan
then read
• Design with layers or levels
– grouping & ordering
– summary information at higher level
– details at lower levels
Guideline 4: Scannable Content
• Challenge
• Users skim for keywords & sentences
• Only 16% read word-by-word
•
•
•
•
Solution
Write meaningful summaries
Use meaningful headings
Signal key points with bulleted lists, bold text &
hyperlinks
Meaningful Summaries
• Summaries are the
•
•
•
•
•
who
what
where
when
how
• They should be 30-50 words long.
• Example: http://www.useit.com/alertbox/20050725.html
Titles, headings, lists
• DO NOT USE UPPER CASE. IT’S
HARDER TO READ AND ANNOYING
• Avoid abbreviations
• Put important words first
• Bullets versus numbered lists
Write great headings
•
•
•
•
•
A heading should grab attention
It should be lean
It should not read like a sentence
Lead with the need
Appropriate keyword
Guidelines for headings
• A good heading is
– Short – eight words or less
– Active
– No double-meanings
• You can also use sub-headings on a web
page
Examples of headings
– Higher oil prices require policy response from
developing Asia
– An expanded education system answers the
needs of growing Malaysia
– Restoring Ancient Links: Bishkek to Osh
– ADB helps China prepare east-northwest railroad
Headings with double meanings
– Prostitutes appeal to Pope
– Panda mating fails; veterinarian takes over
– Quarter of a million Chinese live on water
– Kids make nutritious snacks
– Two sisters reunite after eighteen years at checkout
counter
Use sub-headings
– Sub-headings are mini-headings that are placed
throughout the document
– They are ideal for the scan reader
– They help break long sections of text
– They should be used roughly every five
paragraphs
Guideline 5: Make content
interactive
• Challenge
• The web is about motion – scrolling, clicking,
moving. Users need to feel engaged –
remember they are in control and every click is
a decision point
Guideline 5: Make content
interactive
Solution
• Asking questions, linking to related
documents, adding a clip, web-based
forms
• Remembering footnotes are replaced by
hyperlinks
Hyperlinking techniques
• Get keywords into links. Avoid
 Click here
 Download now
 Find out more
• Move links to end of page or text
• Unbold links
More tips …
Integrating graphic content
•
•
Graphics are expensive, say users in the attention
economy
Use sparingly to:
– relate to content
– provide information
– complement the text
•
• Users like overviews, flow charts, process diagrams
often clicked on. They should “advance the story”
Readability Checklist
•
•
•
•
main point appears “above the fold”
text is divided into short sections
writing is concise
formatting emphasizes meaning and helps
scanning
• hypertext links help users find more
information
Readability, Font Size & Type
• Font size - not below 10 points for body
text
• Choose san serif fonts – arial, verdana
• Italics are hard to read – don’t use
• Never use underline, unless it’s a link
• Avoid using bold within body text
Get rid of ROT
• Redundant content
• Outdated content
• Trivial content
Frequently Asked Questions
•
• Should be no more than 10 questions
•
http://www.adb.org/NARO/faq.asp
• Group into themes if there are more
•
http://www.adb.org/About/FAQ/default.asp
Welcomes
•
“Cheerful” welcomes are nostalgic
remnants of the early days of the web.
•
The best welcome you can give users
is a concrete definition of what they can
do on the site and a clear starting point
from which to begin
Credibility
• Elements that boost credibility:
• Real world feel – site lists a physical address
• Ease of use – site arranged in a way that
makes sense
• Expertise & trustworthiness – author’s
credentials listed, site is linked to a site you
think is believable, full disclosure of information
Credibility
The 5 most harmful elements:
1.
2.
3.
4.
links that won’t work
content that is rarely updated
links to sites that lack credibility
ads that are indistinguishable from
content
5. typos and grammar mistakes
Learn more: http://credibility.stanford.edu/
Web color pallette
• http://www.siteprocentral.com/html_color_code.html
Copyright and intellectual
property
•
•
•
•
Copyright myths
Graphics, photographs
Plagiarism
Permission
• http://www.templetons.com/brad/copymyths.ht
ml
Web copyright is simple
• It’s all about linking………
• but check the site’s Terms of Use.
Putting it altogether…
• http://intra.asiandevbank.org/oist/telecomms/videocon/Videoco
n-home.htm
• http://intra.asiandevbank.org/webpolicy/webpolicy.html#intro
• http://intra.asiandevbank.org/specs.html
• http://intra.asiandevbank.org/webtrends/webtrends.html#
• http://intra.asiandevbank.org/email/emailmain.htm
How people search
2 word phrases
32.58%
3 word phrases
25.61%
1 word phrase
19.02%
4 word phrase
12.83%
5 word phrase
5.64%
6 word phrase
2.32%
7 word phrase
0.98%
Source: OneStat.com, Jan 2004
Making your site searchable
•
Each web page should contain
1.
2.
3.
4.
Title
A two-line summary
Date of publication
Keywords – distinct in every page
Making your site searchable
•
•
•
•
•
•
<html>
<head>
<title>Asian Development Bank</title>
<meta name=“Description” content="The Asian
Development Bank (ADB), a multilateral
development finance institution, promotes
economic and social progress by fighting
poverty in Asia and the Pacific.">
<meta name=“Keywords” content=“poverty in
Asia”>
</head>
Homepage Guidelines
1.
2.
3.
4.
5.
Create a positive first impression of your site
Ensure the homepage looks like a homepage
Show all major options on the homepage
Enable access to homepage
Attend to homepage panel width
•
Source: Research-Based Web Design & Usability Guidelines
Homepage Guidelines (cont.)
6.
7.
8.
9.
Announce changes to a web site
Communicate the web site’s purpose
Limit prose text on the homepage
Limit homepage length
•
Source: Research-Based Web Design & Usability Guidelines
Recommended Homepage Design
by Jakob Neilsen
Homepage
Issues
Recommended Design
Download time
At most 10 seconds. For modem users, this
means a file size of less than 50 kb. Faster is
better
Page width
Optimized for 770 pixels, but with a liquid layout
that works at anything from 620 to 1024 pixels
Liquid versus frozen layout
Liquid
Page length
1 or 2 full screens at best. No more than 3 full
screens
Frames
No
Logo placement
Upper left
Logo size
80x68 pixels
Search
Provide search. Have it on the homepage. Make
it a box
Recommended Homepage Design
Homepage
Issues
Recommended Design
Search placement
Upper part of the page – right or left corner
Search box color
White
Search button
Call it “search” (“Go” also acceptable)
Width of search box
At least 25 characters; but 30 is better
Type of search
Simple. Advanced or scoped search relegated to
secondary search interface – not shown on
homepage
Navigation
1 of the 4 main types: left-hand rail, tabs, links
across the top, or categories in the middle of the
page
Footer navigation links
At most, 7 links across the bottom of the page
Sitemap link
“Site Map,” if you have one
Recommended Homepage Design
Homepage
Issues
Recommended Design
Routing page
No
Splash page
No
Sign-in
If providing protected content, either include the
word “account” in the name of this feature or call
it “Sign-in”
About the company
Always include this feature
About link
Call the link “About <name of company>”
Contact information
Provide a link to the contact info and call it
“<Contact Us>”
Privacy policy
Include one if the site collects data from users
and link to it from the homepage
Name of privacy link
Call it “Privacy Policy”
Recommended Homepage Design
Homepage
Issues
Recommended Design
Job openings
Include an explicit link on the homepage if
recruiting is important to the company
Help
Don’t offer it unless the site’s complexity makes
help unavoidable
Help replacement
Upper right
Auto-playing music
No
Animation
No
Graphics/Illustrations
Somewhere between 5-15% of the space on the
homepage
Advertising
At most, 3 ads (whether external or internal)
Body Text Color
Black
Recommended Homepage Design
Homepage
Issues
Recommended Design
Body text size
12 points
Body text size frozen
No. Always use relative sizes that make it
possible for users to make the text larger or
smaller as desired
Body text typeface
Sans-serif
Background color
White
Link color, unvisited links
Blue
Link color, visited links
Purple
Link colors, different for visited Yes. Unvisited links should be the most saturated
and unvisited links
color. Visited links should be a desaturated or
less prominent color, but not light gray
Link underlining
Yes, except possibly in lists in navigation bars
3 Golden Rules
• 1. Write for your audience:
•
know your users & their
goals
• 2. Follow web writing guidelines
• 3. Write, rewrite, edit, proofread, test
with users, repeat &
•
stop when you run out of
time
References
•
•
•
•
www.useit.com
http://credibility.stanford.edu/
http://www.gerrymcgovern.com/
http://www.webpagecontent.com/
Suggested Readings
•
•
•
•
•
•
•
•
•
•
•
Usability 101 by Jakob Nielsen - http://www.useit.com/alertbox/20030825.html
How Users Read on the Web by Jacob Nielsenhttp://www.useit.com/alertbox/9710a.html
Eyetracking Study of Web Readers by Jacob Nielsenhttp://www.useit.com/alertbox/20000514.html
The Best of Eyetrack III: What We Saw When We Looked Through Their Eyes by
Steve Outing and Laura Ruel- http://www.poynterextra.org/eyetrack2004/main.htm
Effective Web Writing by Crawford Kilian http://www.webtechniques.com/archives/2001/02/kilian
Writing for the Web: Part I by Gerry McGovern –
http://www.gerrymcgovern.com/nt/2003/nt_2003_04_28_writing_1.htm
Writing for the Web: Part II by Gerry McGovern http://www.gerrymcgovern.com/nt/2003/nt_2003_04_28_writing_2.htm
Secrets of Great Web Headings and Summaries by Gerry McGovern http://www.gerrymcgovern.com/nt/2003/nt_2004_11_01_web_writing.htm
Ten Most Violated Homepage Design Guidelines by Jacob Nielsen http://www.useit.com/alertbox/20031110.html
Top Ten Web Design Mistakes of 2005 by Jacob Nielsen http://www.useit.com/alertbox/designmistakes.html
10 Big Myths About Copyright Explained by Brad Templeton http://www.templetons.com/brad/copymyths.html