Writing for the Web

Web writing...is a whole lot more than smart copywriting. An effective web writer must understand the basics of user experience design, be able to translate information architecture documentation, write effective metadata, and manage an ever-changing content inventory.

Writing well for the Web involves understanding the difference between how users read print-based materials and how they read on the multimedia, hypertextual Web.

Strong technical/professional writing:

• Must be interesting, useful, and practical. It should favor clarity and concision over clever wordplay and snazzy effects.
• Must help users to accomplish their goals, quickly, efficiently, pleasantly, and safely. This is the fundamental concept of “usability,” a bedrock principle of user-centered design.

These are some differences between print and digital writing:

• Users read more slowly from a screen than a printed page—approximately 25% more slowly, in fact.
• Users are goal-oriented. Unlike print, they often scan webpages in short bursts, reading approximately 20% of the content and relying more on visual/spatial wayfinding devices. (except: see “Low Literacy Users” below.)
• Users tend to read in an F-shaped pattern, strongly focusing on the top and left margin. While contemporary users are more comfortable with scrolling than in the past, you should generally aim to place the most important text at the top of the page.
• Users are more comfortable with scrolling than they were in the past, thanks to a proliferation of smart phones and other mobile devices. Nevertheless, keeping content only as long as necessary is a good rule of thumb.
• Users often navigate by “satisficing.” Since there is no penalty for leaving and returning to webpages, users will click on the first link they find that might lead them closer to their goal. This also makes it more likely for users to quickly abandon a website which does not seem to offer the services or content they require.

Information Architecture

Users can more easily find information and perform tasks quickly and efficiently if a website has a well-ordered information architecture. A library web presence is a tool and should improve, optimize and/or enhance the user’s knowledge, experience, and workflow rather than complicate or confuse it. The following are general rules of thumb for improving site organization:

• Appropriately Sized—As regards content, MORE is not always better and may hinder your organization’s goals. As Halvorson explains, if your content does not fulfill your user’s needs or directly support your organization’s goals, it’s worthless.
• Clear Wayfinding—Create clear wayfinding, using breadcrumbs and other components for deep or complex navigation structures. It should be clear where the user is on a site, and easy to understand how to move to any other page. The home page should be accessible from any page.
• Useful Search—For complex sites such as libraries, search is crucial. For many users, search is their primary way of navigating a website. Aim to assist users with search auto-completion and accelerators (e.g., “one-click” buttons) where appropriate.
• Clear Process—For multi-step processes, summarize the process and outline the number of steps beforehand. Then, keep users informed of their progress during the process.
• Clear Chunking—Since users more frequently scan than read deeply, aim to organize the Website’s information architecture and page structures into meaningful chunks of sense that are easily discernible and scannable. Where extensive information is provided, users should be able to sort or filter it.
• Clear Site Organization—Don’t try to please everyone. Create a balanced information architecture that is meaningful for the largest number of people from your primary, secondary, and perhaps tertiary audiences. Build in additional wayfinding and redundancy for assisting the outliers, if possible.
• Stable Navigation—Primary navigation should be stable, offering an easy affordance by remaining in the same position throughout the site. Unexpected and inappropriate changes to navigational elements are jarring to users.
• User-centered Design—Organize the Web presence according the needs of the users, not the structure of your organization. This will reduce your bounce rate, discouraging users from leaving your Web presence for greener, and less confusing, pastures).
• Simplified Design—Remember Steve Krug's famous dictum: Don’t make your users think!  Where possible, decrease the cognitive load on users by offering images and text that are easy to process. Favor intuitive, conventional language over clever phrasing or jargon that users will have to decipher.
• Limited Choices—Where possible, limit the number of choices you offer users at one time. A good rule of thumb in a pinch is to limit options to approximately six. A much better rule of thumb is to discover through usability testing exactly how many links you’ll be able to use without cognitively overloading your users. Bottom line: The navigation scheme of the website or application should not trouble the user.
• Clear Critical Path—Include clear calls to action which indicate what your users can and should accomplish on your website. For a banking website, a primary service such as “Open an Account!” should be a large, recognizable button, not a simple hyperlink buried inside a paragraph.
• Clear Affordances—Clearly call your users to perform an action by offering clear affordances. Make clear to users which images are buttons, which images/text can be clicked on, filled in. Then make it very clear what will happen when they take that action.
• Information Scent—Create a strong information scent. Make sure that links and actions correspond closely to users’ expectations.
• Ubiquitous Help—Links to help should should be available on every page. The user should be able to access their preferred method of receiving help (chat, email, phone, etc.).
• Meaningful Help—The website should provide context-sensitive help, such as tooltips, which should provide meaningful information about the object they annotate. Regarding form use, the website should also indicate clearly where users have made an error and exactly how to resolve it. The website should indicate when tasks have been completed and direct users to the next logical action. Policies and instructions should be easily found with or near the tools they describe, where possible.

