Illustration by Freddierick Mesias

As technology continues to develop, more and more information is stored, shared, and created online. Whether you’re sending a message on your phone or drafting a 3D render on your desktop computer, information is everywhere, and it’s often overlooked.

Information Architecture is focused around the art and science of organizing information in an effective and efficient way, so that digital products are both performant, and accessible to their audience. In the same way that when you walk into a library and expect to be able to find what you’re looking for amongst thousands of titles and categories, you expect to find what you’re looking for when you visit a website.

Graphic illustration depicts a website's information architecture.

Though there are many aspects of information architecture to consider, two in particular are important for the cataloguing and organization of information, Taxonomies and Metadata. You may be familiar with the idea of metadata if you’ve spent time coding websites, or optimizing for search, as it’s leveraged by search engines like Google to understand what information exists on a website. In this post we’ll explore how taxonomies and metadata can help you structure and organize your information, and think about your design. To learn more about information architecture and the other aspects like sitemaps and hierarchy, visit this introduction to information architecture.

Why Organizing Information is Important

Organizing information on your website or digital product is critical to its success. Whether you’re running a blog, an e-commerce site or a web-app, having a clear, intuitive structure to your information will not only help you, but will help your customers accomplish their goals.

The bridge between the analog and digital world is not a far leap. Imagine that you’ve walked into a physical store which had clothing of all sizes, colors and materials. If those clothing items were arranged at random, with sizes mixed together, shorts and shirts mixed up, and no apparent order to the chaos – your shopping experience would likely be less than ideal.

Clothing icons are unsorted and arbitrarily placed in an illustration.


Now if you took that same clothing store and arranged the store by size, item type (shorts with shorts, pants with pants) or even by seasonal purpose, that experience is going to be much more enjoyable and intuitive. Not only will satisfaction be higher, but the likelihood of a customer finding what they intended to purchase, and completing that sale increases too.

Clothing icons are sorted and categorized by type.

Just like in that physical store scenario, our digital products need to be discoverable, and logical with how they handle information. It’s both a good user experience decision, and a better business strategy.

Taxonomies

A taxonomy is a particular categorization of information, leveraging the metadata that we’ll cover below. A taxonomy is a structure of organization, typically in a tree structure with hierarchy among the objects or items that it is categorizing. That’s rather technical, so let’s put that into the context of our above example.

In our ‘organized’ example of the clothing store, we organized our clothing items by a few different options (color, size, type). Each of these options is part of our ‘Clothing’ taxonomy and live in a hierarchy.

A taxonomic model for clothing products categorizes clothes into size, color and type, where 'type' has product subclassifications for shorts, pants, shirts, and dresses.

Within color, size and type, there are ‘children’ categories. Looking at ‘Type’ there may be a classification for shorts, pants, shirts, dresses, and jackets. Depending on the granularity we wish to classify items in our store we may add additional child levels in the tree. The more granular your taxonomy is, the more specific a user’s search can be.

If we translate this to a website example, all blogs, including XD Ideas, have a ‘taxonomy’ to organize the articles within. This is done so that if you’re looking for something specific you can find it through the navigation. Adding granularity here helps with that discovery. If we simply had one level of classification in our blog taxonomy (Design, Prototype, Test), that doesn’t help someone discover content on designing interfaces for the web. It will help them find design, but then there may be a large collection of content they need to sift through to find the specific content.

To help, let’s add some levels to the Design taxonomy, maybe Web, Mobile, Voice, and Game design. Now as someone looking for ‘designing interfaces for the web’ I have a further subdivision of content specific to web, in my design category. Adding more levels of a taxonomy classification can be helpful.

Metadata

With your organization structure in place (taxonomy), you now need to classify all of the information. The taxonomy itself simply provides the architecture for organization, but doesn’t actually organize it until all information includes metadata.

Metadata is the defining attributes and classification of each piece of information, which is why it is leveraged by search engines to understand content. In code, metadata often looks like a list of attributes with associated values indicating the classification of that item. For a webpage some of those items are as follows:

  • Meta Title: A descriptive title defining what the website is about.
  • Meta Description: A longer form description of the content, often an introductory ‘snippet’ of the content in the page.
  • Social meta tags: Twitter, Facebook and other social platforms use specific meta tags so you can control how a post image, title and description will appear on those platforms when shared.
  • Location and language: tags used to tell search engines what language or location the content was designed for.

Metadata tags can be broad and customized to your needs. In our shop example, each clothing item would need to be tagged for the categories of our taxonomy, meaning the metadata might look something like this:

Metadata associated with a clothing product includes attributes like name, color, size, type and material.
  • Name { Unisex Red T-Shirt }
  • Color { Red }
  • Size { Medium }
  • Type { Shirt }
    • Shirt Type { T-Shirt}
  • Material { Cotton }

These characteristics, once defined for each item, help to populate the taxonomy structure and organize the data. Based off of this metadata we know we’d expect to find this item in the t-shirt section, organized with other medium sized shirts. Depending on our taxonomy structure this may be organized by material or color as well.

Using Taxonomies and Metadata in Design

It’s important to understand this organizational structure before you begin designing any user experience, whether it is digital or physical. As we can see physical and digital shopping experiences can suffer the same organizational challenges if the proper taxonomy isn’t configured. The advantage goes to e-commerce as the ability to search metadata tags can make it easier for a customer to discover products.

Before you begin your design, understand your user journey and needs. Pairing the user needs, along with an understanding or mapping of existing metadata (after performing an inventory of information) can help you to tailor your taxonomy to fit your user journey. This will help you to structure elements of your design like navigation and hierarchy of content.

If you want an example of ‘taxonomy’, look at how popular websites configure their main navigation. The main, and sub navigation is often representative of the taxonomy being used to organize information.

Apple's website leverages a taxonomy driven by product categories.

Looking at Apple.com we can understand some elements of the taxonomy being used to organize products. The top navigation includes broad, known to consumer, categories like Mac, iPad, and iPhone. The secondary navigation (once you select one of those previously mentioned categories) breaks down by product type Macbook Air, Macbook Pro 13”, iMac, and iMac Pro. This aligns to how customers journey through the website, often with a product in mind they want to learn more about.

What is interesting, is that there are many parallels between this digital experience, and the in-store experience of most Apple stores. In the physical experience each table display represents one of the top navigation items, and within that table is the assortment of product types. Apple does a great job aligning their in-store taxonomy and digital taxonomy for finding products.

Of course, in Apple’s case, this is a very curated experience with a fixed number of products. However these products still have metadata embedded in them for search purposes.

A Google search result for Apple.com's Macbook Pro 32GB product page.

Understanding your taxonomy structure, and what metadata you want to show for elements (title, author, date, categories) can help inform your design. Understandably these structures can change, and should be iterative like the rest of the process. However, having them from the start will help you understand what templates, pages, and elements you need to include in your design.

Using Existing Content

If you have existing content, products, or have an existing site that you’re redesigning, it can be helpful to complete a content audit before you begin. This involves looking at all pages, products and content within your site, understanding what metadata exists, and understanding where you may have gaps. Pairing this with analytics is a great way to research high touch points with customers today, and areas that you can improve the funnel with a restructuring of your taxonomy.