Information architecture: how to master web design

It’s been much easier for your average internet user to get to grips with web design and development in recent years. You don’t need to be an expert coder to create a website, thanks to the various tools, frameworks, and templates that make these tasks intuitive and user-oriented. But as web development advances, so too have user expectations. This means anyone building a website always needs to find new ways of bringing their site directly to the user and offering an amazing experience.  

What is information architecture?

When we go on a journey, we usually take the most direct route to get to our intended destination fastest. This is obviously more efficient in terms of both time and energy. Whether that journey is physical or online, the principle is the same. 

Information architecture (IA) is aimed at improving the classification and structuring of content to improve the overall user experience of a website. 

Rodrigo Melo, Head of Design Innovation at Namecheap, provided us with this interesting insight:

“IA is one of the fundamental pillars on which a great user experience is built. Ultimately it comes down to enabling users to succeed in their goals, or to invite them to discover new goals or information. All of this, when done well, becomes intuitive, simple, and clear. Invisible — just like a wide-open path forward.”    

He explains further that when IA is successful, users do not need to make decisions or think about what they are doing—they simply are compelled to move forward. The goal is effortlessness in search and navigation as well as faster results.  

IA overlaps with user interface (UI) design as the visual element is central to the way users interact with a website. It is a more specific field within user experience (UX) design as website interaction is driven by the user.  

The main components

There are four main processes in information architecture: 

1. User research

Web design should always start with the user, so this means getting to know them in terms of their needs and problems. Information architecture needs to take this information into account and match it up with business goals, then respond with a strategy that works within the technological resources available. 

User research can be carried out through card sorting, which is a technique by which users are given the chance to organize topic cards as they see fit. For example, participants are given the unsorted cards: ‘biology’, ‘history’, ‘economics’, ‘Spanish’, ‘physics’, ‘German’, then they take the initiative to categorize each card under ‘sciences’, ‘humanities’, and ‘languages’. This process helps researchers to better understand how users choose to organize the content of an online platform.    

Tree testing is another research method in which the sitemap, or tree, is loaded into the website software and users are given tasks to see how easily they can find certain information. Often participants are given a text-only version of the site so they are dealing with the content in its most basic form. Tree testing takes the opposite approach to card sorting as it shows how users engage with content through practical use rather than categorization. 

2. Navigation

Visitors to a website need to be able to easily find what they are looking for, and this is one of the main goals of information architecture. In navigation, key web elements like buttons, menus, and tables are crucial in guiding the user. Search is also a key concept for many websites, with the need to combine and balance simplicity and functionality.   

These are the most common types of navigational structure:

• Hierarchical –  the top-down organization of content from main categories to subcategories. An example of this is drop-down menus for creating a range of subcategories. 
• Global – from a central page the user can access all locations, through the use of sidebars, sticky menus, or hamburger menus. 
• Local – presents content within specific subsites or subtopics of a website, rather than allowing content to be accessed centrally.  
• Contextual – content is organized into different content types rather than topic or genre. For example, dividing content into articles, videos, products/services, or reviews.

For some useful tips on navigation, take a look at this blog (link to Cora’s navigation best practices).

3. Labeling

Putting labels on your website content is an essential task in information architecture. For this, you need to consider all of your key topics and categorize them in headings and subheadings. These will show your users what they can expect from a subset of content, so the headings need to be clear and accurate. Illustrations help to make labeling easier to understand, as well as examples of items included in the category.  

This supermarket website divides products into categories with a dropdown menu for each, which are further subdivided and illustrated by images. The overall effect is clear and easy to navigate. 

However, this online forum is very text-heavy with limited space for each label. This makes it difficult for the viewer to process the different links and difficult to navigate. 

4. Wireframing

This is the process through which the blueprint or schematic overview of a website is produced. It should clearly represent the navigation, labeling, and interface of a website before it is developed. This is the ultimate test of information architecture, and it’s where IA is joined by UI to give both the look and feel of a planned site. Wireframes are usually created using software like Adobe XD or Sketch.   

To find out more about the ins and outs of site architecture for a small business website, take a look at this comprehensive guide.  

Information architecture in practice

So far we’ve discussed the theory of information architecture. Let’s now look at some recommendations to get the most out of the process. 

Things to aim for

IA needs to be clear and organized from start to finish, so keep the following best practices in mind:

• It’s a good idea to start things off with a content inventory. This is the process of reviewing all of your content so you have a better understanding of how to structure/organize it. 
• Mind mapping is a technique used to develop logical relations between different parts of the website. This involves brainstorming and problem-solving sessions and creating visual representations of main concepts and processes.  
• For clarity in the planning stages, site mapping is the process in which all content is displayed in a hierarchical structure diagram to show categories, parent/child relations, and navigation.

A large e-commerce site with a wide selection of products, L.L. Bean is a good example of how to make navigation easier for the user. Its landing page has clothing types broken down into men’s, women’s, and kids’ options, while other equipment and accessories are divided by activity or product type, so it is easy for users to find and navigate to what they are looking for.

Things to avoid:

With IA, there are many pitfalls that can lead to disaster with a new website. Here are some bad practices that you should be wary of:

• Topics that are not covered and questions that remain unanswered. You need to consider every possible user need and reason different users are coming to your site. 
• Redundant content and repetition. This means content audits and updates on an ongoing basis.  
• Inconsistency in navigation. Your visitors need to glide through the website and encounter no unexpected obstacles, like difficulty in getting back to a menu.
• Unstructured or cluttered content. Your users need to be in control and able to go where they want without confusion or feeling overwhelmed. 

Unfortunately, these errors in IA can be off-putting for customers and lead to a lower rate of conversions. Decisions are made quickly so let’s make sure your bounce rate isn’t the result of any web design failures.    

Final thoughts

Information architecture may be relatively new to web design, but it represents the increased focus on the user that websites need to strive for in 2022 and beyond. Effortless navigation and clarity are essential, as well as considering every possibility in the user journey. Another thing to remember is that IA practices need to be continuously refined and evolved so your sites can move with every new change.