Textual Content

The following are rules of thumb for developing and editing textual content in library guides.

• Brevity (“the soul of wit”)—Avoid needless and meandering introductions, e.g., language which “welcomes the user to your webpage”, etc. Be sure to Eliminate unnecessary words. (Like the words "be sure to" in the previous sentence.) A popular rule of thumb: First, reduce your first draft by half. Second, do it again. Because Library pages are tools and not entertainments, get your reader to the information they need without further ado.
• Meaningful, Human-readable Links—Provide meaningful hyperlinks, which improve readability and scannability, accessibility for the visually impaired, and produce stronger results from search engines. For example:

  Bad
  For more information about our Policy on Cheating, click here: http://www.library.mtu.edu/user-resources/policies/cheating.html/#cheating.

  Better But Still Bad
  For more information about our Policy on Cheating, click here.

  Good
  For more information, view our Policy on Student Cheating.

• Meaningful Lists—Avoid duplicating strings of opening words in lists and headings. When a sentence looks too similar to those which surround it, it increases the user's scanning time. Favor bulleted lists over narrative text. When an opening element must be repeated, make it a heading, where possible. For example:

  Bad
  List of handbooks on architecture
  List of chapbooks on architecture
  List of photo collages on architecture

  Good
  Architecture
          ·  Handbooks
          ·  Chapbooks
          ·  Photo collages

• Action Verbs—Use action-oriented verbs for hyperlinks where appropriate (e.g., choose “Close my account” over “Account closure”). Using action-oriented verbs hails the reader directly, asking him or her to take direct action, and implying the result of that action. Clicking ‘Account closure’ might take the user to a page which describes policies surrounding account closure. The function of a button labeled “Close my account!” is unambiguous.

  Bad
  The deadline for the submission of your request will be promptly by noon, tomorrow.

  Good
  Submit your request by noon, tomorrow.

• Active Voice—Use the active voice, especially with instructions. The passive voice is most often appropriate for page and section headings. Replace long noun phrases (“the submission of the information”) with accurate, descriptive verbs.

Bad
Now Imagine you were to happen upon a page dense with myriad links, all of which read ‘click here’. Such a dense page would not lend itself to efficient scanning.

Better
A page dense with links, all of which read ‘click here,’ would not lend itself to efficient scanning.

Good
A page full of ‘click here’ links does not help users scan efficiently.

• Numbers—In print, we often write out numerals for ten and under, reserving numerals for greater than ten. Wherever possible on the web, use numerals rather than words. Numerals are far easier to process cognitively. The “better” version below also establishes parallelism, where the “bad” example violates it. Where a sentence starts with a number, use the word form (“One important area of research...”). Where possible, however, don’t start sentences with numbers.

  Bad
  The library reserves 12 group study rooms (up to six occupants) and ten large group study rooms (up to 12 occupants) for student use.

  Good
  The library reserves 12 group study rooms (2-6 occupants) and 10 large group study rooms (2-12 occupants) for student use.

Visual Content

As multimedia platform, Library Guides should use carefully selected images to meaningful effect. Attention should also be paid to the visual dimensions of the structure of the page itself.

• Hierarchy—Make the organization of the content/page obvious by creating a visual and typographic hierarchy, including: white and negative space (e.g., indentation), color, size, font-face, bold, italics, and anything else that can increase contrast. A well organized page hierarchy guides users toward what is most important, and what to pay attention to first.
• White Space—Use plenty of white space. White space helps organizes a page visually and has a calming effect on the reader by helping to guide their eye on the page, indicating to pay attention to.
• Fonts—Some general rules of thumb for font usage, according to usability experts at the Nielsen/Norman Group: Using more than ~2 fonts per page can produce a ransom-note effect.
  

  Except perhaps in the case of foreign languages, you should not alter the font for your library guides.

• Images—When using an image as a banner, or in any other supportive role on the page, select an iconic image which tells the story of the contents of the page. The blog A List Apart uses illustration brilliantly to summarize the message of their featured articles. Clip art-type graphics set an unprofessional tone and should be avoided.
• Resolution—Stretched, too-small, pixelated or generally poorly-sized images reflect poorly on the ethos of the site and the content author.

UX Resources

The following resources are useful works on various aspects of writing for the web:

• The Non-Designer’s Design Book (Robin Williams)—A simplified and very accessible explanation of Gestalt Psychology principles as applied to design. She explains clearly four of the most important design principles to master—contrast, repetition, alignment, and proximity.
• Don’t Make me Think: A Common Sense Approach to Web Usability (Steve Krug)—Brief and very accessible text outlining the core principles of usability for the web. This book is an excellent primer on usability and writing for the web.
• Content Strategy for the Web (Kristina Halvorson)—Seminal introductory text on content management from an industry leader. Witty and accessible tone, while chock-full of useful information.