Writing the Web

by Rob Jones — May 16, 2007
Much has been written on the technical and graphical aspects of web design; these are important issues to be sure, but a central point often forgotten is that we read web sites. Jakob Nielson wrote about this way back in the year 2000:
Of users' first three eye-fixations on a page, only 22% were on graphics; 78% were on text. In general, users were first drawn to headlines, article summaries, and captions. They often did not look at the images at all until the second or third visit to a page.
Clearly the writing skills we bring to our site designs have a huge effect on the usability and utility of our sites. In this article I will cover a few simple writing strategies that I have found useful over the years... so if you're ready lets dive in!

Interface design is copywriting

First off, I have to give credit where its due. The idea that interface design is copywriting was first brought up by 37 Signals, and I highly recommend you read their Getting Real book. Copywriting is a term that came from the ad business. A copywriter slaves over how to describe a product or service in a tagline or ad. Turns out that this skill is also applicable to interface design as well. The idea is that we, as designers, write interfaces. Perhaps one of the largest impacts we can have on the clarity and usability of our designs is how well we write the labels, titles and content.

Write meaningful labels

A label (in interface design terms) is a short word or phrase descriptive of some part of an interface. For example, the text on interface elements such as buttons and tabs are labels: Links, headings and subheadings are also labels: I know these above examples may seem remedial, but I see poorly worded and confusing labels all the time. The important thing about a label is that it be as self-evident as possible; a user should not have to look around to other parts of the page to understand what it means. For example, when you see a button labeled "Go", do you know what the button does? By using "Go" as a label for the button, a user would have to look around to see the what the 'context' of the button is; in this case it is used to view your frequent flier miles:

"Chunk" your content

Earlier, when I said that people read the web, I told a half-truth. The reality is that people don't really read the web; rather, they scan the web. To make your content easy to scan, it is important to "chunk" your content into short paragraphs with only one key idea per paragraph. Label each paragraph with clear headings and subheadings using CSS. This will allow your audience and search engines to quickly find the content they are looking for on your site.

The "Fold" disappears

The "fold" is a term from the newspaper world. When a newspaper is on the stand, it is folded in half; only the top stories are "above the fold". In web terms, "above the fold" is the area that can be seen in the browser without scrolling. Invariably every client I work with wants everything on the home page, and all of that content above the fold. I then take a breath and tell them "people scroll, don't worry about the fold". The clicktale blog has a great article about how the fold is no longer an issue. Do yourself a favor, go read the article and then put the fold issue out of mind.

In summary:

  • People scan the web; design for this.
  • Interface design is copywriting.
  • Write clear and meaningful labels, headings and subheadings.
  • Break content up into small chunks, with only one key idea per paragraph.
  • Don‘t worry about the fold. Users scroll.
Del.icio.us Digg Technorati Blinklist Furl reddit Design Float