July 5, 2007
Like many people, I’m a big fan of CNN’s recent website redesign. While I believe that a few structural and hierarchical elements could have been addressed better, the overall result of this redesign is a very neat, very clean and clear presentation of information; exactly what an online news site needs.
One of the basic, overriding elements featured in CNN’s new website design and layout is something I like to call quiet structure. Quiet structure is achieved when you de–emphasize the structural elements; the containing boxes, structural lines, bullets, structural color elements, etc… and bring a rhythmical consistency to the layout. The result is that the content becomes more conspicuous and the overall clarity of presentation is greatly enhanced.
When content is of paramount importance and you want to facilitate visitors spending time reading the content rather than just looking at it, using quiet structure helps to create the right kinds of affordances.
Creating quiet structure requires more than merely using low–contrast elements in your page structure. There are many things that can be used to build a quieter structure and in this article I want to touch on a few of them and show how using them in combination enhances the effect. So I’ll use CNN.com as my example of quiet structure and the less–successful, newly redesigned USA Today website as a comparison example.
Two page designs
Take a look at the main page of CNN.com and then take a look at USA Today.com. I think you’ll notice that even though USA Today’s is not a terrible design, by comparison it is far more chaotic in presentation. But why is this? Let’s compare a few of the individual elements from these two sites and see if that makes things clearer.
First of all, compare the headers for these sites. Note that CNN’s is very simple, clean, and used only for one purpose: navigation/search. Conversely, USA Today’s header is far busier and tries to do at least 3 unrelated things. So here you can see that the introduction to each page sets a distinct tone.
As compared to …
But the overall page cleanliness and clarity are still at issue, and the header cannot corrupt the page entirely. So still more is going on here to create different levels of clarity and comfort.
For example, USA Today chooses to mix and match image/text pairs’ orientation. Some are paired horizontally while others are paired vertically. This might not be a problem, except that there are many image/text pairs in any given section of the page, so the issue is exacerbated. Furthermore, there are spatial issues that detract from the presentation’s clarity, as in the image below.
By comparison, CNN is far more consistent in how it presents image/text pairs and they are fewer in number. CNN also has a very consistent alignment of content and structural elements on the page. The combination of these aspects of the presentation results in greater clarity for CNN and greater visual complexity for USA Today.
The example below helps to illustrate how the configuration of image/text pairs can affect reading comfort and eyestrain. The upper configuration requires that you constantly move your eyes up/down to visually consume each individual image/text pair, and left/right to see them all (and the close grouping of multiple pairs exacerbates this). Conversely, the horizontal configuration of an image/text pair allows your eyes to stay on the same plane to visually consume the whole. And multiple pairs don’t impact the strain or difficulty of doing so (also note the difference in visual complexity between the two examples below).
Grid and whitespace issues
Contrary to what some may believe, laying out a grid requires attention to more than just the width and horizontal spacing of each column. The horizontal rhythm created is important, but vertical rhythm is equally important if you want to create a quieter structure.
In the example below, the grid is consistent in column width and horizontal spacing. However, the different and varied vertical spacing issues draw attention to the structure and create a degree of visual noise that is not necessary.
In the example below, however, the horizontal column spacing and the vertical element spacing are consistent. This helps the structure to fade into the background and makes the overall presentation seem far cleaner and easier to visually consume (the content), contributing to a quiet structure.
In order to help you get a better sense of the overall visual volume of the structures of our two example sites, compare the structural layouts of the sites in the images below – without content.
As compared to …
Notice how USA Today’s high–contrast, textured, varied–width structure is far more conspicuous than CNN’s low–contrast, greatly reduced, consistently spaced structure. USA Today’s structure begins to compete with the content while CNN’s just pretty much gets out of the way of the content.
Notice in the image below that USA Today’s structural approach is one of the first things you see when you look at the page…
…and how CNN’s structural approach helps the content be the most conspicuous element on the page, by far – while still providing some sense of structure.
Please note that any individual thing I’ve highlighted here, either good or bad, might not necessarily be enough to significantly affect the clarity of content presentation (but it might!). However, the combination of several of them can amount to great significance, as I hope you can see from the examples cited in this article.
Concern for creating large volume content reading affordances might not be the most important factor in a particular website’s design. I’m just examining these issues so that you can better recognize how to create those affordances when they are important to the design.
There’s more to quiet structure than I’ve outlined here, so I hope that you’ll invest some time and effort into recognizing and then building your own catalog of useful techniques for playing with the visual volume of a page’s structure. Each project likely requires a variation on this point and you need to be able to manipulate page structures accordingly.