Lecture 8a: Content
and Writing for the Web
What You Will Learn Today
- Describe the central role of content
in web design.
- Explain the usability problems of reading online.
- Use appropriate format, content
and style when writing for the Web.
- Produce pages for printing as well as on-line
- Create documentation for a web-based
- Make appropriate use of animations and
- Content is the reason users come to your site.
- Content is more important than format, decoration or production
- A professional appearance can attract users and improve your
- But the text is usually more important to users than the graphics.
Why Web Users Don't Read
- Reading from computer screens is slower (25%) and more difficult
than reading print.
- The web is interactive. Users like to click frequently, not sit
- Users hate to scroll. Scrolling is slow and clumsy and takes
effort. Advanced users use PageUp and PageDown.
- Users scan. Users get the most important information without
reading every word.
- The Web is full of rubbish! Many pages are filled with useless,
poorly written text that the user does not want or need to read.
- People don't have time. Busy professionals are overloaded with work
- Use short pages to split up long pages.
- Do not merely make page 1, 2, 3, etc. Split content into coherent
- Restructure the pieces to make use of the non-linear structure of
- Extended examples and other content of secondary importance can
become separate pages.
- Use short paragraphs to break up long paragraphs.
- Use headings, subheadings, lists and tables.
- Emphasize text using boldface, colours, hypertext links, size and
position (e.g. enlarged pull quotes).
- Prioritize content into primary and secondary importance.
- Order by priority.
- The first word(s) should carry the key meaning.
- Use a short summary before a long article.
- Headlines should summarize the content they head.
- Page titles should be brief and different for every page.
- All content should directly support the goals of your site. Any that doesn't
should be cut.
- Be user centered. Provide content that is useful to the
user. Help the user solve problems.
- Avoid cheerful, self-praising but useless welcome pages.
- Be concrete. Back up your claims with facts.
- Keep content accurate and up to date.
- Write about the topic. Most users don't care about how the page or
site was constructed.
- Be brief. Avoid information overload. Write half as much as you would in a printed page.
- Be objective. Use neutral language rather than boasting or
- Use simple language that your users understand. Avoid or define technical
- Proofread. Find and correct all spelling and grammar errors.
- If your web authoring tool can't do this, copy and paste into a word
- Caution: Automatic checks do not catch all errors.
- As in other media, a professional site should employ a copy
- The Web has not yet eliminated or reduced printing onto paper.
- Compared to long web pages, printed documents are generally:
- easier to read, quicker to navigate, more permanent, easier to access.
- Web pages can be hard to find and retrieve again, unavailable, moved, or
- Provide printable versions of long documents.
- Serif fonts are better for printed text. Sans serif fonts are
better for computer screens.
- Use two columns to reduce paragraph width on paper. Single
columns are better for scrolling.
- HTML was not designed for high quality precisely formatted
- PDF and PostScript files are commonly used to produce portable,
- RTF format is more portable than Word and most other word
- Pages should be printable on both common paper sizes.
- International A4 is 210 x 297 mm; US Letter is 8.5" x 11".
- Maintaining both web and print versions has a high maintenance cost.
- Maintaining two copies of a document takes time and error-prone.
- Choose web-based or print-based unless the document will often be accessed
in both ways.
- Well-designed interfaces and web sites should be easy to use and
not need user manuals.
- Some complex user interfaces may need explanation to help users solve
- Users only read help information when they really need it.
- Give step-by-step instructions on how to do things and provide many
- Documentation pages should be searchable.
- Be brief. Do not give a lot of conceptual explanation and
- If there are many unfamiliar terms, hyperlink the terms to a glossary.
- Minimize the use of animations.
- Animations, scrolling text and marquees are annoying.
- Only use them if a non-animated image will not perform the same
- Use animations that stop or can be stopped (e.g. by clicking on it).
- Animations can sometimes perform useful functions:
- Show continuity in transitions e.g. change in state
- Indicate dimensionality in transitions e.g. zooming in/out
- Illustrating change over time e.g. maps showing population density
- Displaying more than one image in one place in a page e.g. photo or
- Visualizing 3-D structures e.g. rotating molecules and WireFrame models
in Java SDK demo applets
- Attracting attention (only if it helps the user, e.g. to focus on some
part of the page)
- Multimedia on the web is generally too slow and low quality to compete
with television and radio.
- Multimedia can work reasonably well on a LAN.
- Web-based multimedia is useful in certain cases.
- Promoting film, radio or music; showing movement or a speaker's
personality; setting mood; teaching pronunciation; games
- Reduce file size and download time.
- Reduce length, size, frames per second and colour depth. Use
- Give an idea of the content and a time estimate. Help the user decide if
it is worth the wait to download.
- Display video or sound clip length in seconds, and the size of any file
over 50 KB.
- A smaller media type can substitute or at least give a preview.
- Give thumbnail images or a few still frames of video clips. Give a text
transcript of spoken audio.
- For accessibility of video, use captions, text transcriptions and/or
To Do After Class
Project 3 and
Lab 7 are due Friday. The
final project design specification and
Lab 8 are due next Friday.
- References: Nielsen Ch. 3, Sklar Unit B, Reding & Vodnik G-16, 100
Dos and Don'ts