The Benefit's of an Information Architecture

IA-blog-header.jpg

When designing a building, one of the first steps a building architect takes is to map out a full blueprint. This gives their design a basis, as well as a way to see what works and doesn’t work without having to make the full building. When designing a site or an app, the information architecture takes up the same task.

First created by Architect, Designer, and TED Conference founder Richard Saul Wurman in the late 1970’s, information architecture’s have become commonplace for the organization of content in web and mobile sites and applications.

First created by Architect, Designer, and TED Conference founder Richard Saul Wurman in the late 1970’s, information architecture’s have become commonplace for the organization of content in web and mobile sites and applications.

Despite their history, some may question the use of the architecture, as it can be very time consuming to create and at first glance, doesn’t seem to provide enough worthwhile info to justify the amount of effort it takes. While this is true in some regards, there’s certain aspects to an information architecture that help show it’s usage cases. As Anastasia Stefanuk of UX Matters describes, there’s principles of an information architecture that a designer must stick too

Certain principles of information architecture guide the work of most information architects and UX designers—sometimes even without their realizing it. Once an information architect or designer learns to use these principles, it becomes easy to solve the most complex IA problems and create user-friendly Websites

She lists quite a few, but there’s a couple in particular that I find the most important

The Principle of Selection

Users like choice, but only so much. When navigating a new site, it’s easy for a user to get overwhelmed quickly and having too many choices is one of the easiest ways to do it. While it may seem nice to have many options, it will often result in users feeling lost, not knowing where in the website they actually are. For example, if every drop down menu on Bestbuy.com showed an option saying “Deal of the Day”, users would become confused as to what that option does.

“Is it a general deal of the day, or does it depend on the category I click it on?” Having a question like this be frequent throughout their site would severely hamper best buy's user experience

“Is it a general deal of the day, or does it depend on the category I click it on?” Having a question like this be frequent throughout their site would severely hamper best buy's user experience

The Principle of Focused Navigation

A proper navigation can adapt depending on the scenario. This doesn’t mean to arbitrarily change the navigation, but to make sure it can properly adjust to the user and the experience they’re undergoing. A good example is the site for the game Super Smash Bros.

When you first open the site, you immediately see a navigation bar with some core features on it. When you click, let’s say fighter’s, you’re then brought to a screen showing all the fighters in a grid. As you most likely clicked this tab to view the fighters, the site transferred the original navigation into a smaller hamburger menu. This allows a user’s full focus to be on the site’s content, while still having a quick way to navigate through other parts of the site

The site in general does a very good job at being very responsive and adjusting to the user’s needs

The site in general does a very good job at being very responsive and adjusting to the user’s needs

Remaking a site’s architecture

Similar to my other research, I’ve chosen to try out making a site architecture myself. I’ve done them before for some of my web projects, though they’ve always been quite small. To better challenge myself, as well as see the strength of an information architecture, I choose to analyze a town website, create an information architecture for their current structure, then create a new one with my own redesign architecture

The original

I choose the town of Doylestown for this assignment, as I’m familiar with the town itself. To start off, I started to browse the website to get an idea of its structure. What stuck out to me right away was how cluttered much of the navigation is. Each tab has 10+ sub navigations, with many of them being shared like parking and tax information. Tabs like Resident and Business Services also have a completely different design, despite being no different than the other tabs, as well as containing some of the same information.

When creating the architecture myself, I focused on the main and sub navigation, as it helped me see what exactly is under each navigation tab as well as what gets shared between them most frequently. It wasn’t really feasible to go a third layer deep in the navigation, though I laid out the most content filled ones to better understand how the site functioned the deeper you got into it.

The site overall wasn’t terrible, but the overly crowded navigation makes it difficult to both navigate and discern where in the site you are

The site overall wasn’t terrible, but the overly crowded navigation makes it difficult to both navigate and discern where in the site you are

My Architecture

My main goal in my personal architecture was to centralize the navigation greatly. To start, I combined the two navigation on header into one full navigation bar. To do this, I ended up combining both of the service tabs, as well as cutting the news tab since it had no sub menu options. This still causes there to be a lot of sub navigation options, but due to the greater consistency and lack of repeat options, I feel it will be simpler to surf through. I also went a third layer deep on the government tab, to help show that there’s consistency in the site on each layer.

Compared to the original, I trimmed a good amount of the sub navigation options

Compared to the original, I trimmed a good amount of the sub navigation options

Previous
Previous

Mobilizing Your Information Architecture

Next
Next

The Elements of User Experience: Introduction