Brian Carroll | Berry College | Class Homepage

“Each of us literally chooses, by his way of attending to things, what sort of universe he shall appear to himself to inhabit.” —William James, psychologist.

Hypertext
We live in a cut-and-paste culture.

The ease of copying, erasing, rearranging and otherwise manipulating text is breaking down the linear model and changing scholarship and information delivery.

As Landow (1997) writes, hypertext is helping to put authors’ and researchers’ notes and original data in “experientially closer proximity.” Blogging is a contemporary example of what Landow described.

Vast amounts of information, including related texts and resources are accessible through links. Just as book printing technology influences if not dictates how books are read, hypertext is enabling a new way of reading. In online environments, the once solitary main text has a potentially infinite number of neighbors. Hyperlinked footnotes, as just one example, can make many of them next-door neighbors.

Hypertext and hypermedia are defined by the use of the link, which can change the direction of the reader’s experience in or navigation through the document. These nonlinear paths require a new rhetorical style, one that recognizes that the producer cannot dictate the order in which the information is read. They also require the producer to prevent a user’s disorientation. Networks linking networks presenting disparate systems of Web pages can easily lead to confusion.

Effective use of hypermedia means finding ways to prevent or avoid confusion in navigation and in how the information is organized.

Headlines, subheads, hyperlinks, and clear and consistent navigation can help.

Key questions:
• How can the site assure and orient readers when they first arrive?
• What can be done to orient readers and help them read efficiently and with pleasure?
• How can the site or document help readers retrace the steps in their reading paths?
• How can the destinations for the links in the document be described or signaled?

Taken to their logical conclusion, hyperlinks and hypertextual documents would produce completely non-linear “texts,” or a multi-linear rhetoric. Despite nearly 15 years of arguments for them and experiments in them, hypertextual “spatial” essays never caught on. Why not? What has held them back? Will they ever catch on?

Hyperlinks: When they were introduced, hyperlinks were controversial. This is not surprising. As Mark Poster wrote, the introduction of each medium, from print to the Internet, “has been greeted with howls of despair over the fate of morality” (Digital Media Revisited, p. 521). This outcry points to the potential force and impact of new media.

Many felt hyperlinking interfered with reading comprehension and understanding. Researchers found, however, that hyperlinks in fact do not “slow down the reading process [and] do not affect text comprehension” (De Ridder, 2002).
Hyperlinked headlines can conserve space without compromising their own utility as headlines.

Many users scan sites by clicking from one link to another, so Web writers should check their pages by scanning in this way. The links should help create some sense of what the page is about. The homepage of Arts & Letters Daily is readily recognized as an intersection or navigational point from which to decide where to travel next.

The hyperlinked headlines at NYTimes.com all lead to NYTimes.com content, and it is all news. The peripheral links in the left and right panels are dedicated to either navigation or related content both within and beyond the Times’ site, so hypertext links can be used to create content and concepts, or to supplement something else.

McAlpine advises that because link words look like headings, they should be treated like headings. The reader’s intuitive response to highlighted words and hyperlinked content should provide a better sense of the page’s main point(s).

A good example are directory pages, such as Yahoo! and MSN, which could be described as menus of hyperlinked headings.

Almost all of Yahoo!’s textual content (and the visual, as well) is hyperlinked, and it is organized as a hierarchy of heads, subheads and teasers. If a visitor wants to shop, the header “Shop” cues several options indicated by hyperlinked subheads, including “Auctions,” “Autos” and “Classifieds.” The visitor can quickly determine the headings that matter because of the way the page is organized.

The directory format illustrates another important point about hyperlinks: by themselves they do not form a narrative. Without a narrative, readers are left to wander. In the Yahoo example, the links are merely navigational. It is not a criticism since providing navigation and access to other resources is the page’s intent. The directory also points to a recurring problem with large collections of links: maintenance. Broken links are frustrating and common. They chip away at a page’s credibility, and they are a sign of age. Links should be used judiciously.

Roger Parker (39) suggests other elements that can serve as links, both internal and external:
• buttons and icons
• navigation bars
• image maps and images
• anchors

Irrespective of how they are displayed, these links should be obvious and unambiguous, consistent in appearance, and small in terms of file size. They should carry information and not appear merely as labels.

