Download Writing for the Web - Columbia University

Digital Library Seminar Series
November 3, 2006
Joanna DiPasquale
Libraries Digital Program Division
WARNING
This is a hands-on, participatory
seminar!
Agenda
• What is “Writing for the Web?”
 Why writing for the web?
 Why still writing for the web?
• Guiding principles
• Some notes on design
• Questions and comments
What is
?
...with illustrated examples
What is writing for the web?
“17. Omit
needless
words.
Vigorous writing
is concise”
Strunk, William Jr., and E.B. White,
The Elements of Style
(Allyn and Bacon, 1979).
An example of effective
web writing: Charlotte
saves Wilbur with her
clear, concise writing.
White, E.B., Charlotte’s Web (HarperCollins, 1952).
What is writing for the web?
A balance
between:
• being clear
• being concise
Be the user
My Eureka moment
United Technology’s new ad campaign:
“You don’t have to understand
everything we do to profit from it.”
http://www.utc.com/curious/index.html
Be the user…
– INSTRUCTION DIAGRAM –
Be the user… you are now on the other side
of the vast array of information that most
users are forced to digest.
• What do you need from the diagram?
• What is useful / not useful?
Be the writer
The Canterbury Tales: Prologue
(translation)
When April with his showers sweet with fruit
The drought of March has pierced unto the root
And bathed each vein with liquor that has power
To generate therein and sire the flower;
When Zephyr also has, with his sweet breath,
Quickened again, in every holt and heath,
The tender shoots and buds, and the young sun
Into the Ram one half his course has run,
And many little birds make melody
That sleep through all the night with open eye
(So Nature pricks them on to ramp and rage)Then do folk long to go on pilgrimage,
And palmers to go seeking out strange strands,
To distant shrines well known in sundry lands.
And specially from every shire's end
Of England they to Canterbury wend,
The holy blessed martyr there to seek…
Wow!
http://pages.towson.edu/duncan/chaucer/duallang1.htm
The Canterbury Tales Prologue:
Net version I
Prologue:
 After cold and rainy weather, nice weather.
 Spring symbolizes an awakening and rebirth
in ourselves and in the seasons.
 Spring makes English people go on
pilgrimage to Thomas Becket’s grave.
 The grave is in Canterbury.
The Canterbury Tales Prologue:
Net version II
Spring:
 Makes everyone feel good
 Prompts pilgrims to go to Canterbury
Why
?
Why writing for the web?
Web reading ≠ print reading
[more on this later]
• Users scan rather than read
• Users jump around a lot
• Users enter and exit unpredictably
LESSON: Be clear!
Why writing for the web?
Things aren’t linear on the ’net.
• Users can’t easily tell
the scope of your site
• Lots of demands for
user’s attention
LESSON:
Each page must be able
to stand alone
Dream:
Reality:
Why writing for the web?
It makes users happy.
•
•
Users make snap judgments
about a site’s quality.
Economy of time – need to see what site’s all
about before you’ll invest time navigating it
LESSON: “Don’t make me think.”
Don’t erect barriers to convey information. Make it easy for the users to
find what they need.
Why writing for the web?
Results:
• “We can trust you!”
• “You give us good information!”
• “We’re coming back to your site!”
Why still writing for
the web?
[“Didn’t we already take this a few
years ago?”]
Why still writing for the web?
• New studies and analyses suggest we’re
on the right track
• Still some mistakes out there
• Lessons that can be used for other things
(e.g., newsletters and email)
• Lessons from other areas (especially
newspapers) show the infancy of the web
Writing for “Web 2.0”
Jakob Nielsen study: “F-Shaped Pattern for Reading
Web Content,” 17 April 2006
•
•
Users still scan. They’re just faster and more
savvy about it.
Reinforces keyword notions.
LESSON:
Keep writing
for the web.
http://www.useit.com/alertbox/reading_pattern.html
Writing for “Web 2.0”
Jeffrey Veen, Keynote address, Web Design
World, 30 Jan 2006.
The hype has missed the basics:
• Desire to tailor own experience
• Convey information  create simple tools
LESSONS:
1. Make clear ≠ dumb down
2. Trust the user
Engaging the web
1. Users scan and select
2. Even on content pages, users skim,
scan, and select
3. Not reading makes sense
4. Not reading is not new to the Web
5. Reading on the Web may be more
difficult than on paper
http://www.usability.gov/design/easycontent.html
Scanning demo
• Hilton Hotels website: http://www.hilton.com
• Q: What is the purpose of this site
– from the user’s perspective?
• A: To make a reservation
Exercise 1: Scanning
Place page about 3 feet from eyes.
Allow eyes to relax.
What do you see? Report back.
TIME: 5 MINUTES
Scanning content
• What areas of the page did you see at
first?
• Did this change when you relaxed your
eyes?
• Is the general purpose of the site obvious
at this level?
Guiding Principles
Our strategies for effective web
writing
Guiding Principles overview
• Point users in the right direction
• Do not compromise your style when you
can’t!
 Code of conduct
 Privacy notices
 Legal disclaimers
