Transcript PowerPoint Slides - Northern Lights Internet Solutions

WWW: Writing for the Wired
World
September 25, 2002
Darlene Fichter, President
Northern Lights Internet Solutions Ltd.
www.lights.com
Outline
Reading & Writing
Research
1.
2.


3.
Do’s and Don’ts
Format, typography, style, ...
Document Conversion & Standards
Outline
Writing for:”
4.


Usability Testing
5.

6.
Search Engines
Error Messages
Quick and easy techniques
Strategies to encourage good writing
Challenges


Focus on IT – the technology
Often key Intranet developers do not have
writing experience


Programmer, Information architect, Content
experts, Intranet manager, Designers
As a result:




Writing ignored
Time spent on top level pages only
Time spent on menus/graphics
Site vs. Page
The Reality

Micro-content is as important as the
navigation, side menus, design
Focus of the Presentation:
Research

Usability studies

Watch and observe 1000’s of users using
the web and intranet
Reading & Writing

Goal is to communicate



Strategy
Key messages
Your audience
There is nothing more important than
the strategy phase. If you don’t
spend time on it, it’s like being on a
dark road without your headlights on.
Drue Miller, Webmistress Vivid Studios
Intranet Audience


Focused on getting the job done
Diverse



Experience
Usage patterns
Nature of their work – Engineers, Financial
analysts, Marketers
Novice / Occasional Users*


Intimidated by complex menus
Like unambiguous structure




Apples or Oranges
Easy access to overviews that illustrate how
information is arranged, maps, FAQs
Glossary of technical terms, acronyms,
abbreviations
Visual layouts & graphics that trigger their
memory
* Adapted from Patrick Lynch Sarah Horton, Web Style Guide. Yale
University Press, 1999.
Expert/Frequent Users*






Depend on you for speed and accuracy
Impatient with low-density graphics that offer
only a few choices
Prefer stripped down fast loading text menus
Specific goals
Appreciate detailed text menus, site structure
outlines, comprehensive site indexes, well
designed search engines
Accelerators – ways to bypass the fluff
* Adapted from Patrick Lynch Sarah Horton, Web Style Guide. Yale
University Press, 1999.
International Users



Don’t abbreviate dates 3/4/99 March 4
or April 3?
Avoid idiosyncratic professional jargon
or obscure technical terms on your intro
pages
Avoid situational metaphors
Users Want to Know
Who?
Tell them WHO is speaking – what
department or person created the page.
What?
WHAT is the page about? Have a title.
When?
Where?
WHEN – time is important in evaluating the
worth. Date every page. Especially important
in long and complex documents that may be
updated.
Ideally, WHERE are they – what intranet site or
sub-site?
Top 10 Things Employees Need
to Know*
1.
2.
3.
4.
5.
Contact information
Internal news about
the company
Press coverage about
the company
Press coverage about
a topic
Company policies
6.
7.
8.
9.
10.
Information about
competitors
Maps
Contact information
for someone outside
the company
Latest analyst report
Background on
unfamiliar company
*Alison Head. On-the-Job Research: How Usable Are Corporate Intranets?
How Users Read
Screens

How do people read
on the screen?





Top to bottom
Left to right
Focus first on
the micro-content
Scroll to the bottom
Only after failing
- side menu
- top menu
on
Reading

25% slower on the screen
Research shows: DON’T READ



People who are looking for information
don't read, they scan.
If they have to read instructions or help
page, most people will not.
Readers understand more when reading
less.
“Scanability”


Create page titles, headings and
subheadings
Be consistent in how you design the
headings

Use
font and/or color to offset headings
Headings & Subheadings
Rule of Thumb




Emphasis – rule of thumb one at a time.
Bold or size.
Eyes are tuned to small differences.
No need to SHOUT at users.
Punch Up the Power of Headlines




Make every heading word meaningful
Make sure the 1st headline or title on
page summarizes the content
Separate sections with 2nd level
headings
3 levels on one page is about all the
reader can grasp
Use Lists




Use lists or tables
Use bullets when sequence doesn’t
matter and use numbers when it does
Lists speed up scanning but slow down
reading
Use lists when you have key concepts,
not full sentences
Which is easiest to read?
Research says…
Anatomy
Anatomy
Biology
Biology
Biotechnology
Biotechnology
Chemistry
Chemistry
Microbiology
Microbiology
Physics
Physics
Zoology
Zoology
Anatomy
Biology
Biotechnology
Chemistry
Microbiology
Physics
Zoology
Tables