An example:
Bad: For more information on the Boeing 777, click here.
Good: The company has more than a dozen Boeing 777s in its fleet.

Another example of good hyperlinking comes from an undergraduate student’s blog for the course “Mass Communication & Society” at Berry College:

The student’s links take readers to the supporting evidence and primary source material in such a way that they do not interrupt the flow of what the student is trying to say.

Headlines
One of the common threads in this course is the understanding that Web audiences skim, scroll and scan. They do not read word by word by word. Headlines, headings and headers are essential. They halt the “scanner” and mark the way. They should predict for the reader what content will follow, allowing the reader to decide whether to pause to read that content or to keep moving. They are visual dividers, helping people to skim to the next point.

Brooks and Sissors (2000) list six tasks for headlines:
• Attract the reader’s attention
• Summarize content
• Help reader index that content
• Depict mood and tone
• Help set the tone
• Provide typographic relief

They should inform rather than entertain, particularly since the audience is global. Conciseness and accuracy should not be sacrificed for personality. For the same reason, abbreviations, slang, idioms, colloquialisms and puns should be avoided.

Headings can be organized on several levels. Individual pages might have their own headings to introduce them, then subheads throughout the pages and possibly sub-subheads if the text is particularly dense.

Here are few guidelines for writing headlines for online environments:

• Explain what the article is about in simple terms. No cute or clever headlines. No puns, metaphors, analogies or similes in headlines.
• Avoid teasers. Users have been burned too many times. Give everyone a break and tell them what is behind the link in straightforward terms.
• Skip articles such as A, An and The, especially when starting the headline.
• Make the first word important.
• Do not start all page titles or headlines with the same word. Remember, users are scanning, so differentiation is critical. The same word would confuse.
• Use clear fonts and colors, and make the text big enough to read.

If a headline came with the document that is being adapted for online presentation, a new headline should be written because of the different roles online and in print.

Arts & Letters Daily employs all of the tools discussed in this module.

The use of headers, including “Articles of Note,” “New Books” and “Essays and Opinion,” helps to map the homepage’s content and cue readers on a text-intensive Web page. To conserve space, the page eschews formal headlines for bolded words within text “chunks,” tipping readers to the hyperlinked article’s main topic. The site also lists third-party resources down the left side of the page.

Jonathan and Lisa Price (2002) advise Web writers to look at headings and subheads as a group, distinct from the text, to make sure that readers can see why they have been arranged in this order, and why some have been grouped and not others. Web writers should provide “headings that mean a lot, rather than showing off your cleverness” (120).

Lists

There are many ways to organize content and present it in scannable formats. Bulleted or numbered lists facilitate scanning because their purpose is to be quickly read. They reference content and organize a page, serving some of the same purposes as headlines and headers. They need to be short. The items on each list also need to be brief.

McAlpine warns that if a list goes past six or seven items, readers forget how the list began and what it is for (44). She suggests two ways to correct lists that have grown too long:

• Combine several items into one, remembering to be consistent in structure
• Break a long list into several short ones, grouping them in a logical way

The items in the above list are of relatively equal value, and they do not necessarily logically flow one to another. For hierarchically ordered information or for when items should be read in a certain order, numbered lists should be used.

HTML: hypertext markup language

Practically speaking, text on a computer screen isn’t really text. It is code.

A few tags:
Paragraph Break: <P>
Line Break: <BR>
Horizontal Rule: <HR>
<B>Boldface</B>

Unordered list:
<UL>
<LI> laptops
<LI> desktop PCs
</UL>

Ordered list:
<OL>
<LI> dolphins
<LI> panthers
<LI> jaguars
</OL>

There are hundreds of Web sites designed to help you learn and use HTML. I recommend http://www.coffeecup.com/ as a good starting place. This site offers inexpensive tools for a range of experience levels. Dreamweaver is the Web authoring software I personally recommend. Microsoft Frontpage is, in my opinion, dreadful. Borrowing source code from sites that allow it also is a good method for generating HTML code.

