Web Design is Information Design

guardian04

By Tim Mickleburgh

Several years ago a study conducted at UC Berkeley posed the question, “How much information is there on the Web?”[i]  Most of us glaze over when the talk turns to terabytes and petabytes, so we look for tangible analogies: the Web is a hundred times bigger than the Library of Congress, or the Web is a big as a stack of books that stretches all the way to Pluto. In one sense the absolute size of the Web is immaterial. Much of the information it contains is duplicated and reduplicated, and a sizeable portion of it will rarely, if ever, be looked at again. The real issue is how to find the needle in such a haystack.

Books and other printed publications, knowledge on paper, are organized in a time-tested manner than relies heavily on numbers. We locate a book by topic, using Dewey numbers or ISBN codes, before utilizing its contents page or index to find the specific page that contains the information we are seeking. This is pretty much a linear sequence of steps, a singular path.

The Web is organized in a totally different way. Proximity, the way books are organized in a library, is meaningless in a world of hyperlinks. The real issues are relevance and navigation, and this is why we need to need to look at web design as information design, rather than as print displayed on a monitor.

The online version of the Guardian newspaper[ii] is an excellent example of best practice in web design. The layout is based on a grid of six columns, some of which are merged, which retains the look of a newspaper but also adds a lot of functionality. The columns give hierarchy to the information displayed, with the leftmost column obviously being the “headlines”, and they keep line length manageable, improving readability. Despite the density of information on the page, it avoids looking “boxy” because of the generous use of white space, including the wide borders left and right.

Clicking on a headline brings up the relevant story on a new page, and the column widths are adjusted without breaking the basic grid, maintaining continuity for the reader.

Notice that the top-level menu, the one that appears immediately below the logo, is unchanged, although the “locator” expands to provide the information that we have entered the Apple section of the Technology area of the News page. Now look at that top-level menu again. Each “button” is color-coded, and if we choose, say, the green Sports link, we go to a page that maintains that color-coding. It’s nothing outlandish, just a few horizontal rules of the same color and a clever reworking of the logo, but enough to let us know that we are in a new area. Again, the grid adjusts itself, now to three columns of equal width.

A click on the golden Life & Style link reveals more color code hints.

Notice that every link on every page uses a uniform blue color similar, but not identical, to the default blue that some of us remember from the early days of the Web. For added nostalgia, rolling over a link causes it to become underlined, and of course the cursor becomes the universally recognized “pointy-finger”.

This is web-design excellence on many levels, and like all good design it seems quite natural and obvious. It gives visual coherence to what is, in reality, a set of files stored on a server, and it allows us to choose and read those files with absolutely no instructions beyond what is implicit in the design. It invites exploration while reassuring us that we won’t get lost in the maze.

Design like this is not easily made. It takes a lot of planning, wire-framing and testing, and a solid back-end that enables much of the content to be changed every day. Most of all it takes dedication to Rule One of information design: “we must understand what it is to not understand”. Or, as Paul Rand put it, “Good design is so simple; that’s why it’s so complicated”.

[i] http://www2.sims.berkeley.edu/research/projects/how-much-info-2003/execsum.htm#summary