A website’s information architecture (IA) has two main components a) the site’s content and b) functionality and structure that define the relationships between a site’s content/functionality. Even though the IA itself isn’t visible in the UI, a solid IA is the foundation of a great user experience. That’s why the best time to start thinking about information architecture is before the website is even built.
In this article, we will review IA best
practices and share the best information
architecture templates that will help you design great IA.
A step-by-step process of creating an information architecture for web design
What kind of content should you have on
your site? How should it be structured? Unfortunately, all too many businesses
structure their content using the “In my opinion” method. No matter how good
you are at predicting things, it’s always better to rely on research and make
data-informed decisions. That’s why before starting a web design project,
it’s recommended to conduct proper research and analysis.
Below is a seven-step process that you can
follow to create a website architecture:
1. Frame your approach
Are you redesigning an existing website or designing something new? The answer to this question will help you prioritize your activities. For example, when you design a new site, you need to invest more time in understanding the business and your user’s needs. But when you redesign an existing website, you will need to focus more on conducting a content inventory and audit in order to find places where content requires attention (more on this later in the article).
2. Conduct user research to understand your users
Once you have identified which approach is appropriate, gather data about your site users – invest in user research and learn about a user’s wants and needs. Create user persona templates based on the insights you get from user research. Write user stories and evaluate your content organization and design on how they work for real people and their tasks.
Personas are fact-based representations of your users including the goals, motivations, characteristics, and behaviors of your target audience. Image by clevertap.3. Identify business goals
Once you have identified
what your users need, its time to discover what your stakeholders need. The goal of information architects is to come up with a structure and
design that balances the users’ needs with business needs. Conduct a series of
interviews with stakeholders. Get a clear understanding of what the business
requirements are and list them with the appropriate metrics and KPIs. The
earlier the purpose and goals are defined clearly, the easier it is to stay
focused and confident in your work.
The intersection of business goals and customer goals will tell you what content and features will benefit both the customer and business. Image by yunsukchoi.4. Review the content
Now when you know what users want and what
the business wants, you can evaluate the content you have according to those
goals. The main activities to perform at this stage are content inventory and
content audit.
Content inventory
Before you start constructing a layout of
the product, you need to understand what elements your website will consist of.
Conducting a content inventory will help you locate and identify the existing
site content. The goal of this activity is to create a list of information
elements (blocks of content on webpage) and classify them by topics. The inventory list usually includes
various elements such as page titles, meta elements (keywords, description,
tags), body copy, media content (images, audio, video), and documents (doc,
pdf, ppt).
A procedure of content inventory. Image by uxknowledgebase.Content audit
A content audit is a process of evaluating content usefulness, accuracy, and overall effectiveness. The usefulness of content is evaluated in terms of value (potential and real) that it provides for users. When you have a content list, you can evaluate it based on the goals you have put in place. For more information on content audit, read the article How to Perform a Website Content Audit.
A sample of the content audit spreadsheet. Image by semrush.5. Classify and group content
Now that you
know what content you have and have evaluated it according to its usefulness,
it’s time to define the relationships between content,
which can be done using a technique called information grouping
All of the different types of content must be grouped, or classified, and have proper names that won’t confuse a user. The most popular and the most important technique that allows information grouping the content is card sorting.
Open card sorting is the most popular technique that allows content grouping. Image by boagworld.6. Labeling and navigation design
As soon as you have the results of card
sorting activities, you will understand how your target audience classifies the
content. This step embraces navigation design, labeling, and site mapping. When you work on navigation design, you need to define a
structure for your navigation system and write a proper label for each
navigation option. This will help you understand what options you have and in
what order you might want to present them to your visitors/users.
IA example from the book Information Architecture by Louis Rosenfeld, Peter Morville, Jorge Arango.7. Wireframing
As soon as you have a navigation design, you need to see how pages/screen will work in relation to each other. It’s easier to get this understanding by doing wireframing. Wireframing helps to create a simplified and schematic visual representation of a layout for digital products. Wireframes are similar to architectural blueprints- they are low-fidelity mockups that show a project structure and connections between its parts. Wireframes are focused on the structure, not the visual and emotional perception of the details; that’s why it’s important to keep them simple. Once you have wireframes, you can connect them into the user flows and evaluate user interactions with a website.
Website wireframes. Image by Angie Herrera.Information architecture templates
Now that you’re familiar with the general process of information architecture web design, it’s time to review a few excellent templates that will simplify the process of creating your IA.
Visual vocabulary for information architecture
Diagrams are an essential tool for communicating information architecture and interaction design in web development teams. Jesse James Garrett shared a document that helps in the development of such diagrams. The document outlines basic symbology for diagramming information architecture and interaction design concepts while providing guidelines for using these elements. Here is how different team members can benefit from using the diagrams:
- Project managers use them to
obtain a general sense of the scope and form of the project.
- Content producers use them to
derive content requirements.
- Visual and interface designers
use them to extract a count of how many unique page designs must be produced,
and to obtain an initial sense of the navigational and interface requirements
for these designs.
- Information architects use them
to develop detailed navigational and interface requirements for each page.
Along with the document, you will also find an information architecture example of the website MetaFilter. You can use it as a reference when working on your IA for your website.
A sample diagram of the information architecture and interaction design of MetaFilter. Image by Jesse James Garrett.The Visio stencils, a name given by author Nick Finck, were designed to aid the work of information architects. They are created for people who have experience in IA. Thus, it’s important to familiarize yourself with common IA practices before trying to use these stencils.
The stencils in this kit will help you to
design:
- Wireframes. The wireframe stencil will help you communicate what needs to go on a page and what priority it should have.
- Sitemap. The sitemap stencil will help you visualize which pages can be accessed (hierarchically) from a given page.
- Process flows (sometimes referred to as user flows, task analysis, or process maps). The process flow stencil will help you create flowcharts or diagrams to explain and define a process within a web site, a web application, software, or system.
Sitemap stencils for information architects. Image by nickfinck.The company UI8 offers an information architecture kit that will help you get started. The kit contains 250 templates and 500+ elements. All assets in this kit are vector-based and fully scalable. The kit is compatible with Adobe Creative Suite.
Information Architecture Kit by UI8. Image credit UI8. This is a simple and easy-to-use IA
template that contains simple blocks that will help you showcase your web app/site
structure right in Keynote and doesn’t require a third-party software to create
sitemaps. Along with the IA template, you will find a link to Google Docs where
Alex Gilev (the creator of this kit) outlined IA architecture on a real project
from the past.
Information architecture kit for Keynote. Image by gumroad.Conclusion
It’s a well-known fact that design work is
never truly done, and that’s especially true for information architecture. IA
is a living and breathing organism that adapts to the rapidly changing
environment. But it’s vital to create a solid foundation for your design.
That’s why it’s important to invest in creating good IA and use tools that will
allow you to introduce changes without much effort.