Writing for the Web

1
Writing for the Web
2
Why do people go to the Web?

• Overwhelmingly, people go to the Web to find
  useful information as quickly as possible.
  (www.useit.com/papers/webwriting/writing.html)

3
The Web complicates reading

• Reading is a significant task for many people,
  something they dont do willingly or well.
  
• Factors such as screen resolution slow reading by
  about 25.
  
• Poor design decisions, such as the addition of
  backgrounds or font color, can make reading on
  the Web more fatiguing. C\Documents and
  Settings\Pat Sellergren\Desktop\ATTENTION ALL CHI
  OMEGA CHAPTERS.htm
• Features such as animation can interfere with
  reading.

4
The First Law of Writing for the Web

• If you dont write for the reader, the reader
  wont read.
  

5
How people read on the Web

• They dont actually read they scan (glance from
  point to point often hastily, casually, or in
  search of a particular item). Only 16 read word
  by word 79 scan.
• (Source www.sun.com/980713/we/wftw9.htmlsessi
  onisKSU100YAAFNBBAMUVFZE45)
  
• Studies found that a sample Web site scored 47
  higher in measured usability when it was
  scannable.
  
• (Source www.useit.com/papers/webwriting/writing
  .html)
  

6
Reading Scanning

• Progression is word by word across the page and
  down
  
• Meaning is gathered from the syntax (the way
  words are put together to form phrases or
  clauses) and the ongoing process of reading each
  word
• Key information is not visually called out

• Progression is rapidly around the page as user
  looks for specific facts or key words and
  phrases
  
• Meaning clusters around key words and phrases as
  the user finds them. There may not be an ongoing
  process of meaning-making
  
• Key information is visually called out

7
How you can help

• The characteristics that facilitate reading word
  by word tend to undermine scanning, and vice
  versa therefore, if readers tend to scan, use
  techniques that enhance the readers ability to
  scan.

8
Readable text.
9
(No Transcript)
10
Scannable text. Oversized headings alert the
reader to the topic of each paragraph.
11
Scannable text. Headings, bullets distract the
eye from its left-to-right, top-to-bottom
progress and visually organize the material.
Scannable text. Headings, bullets, and parallel
constructions distract the eye from its
left-to-right, top-to-bottom progress and
visually organize the material.
12
Scannable text uses headlines, captions,
different colors, different size fonts, and the
inverted pyramid structure. C\Documents and
Settings\Pat Sellergren\Desktop\Israeli tanks
back off Arafat HQ.htm
13
Scanning

• Scannable text calls attention to key
• information through the use of
• Headings Large type
• Bold text Highlighted text
• Bulleted/numbered lists Graphics
• Captions Topic sentences
• Tables of Contents

14
When highlighting, keep in mind

• Dont over-highlight. It loses its effectiveness.
  
  
• Dont highlight that which isnt significant.
• Dont highlight overly long phrases. A scanning
  eye can only pick up 2-3 words in a glance.
  

15
(No Transcript)
16
With lists, keep in mind

• Lists slow down the scanning eye and draw
  attention to important points.
  
• Numbering a list suggests order of importance.
  Number a list only if the order of entries is
  important.
  
• Limit the number of items in a list to no more
  than nine. Readers can hold between 5 and 9 items
  in their minds at one time.
  
• Dont require users to click through level after
  level of lists. Below the second level,
  information should be available.
  
• Alphabetizing a list helps the reader find the
  topic (if the list terminology if familiar).
  Avoid suggesting that the list is alphabetical if
  it isnt.

17
With headlines, keep in mind

• Headlines should be straightforward, not cryptic,
  funny, or cute.
  
• Headlines that summarize the copy significantly
  help readers scan and decide whether they want to
  read more detail.

18
What else do readers want?

• Concise copy. Users dont like long, scrolling
  pages they prefer short, to-the-point text. Less
  copy means less information to process, easing
  their cognitive load. Source www.useit.com/papers
  /webwriting/writing.html

19
What does concise mean?

• Free from all elaboration and superfluous
  detail
  
• What is concise is to a degree relative to
  audience however, keep in mind that, generally
  speaking, Web users dislike scrolling

20

• Users will read longer copy however, they want
  to make the decision to do so. You can make this
  possible
  
• Use anchor pages on a page containing a lot of
  copy, put a list of links at the top of the page
  that will take the reader to places lower on the
  page. This allows the reader to scan the list to
  see if the page contains material of interest.
  C\Documents and Settings\Pat Sellergren\Desktop\C
  osts Financial Aid - Boston College.htm
  C\Documents and Settings\Pat Sellergren\Desktop\F
  requently Asked Questions about Harvard
  University.htm
• Use the inverted pyramid structure Begin with
  the conclusion, follow with supporting
  information, end with background.

21
Inverted Pyramid
Headline states the conclusion
Subhead provides supporting info
Summary of story adds more detail
Route to full story
22
Can copy be too brief?

