UX Essentials: Why Information Architecture Should Always Be Stage One Of The Design Process

Define a website or app in its most simple terms and you’re talking about a source of information for people to navigate and interact with in some way. Which means you need to structure this information in an intuitive way that makes every detail accessible – and this is where Information Architecture comes into play.

If you’re new to Information Architecture (IA), it’s basically the concept of site structure with a focus on the information of a website or app and the path users take as they navigate. At a first glance this can seem pretty simple for smaller projects, but things soon get more complicated as you tackle larger designs and without a solid IA you can quickly lose control of your design.

Why Is Information Architecture So Important?

A solid IA design is important for two main reasons. Firstly, it makes your projects more manageable from start to finish, but it also keeps your design process highly focused. You’re not designing a collection of single pages when it comes to a website or application, you’re designing a journey for users to take and each element of your IA is a stepping stone onto the next destination.

Which brings us onto the second and most important reason: the end user. Aside from your information being highly structured and manageable throughout the design process, the real purpose of IA is a final product that makes information accessible to users, in the most effective way to achieve specific goals (eg: conversions).

Get Some Paper, Grab A Pen & Draw Out Your Sitemap

So before you boot up your design software, grab yourself a sketchpad and get working on your sitemap. Like I say, this can be quite straightforward for smaller projects like a simple portfolio or business website, but it’s still worth doing.

You’ll soon find drawing a sitemap for simple websites takes a matter of minutes with practice, but you’ll also iron out any areas where your structures could improve once you see them in black and white. More importantly, sitemaps are invaluable when a client decides they need extra pages or sections added to a project. With a visual representation of your IA you can normally see where these additions naturally fit within the existing structure.

For larger projects the IA design process will be far more complicated, but all the more essential and you’ll thank yourself later if you go about things the right way from the start.

Two Distinct Site Structures

There are two types of website structure, known as “flat” and “deep”. Flat structures tend to have very few layers with most of the site navigation in the main nav menu, while deep structures have a simpler navigation with more layers that require additional clicks to navigate.

2

1

The two examples above both show the same number of pages, but they are presented in a very different way to the user. As a rough guide, deep structures are better suited to complicated sites like eCommerce stores with thousands of products and categories. Meanwhile, flat structures are better for more simple projects – and they also come with a few SEO perks as well.

That said, you should always sit down and address the goals of each individual project to determine the best structure on a job-to-job basis.

Defining User Paths

Before you can design the perfect journey for users you need to know where they want to go. Which means you need to define a set of user paths (or stories) and structure you project accordingly.

A user path is the journey a visitor takes, from the first page they land on until their final destination – and hopefully ends with a conversion or positive action. You will probably have a number of user paths to consider and you can’t assume that visitors always land on the homepage first – so think about blog posts, service descriptions and other pages that might start the process.

Turning User Paths Into IAs

There are three main types of Information Architecture you will come across: categories, tasks and search. You could add a few more types of IA to this list – particularly for social networks – but for the sake of simplicity we’ll leave it at that for now.

Category IAs are what you expect from a typical eCommerce store with many product types. Online clothes stores typically have categories for men and women broken into tops, shoes and other product types. While an instrument shop might have guitars and drum kits broken into electric and acoustic guitars; traditional and electronic kits.

Task structures focus on the goal a user wants to achieve and this is the standard approach for a business site that offers a variety of services – like a bank, for example. You will see bank websites telling you to save money, borrow money, get a better rate or even buy a house.

Search is the standard architecture for a website with a large collection of user generated content. The most famous example would be YouTube and its website wouldn’t be anywhere near as intuitive if you could only browse by category or date, for example.

Finalising Your Information Architecture

You can integrate more than one of the previous AI types into the overall Information Architecture of your project, but remember that the key is designing a simple, easy to navigate structure. So keep in mind the goals your product needs to achieve and the potential user paths you have to cater for as you craft the right balance in your overall architecture.

Let’s go back to our imaginary clothes retailer for a moment. The main architecture will almost always be built on categories, but it’s not unreasonable to expect a search bar somewhere near the navigation or in a sidebar. Likewise, a clothing store may adopt an element of the task architecture to tempt users into sales, new seasons or rewards cards. If it helps, you can think of these as sub architectures or secondary elements to the category AI that eCommerce sites often demand. Either way, it all comes down to guiding users along the conversion process, toward the goals of your project.