Programming Blog

Have you ever visited a website with expectations about what you would find only to discover that site held none of the information you were looking for? That site might have had exactly what you’re interested in, but there was no clear path to find it. The site may have been organized in such a way that led you to believe it was about something other than what you were hoping to find.

How long did you stay on that site? Did you take any time to explore it or did you quickly conclude it wasn’t what you were looking for and left in search of another site?

One of the most important decisions you make as a web designer is how to organize information. How information is organized on a single page and across your site greatly affects how people respond to your design and interact with it. When someone first visits your site they have very little knowledge about it. You need to let them know what your site is about quickly and effectively.

How should you organize your site’s information? How many ways can you organize it? Are some organizational systems better than others?

5 Hat Racks

The principle of the five hat racks suggests that there are a limited number of ways information can be organized. As you can guess by the name, it says there are exactly 5 ways to organize information, those 5 ways being by Location, by Alphabet, by Time, by Category, and by Continuum.

You’ll sometimes see continuum stated as Hierarchy in order to create the acronym Latch, but I think continuum is the better word in the context of the 5 hat racks, since hierarchy implies something different and is something we’ll discuss separately.

1. Category – organization through similarity and relatedness (categories, tags, taxonomies). Organize your content by categories when there are clusters of similarity in you information or when people will naturally seek that information based on perceived similarities.
2. Time – organization in a chronological sequence (step-by-step instructions, blog posts, news). Organize content by time when presenting or comparing events over a specific duration of time or when time based sequence is important to the information.
3. Location – organization through geographical or spatial reference (maps, travel guides). Organize content by location when orientation or wayfinding are important or when your information relates to a geographical place
4. Alphabet – organization in an alphabetical sequence (dictionary, glossary, index). Organize content by alphabet when the information is referential, when nonlinear access is required, or when no other means of organization is acceptable.
5. Continuum – organization by magnitude (baseball statistics, search results, ratings). Organize content by continuum when comparing things across a common measure; highest to lowest, best to worst, first to last.

You’re not limited to using only one system of organization across your site. The organization is mainly a way to help others find you content.

You may organize your main navigational system based on category and then offer search results based on continuum. You might have a section of your site that serves as a glossary, which you’d organize by alphabet, a blog that presents posts by time, and a specific page or post that compares content by continuum.

The key is to understand how to organize your content through the 5 hat racks and develop strategies for organizing it so your audience can find it quickly and easily.

Also keep in mind that the navigational systems you make prominent reveal a lot about what’s contained within your site. A site about baseball for example could present it’s main navigation as

Standings | Teams | Players | Schedules | Box Scores | Stats

or

History | Teams | Players | Ballparks | Collectibles | Museum

Both of the above are based on category organization, however, you would probably expect each to contain different information.

The first is more focused with what’s happening during the current season as indicated by the words standings and box scores, whereas the second is more focused on what happened in the past based on words like history and museum. Both sites may have much content that overlaps and both are about baseball, but simply in the way you present how your content is organized you reveal valuable information about what each site has to offer.

Hierarchy

If your site is small and only has a few pages, you can easily display them all in your main navigation. As the number of pages grows it quickly becomes unwieldy to try and include to every page in a navigation bar or single menu. Organizing your pages into a hierarchy becomes important.

Hierarchal organization is one of the simplest structures for visualizing and understanding complexity. Placing your content into some kind of hierarchy is an easy way to let people know what the entirety of your content is about.

Hierarchy is created through superordinate/subordinate or parent/child relationships. Visually we perceive these relationships based on left/right or top/down organization, but we can also influence this hierarchy visually through proximity, size, and connecting lines among other things.

There are 3 structures to visually present a hierarchy.

Tree Structures

Tree structures typically present the child below or to the right of the parent. Think of a drop down menu. Things like size and connecting lines can also be used to express the parent/child relationship. Think mindmaps.

Tree structures are useful for creating hierarchies of moderate complexity, however they can get cumbersome as the hierarchy grows larger or becomes more complex. They can become tangled when children have multiple parents. They can also be difficult to change, add to, or remove items in the hierarchy.

You’ll commonly use tree structures for high level mapping or overviews of the system. Again think of a drop down menu as your main navigation. You likely won’t include every page on your site in the drop, but rather a few levels of organization starting from the highest level.

Nest Structures

In a nest structure the child is contained within the parent. Think of a Venn diagram.

Nest structures work best for simple hierarchies. In order for the parent to contain it’s children it naturally has to grow larger as more children are added to it. Nests become a less efficient way to display the hierarchy as the system grows larger. You also can’t represent much complexity with a nest structure.

In many ways a web page is visually organized as a nest. You have a page that contains a header, footer, one or more sidebars, and main content area. Your sidebar may contain a list of links, some textural information, banner ads, etc.