• Copy should answer the readers informational
  (amount of detail desired/required) and emotional
  needs (e.g., does the reader need reassurance,
  hand-holding, etc.?).

23
(No Transcript)
24

• A paragraph of introductory copy can change the
  entire tone of the page.
  
• C\Documents and Settings\Pat Sellergren\Desktop\
  Winthrop new site.htm
  
• C\Documents and Settings\Pat Sellergren\Desktop\
  Boston College admission homepage.htm
  
• C\Documents and Settings\Pat Sellergren\Desktop\
  Bluffton Prospective Students homepage.htm
  
• C\Documents and Settings\Pat Sellergren\Desktop\
  DU Prospective Students homepage.htm
  

25
Does concise always require cutting?

• No. It may be a layout issue. Use short
  paragraphs (7 lines or less), narrower columns
  (no more than 5 inches), and frequent subheads.
  
• (Source http//www.adventive.com/lists/icopywriti
  ng/sample.html)

26
Readers want objectively written copy

• Users dont like anything that seems like
  marketing fluff or overly hyped language. They
  call it into question, which creates a
  distraction that increases their cognitive load.
  
• For the most part, they couldnt care less about
  mission statements, slogans, or anything they
  consider fluff.
  

27
Add objectivity by

• Including links to off-site supporting
  information.
  
• C\Documents and Settings\Pat Sellergren\Desktop\G
  M Ability - Safety.htm
  
• C\Documents and Settings\Pat Sellergren\Desktop\F
  urman homepage.htm
  
• Working with the designer to produce a Web site
  that appears high quality, sophisticated, and
  tasteful without being slick.
  
• C\Documents and Settings\Pat Sellergren\Desktop\W
  elcome to Dartmouth College.htm
  
• C\Documents and Settings\Pat Sellergren\Desktop\T
  he Evergreen State College.htm
  
• C\Documents and Settings\Pat Sellergren\Desktop\U
  niversity of Texas Home Page.htm
  
• Leaving off mission statements, slogans, and
  anything that can be considered puffery.

28
Readers want

• Informal or conversational copy. Users can read
  it faster, thereby reducing their cognitive
  load.
  

29
(No Transcript)
30
Conversational copy

• Sounds like normal speech patterns, not too
  elementary, not too rhetorical
  

31
(No Transcript)
32
They want to know where they are and where they
can go

• Copy can be an aid to navigation
• Since readers focus on content first, embedded
  links (those links that appear in the copy rather
  than in a navigation bar) should be the primary
  links you want readers to see. Since they will
  use them as guideposts in scanning, only the most
  pertinent should be part of the document. Less
  pertinent ones can be included in a list of
  related links at the end of the copy.

33
They want context and meaning

• Users can enter a site at any page. Every page
  you writer should stand alone, without reference
  to a previous page.
  
• Use breadcrumbs. They help help users work out
  where they are in a hierarchical site.
  C\Documents and Settings\Pat Sellergren\Desktop\U
  seit.htm
• Caption illustrations except when the context is
  so clear that a caption would be redundant.
  
• Avoid jargon unless you can be absolutely sure
  your audience is fluent in it.

34
Think about your audiencewhat will make the site
easy for them to use? Answering that question
often involves asking what theyre looking for on
the site. Use of geographical regions here is
institution-speak.
35
Context and meaning (continued)

• Use humor judiciously, if at all. Its very
  subjective.
  
• Users are extremely goal driven and often rely on
  search as their main hunting strategy. When users
  come to a page from a search engine, they should
  know immediately how the page relates to their
  query. Highlight keywords, start the page with a
  summary, and use other means to aid scanning.

36
Context and meaning (continued)

• The way you organize the information you include
  in your pages helps provide context and meaning.
  
• Keep in mind human tendencies, abilities, and
  limitations, for instance
  
• Tendency to look for familiar patterns of
  relationship or mental models when dealing with
  new information
  
• Ability to gather information in multiple ways
• Inability to keep too many pieces of information
  in the mind at one time
  

37
Clear distinction between undergrad and graduate
38
Confusing mix of undergraduate and graduate
topics far too many options
Each column is alphabetized, but there is no
rationale for the column contents
39
No logic to the navigation options
40
Topic, for the most part
Audience
One audience
41
One last thing

• Web users are interested first and foremost in
  contentdesign can and should support that.
  Usability (that is, the users ability to get
  what he/she wants from the site as quickly and as
  easily as possible) should never be sacrificed
  for designand it is all the time, rarely out of
  malice but out of ignorance.

42
A few resources

• Wired Style http//hotwired.lycos.com/hardwired/w
  iredstyle/
  
• Jakob Nielsens Alertbox columns
  http//www.useit.com
  
• Citation style guide http//www.library.ualberta.c
  a/guides/citation/index.cfm
  
• www.builder.com