Can help organize content for easier
viewing
Table: Example 1
Books
20th Century
Journals
Van Gogh
Maps
Modernism
Impressionism
Table: Example 2
Art
Format
20th Century
Books
Modernism
Journals
Impressionism
Maps
Van Gogh
Table: Example 3
Art
20th Century
Format
Books
Modernism
Journals
Impressionism
Maps
Tables



Organize your content to be read in
columns, not as rows
Categorical not alphabetical
Do not use table borders to delineate
the content – use space and
background color
Table: Example
Users Also Scan for Links


Make the links in your text meaningful
Make visited and unvisited links contrast
with the base font color
Example of Scanning
Employee Phone Number Search
1.
Search by last name
2.
Browse employees by office location
3.
List all staff, click here
Hypertext: Classic Mistakes



Overused – everything is a link.
Used for key concepts instead of lists or
headings based on the belief.
Often the link is referenced itself
interrupting the reader’s thoughts. To
start the tour, click here.
Use Links Wisely



Hypertext is powerful but can also be
distracting
Links can help reduce clutter by moving
information to separate Web pages
But when concentrating on content,
people often ignore embedded links
Create Links That Don’t Need To
Be Followed


Use long descriptive links, captions, or
headings so users can eliminate choices
UIE’s research shows that links with 4
to 9 words are more effective
Reading Slower: Implications for
Style




Be succinct
Pyramid style (newspaper)
Scanning – lists, lists and more lists
Looks a lot like PowerPoint
Be Succinct




Simplify for understanding
Use fewer words, smaller words, and
simpler words
Place words into simple sentence
structures
Examples:
utilize=use
construct=build
Rule of Thumb: 50%

½ the word count of conventional
writing
Invert the Pyramid




Newspaper style writing
State your conclusion first
Summarize most important items
first
Then get to the details
One Idea Per Paragraph


Stanford/Poynter study showed that
many web visitors will read only the
first or second sentences of paragraph
Use a strong lead sentence that
summarizes content

Aka blogs
Fragments or Sentences



Some debate
Poynter seems to imply sentences
Imperative style sentences starting with
a verb can be very effective
Harness Verbs



Verbs get your visitors energized
Using active verbs also helps improve
your credibility
Examples:


Download Marketing XYZ presentation.
Register for XYZ workshop.
Reading & Trust


Users are judgmental and strongly
adverse to marketese, or “happy talk”
For your Intranet to be credible, you
must be:



Current
Accurate
Objective
Things to Avoid

“Marketese”

Anything that sounds like “advertising” is a
complete turn off … the best, the biggest
…
Objective




Avoid superlatives and vague claims
Don't boast, exaggerate or selfcongratulate
Avoid advertising talk such as "greatest
thing since..." and "state-of-the-art..."
Present facts clearly and users will
decide for themselves what is useful
Adapted from: http://www.eldis.org/tales/writing/write.htm
Objective ≠ Boring

Rule of Thumb


Be fresh and engaging
Write as if you are talking to an “individual”
Be Concrete


Use concrete words: nouns and verbs
Avoid adjectives and adverbs
Accurate



Make sure your facts are correct and
timely. Are your statistics from this year,
this quarter?
Make sure your links work! If they
don’t, it’s sure to annoy users.
Date your content.
Reading, Scanning & Typography



Our eyes look for patterns
Control the words, control the layout and
the look
Make it very easy to see repeating patterns
2.
1.
3.
Typography*

Consider typography carefully when the
page content is mainly text. The use of
type will define the page.

Use margins to separate areas
* This section is based Patrick Lynch Sarah Horton, Web Style Guide. Yale
University Press, 1999 * SURL Laboratory studies,
http://psychology.wichita.edu/surl
Clutter
Clutter and confusion are failures of
design, not attributes of information.
Edward Tufte, 1997 interview
Web & Justified Text


Hard to justify to text
Left justified the most legible option
Centered
Right Justified
Left Justified
Headlines & Justification



Left aligned is best
Right aligned is okay
Centered works well when you can
justify text (not recommended on the
web) and pairs poorly with a jagged left
edge
Line Length



Many web pages have lines that are too
long to read quickly
The eye’s acute focus is only about 3
inches wide
Key Consideration:



Accessibility
Controlling the length
On the web usually 50 to 70 characters
Text Cells


Create a table with a 365 pixel wide cell
With a 12 point Times New Roman font,
you’ll have about fifty characters and 9
to 10 words per line
* Adapted from Patrick Lynch Sarah Horton, Web Style Guide. Yale
University Press, 1999.
Capital & Lower Case Letters


UPPERCASE is harder to read
We read by recognizing the overall shape of
words, rather than parsing letter by letter
Tops of Words
Best Practices

Title case or downstyle typing where
you capitalize only the first word
Typefaces