You’ll commonly use nest structures for grouping information into simple logical relationships. and for natural systems. Think of a web page. How much information can you add to any one page before it becomes a complex mess. The more you add to it, the less the hierarchy becomes clear.

Stair Structures

In a stair structure the child is located below and to the right of parent. Both below and to the right are used as opposed to one or the other as in a tree hierarchy. Think of an outline as an example of a stair structure.

Stair structures are effective at representing complex hierarchies, though they aren’t easily browsed. They can also imply a false sense of sequential relationships. Since child elements are often stacked one below the next inside the parent it may look like the top most child comes before the next child down the stack. This sequence isn’t implied by the stair structure.

You’ll commonly use a stair structure for large and complex hierarchies, particularly those that change over time or where the pattern of growth is unpredictable. It’s easier to add to, remove from, and modify a stair structure than either of the two structures above.

Every post you read here begins as an outline that is a stair structure. As I begin researching information for any post I add new children, remove some, and constantly rearrange the entire structure. The outline grows and gets reshaped and eventually becomes a post.

One way to maximize the clarity and the effectiveness of hierarchies is by concealing child elements and then revealing them only when the parent is selected. Think of an accordion style menu or a file system with the + and – to open and close the parent.

This concealing and revealing makes it much easier to understand the hierarchy as you only see part of the hierarchy at any time. It’s a good idea to explore different ways of selectively concealing and revealing the complexity of your hierarchy to help your audience understand it better.

Layering

Layering information is the idea of grouping related items together in some way and only presenting certain groupings or layers at a given time. Layering helps manage complexity of information (PDF) and also helps to reinforce relationships within a layer and relationships and comparisons across layers.

There are 2 types of layering you can use, 2-dimensional and 3-dimensional.

2-Dimensional Layering

2-dimensional layering separates and groups information in such a way that only one layer can be viewed at a time while hiding other layers. The layers can be revealed linearly or non-linearly.

Linear layering is useful when there is a clear beginning, middle, and end to the layers. Think of a novel. You might consider every scene in the novel as being a new layer of information. These scenes are revealed to you linearly as you read the book. Several layers of scenes might comprise a larger layer representing a chapter.

Non-Linear layering is useful when you’re trying to reinforce relationships between layers. There are 3 types of non-linear layering.

• Hierarchal layering is used when there is a hierarchy to the layers; when they’re built of parent/child relationships. You’ll reveal these layers in accordance with the hierarchies we discussed above.
• Parallel layering is used when the information is based on the organization of other information as in a thesaurus. The layer is revealed through its connection with that other information.
• Web layering is used when the information has many different relationships. Hypertext is a good example. Pages on the web can be linked to and from many other pages. Here you’re revealing the layer through linking to other layers.

3-Dimensional Layering

3-dimensional layering separates and groups information such that multiple layers can be viewed at once. They can be presented as either opaque layers or transparent layers that sit on top of each other.

• Opaque layers are useful when additional information is to be shown without switching contexts. Popup windows and context menu are good examples of opaque layers.
• Transparent layers are useful when overlaying the information combines to illustrate new concepts and relationships. If you’re familiar with the term augmented reality, it’s a perfect example of transparent 3-dimensional layers. The idea being that you’re presented a direct view of the real world and then layers of virtual information are presented on top of that view in order to augment it.

Use 2-dimensional layers to manage complexity and direct navigation through your information. Use linear layers for stories and sequences and non-linear layers to emphasize and compare relationships within and across layers.

Use 3-dimensional layers to elaborate information and illustrate concepts. Use opaque layers for presenting elaborative information and transparent layers for illustrating concepts and highlighting and relationships.

Organizing Information Visually through Gestalt Principles

Most of the above discussion has been about organizing information across your site or system. I wanted to briefly discuss how you can organize information visually on a single page. If you think about basic design principles and specifically gestalt principles, many exist to help organize information better.

Consider the following principles of gestalt.

• Similarity
• Uniform Connectedness
• Continuation
• Proximity
• Common Fate
• Parallelism
• Common Region

If you haven’t already read my previous post on gestalt principles, you may want to take a look to gain an understanding of what each of the above is about. Each connects information and elements in some way to convey the idea that the elements are related to each other to visually organize them.

The basic design principle of alignment is another way to visually show relationships between information. Alignment leads to grids which exist to help organize a design.

Summary

A large part of your job as a designer is to organize information. That organization might be the information architecture across a website or it might be where to place design elements on a page. How information is organized reveals a lot about your page and site and will greatly influence how people react to your design and how they interact with your entire site.

Take time to learn each of the different ways to organize information mentioned in this post. Each way is relatively easy to understand. You want to understand them so you can determine which organization system is best to use under which conditions.

Keep in mind that you can use one, several, or all of these organizational structures within a single site. Some will obviously be better to use in a certain place and others may come down to a choice based on design goals and objectives.

Go to Source