The 4 Pillars of Information Architecture

Architecture is important. Castles made of sand fall apart with the tides. But built upon a strong foundation, a house can stand a thousand years or more.

Websites are no different.

Well, a little different. But let’s stick with the metaphor a moment longer.

The architecture of the great monolithic structures of the past are incredible. The ancient pyramids of Egypt, for example, are thousands of years old – for the simplest of reasons. Solid architecture. A strong, wide foundation supports a decreasing amount of weight and volume as the elevation of the structure increases.

As it turns out this principle can also be applied within the digital realm.

Physical architecture is the organization and management of weight and volume, which must adhere to the rules of physics. An architecture of information is the organization and management of data on a website, application, or other interface along with the rules that govern its structure. Information architecture lets your users know what kind of information they’re accessing, how it’s accessed, and the rules by which the navigation and consumption of content are governed.

There are four primary pillars of information architecture. The first of the four is the bottom of the pyramid, so to speak: organization.

1. Organization Systems – Decide how you will divide content and pages into categories.

A strong foundation for information architecture starts with your organization systems. This is the basis of how your site’s data is accessible. Organization systems, as the name would imply, simply refer to the manner in which your data is categorized. It can be any or all of the following:

  • Author names
  • Titles
  • Sizes
  • Colors
  • Prices

…And so on. The foundation of your IA is how you organize the data for your users to find. For example, Amazon categorizes their products and content in several ways:

Image Credit: Amazon
Image Credit: Amazon

See how their different offerings are structured. At the top left they have a drop down menu labeled: Shop by Department. This menu is divided into 3 different subsections.

At the top are all the Amazon specific offerings such as kindle fire, online video and music, and the Echo. Under that they have actual physical and digital product categories you can buy both from Amazon and from individual vendors. And at the very bottom they have specialty products and services. Things like handmade necklaces, credit and payment services, and home improvement services. At the very bottom is their full store directory.

Each of these sub sections has its own pop out menu for further specification. This is a well thought out infrastructure for a major online retailer. It allows users to start with broad categories and narrow down their choices as they browse. Moreover they can get a very specific idea of the sort of content they’ll find from the homepage.

Amazon is famously usable. They provide all the information users need to understand where they are heading and what’s waiting for them when they get there. The information is accessible, findable, usable, and intuitive.

This is a fantastic example of IA done right. A strong foundation from which the other maxims of our information pyramid can be layered.

2. Labeling systems – Choose the type of language to describe the categories.

The next important pillar of IA is the sort of language used to label your content. This too, contains a big usability factor. More specifically, it’s about the language level. What sort of vernacular is your audience working with?

This is largely determined by your user research and target market. If you’re aiming a product at the general public then the type of language you use shouldn’t contain too much industry specific jargon. Whereas if you’re providing something niche specific, your audience is likely to be more educated about that topic and able to understand more jargon.

For instance, take a look at the homepage for the investment blog, Seeking Alpha:

Image Credit: Seeking Alpha
Image Credit: Seeking Alpha

Just skimming some of the trending articles, you can see plenty of industry specific language that frankly wouldn’t mean much more than a sentence in Latin to a financial layman. Even the tabs up top could look confusing to the investment novice. ETFs & Funds? Dividends? Why does Earnings need its own tab? Isn’t all of investment strategy about earning money?

This website is obviously for people in the financial know. A CPA or investment banker who works in this industry would have little trouble navigating the jargon filled IA. While people without a financial background might need to consult a dictionary. That’s, of course, okay for this site because it caters exclusively to an educated audience.

Now in stark contrast, let’s take a look at Spotify’s homepage:

Image Credit: Spotify
Image Credit: Spotify

Seeing as the main tagline on Spotify’s homepage is “Music For Everyone,” it’s nice that the language used to describe their content is likewise universal. Notice the labels are one or two words, the sentences beneath are simple and easy to understand. Anyone who can read English can understand the way this content is organized.

This again helps us understand the overall architecture of the website. You’ve got a strong structure of intuitive and informative organization, legible and accessible labels (for your specific audience), and the next block in our pyramid is navigation.

