Helping Users Find Key Content

On the web, useful real estate is extremely limited. The available browser window may occupy just a small portion of an already small display screen, and your website's identity and navigation elements - header, footer, navigation bar, etc. - occupies some of that precious space.

On top of that users don't read webpages serially, they hop from one visual element to another. Thus, while technically you can make webpages as large as you like, the reality is that long webpages have generally poor usability. The biggest design challenge you will face is how to use visual elements effectively in order to draw the user's eye to key content.

Catching the User's Eye

Usability studies show that most web users are very goal-oriented; they are looking for something of use to them, and know that the best way to find it is to glance quickly at a page and move on if it doesn't seem to have the desired content.

Move quickly through any set of webpages. What does your eye notice first? The eye jumps to elements that are highlighted visually in some way. Such elements include:

In fact, the eye is drawn everywhere except to text. The reality of web use is that users won't read your text unless you entice them to do so.

Many of the recommendations in this guide have to do with making decisions about where to pare down content and how to present it so that as little user effort as possible is needed for grasping the key elements. In addition, the format of the guide itself is intended to help you realize what formatting styles help you locate and use material quickly.

Providing Visual Hierarchies

In addition to attracting the user's eye, it's important to help users understand the hierarchy of webpage content by reinforcing it with a hierarchy of visual dominance. The idea is to show relationships among different webpage elements by manipulating their relative size, position, proximity, color, and contrast, and in some cases, movement. (In this context, "elements" refers to units of text, images, tables, bulleted or numbered lists, indented materials, etc.).

Example: Chapter titles and headings in books, for example, typically appear in more visually dominant fonts than text (see Use of Fonts for a discussion of the visual impact of different fonts). If all text were the same size, the user would have to first read all of it, then infer the relative importance, in order to understand how the information is organized.

Varying element size is the most straightforward way of indicating their relative importance, since larger items both attract the eye and dominate the user's field of vision. Use size to help the user understand which elements fall where in the content hierarchy. This is what the HTML style tags do for text headings; <H1> appears in a larger font than <H2>, etc. The same principle can also be applied to images, tables, and other webpage elements. Look at your page and compare the amount of space being taken up by each element - is it proportional to its importance?

Element position, or location with respect to the overall webpage, communicates both relative importance and sequencing. As readers of European languages, we have been trained to scan printed media from top left to bottom right. Therefore, items above and to the left of the center of the page tend to be noticed first, and are generally considered to be more important. This is precisely why navigation bars are most commonly placed at the lefthand side of the window. Once the user has visited a couple of your webpages, he/she will be visually "ignoring" the navigation bar, so it will be the upper and lefthand portion of the main content area that will have visual dominance. In addition, users will assume that a row of similar elements - such as images - should be "read" from left to right or top to bottom. If you intend them to be a sequence, order them in this way. If they do not form a sequence, don't line them up in a row.

The proximity of elements to one another implies the degree to which they are interrelated. Use whitespace to group related elements together, and to create distance between groupings.

Example: In the navigation bar, the topics under Page Design have been placed closer to that title than to the one that follows, Navigation Aids. Spacing them equally between the two would imply that they are related to both.

Element color also conveys a sense of grouping or relationships. Use the same color to create a common thread among elements that cannot be placed next to one another. For example, choosing a common color scheme for all x/y plots links them together logically even if they are physically separated on the webpage. Color also can be used to visually emphasize or deemphasize elements. A warm, bright color (such as yellow or red) seems to "stand out" on the page, while cool and dim colors (such as gray or dull blue) recede.

The most important aspect of color for most webpages is the relative amount of contrast between an object and its background. Most text should have the greatest possible contrast, which is why letters on a light background should be in black or very dark colors. Less important text can be visually de-emphasize by lightening the color and/or darkening the background.

Example: In this guide, text in the main content area is black to provide maximum contrast. The gray background of the navigation bar has the effect of reducing the visibility of that text. In the footer, the text is dimmed and displayed against a gray background to reduce its dominance even more.

Movement is the most difficult attribute to use successfully because it serves as a magnet for attention, with the result that other elements on the webpage may be missed entirely. As discussed in Use of Images, animation should be used only when it contributes significantly to the meaning of webpage content.

Eliminating Distractions

Don't develop webpages the way you would an article or report. Instead, spend time identifying what users will most want to do on your site, structure your pages accordingly, provide navigation aids in standardized places so users don't have to hunt for them, and then concentrate on making the content succinct. Finally, use visual highlighting mechanisms to draw the user's eye to key content and entice him/her to explore the rest.

The danger in providing visual interest is that it can be distracting as well as attracting. Keep a "style sheet" where you record the different visual highlighting techniques and what they are being used for. Make them as consistent as possible across the entire site. If you are using a colored background to provide examples, use some other convention for showing "see also" information.

Test the final design of each webpage by eliminating visual elements, one at a time. If removing the special font or the image doesn't not actually detract from the value of the content, the element is gratuitous and should be eliminated. Only a very harsh final editing of your pages will ensure that they are the best you can provide.