• Home
• About

Information Hierarchy in Design

For the last couple of weeks I’ve been working on redesigning our company website and we went through the standard process of looking at visual comps, tweaking the design and iterating. One of my challenges was to produce an “academic” design, this was important because we plan on having a rather text heavy site.

Granted, typography is an important thing with our new site, absolutely, but good typography is not enough. You need a solid information hierarchy. Let’s take the following example:

This might be the kind of information you might have if you were going to review a book. If you look carefully, you can figure out the relevant information. You need to think about it a bit, but you can get it. From the type point of view, the font is large enough and there’s ample line spacing. Good? We can make it better.

The idea behind information hierarchy is to create contrast between the bits of information so that they are: A) differentiated and B) easy to pick out when you have repetition. Ask yourself the question: what bits of information are the most important? In the above example, definitely the title of the book and the written review. The author is next and the ISBN numbers are less important. So, to create the hierarchy, we change the type treatments for the different data elements. The title and review are most important and get the boldest treatment. The author is next and the ISBN numbers last (but not least).

So let’s look at the same information with a hierarchy:

Here we increased the understanding (and therefore the usability) by using design elements to create a hierarchy. More specifically, we used color and size to let the viewer know that the two most important parts of this bit of data are the title of the book and the review. The rest is still there, but not quite as important (the font is smaller and the color is light gray which makes it seem less important). When you use this scheme consistently throughout data, you’ll create a repetition in the presentation which increases usability in the long run.