Deconstructing Information Architecture

Imagine you have a room filled with your favorite books, movies, star wars toys, records, video games, or antiques. This room is a compilation of items that you have spent years collecting, admiring, and appreciating. It’s your passion, pride, and joy! Now imagine giving someone a tour of your room. How would you walk through it? Do you know where to find that super rare collector’s item that you’re dying to show off? Are your items arranged by title, release date, color, size, or author? You had countless ways of organizing your collection, and you probably chose the one that made the most sense to you.

Part of the fun of building a collection is deciding how you want to organize it.
Photo by Mariia Zakatiura on Unsplash

This very intuitive, human act of arranging items logically is at the heart of Information Architecture. Information Architecture (IA) is the process of organizing information so people can access what they need, when they need it and where they expect to find it. Although the name is closely related to web design, information architecture practices go back centuries. Built around 300bc, the Library of Alexandria—which contained hundreds of thousands of scrolls from all over the world—relied on principles familiar to modern library science and information architecture to logically track all of its content. From mathematics to astronomy and philosophy, every scroll had its place.

Information Architecture (IA) is the process of organizing information so people can access what they need, when they need it and where they expect to find it.

Like Nick Babich says, “content is the reason why people visit websites. We all know how important it is to produce content that users will find valuable, but what’s equally important is to make sure that the content is easy to find.” Entering a website with bad information architecture is like walking through a library with no organization system. It’ll require more time and effort to find the content you need and result in a much more frustrating experience. As the web’s content continues to grow, information architecture is necessary to help make sense of it all.

Content is the reason why people visit websites. We all know how important it is to produce content that users will find valuable, but what’s equally important is to make sure that the content is easy to find.
Nick Babich on Adobe

Information Architecture seeks to make each website (and therefore the entire web) more logistical, usable, and delightful through the art and science of structuring content.

What Information Architect Determines

From research and analysis to content inventories, card sorting, and user testing, many IA practices coincide or overlap with the UX process—which is why every UX designer must understand the philosophy and practice behind IA. As described in an article by UX Booth, “The information architect is the key person responsible for determining how information across a website or application is displayed and accessed.”

A positive user experience cannot exist without including a logical and usable information architecture. Here are a few things IA determines:

1. Categories (How Stuff is Grouped)

These are the categories we choose to group information by. For example, your record collection could be grouped by band name, record label, release date, or music genre.

2. Taxonomies and Metadata (What Stuff is Called)

Taxonomy is the name you give to your groupings. According to simplea.com, taxonomy “allows users to navigate through content in a way that fits their needs and interests.”

Metadata is the descriptive secondary tags given to content that help make it more findable based on how users might be searching for something.

3. Navigation and Content Hierarchy (Where Stuff Lives)

“Navigation systems are the way we move from one piece of information to another when that information is presented to us.”

Like an outline for a paper, hierarchy determines what order information is presented to the users based on priority.

Delivering IA in the form of a Sitemap

Sitemaps are a method designers use to communicate IA. Babich defines visual sitemaps as “a hierarchical diagram that shows the information architecture of a website. It gives you a visual representation of the site’s organization and how different sections are linked together.” Visual sitemaps clarify the relationship between information across pages of an entire site.

A sitemap is a hierarchical diagram that shows the information architecture of a website. It gives you a visual representation of the site’s organization and how different sections are linked together.
Nick Babich on Adobe

Breaking Down the IA of a City Municipal Website

Municipal city websites are notorious for their confusing navigation, so I decided to dissect the Information Architecture of one and evaluate it using a sitemap. Since I am currently living in Shanghai, I chose to focus on theirs.

Homepage for the Shanghai Municipal Website

Below is the sitemap I created based on the website’s current state.

As I worked through building the sitemap, I was reminded of one of Dan Brown’s 8 Principles of Information Architecture, The Principle of Front Doors. Like most websites, the Shanghai homepage presents critical information to its users, including links to immigration policies and city news and events. However, most of the content featured prominently on the homepage cannot be retrieved from any other location on the website. And if it is, it must be deeply buried. Dan Brown’s Principle of Front Doors states, “Assume at least half of the website’s visitors will come through some page other than the home page.” Because this content is only accessible from the homepage’s body, I essentially needed to create a separate sitemap for it.

I also gained other valuable insights from this exercise, including the need for clear labeling and reducing the number of clicks. While working through the sitemap, I also noticed that the website provided content to three distinct audience groups with very different needs: prospective residents, current residents, and businesses. I used this insight to re-imagine how the website could be structured to provide meaningful, easy-to-find content for each group. There was also valuable information nested within pdf documents that would be more available for users on the site, like Shanghai’s history and plans for the future. Below is my proposed site map, considering the factors above.

It might be easier to zoom in to the details of the sitemap through the pdf below.

movalle_IA_shanghai Download

This exploration into the information architecture of Shanghai’s municipal city kicks-off the beginning of a larger project. Next time, I’ll introduce an app concept for making Shanghai more accessible and relevant to one of its primary audiences.