You need to consider:
1.
2.
3.
Legibility on the screen
How well it prints if the page or
document is lengthy
Visitor may override your font choices
Screen

Arial or Times New Roman fonts at 12
pt are the most legible*
*SURL Laboratory usability studies.
http://psychology.wichita.edu/surl
Screen & Printing



Times New Roman is a good choice for
legibility on the screen
It is compact and is also legible on
paper
Verdana & Georgia look great on the
screen but look large when printed
Conventional Choices

Serif face such as Times New Roman
for body text and sans serif such as
Arial or Verdana for headlines
Classic Mistakes

Fonts are too small


Over 40 with bifocals!
Failure to recognize that user needs to
control fonts
Classic Mistakes

Too many fonts
Page looks like a clown’s pants.
Bold, Italics, Color & Underline



Bold is effective and works well for
section headings.
Italics is harder to read. It does stand
out. Use for short blocks of text only.
Underlined text is out. Looks like a
hyperlink.
Colored Text

In blocks of text, colored words looks
like hyperlinks. Avoid this use.
Colored Text in Headings
 Using colored text in headings can be
effective
What about longer documents?

To convert or not convert

How will it be used?




How will your search engine index it?
How is it produced?


Chunks or all at once
Printing
All at once, revised in bits
Nature of the content

Prescription drug tables
What about “Save As”?

Standards



XHTML
Bloated code
Short term
What if users need to read a
long document?





Provide a good headline and summary
Consider rewriting it (50%)
Provide an outline
Provide navigation within the document
to anywhere else in the document
Make it easy to print any section or the
whole document
Long Documents as HTML



Chunk it
Present a “model” that the users grasp
Offer Internal navigation



Next, Previous
Back to section
Back to T of C
To Scroll or Not to Scroll?


Early days, scrolling caused fatal errors
Scrolling works now provided that the
page looks like it continues
Above The Fold

Hierarchy of Importance


Make sure the most important items are
above the fold
To enhance navigation, link density
should be the greatest above the fold
Examples: Above/Below
Examples: Above/Below
Language, Metaphors, Puns and
Fun



Use the language of your users
Ambiguity is often a problem
Provide context
Classic Mistakes




Web sites are full of jargon
Organized by internal departments and
use internal names
Works fine for those that are within the
unit
Main Intranet site should try to use
general terms or use “jargon” followed
by an explanation
Puns & Fun

Humor is tricky. Puns and metaphors
often don’t work quite like you expect.
If you have an international audience
they often don’t translate well.
Other Important Writing Tasks
1.
2.
Error Messages
Search Engines
Error Messages


Who writes the error messages?
Predict points of failure and suggest
solutions:



404 Not Found
No search results
Should stand out from other text

Should be comprehensible!
Search Engines


Crucial audience, often overlooked, is
search engines
Find out how your search engine ranks:



<title>, <h1>, metatags, keyword
frequency, date
Write to satisfy the engine
Increase “findability” – consider how users
will search for this page
Make Your Web Pages Free
Standing



Many users will arrive at a page from a
search result list
The page may be the 22 page in the long
document or the home page
The user needs to know – where they are,
what’s up and what’s below
Writing
How good is it?
What really works?
Have you ever been at a
web development meeting
where people debated the
size of an image or the
color of link or a label for
hours?
“Cookie” Test

Preference or “cookie” testing




My Account
Your Account Status
Chequing Account
Login
Paper Mockups

Take out pages and ask where would you
click to do X, Y and Z?
Imitation is the sincerest form of
flattery!



Thinking of changing your site
See a good idea
Test their page/site with task based
testing
Task Based Testing



Real users doing typical tasks
Observers
Analysis
Summary of Results
Participant
1
Task
Number
2
3
4
Median
Mean
240
280
90
267.5
240
300
380
300
240
240
170
150.6
420
420
180
180
1
60
540
240
2
840
50
60
3
600
4
180
5
240
6
420
7
300
80
58
180
175
180
5
120
170
10 Strategies to Encourage Good
Writing
1.
2.
3.
4.
5.
Have an editorial style guide for
acronyms, names, etc.
Mandate site wide look & feel using
CSS
Lead by example
Recognize good writing
Encourage key content providers to be
observers in usability testing
Educate & market
6.

7.
8.
9.
10.
Tips, newsletters
Reward with “search engine”
placement those that “play nice”
Set up quality checklists
Train new authors
Educate manager’s that one of the
“W”s in WWW is writing!
Secret to Good Wired Writing



Observe, test, and learn
Test some more
Write often and write a lot
Thank you!


Questions?
Darlene Fichter
Northern Lights Internet Solutions Ltd.
Web Sites Usability & Writing
http://www.lights.com/talks/