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 we’ve taken the time to understand how your users expect content to be organized and how they refer to that content (what terminology they use), we will use that data to create your website’s information architecture.

What is Information Architecture?

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

The purpose is to help users understand where they are on your site, where to find what they are looking for, what they’ve found, what other things are on the site, and what to expect from the site.

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?

Through this website redesign process, we will develop a working site map for your website. 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 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 homepage (key messaging, a brief description of your department and what it does, a list of upcoming events, testimonials about your department, etc.)

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 highest profile and labels the 5-8 sections of content that the users are the most interested in visiting.

The primary navigation is the starting point on your user’s journey through your website beyond your homepage. You will find the primary navigation at the top of every page, it should allow the user to easily access exactly what they are looking for, and remain consistent throughout your website. The easier you make it for your user to understand, the more likely they are to stay on your site to get the information they came for and to return later when they need additional information.

The primary navigation should be based on tasks (what am I trying to do on this website) rather than user (who am I). Users come to a website to accomplish a specific task and forcing them to self-identify first can be frustrating and deter them from accomplishing their goals. The primary navigation should be read from left to right like part of a journey (getting started to getting a task accomplished to getting help for a specific problem to answering questions, etc.).

Five Problems with Audience-Based Navigation (From Nielsen Norman Group)

  1. Users don’t know which group to choose. Sometimes users identify with more than one audience group. Other times, they don’t identify with any of the options. In some cases, people don’t understand the labels, because the audience categories are based on the organization’s internal jargon. The reality is that people don’t always fall neatly into a single category, nor are they able to quickly self-identify.
     
  2. Users question whether the category will have information about that group or for that group. Imagine a university website with a link in the main navigation called “Faculty.” Would you expect to see information about the professors that teach at the university, or would you expect specialized information for faculty members? Based on the label alone, you can’t tell, and neither can users.
     
  3. Forcing people to self-identify creates an additional step and takes people out of their task mindset. Web users are task oriented; they aren’t thinking about who they are. In audience-based navigation, people must ask themselves who the site thinks they are and what type of content that type of person wants. All these questions increase users’ cognitive effort, and people haven’t even made it past the navigation yet.
     
  4. Users feel anxious that the information they see might be incomplete or incorrect. When users feel stuck in one group, they wonder what other groups get that they don’t. Particularly in e-commerce or B2B contexts, users want to know if other audience groups have access to better options or prices.
     
  5. Websites with audience-based navigation often have overlapping content, which creates a greater workload for users (and content maintainers). Often, topics relate to more than one audience group. So designers end up either creating two pages, one for each audience (a technique that replicates content), or they use the same page with multiple links to it from different sections. Most of the time, this results in users questioning if the information is different in different areas of the site, and people end up pogo-sticking between sections, testing links to see if there is new information.

Each of the primary navigation elements is a separate webpage that the user lands on when they click on the primary navigation link. These landing pages will either contain all of the information about that element, or be an introduction to 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 in 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 will be the 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