Information Architecture and Design - Information and Navigation Design

Navigation design deals with how people move around a site; information design is how the information is presented on a particular page. They work hand in hand as the navigation design may depend on the nature of the information being presented.

Information Design

Information design is structuring information to facilitate understanding.

Although not as much as content design, information design is often forgotten or left to the last minute in which someone has to come up with a quick solution. Rarely is all the content considered upfront and therefore information design can't be done fully.A good example of information design taken seriously is any major newspaper website. There is always an abundance of content and it needs to be balanced and structured right so that it is easy for the user to see what the major news of the day is (of course, that doesn't mean all newspapers get it right!).

Normally, we represent information design with the use of wireframes (see the following diagram). A wireframe is like the skeleton of a page. It represents all the elements on a page but without the graphic design.

In this wireframe, we are showing the results of a search for wishes. A wish is a request from a community group for help, e.g., someone to help with bookkeeping. The wireframe shows the matching wishes as a list. Each wish is a link to the full details of that wish. Also shown is how the navigation is to be displayed. In this case, navigation is down the left-hand side of the page with sub-navigation appearing indented underneath the selected nav item.

Through a series of wireframes, we can cover all the content that is to be represented on the site and how it is to be structured. Naturally, the final look and feel will have an impact on the way the elements are ultimately represented, but at least there is a good indication of what information is to be displayed and how it is to be structured. Navigation Design Navigation design is about how the interface elements are organized to help the user move through the site. Simply put, it's how people get around a website. We can break down navigation into number of different types:

  1. Primary: This covers links to the main parts of the site and is persistent throughout the site.

  2. Secondary: This refers to links to content within a particular section of the site.

  3. Tertiary / Quaternary: Depending on the depth of a site, there may be links to content within sub-sections or sub-sub-sections of a site.

  4. Supplementary: This covers links to additional information or content related to the particular page being viewed.

  5. Contextual: This refers to links within the content, embedded within the page.

  6. Utility: This refers to links that are not used on a regular basis but may be needed at any point throughout the site, e.g. Contact us, Search, Privacy, Terms & Conditions, etc.