A Beginner’s Guide to Information Architecture

Maria Mora August 11, 2020

You want a great website. That’s the easy part. It’s also natural to learn that a great website is more than just a great design. But exactly what do you need? What hidden components of your website planning and building help make it successful, both for your organization and your users?

In your search for those components, you’ll probably come across the term information architecture. Often shortened to IA, it’s as crucial to your website as blueprints are to new construction.

And yet, it’s difficult to nail down. Too often, the explanations are confusing or only loosely connected to your actual need. So we’ll break it down. In this beginner’s guide to information architecture, you’ll learn all the basics to help you build a great website.

First Things First: What is Information Architecture?

The blueprint comparison above is actually quite apt — just like a building needs some basic drawings that connect the rooms with each other and make sure the space flows well, your website needs a basic structure behind it. That’s IA. Or, as The Information Architecture Institute explains it:

Information architecture is the practice of deciding how to arrange the parts of something to be understandable.

Think about your local library. The way the catalog is structured, and the bibliography is built, is that space’s information architecture. Applied to your website, information architecture is how all the information is structured to benefit you and your audience.

That includes your navigational structure. It also includes any links out to other sources outside your website. It even includes the call to action buttons on a page that might link to another. In short, it’s the structure behind the way your visitors “flow” through your site.

The 4 Main Components of Successful Information Architecture

Let’s start to dig deeper. In their seminal book “Information Architecture for the World Wide Web,” Lou Rosenfeld and Peter Morville broke down four core components of IA that should be considered in any website build:

1. Organizational Systems, which outline how the information will be divided. The three most fundamental systems in this category are hierarchical, sequential, and matrix-based.
2. Labeling Systems, which describes how basic data is represented. It boils down complex data, like all the ways your audience can contact you, into a simple solution, like a Contact button at the top of the page that intuitively tells your audience what to expect.
3. Navigation Systems, which help drive users through your content. That might include the traditional website navigation, but it could also be the way a call-to-action button on your homepage leads to a conversion-focused landing page.
4. Search Systems, which range from a search box at its most basic to a complex filtering system for larger websites. It’s a way for the user to skip the navigation and go straight to their page of choice. Exactly how they find that content, and how the search is optimized, will be crucial.

5 Reasons Information Architecture Matters in a Website Design or Redesign

You might think that your website is not complex enough, or your organization is not large enough, to strategically consider IA. That would be a mistake. In fact, every website has information architecture — it’s just that anyone considering the concept while building their site will have a central advantage when it comes to their audience.

Good IA helps you get crucial information across quickly, while helping your users find what they’re looking for. Bad IA is like a maze that your users get stuck in, to nobody’s benefit.

But let’s get specific. Consider these five reasons when thinking about integrating strategic information architecture planning into your website design or redesign:

1. IA is central to a good user experience (UX). Web designers can use the structure created by IA to plan anything from their navigation to the structure of the individual pages. If they know how information is supposed to flow, they can optimize the design around that information to support the flow.
2. IA provides the birds-eye view of the entire site. Whether you’re building your website from scratch or just looking to add a few features, that birds-eye view helps keep the broader context and other pieces of information front and center to make sure it all makes sense.
3. IA helps to accomplish your website goals. Chances are you don’t just want visitors on your site. You’re looking for them to convert, be it to leads or to customers for an eCommerce business. Good information architecture drives your visitors down your funnel and gets them where you need them to go to accomplish those goals.
4. IA has a significant impact on search engine optimization. Good IA can improve your SEO in many ways. It decreases bounce rates, improves your site’s appearance on results pages, and increases on-page engagement. It’s far from the only variable in SEO, but plays an important part in boosting your rankings.
5. IA can decrease your long-term marketing and web costs. Every bit of money you spend on an ad goes further if the user lands on your website and finds what they’re looking for. Meanwhile, a website designed with good IA will be much easier to update, improve, and evolve down the road. Fewer full redevelopments mean less money spent.

How Accessibility Impacts Your Website’s IA

One reason to prioritize information architecture is becoming so important that it deserves separate consideration. We’re talking about accessibility, a topic front and center for organizations across industries at this time.

It’s always been preferable to design your website in a way that makes the information accessible to visitors with disabilities. After all, more than 50 million Americans have a disability that could impact the way they browse your site. But it’s taken a significant step forward recently, with a growing number of individuals taking legal action against websites that are not accessible.

