Lorraine Johnson - Online Portfolio Home Page Lorraine Johnson - Online Portfolio Home Page
Technical Editing / Information Design / Graphics Design
Web Projects | Class Projects | Resume | Contact

Developmental Editing: Recommendations

1: Clearly label links to other sites

Context example:
On the home page, the left hand sections Reports, Software Product, and Consulting Services as well as the “Full list of books” link under Books take the user to the NN/g site. It is confusing to list these under Permanent Content, as the links on a home page usually describe content within, not without the site.

Link only to the NN/g home page. If NN/g links must be included on the home page, move them to a separate, labeled section.

2: Indicate links to materials that must be purchased

Context example:
Another problem with the NN/g links on the home page is that most of them take users to content that must be purchased. In other places, the user is invited to download a report, but is not told that the report must first be purchased. An example is the Alertbox column for 9/30/2002 (alertbox/20020930.html). Under the Learn More section is the sentence, “Our 186-page report from the usability study is available for download.” The implication of such links implies that the material is available on the useit.com site, free of charge. Users will be frustrated when a promising link takes them to something unexpected.

Clearly indicate materials that must be purchased. For example, adjust the phrasing to: “Our 186-page report from the usability study may be purchased online.”

3: Use consistent link text

Context example:
On the home page, the News section includes a long list of articles. It is not at all clear that these articles have been selected because they include Jakob Nielsen quotes. At the end of this block, yet separated from it, is a link, “Full list of interviews” that links to a page titled “Press Coverage of Jakob Nielsen.”

Add a heading (perhaps “The Quotable Jakob Nielsen”) to the block on the main page and reduce the number in the list on the home page, since they are all on the “full list” page. Use placement to indicate that the “full list” link relates to the rest of the list.

4: Organize links to books and other resource materials

Context example:
The Full list of books link on the home page targets an NN/g page, despite two separate complete listings of books on the useit.com site (on the biography and publications pages). To confuse matters further, on the NN/g page, each book is linked back to the useit.com site. Compounding the confusion, the recommended books are listed in the books top-level folder, while most books written by Dr. Nielsen are under the biography section. The exception is the Homepage Usability book, which has its own top-level folder.

Separate works recommended by Dr. Nielsen (books, magazines, Web sites, etc.), works about Dr. Nielsen (interviews and quotes), and works by Dr. Nielsen (books, papers, etc.). Use section headings and folder names to reflect the division. For example, sections might be titled Recommended Resources, The Quotable Jakob Nielsen, and Publications and be put in folders recommend, quotes, and publish, respectively.

5: Emphasize the site’s most important content

Context example:
On the home page, the Permanent Content and News sections look equally important, yet the content under these headings is not. The layout and design should guide the user to the most important content. These heading titles do not accurately describe the content.

Develop good content headings. Emphasize essential content. Put the most important information in larger fonts. Use a wider column for the more important content, de-emphasizing the News section with a narrower column.

6: Add persistent navigation

Context example:
While the yellow “navigation” bar at the top of a page will show users the upper levels for the section they are in, there is no way to move directly to another section and no way to form a mental model of the site structure.

Add a true navigation bar to all pages, in addition to the “you are here” indicator, that presents the user with the site’s major sections.

7: Use headings and white space to separate items

7: Text SpacingContext example:
The Spotlighted Links page (hotlist/spotlight.html) is a long block of text with no headings or vertical separation between items, although there is vertical separation between paragraphs in an item (illustration).

Add white space above each date; highlight dates with boldface and possibly also a larger font size.

8: Use white space for visual relief

Context example:
The Publications page (jakob/publications.html) is an intimidating and uninviting wall of text that spans the page and provides little eye relief for the user.

Reorganize this information. On the biography page, where this information is referenced, include a section for each publication type. Under each section, write a short paragraph about the topics and importance of Dr. Nielsen’s contributions in each section. Then, link to a separate page for each publication type: books, papers, patents, and so on. On the separate pages, break each item into a block of text, instead of putting each item on one line. For example, instead of

Nielsen, J. (1999). User interface directions for the Web. Communications of the ACM 42, 1 (January), 65-72.
Gentner, D., and Nielsen, J. (1996). The Anti-Mac interface. Communications of the ACM 39, 6 (August), 70-82.
Nielsen, J., and Faber, J. M. (1996). Improving System Usability Through Parallel Design. IEEE Computer, 29, 2 (February), 29-35.


Nielsen, J. (1999).
User interface directions for the Web.
Communications of the ACM 42, 1 (January), 65-72.

Gentner, D., and Nielsen, J. (1996).
The Anti-Mac interface.
Communications of the ACM 39, 6 (August), 70-82.

Nielsen, J., and Faber, J. M. (1996).
Improving System Usability Through Parallel Design.
IEEE Computer, 29, 2 (February), 29-35.

9: Reformat the Alertbox section to improve scanning and research

Context example:
Again, we have a wall of text. The material is not ordered by topic, but simply listed in reverse chronological order. Users must struggle to locate promising links.

Make this main content section easier for users to navigate. Organize this information first by topic, then chronologically. Format the information for easier scanning. For example, use a two-column borderless table, and make it less than the full page width. Put the dates in the first column, choosing a format with a consistent length, such as mm/dd/yyyy. Add cellpadding to increase white space between items, making them easier to pick out. Avoid the wandering blue “river:” link using the full titles. If you wish, include a link to the reverse chronological list as an alternative.

10: Describe books written by Dr. Nielsen

Context example:
The page on the Usability Inspection Methods book (jakob/inspectbook.html) is representative of most of the book pages. This page lists the book information (authors, publisher, year of publication, and ISBN number), links to Amazon for purchase, then dives into the table of contents. This is not a description.

Tell users what a book is about. Don’t expect them to read a table of contents and come up with an understanding of it, why they might want to buy it, and the advantages they will receive by studying its concepts. Give users this information in a short paragraph. Don’t make users try to derive this information for themselves. Don’t make them look for the information elsewhere.

11: The biography page is poorly organized

Context example:
The page starts with a long list of quotes. Next is some professional experience, a few links to some of Dr. Nielsen’s publications, sections on the Alertbox column and books, followed by more professional experience. The user must mentally reorder the information.

Begin with a succinct description of Dr. Nielsen and his experience. Don’t begin with a long list of what others say. Shorten (and format pleasantly) the list of quotes. Pick two or three of the best. (Better yet, use active code to randomly select and present one to the user.) To include all these quotes, put them on a separate page and add a “more” link from the biography page.

12: Use positive language

Context example:
The site employs too much negative language. For example, on the main page under the Papers section, is the statement, “I apologize for the fact that these papers were written for print publication. Thus, they are often quite long and not well suited for online reading.”

State the information more positively: “I have included these papers here for your convenience. Note that they were written for print publication and may not be at their best as Web pages.”

Back to Developmental Editing

Home | Web Projects | Class Projects | Resume | Contact