View All Tips

Tips for Online Usability

The grandfather of modern film, D.W. Griffith, noted that new media tend to imitate the medium from which they emerged. Thus, the first films were single camera renderings of stage plays. It took Griffith's innovative vision to introduce multiple camera angles, fades, and zooms.

In the same way, web design often imitates print–brochures, fliers, pamphlets. Content tends to be heavily text-based and infrequently updated. However, to exploit the medium of the web, content needs to be fresh-static content drives traffic away from your site to more dynamic information.

The following are a few basic principles to keep in mind when designing or reviewing online information for effective use of the medium:

1. Audience and task analysis–these are the first steps to effective information design, whether online or on paper. For online systems, include information on how the user will connect, speed, hardware, screen size, and other relevant factors that affect what they see and how quickly or slowly it appears. Understand what the user wants, and how they currently get it, then incorporate this logic-or illogic!-into your design. Remember, it has to make sense to the user, not the developer.
2. Wide rather than deep–users can get to what they need directly from the first page of the site.
3. Consistency and availability of navigation–main navigation is easy to use, intuitive, follows a consist pattern throughout the site, and is generally available to the user wherever they are in the site. Ubiquity of links can be accomplished through frames or by putting links at top and bottom of page, for example.
4. Meaningful color scheme and metaphors–for example, specific areas share a color scheme: all product pages might have blue icons or accents, all service pages green. Colors should be reinforced by unique shapes as well. All images or context-such as graph paper for a background, or a play button to start an activity–make sense in terms of the topic discussed.
5. Special effects justify their existence–graphics, animation, sound, video all should enhance the basic functionality of the site, and add sufficient value to justify additional bandwidth requirements.
6. Scrolling kept to a minimum–the site should exploit existing screen real estate to put key information in the first screen of information, following the 80/20 rule. As much as possible, developers should chunk information for readability and accessibility.
7. Items grouped logically–buttons or lists should make logical sense to the user. This means that like items should be physically grouped together, and that the information should be easy to scan so that users can quickly identify the area or item they want. This may be functional rather than alphabetical, for example.
8. Coherence of design–the site as a whole should demonstrate an integrity so that the user intuitively knows that they are in a specific environment that has been thoughtfully designed to be consistent and meaningful. Without thinking about it, the user should feel comfortable on every page of the site, without unnecessary changes in the layout or approach to information that require reorientation. Variations should support the specific needs of the information within the consistent framework.

Any of the above general principles should be sacrificed if specific information or context demands. The usability of the site from the point of view of the functions users want to perform should be the over-riding factor.