Jakob Nielsen's Alertbox for May 1, 1997:

The Difference Between Web Design and GUI Design

Designing for the Web is different from designing traditional software user interfaces. Mainly, the designer has to give up full control and share responsibility for the UI with users and their client hardware/software.

Of course there are also similarities between designing for the Web and traditional UI design: at the most basic level, both are interactive systems, and both are software designs as opposed to the design of physical objects.

Device Diversity

In traditional GUI design, you control every pixel on the screen: as you lay out a dialog box, you can rest assured that it will look exactly the same on the user's screen. You know what system you are designing for, you know what fonts it has installed, you know how large the screen typically will be, and you have the system vendor's styleguide to tell you the rules for combining the interaction widgets.

On the Web, all these assumptions fall apart. Users may be accessing the Web through traditional computers, but could easily be using a WebTV, a pen-based hand-held device, a Nokia cellphone, or even their car as an Internet device. In traditional design, the difference in screen area between a laptop and a high-end workstation is a factor of six. On the Web, we currently need to accommodate a factor of 100 in screen area between handhelds and workstations and a factor of 1,000 in bandwidth between modems and T-3 connections.

Any given Web design will look very different on this variety of devices: clearly, WYSIWYG is dead. Indeed, looking different is a feature, not a bug, since an optimal user experience requires adjustments to the characteristics of each device. The more specialized or low-end the device, the stricter the requirements for Web content to morph into something suited for the platform. The only way to make this happen is for designers to give up full control and let the presentation of their pages be determined by an interplay of page specifications and the preference settings and other characteristics of the client device.

Designing an abstract UI specification that is instantiated differently for each platform is much harder than it sounds. The basic principles of HTML can take the designer a long way toward the ideal, but not all the way there. It is recommended to separate meaning and presentation and to use style sheets to specify presentation, but doing so works better for informational content than for interactions.

The User Controls Navigation

In traditional GUI design, the designer can control where the user can go when. You can gray out menu options that are not applicable in the current state, and you can throw up a modal dialog box that takes over the computer until the user has answered the question.

On the Web, the user fundamentally controls his or her navigation through the pages. Users can take paths that were never intended by the designer: for example, they can jump straight into the guts of a site from a search engine without ever going through the home page. Users also control their own bookmark menu and can use it to create a customized interface to a site.

Web designers need to accommodate and support user-controlled navigation. Sometimes you can force users through set paths and prevent people from linking to certain pages, but sites that do so feel harsh and dominating. It is better to design for freedom of movement and, for example, put a logo (linked to the home page) on every page to provide context and navigation for users who have gone straight to the page.

Part of a Whole

A traditional application is an enclosed user interface experience: even though window systems allow application-switching and make multiple applications visible simultaneously, the user is fundamentally "in" a single application at any given time and only that application's commands and interaction conventions are active. Users spend relatively long periods of time in each application and become familiar with its features and design.

On the Web, users move between sites at a very rapid pace and the borders between different designs (i.e., sites) are very fluid. It is rare for users to spend more than a few minutes at a time at any given site, and users' navigation frequently takes them from site to site to site as they follow the hyperlinks. Because of this rapid movement, users feel that they are using the Web as a whole rather than any specific site: users don't want to read any manuals or help information for individual sites but demand the ability to use a site on the basis of the Web conventions they have picked up as an aggregate of their experience using other sites. In usability studies, users complain bitterly whenever they are exposed to sites with too diverging ways of doing things. In other words, the Web as a whole has become a genre and each site is interpreted relative to the rules of the genre.

Traditional GUIs are also part of a whole, of course, and it is advisable to follow the vendor's design styleguide. The point is that the balance between individual design and the whole tilts in favor of the whole for Web designs. At the same time, we don't have any established Web design styleguide that can dictate how designers should use their interface vocabulary to build sites that fit this whole. I am a strong proponent of getting an official set of Web design conventions; as long as we don't have one, my advice to Web designers is to design to fit in and to acknowledge that your site is not the center of the users' universe: they are going to move between sites, and we have to make it easy for them to use each new site as they go.


May 15: The telephone is the best metaphor for the Web

See also: List of other Alertbox columns