Information Architecture

Building the framework for your website’s content

Galley kitchen or open floor plan? One-story or two-story? Gas or wood-burning fireplace? From Bungalow to Craftsman, Cape Cod to Colonial, knowing what a homeowner wants and expects guides the type of home an architect designs.

Building a website isn’t exactly like building a house, but understanding what your users want and expect plays a similar role in determining the structure and framework for how you design and organize the content and navigation on your website.

Now that you’ve taken the time to understand how your users expect content to be organized and what terminology they use, you will create your website’s information architecture.

What is information architecture?

Information architecture is the structural design of a website, showing how organization and labeling can help users find and use your content. Information architecture focuses on your users, how they navigate through your site, what technology they use, and what content you provide.

Information architecture produces site maps (website structure) and wireframes (design blueprint) to convey how the site will work from a practical perspective.

What is a site map and how do I read it?

A site map is a planning tool that visually shows how information will be grouped and labeled, where content will be located, and how a user will move through your website. It lists the pages and content organized in a hierarchical fashion that should be read from top down, from left to right.

Board of Trustees Site Map

Homepage

At the top of the site map is your homepage. The information listed there is what will be shown on your site’s main homepage.

The homepage should be thought of as lots of small billboards that direct users to relevant information. Homepages often contain several sections including featured programs, short key messages, a brief description of your department and what it does, lists of upcoming events or news, and student testimonials.

Site Map of the Homepage:

Example of a site map for a homepage

Becomes the Homepage:

Screenshot of the Board of Trustees homepage

Primary Navigation

Below the homepage information is the primary navigation (the main menu listed horizontally across the top of the site just below your department’s name).

Primary navigation is:

  • The starting point of your user's journey through your website
  • Located at the top of every page
  • Consistent throughout the entire website task-based (not audience-based except for very special circumstances) - Read Five Problems with Audience-Based Navigation
  • 5-8 sections of content that users are most interested in visiting
  • Read from left to right, so prioritize your tasks starting with the most important / most used tasks on the left
  • Links to separate landing pages that either give all the information on that topic or introduces additional pages (secondary navigation)

On the site map, the primary navigation elements will be labeled 1, 2, 3, 4…and presented in boxes with bright colors near the top of the page. The content that will appear on that specific page will be labeled 1a, 1b, 1c… or 2a, 2b, 2c… etc.

Site Map of the Primary Navigation:

Example of a site map for the primary navigation of a website

Becomes the Primary Navigation:

Screenshot of the Board of Trustees primary navigation

Secondary Navigation

All of your content may not always fit in one large menu, no matter how organized it may be. It may then become necessary to use secondary navigation. Any content that does not serve the primary goal of the website but that users might still want to visit should go into the secondary navigation.

Each of the secondary navigation elements is a separate webpage that the user lands on when they click on the secondary navigation link. These will be presented in a box on the left side of the pages associated with the primary navigation. On the site map, these boxes will be a lighter color than the primary navigation they are associated with and located under the primary navigation boxes. The secondary navigation pages will be labeled 1.1, 1.2, 1.3… or 2.1, 2.2, 2.3…, etc. The content on these pages will be labeled 1.2a, 1.2b, 1.2c…, etc.

Site Map of the Secondary Navigation:

Example of a site map for the secondary navigation of a website

Meet the Trustees Landing Page (Primary):

Screenshot of the Board of Trustees Meet the Trustees landing page

Chuck Lillis Landing Page (Secondary):

Screenshot of the Board of Trustees Chuck Lillis page