Intro to UI Wireframing > 4. Design Principles > 4.2. Hierarchy

4.2. Hierarchy


Hierarchy refers to a group of things where items are rank ordered by importance.

There are various ways to display hierarchy in a system. Typical examples may orient information from most important to least important visually, as in this top-down display of a hierarchical tree. You see this often in Organizational Charts or Site Maps.

"


When to Use Hierarchy

We use Hierarchy to organize information in a system.

Sitemaps like the tree representation below are typical of how we use hierarchy when organizing screens in website or application design.

There can also be a hierarchy within individual screens.

One relevant use of hierarchy is also shown above in our contrasting text examples. We used size and scale to draw attention to the most important information on the screen, and then used smaller scale typography for body text.

We also use hierarchy to help users understand the relationship of content in a system.

There are various ways of indicating hierarchy.

When we create menus with nested flyout sub-menus as in the example below, we're showing a hierarchical listing of functions in an application.

We're also using hierarchy when we're showing expanded lists of categories and their children as in the next example. This might be the type of interface you would show in a shopping site, for instance and there are various ways of showing hierarchy in menus.

You'll find examples of hierarchy in software controls like the flyout Menus in your Windows or Mac operating system, in the collapsible lists in Windows Explorer or the Mac Finder that look like stairs when expanded and in Breadcrumb menus where parent-child relationships are indicated. Hierarchy is everywhere!


How to Use Hierarchy

The common way to achieve hierarchy is by visually containing or nesting groups of child information within a parent container.

Here's an example of a set of pages in a web site, arranged alphabetically. There's no sense of relationship between the pages. They all appear to be equal in this flat hierarchy.

By grouping the information into parent-child relationships, we can create the menu for the web site below.

This is the kind of navigator you'll find in applications for nesting child branches in a program like PowerPoint, Keynote or even Balsamiq.

Hierarchy helps users make sense of complex systems. There are great examples where hierarchy helps in extensive information systems. On large online stores like Amazon, for instance, hierarchy is used in navigation to help users drill down to content from broad to smaller categories.

And as we also saw in our contrast examples above, smaller interfaces such as forms can also benefit from visually displaying hierarchy within the screen.

By establishing a highly contrasting text style for the headings, we indicate the most important parts of the screen content. This is also an example of how to use hierarchy in the screen.


Mike AngelesBy Mike Angeles
Got questions or feedback? Email mike@balsamiq.com.