That matters for individual components like ALT tags on your images. It also directly impacts the way you structure the information on your site.

The priority? Design and structure the information so that it’s easy to navigate for anyone, regardless of their handicap. According to the General Services Administration, accessibility should affect your IA in a few different ways:

• Page titles should be descriptive and easily convey each page’s focus.
• Users should have the ability to navigate your website in multiple ways. Those ways might include a table of contents, sitemap, interlinks, and search function.
• Changes in language should be clearly marked on your page and in your code to help people with screen readers, cognitive disabilities, and braille translation software. Keep them to a minimum, and try to bunch them together to avoid continuous switching back and forth.
• Users should be able to easily land on controls and understand the site using only a screen reader. Some information architects use simulators to accomplish that goal.
• Forms need to be both straightforward and set up for each label and instruction to be accessible.

Each of these requirements can be solved in the information architecture build. That baseline of accessibility, in turn, increases your potential audience and plays a part in keeping you legally protected.

Spot the Difference: The Nuances of Mobile vs. Desktop IA and UX

Another important nuance to keep in mind is just how your information architecture might differ on mobile vs. desktop devices. More than half of all internet users now come through either smartphones or tablets, and the way they interact with websites is dramatically different from their desktop counterparts.

To start, they expect a simple navigation. They also prefer buttons over in-text links, and tend to be much more visual. Present them with a wall of text, and they’ll be almost sure to bail.

Those behavioral differences naturally affect the way you build your IA. If the goal is an optimized user experience, you have to make sure that you cater to your audience’s needs and preferences. That means more than simply embracing responsive design, although it’s a great first step. It’s about building the entire structure to satisfy and exceed mobile expectations.

That, in turn, has led many organizations to embrace a mobile-first information architecture, which, according to the Interaction Design Foundation, incorporates a few key principles:

• Content should be smaller, simpler, and easier to handle than the traditional desktop-based website. Limited screen sizes almost naturally squeeze the space you have to get the information across.
• The navigation should be as simple as possible, limiting the number of options on the menu or any secondary menus that might seem straightforward on desktop.
• Click investment is a priority. Every click a mobile user makes takes effort. The fewer they have to take to get to the spots they (and you) want to get to, the better.
• Links should be clearly marked, and easy to find, where possible — the more descriptive the anchor text, the better.
• Navigational cues should be obvious. Wherever you can, that means making breadcrumbs explicit and telling your users exactly what to expect when they click on them.

Here’s the thing: these might be mobile optimization tips, but they’re just as relevant for desktop IA as well. The lessons learned from mobile user experience can easily transfer to its desktop counterpart. The result is a comprehensive website that is designed to appeal to your mobile users but considers all device types.

How to Build an Effective Information Architecture for Your Website

This is a beginner’s guide, so we won’t go super in-depth on recommended tools or a scientific process for building the right structure of your website. Instead, we’ll give you a basic overview of the steps required to achieve the desired end result — a blueprint that guides the website design.

1. Define your website goals. Exactly what do you want and need the site to accomplish?
2. Define your audience’s goals. When they come to their website, what are they looking to accomplish? Crucially these might be (and often are) different from your own goals.
3. Create a content inventory. What does your website need to include? Start with basic categories, but don’t be afraid to dig into the content details as well.
4. Group your content. Many information architects use card-sorting techniques to help them understand how different pieces of content belong to and work with each other.
5. Create a sitemap. Take the grouped content, and work up a diagram on how it might be connected with each other. The result will likely look something like an org chart.
6. Create the navigation. Use the theoretical connections you’ve made in the sitemap, and create them in real-time.
7. Start testing with users. Put the sitemap and navigation in front of them, then give them specific tasks of finding content that matches your website and user goals. How easily can they find it?
8. Check for accessibility and mobile-friendliness. The above guidelines can play a core role in ensuring you’re not running into any troubles in those areas.
9. Make adjustments where needed. Remember that user experience is at the forefront of any good IA.

And that’s it! With these nine steps, you can make sure that your website has a structure that helps you meet both your business goals and those of your audience. The result is not just a better online experience, but a more focused experience that ultimately improves user satisfaction as well as your bottom line.

The best part: none of the above has a minimum threshold. Even a 3-page site for a small business can still benefit from a strategic information architecture. That blueprint will be beneficial in all of the ways described above.

Digital & Social Articles on Business 2 Community

(19)