Usability, Web Design

Using Information Architecture to Streamline Website Navigation

Have you ever been on a website that was so badly organized you couldn’t find information you knew was on the site? You spent way too much time digging around, or maybe even left the site in frustration. This, my friends, is the effect of poor information architecture (IA).

IA is the way a website is structured, sequenced, and grouped. Good IA enables users to navigate intuitively so that they find what they’re looking for in the shortest time and with the least effort possible, all while being engaged with your site. When IA is done well, the user doesn’t even notice the structure of information.

At OUTC16, Fran Zablocki, strategist at mStoner, shared core concepts and best practices behind IA. Read on to learn the details on how to utilize IA to optimize your website’s usability.

The User Experience Puzzle

It’s important to remember that any page of your website is a potential landing page. Building your website using consistent IA labels and organization schema will ensure that your website can be entered from any direction and still be easy to navigate.

Because IA is a piece of a much bigger puzzle though, understanding how all the puzzle pieces fit together to create the user experience is key. According to Jesse James Garrett, information architect and founder of Adaptive Path, the elements of user experience are strategy, scope, structure, skeleton, and surface.

User Experience Elements

Source: http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf

Start with Strategy

Here are some questions to start with when beginning to think about improving your IA:

  1. What do your visitors need to do?
  2. What do they need to know?
  3. What purpose does this site serve?
  4. What business objective does the site meet?

Plan the Scope

The scope identifies the features your site will have such as search, social media, and forms, as well as defining what the content will include, like notifications, news, and testimonials. If you don’t plan for the features your website will need at this stage, it may be more difficult to work them in later.

Build the Structure

IA is defined as the structure of content, so making decisions about order and hierarchy of categories and content labels is the main focus.

Along with IA is Interactive Design, which is the structure of the experience. This is the way your IA elements behave, such as a when a user sees a slide out effect or hover state. These pieces help keep the visitor engaged with each page.

When structuring information, you’ll need to choose how best to organize areas, such as alphabetically (like faculty directories), chronologically (events and blogs), or procedurally (application processes).

One way to look at navigation types is through the depth of structure:

  1. Global – top navigation that appears on every page of your website
  2. Local – navigation that appears in a subsection of your website
  3. Hybrid – a combination of global and local navigation (mega menus are a common hybrid approach)

Another way to categorize types of navigation is via breadth of structure:

  1. Contextual navigation – parts of your copy link out to different topics on other pages of your website
  2. Supplementary navigation – additional links at the end of the copy, providing a next step so that none of your pages are dead ends
  3. Convenience navigation – Quicklinks, like FAQs, and most popular links (Note: these aren’t considered best practice, and should be avoided)
  4. Site Maps – represent a complete listing of everything you have on your site

Rounding Out the Skeleton and Seeing the Surface

The skeleton step includes information design decisions (e.g., How will different navigation elements be placed in relation to one another?), navigation design decisions (e.g., Will you use bullets or carets or arrows?), and interface design decisions (e.g., Does the navigation expand on hover or click?).

The visual design — the surface — is what people think of as a “website,” but the visual is just the topmost layer — your website also includes everything that lies beneath and before. People tend to want to focus on the visual first, but all the above steps must be well thought out for the design to succeed in meeting your business goals.

Championing IA on Your Campus

Zablocki outlined the following steps to improve IA on your campus:

  1. Have all staff associated with your website be well versed in IA
  2. Communicate with your designers, writers, and strategists when building IA
  3. Remember, you are ALL information architects!
  4. Establish that IA is a real component of your site, just as important as content and design
  5. Use tools readily available from the IA community
  6. Highlight industry studies
  7. Insert IA into your training regimen

IA has a huge impact on the quality of the experience for visitors to your site and needs to be a priority if you want to retain visitors and keep them happy.

One visual design tip relevant to IA: people can only focus on up to seven items at once. Don’t give them too many options or too much to do from your home screen. Simple is better.

For the full slideshow of Fran Zablocki’s session and other conference presentations from OUTC16, visit the OmniUpdate Community Network!

Share this article:

WRITE FOR US

Would you like to share your knowledge and expertise with the OmniUpdate community via our blog? Submit your post ideas!