3. Navigation patterns – Set up a website navigation system that your audience recognizes.

These are also known as navigation systems. Usually, what you’ll see on most web interfaces is the tab system at the top of the page or menu items with submenus occasionally dropping down from your menu options. You can find the run of the mill navigation patterns just about anywhere.

Image Credit: Weather.com
Image Credit: Weather.com

Above you’ll see the homepage for Weather.com. The navigation bar at the top is easily visible, plainly understandable, and ultimately usable. All the information about your local, national, or global weather is only a button click away. This is a pretty standard navigation bar style pattern. Popular variations of this pattern include sticky bars or full page menus.

The possibilities for effective navigation patterns, however, go far beyond the usual suspects.

Image Credit: Subaru
Image Credit: Subaru

Car manufacturer Subaru designed an intriguing website with multiple navigation options which allow users to explore the company’s history of environmental activism. The navigation map is shaped like the rings of a tree, and each ring describes a different time period in the company’s history.

Users can click inside the tree rings to go to a more specific timeline and explore compelling content up close, or they can skim from a broad view afar. You can navigate by clicking and dragging, scrolling, clicking specific circles or links, or by exploring the menus sporadically placed throughout the site.

The navigation isn’t as consistent as some standard patterns. However, it is far more interactive and engaging. The IA in this site is setup to allow users to explore content, discovering the information as they go, and receiving helpful prompts if they ever get stuck. It still meets the main requirement of usability, and also adds an element of novelty.

Problematically, though, this sort of interactive navigation could result in a user feeling lost within the website’s structure. The fourth and final layer of our IA pyramid represents a workaround of sorts for this problem.

4. Information retrieval – Choose a type of information retrieval system on your website.

This is the way you look for specific data on a website. Usually, you can find the classic search box that identifies keywords in order to find the specific content you’re looking for, though it can also be items in a numbered/bulleted list. Generally speaking, however, when people speak about information retrieval they’re talking about search engines.

Even more generally, you have two types of information retrieval systems:

  1. Site specific retrieval
  2. Site and web retrieval

In the former case, your site’s search engine would only retrieve results from within your own website. In the latter, search results would include results from both the site and from the rest of the internet as well.

Let’s start with an example of site specific retrieval. One of my favorite sites to peruse for design inspiration is an aggregator of particularly well designed websites: Awwwards.com

Awwwards

Image Credit: Awwwards.com
Image Credit: Awwwards.com

This image is the results page for the keyword “ecommerce,” within the Site of the Day category. The search engine displays a list of sites that rank for this keyword and have also one the Site of the Day Awwward. As a handy extra they also list the number of times this keyword appears in other sections. You can further narrow results by other categories via the menus at the top of the page.

This is an extremely effective method of finding the content you’re looking for as it allows you to search for specific attributes with disparate categories. Once again, it’s all about defining your architecture in a usable and intuitive manner.

For web and site retrieval let’s take a look at the mother of all search engines.

Google

Image Credit: Google
Image Credit: Google

Google has plenty of onsite content you can search for. Its responsive design best practices, the guidelines to material design, trends, apps, and so on. But it’s way more likely that you’re looking to get data from an external source when you’re typing into that search bar. Which is what Google does best anyway. What’s particularly interesting is Google can actually be used as a search engine on your own site.

Regardless of your search bar strategy, it’s important to give your users multiple methods of finding content. Search bars themselves are only really necessary for sites with lots of content. You may not need one if your site doesn’t have a ton of data to index. But for blogs, news sites, and any other content heavy platforms they are a necessity.

This concludes your IA pyramid. With all of these elements in place, you can be assured that the structure of your site is securely grounded in usability best practices. There is of course much more to a deep topic like IA, but if you understand and implement these four pillars, you’ll be well on your way to having a scalable and usable IA for the long haul.

To learn more about information architecture, check out these helpful resources:

Note: The opinions expressed in this article are the views of the author, and not necessarily the views of Caphyon, its staff, or its partners.

Author: Kyle Sanders

Kyle Sanders is Head of Search at Complete Web Resources, an Austin-based SEO and development firm. You can connect with him on LinkedIn or Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *