home •••&••• menu

Design And The Rest Of Us: Hierarchy

Things can exist inside of things, inside of other things, inside of yet more things. As I write this, I’m sitting in a chair, in an apartment, in an apartment complex, in Spokane, in Washington—and on and on I could go. We live in a world that is fundamentally hierarchical and it is often the task of a designer to communicate that hierarchy through visual elements.

We’ve spoken in the past of how important spacing can be for communicating that groups of things are separate, but how do you communicate the names of those groups? How do you make sure that the name of a list doesn’t itself get confused as being something in the list?

Headings

Well, I suppose that is one way to do it. Headings are the most common typographic means of communicating not only that you have started a new group of thoughts, but also what the name of that group of thoughts is. You see these every day, but you might not know how to use them effectively.

Headings need to have more visual weight than body text. This can be done by making them bolder, italicizing them, enlarging them, centering them, or some combination of those things. Just know that using bold and italics together is a bit redundant and generally considered bad practice. You should also be careful to make your heading style consistent. The easiest way to do this is to make use of the styles function in your word processor.

But what if you want to communicate that something is within a smaller subset of a larger group? What then?

Sub-Headings

Okay, that joke was funnier the first time, but the answer is still correct. You can create sub-headings. These typically have less visual weight as you move down the hierarchy. Eventually, you may have a line of text set just like the body text, except italicized. It doesn’t carry more visual weight, necessarily, but it’s visually different enough to communicate a change in topic. It’s also easy for those skimming your work to find these section changes.

Inline Hierarchy or Emphasizing

Sometimes you want to emphasize a word right smack in the middle of your paragraph. The way to do this is through either making it bold or italicizing it. Underlining has become the universal standard for putting links in text, so it’s best generally to avoid underlining so that you don’t communicate the wrong thing. My personal favorite method for emphasizing things is to use italics. It’s more subtle and less jarring than using bold text, but a case can be made for either especially since some fonts have ugly italic variants (like Arial).

Whichever method you pick, make sure that you’re consistent. You might decide to use italics for emphasis and bold for stronger emphasis, but you cannot be sure your reader will understand it that way. He might decide that you’re using bold for emphasis and italics for stronger emphasis. Since you can’t be sure what your reader will think, it’s safest to stick to just one. There are many methods of emphasizing things in your writing and tweaking the font is only one of them. You might just consider using stronger words, you lazy buffoon.

Three things you really should’t do—if you want your document to look professional and clean—are changing font, font color or font size inline. The former two will look tacky while the latter with throw off the whole flow of your paragraph. You can change the font size and color (within reason) for an whole element like an heading, but please refrain from doing this to specific words or letters within a given element.

Other Methods

Besides headings, there are other things you can do to communicate hierarchy. Apple uses lists that drill down one into another, sliding your view horizontally from one list to the next. Bulleted or numbered lists use indents (a form of spacing) and various visual symbols to show that one element is contained within another. Indents are a very powerful way to communicate hierarchy even without bullets or numbers. However you do this, though, you need to be consistent and clear.

Universal Rules

Whatever you do, make sure that you are giving your content sufficient room to breathe. If you communicate hierarchy through a larger font, you’ll need to also add spacing so that things can flow and breathe. All of these rules in design need to be followed holistically.

Another thing to keep in mind is your users’ attention span. You should keep the number of levels in your hierarchy as low as you can. People can easily keep track of Title, Heading, and Sub-Heading. But when you start getting more complicated than that, the user’s cognitive burden goes up as they try to keep track of where they are in the flow of your design. Sometimes the nature of the content you’re presenting requires five levels of hierarchy, but often times it does not. This will be a judgment call, but make sure it is one you take seriously.

Conclusion

Hierarchy is an important principle in design. To do it well, you will need to genuinely understand your content and how it is structured. Once you understand your content, use the principles above to communicate as much of that structure as needed to your user. As the old saying goes, make it as simple as possible, but no simpler.

Leave a Reply

Your email address will not be published. Required fields are marked *

Read More

This article was posted on 09/08/2014 . It relates to these topics:

&

Do Something