Here are several other resources for learning basic HTML, including publishing to the Web.
• Dave's Site (http://www.davesite.com/webstation/html/)
• HTML Goodies (http://www.htmlgoodies.com/)
• Webmonkey (http://www.webmonkey.com)
• HTML Guides/References from NASA (http://heasarc.gsfc.nasa.gov/docs/heasarc/Style_Guide/html.html)
• Peachpit Press (http://beta.peachpit.com/vqs/70240/ch4plain.html)
• UNC’s ATN (http://www.unc.edu/atn/)Planning the pages

Storyboarding

Storyboarding is a first step toward an intuitive organization of content and visual logic. Storyboarding involves placing and positioning design elements and content on paper, even if it is merely positioning the major pieces. To the degree possible, however, both the elements and the content should be described, even specifying fonts, sizes and colors.

Each storyboard or page design should effectively lead a reader’s eye through the page. According to Lynch and Horton, readers first see shapes, color and masses of text, first in the foreground, then in the background. Only after this orientation do they pick out specific elements and text, deciding at that point on what to focus attention.

Every Web page needs the following:

• What: a title (the text that will appear on the browser’s top bar and the text that appears when users add the site to their “favorites”)
• Who: author’s identity and institutional affiliation (individual author and/or institution; think of the information any bibliographic citation would require)
• When: a creation and/or revision date (“last updated 01/01/05,” for example)
• Where: at least one link to the local home page
• How: Additional navigation

Simplicity is the goal in creating Web pages. Users do not flock to pages to revel in the design. They visit because they need something. They are more interested in the content. Realizing people use a range of platforms, computers, browsers and monitors, design should be flexible and adaptable.

Good designers test and re-test their pages on PCs, Macs, through Explorer, Safari, Mozilla and various browsers (and in older versions of each), and on screens of various sizes.

Case Study 1: The New Yorker (www.newyorker.com): Rating – Good

• Easy navigation listed in the left panel.
• Font choices and graphics boost the print edition’s brand by being consistent with the printed product.
• Main content in middle, making it dominant.
• Use of red headers (“Letter From California”) cues the reader. Headline and descriptive subhead hierarchically presented.

Case Study 2: The Atlantic Monthly (www.theatlantic.com): Rating – Better

• Atlantic positions navigation down the left panel, in a soft blue.
• Section or department, article head and subhead hierarchically organized, and labels vary in size and bolding.
• Author, affiliation and date prominent.
• Text includes useful hyperlinks that do not obscure or distract, used judiciously.
• Ttwo types of hyperlinks, those embedded within the article and those to archival material.
• Articles easier to read because of variation in text placement. Still a lot of text.

Case Study 3: Salon.com: (www.salon.com): Rating – Best

• Navigation down the left panel, differentiated with a gray background
• Hierarchy of heads and subheads, with cues to the article content in the photo’s caption
• Byline and post date prominent
• Eye-catching central graphic
• Variation in text presentation with white space and an easy-to-read font and size

Now it's your turn. Find the good stuff.

Sources:

1. Isabelle De Ridder, “Visible or Invisible Links: Does the Highlighting of Hyperlinks Affect Incidental Vocabulary Learning, Text Comprehension, and the Reading Process?,” Language, Learning & Technology 6, No. 1 (Jan 2002): 123.
2. George P. Landow, Hypertext 2.0 (Baltimore: Johns Hopkins Press, 1997).
3. Patrick Lynch and Sarah Horton, Web Style Guide 2 (New Haven, Conn.: Yale University Press, 2001).
4. Rachel McAlpine, Web Word Wizardry: A Guide to Writing for the Web and Intranet
   (Ten Speed Press, 2001).
5. Jakob Nielsen, DesigningWeb Usability (Indianapolis, Ind.: New Riders, 2000).
6. Roger C. Parker, Guide to Web Content and Design (New York: MIS Press, 1997).
7. Thomas Powell, Web Design: The Complete Reference (Berkley, Calif.: Osborne/McGraw-Hill, 2000).
8. Jonathan Price and Lisa Price, hot text, Web Writing That Works (Indianapolis, Ind.: New Riders, 2002).
9. Jeffrey Vern, The Art and Science of Web Design (Indianapolis: New Riders, 2001).

A comprehensive site about all things Internet
http://www.livinginternet.com

Webgrammar, an excellent online writing source
http://www.webgrammar.com

Arts & Letters Daily, for all writers and readers
http://www.aldaily.com/

Jakob Nielsen’s site, for usability studies and a wealth of intelligence on design
http://www.useit.com