- What is Information Architecture?
- Why Your Homepage is an Important IA Component
- Using Categories and Labels in Your IA
- Creating a Site Map
- Creating a Wireframe
To make sure that users coming to your website can quickly find what they’re looking for, you need to create an easily understandable website structure. This structure is your website’s information architecture (IA).
The IA informs your users about the categories of content you provide on your website and forms the navigation menu. A well constructed IA allows users to quickly scan the navigation links on the homepage to learn more about your site and the information you offer.
To create the information architecture, think about your site goals. Begin by reviewing the information you learned about your users and the personas you created. Ask yourself the following questions:
- What do you want to accomplish by having a website?
- What are your users’ goals and needs?
- Why and how frequently are users coming to your website?
- What do users want to do when they get to your site?
Your homepage should reflect the reasons users come to your website. Remember that users are more interested in the information you provide than the way your agency, organization, or business is structured.
You want the most important and most frequently performed tasks represented on the homepage. Perform focus groups, individual interviews, and task analysis to learn:
- Your users' goals
- What users want to do on your site
- How your users work
All of this informs your home page as well as your IA.
Choose categories and labels that inform your users about the information you offer on your website. By gaining a better understanding of how users view your content, you can define a category structure (or taxonomy) that makes sense to them.
Using easily understood or intuitive categories and labels in your IA makes your website easier to navigate. It also keeps users from feeling lost on your site, unlike sites designed based on your organization’s needs or structure.
To help you group your content, use a card sorting exercise. Participants in a card sort organize your content under categories that make sense to them. They can also label the groups of information.
It is unlikely that all of your participants will group your content exactly the same way. Instead of looking for a consensus, look for trends in your results.
When reviewing your results, consider:
- How the majority of users grouped the content
- Whether users created similar categories or groups of content
- If users used similar terms or labels for the categories
- Whether there was a lot of disagreement
- If there were content items that users struggled to place into groups
Use these guidelines to the groups of content (or categories) that are logical to users. You can also identify the types of content that users found hard to categorize and develop a plan to deal with it.
A site map is a visual representation of the IA of your site. Creating a site map will help you organize the structure for your site.
In order to create a site map for your website, you should first think of all the features, functionality, and content that the site will contain.
To help you create a site map for your website:
- Identify all of the features and content on the site. Refer to the website requirements and content inventory you created to help you.
- Determine the items that need to appear on the homepage. Review users' priorities from the task analysis and scenarios to help you.
- Identify the main categories and the labels for the homepage categories using the data from the card sorting activity.
Once you've identified the links, features, and content that needs to appear on the home page, you'll want to define the content that will appear on second-level and content pages.
This is high-level site map created for Usability.gov in the early design and development phases:
A wireframe is a visual illustration of one webpage on your site. Use wireframes to illustrate the features, content, and links that need to appear on a page. A wireframe:
- Identifies all of the features on a webpage and provides locations for them
- Prioritizes the features so that the most important features are prominently positioned on a page
- Visually communicates page information to the rest of your design team with a diagram of the webpage
Wireframes do not dictate how a site should look. The design team uses wireframes to mock up visual interfaces and developers use them to understand page features and how they should work.
Wireframes can range from a simple mock-up of an information-based page to an extremely complex diagram illustrating an intricate process with several steps, such as a registration process. You can create them using various tools—from a simple word processing program to a complex diagramming program.
Wireframes (PDF - 700 KB)--This document provides a description and examples of both functional and design wireframes.