Guiding Principles
1. Be succinct
2. Be direct
3. Be structured
You can do this when
you:
 Eliminate wordiness
 Use effective titles
 Use active voice
 “Block” or “chunk”
content
 Use bullets
Be succinct
Be succinct: eliminate wordiness
• What this really means: eliminate words
• Cut your words by half, and then half
again
• Write in a clear, concise manner
Be succinct: use active voice
• Less overall words
• Easier to read
• More on this later [‘Be direct’]
Be succinct: make one point per
paragraph
• Inverted pyramid –
put your conclusion /
main point first
• Helps users that don’t
read in sequence
• Maximize information,
minimize time
Conclusion
More info
finer points
etc.
Be succinct: results
• Reduces page length – ergo, reduces
scrolling
• Allows users to pick out important words
• Easier to read
We use a technique that works with the
user’s method of scanning.
Be succinct: “Plain English” demo
Before
• High-quality learning environments are a
necessary precondition for facilitation and
enhancement of the ongoing learning
process.
After
• Children need good schools if they are to
learn properly.
http://www.plainenglish.co.uk/beforeandafter.htm
Sometimes, it’s not that easy
• Mission statements
• Pamphlets
• Texts
… all don’t scale well when migrating to the
web. Use extra caution when migrating
these! [They weren’t written for the web!]
Be succinct: LITA
http://www.lita.org/ala/lita/aboutlita/whatlita.htm
What is LITA?
The Library and Information Technology Association is the leading
organization reaching out across types of libraries to provide
education and services for a broad membership. The membership
includes new professionals, systems librarians, library
administrators, library schools, vendors and anyone else interested
in leading edge technology and applications for librarians and
information providers. Programs are offered for everyone from
absolute beginners to hi-tech professionals. Continuing education is
provided through workshops, institutes, and an annual National
Forum. Guidelines offering practical experience with various
technologies are published regularly. The Information Technology
and Libraries journal provides peer reviewed articles assuring the
quality of this member benefit. Through LITA’s Web presence you
will discover a variety of services addressing trends and practical
applications. [118 words]
What did LITA do incorrectly?
• Too wordy!
• Passive voice
• Assumed users came to site through
home page
• Didn’t rework text for the web (e.g., see
last sentence)
Be succinct: LITA 1
What is LITA?
LITA is the Library and Information Technology
Association, a division of the American Library
Association. We provide education and services
to a broad group of members in all types of
libraries. LITA emphasizes high-tech solutions
to every member, from novice to expert. We
publish guidebooks and journals, and hold an
annual conference. [52 words]
Exercise 2:
Be succinct
• Eliminate half of the words in the
text.
• Be merciless!
Extra credit: eliminate even more
than half the text, while delicately
balancing clarity and conciseness.
TIME: 10 MINUTES
Be direct
Be direct:
Not reading makes sense
[Does this title make any sense?]
User behavior:
• Users seek specific bits of information
and will skim to find them
Be direct:
Not reading makes sense
Our techniques:
• Use familiar key words
• Avoid jargon unless necessary
• Use active voice
Be direct:
Not reading makes sense
Our techniques:
• DON’T use keywords that the user
wouldn’t use
• DON’T use jargon to explain things that
don’t need jargon (very few things need
jargon)
• DON’T use passive voice
Be direct: use active voice
• Facilitates succinct writing
• Easier to understand
• Easier to pick out keywords
Be direct: keywords and jargon
• Use consistent language
• Use consistent style and tone [more on
this later]
• Speak the user’s language
• Speak with the user: use “us” and “we”
• Use analogy if possible (“files” and
“folders”)
Be direct: speak user’s language
HFI suggested list:
Some library ones (John Kupersmith):
Acquire
Get
Conclusion
End
Duplicate
Copy
Elementary
Simple
Evident
Clear
Identical
Same
Is symptomatic of
Shows
Library catalog
Find books
Databases
Find articles
Browse / keyword
search
Begins with / find
anywhere
Be direct: ILL example
Sample paragraph:
“Interlibrary Loan allows borrowers to obtain books from
institutions or repositories that own these items when the
patron’s home library does not.”
We know better:
Common problem
in familiar terms
Book not available? You can borrow it from another library
and have it sent here through Interlibrary Loan!
Active voice
Helpful jargon
Be direct: DL example
“
Spotted on the web:
The Library's Digital Collections,
available via a browser, are listed
below. Internet Explorer is the
preferred browser for accessing
these collections.
New! The XYZ Digital Collections,
ABC Collection, 123 Collection
and the QRS Collection can be
searched simultaneously using the
Digital Library Cross-Collection
Search.
•
•
•
Collection A
Collection B
Collection C
”
Too much passive voice!
Huh?
We know they’re below.
More passive voice!
Hmm, this could be
handy…
Finally, the point!
Be direct: DL example
Digital Library Cross-Collection Search
Search XYZ, ABC, 123, and QRS collections
simultaneously.
Looking for non-Internet collections? View our
other digital collections.
• Collection A
• Collection B
• Collection C
Exercise 3: Be direct
• Get direct! Rewrite using active voice, plain language, and
minimal jargon
• Compare your directness with others in your group
Extra credit: Review Exercise 2 in light of what you learned
in Exercise 3. Would you change anything?
TIME: 10 MINUTES
Be structured
Be structured
I can
study
there!
I never
go there
– I just
go to
their
website.
I can get
my books
there!
Dude,
that’s
Butler!
Be structured
• Brings ultimate clarity to your pages.
• Allows users to internalize your document
in a variety of ways. (This is a good thing.)
• Web 2.0: structured content can go other
places. Easier to see what’s applicable.
Be structured: title your sections
• Users scan. Give them something to
scan.
• Titles = effective way to convey what
document is all about
• “Drop in” – who / what / why
• The inverted pyramid helps
Goal: quickly understand text
Be structured: “chunk” content
Limit paragraphs to a few sentences.
•
•
•
•
Big blocks of text are scary
Small blocks of text are manageable
“One point per paragraph” helps
Add links where appropriate
Goal: break text into manageable pieces
Be structured: use bullets
•
•
•
•
Use bullets frequently – but don’t go bullet-crazy!
Use consistent structure and tone
Don’t make complicated sub-lists
Complicated sub-lists begin a point
• then bring you
• to text that
• nobody will read
Goal: sum up / complement text effectively
Be structured: LITA 2
• What would additional goals be?
• How would we achieve them?
Be structured: LITA 2
We are LITA, the Library and Information Technology Association, a division of
the American Library Association.
Become a member! Our members come from all library areas:
• New professionals
• Systems librarians
• Administrators
• Library schools
• Vendors
• … and more!
LITA’s many activities include:
• Professional development programs and continuing education
• Workshops and institutes
• Guidebooks and manuals
• A National Forum each year
• Information Technology and Libraries peer-reviewed journal
Be structured: Demo #1
http://www.pima.edu/business/solutions/
Be structured: Demo #2
http://www.realtor.com
Exercise 4:
Be structured
•Find exercise 3
•Turn your block of text into a user-friendly web page
•Remember to use the inverted pyramid, effective titles,
chunked content, and bulleted lists
•Compare with others in your group
TIME: 10 MINUTES
Some notes on design
Design caveats: simple
• Left-justify / “rag right” for left-to-right text
• No italics
• NO ALL CAPS
o
• Always pro fread!
^
Design caveats: more complex
Try to group page into natural schemes or
categories
 By intended audience
 By function
 By subject
Interesting aside: newspapers
• Newspapers use really effective
techniques to make us read them easily
• These techniques have evolved over time
• The Net is still changing / evolving best
practices
• What will we see in the future?
• What remains: prose, style, effective
writing
Conclusions
• What did you learn?
• Did you already know this?
• Other interesting asides?
Questions
Joanna DiPasquale
Web Design / Development
Libraries Digital Program Division
Butler Library, Columbia University
212-854-8758
[email protected]
Be succinct!
Be direct!
Be structured!
Enjoy your day!