•  

Northwoods Blog

Information Architecture Basics

(Or, How to Stop Making It Hard for Users to Find Things on Your Website)

July 20, 2016

As Peter Morville says, “The purpose of your information architecture is to help users understand where they are, what they’ve found, what’s around, and what to expect.”

Navigation should:

  • be easy to learn.
  • be consistent throughout the website.
  • indicate how to navigate around the site (clear labeling).
  • involve the fewest clicks possible.
  • group like content together.
  • create the visual and textual information scent for users to sniff their way to desired content.

Large, complex sites can be hard to navigate, especially when they attract several audience types. But any website, no matter the size, can benefit greatly from solid, basic Information architecture.

Content first

Know your content thoroughly before creating an information architecture. Be sure to inventory and audit that content.

A content inventory lists all the pages on a website in a spreadsheet, including:

  • Unique ID
  • Page Title
  • URL
  • Author or Provider
  • Meta Description
  • Meta Keywords
  • Categories/ Tags
  • Dates (created, revised, accessed)
  • File type – html, pdf, etc.
  • Assets – images, videos
  • Quality of the content

The inventory helps you detect gaps in your content. Have users mentioned content they want but that you fail to provide? Are you missing product information, or listings for media and events that engage customers? Create new content and fill those gaps. The complete, updated content inventory will help you shape the site map.

The inventory also helps identify obsolete content that should be removed from the site, and it can indicate which pages can be combined into one larger, more efficient and user-friendly page.

Finally, an inventory requires a fresh look at all content, which usually leads to improved content. In evaluating quality, consider whether the content:

  • matches the branding and editorial style
  • aligns with the site’s purpose and goals
  • is well written

Do the content inventory early in the user experience process, before site maps and wireframes, to get a head start on building content. Do not set a site launch date, test all the development, and then find yourself with just two weeks to create, write and edit content and design the graphics and video that go with it. Content takes time in the best circumstances, and even more time if it’s coming from a product catalog database.

Sort and Group Content

Natural groupings begin to emerge once we have created and inventoried all our content. Involve actual target audience members in card-sorting exercises. As interested parties outside your organization, they can see in your blind spots. And we do have blind spots; as subject matter experts, we often group things according to an internal method, in the same way we speak in company jargon that no one on the outside understands. Let your target audience show you how they would look for content in a real-world situation.

As few as five people can participate in a useful card-sorting test. For the content inventory exercise, put a word or phrase on several individual cards. Keep the card count reasonable; more than 50 gets a little overwhelming; larger sites may require different card sorts for different content types. Ask users to group them into piles that make sense to them. Do some cards confuse them? You’ve probably written jargon on them. Talk with your testers; they can lead you to more comprehensible vocabulary.

Taxonomy

Taxonomy is a scheme of classification. It involves the way we label things, such as navigation links.

During the information architecture process, we start to learn about the words people think of as they try to find something on a website. We try to understand their textual mental model of the website.

As you create your site taxonomy and start naming things, choose words and phrases that users know either in a general world sense (“chocolate bar”) or a product-specific sense (“pneumatic hammer”). Jargon -- insider or organizational terminology -- will confuse users. They will not look for specialized terms (“organic cocoa bean bar”) unless they are actors within a specialized niche market.

Site Map

Now that you know what the site content will be, create a site map. A site map visually represents, with a consistent taxonomy, the hierarchy of pages on a site. The map should reflect how users think about finding content and groups of content and the words they use to find that content.

Navigation can be organized in many ways; which way depends mostly on content and on how you expect users to behave on the site.

Hierarchical parent/child

Parent/Child is a drill-down method for websites that are both broad and deep. Parent/child organization can become lopsided if one content category runs, for example, nine boxes deep and all others run one or two deep. In such cases, the information architect might consider a different navigation scheme overall.

If the content dictates a lopsided parent/child structure, the designer could opt to treat the deeper content line as a special case, with additional navigational tools and structure specific to it. A site map could thus become a hybrid, with another navigational type nested within an overall parent/child regime.

Hierarchical Hub and Spoke

In hub and spoke, one main page links to many pages. It works for very small sites or microsites, where the hub is the home page and there is only one level of child.

Linear

Linear navigation leads the user through a process toward a goal, such as a shopping-cart checkout. It keeps users engaged and on task; you don’t want them to navigate away from it. Linear navigation also works well with learning sites, when users follow a sequence of instructional steps.

Matrix

Matrix method allows the user to go wherever whenever. Links can still be organized and related topically or hierarchically, but users can easily veer off to different topics instead of sticking to the path. Matrix site maps and organization encourage site browsing and longer dwell times and fit well with retail sites with many products and online magazines with a lot of content.

Tagged or faceted

At many of the largest shopping sites, such as Zappos.com and Amazon.com, category names change as we select more options. These nontraditional navigation paths help users narrow down options from a large set of content based on particular user-selected criteria. Tagged site mapping works especially well for product catalogs with well thought out taxonomy. 

 

 

Search

Search isn’t really a site map method. But many users turn to site search instead of site navigation to find what they seek. Some sites make search their primary navigation. At toysrus.com, they place the search field front and center and put the site navigation in the hamburger menu to the left. They supplement the navigation with a utility navigation that highlights popular functions of the site but not actual toy categories.

 

 

Expedia.com uses search in a bigger way: with a form. This search guides users to input particular information in order to find exact travel details. They have additional navigation for popular functions of the site, but the search form is the main part of the home page. Expedia found, through testing, that people prefer the search-form method of navigation.

 

Wire Frames

Now that you understand your content, have examined how users would prefer for you to organize it, and have created a site map, create a visual representation through wire frames.

Wire frames serve as the blueprints of the user interface. They help in visualizing how users will interact with navigation, content and interface elements, and how those parts will work together. Wire frames show where specific content types will go on pages. They can show how to improve content placement and help you see where content and navigation become too complex. With wire frames, you can begin to visualize the navigation flow from page to page. They also provide another chance to spot holes in content.  

Summary

Information architecture is more than a site map. It involves content, grouping content in user-centric sections, and picking navigational structures that fit the needs of the user and the nature of the content.

Ann Junker

User Experience Designer & Front End Developer

Ann Junker is an information architect, user experience designer and front-end developer with over 15 years of experience. She has been a part of the Titan CMS development team and works on variety of projects types, from Milwaukee Public Schools, Medical College of Wisconsin, and several Law and Financial Firms. She focuses on creating meaningful user interactions with affective branded visual design, and is Nielsen/Norman Group UX Certified. Ann also passed her IAAP - Certified Professional in Accessibility Core Competency examination. 

Connect with Ann on LinkedIn

Read Ann Junker's Blogs

Ready to Learn More?

Contact us with any questions, comments, or suggestions.

Northwoods Web Solutions

1572 E Capitol Drive

Milwaukee WI 53211

414-914-9100

847-752-1095 (Chicago)

Microsoft Partner SIlver
© 2018 Northwoods - all rights reserved.
top