General User Experience

Structure Your Site: Techniques for Information Architecture

Information architecture? Isn’t architecture about buildings? Why would information have to be…built?

“Information architecture,” (or IA for short) refers to the structuring and organizing of information in a system so that its users may find what they need. This is especially important when it comes to websites; users must be able to quickly understand the navigation structure of a site in order find the information they seek.

If you are getting reports that multiple users cannot locate specific resources on your site, you may want to re-examine the navigation structure and information architecture of it. Maybe its organization is confusing for them.

Creating an Information Architecture for a Site

How would you go about creating the IA in the first place? There are a variety of options, and which ones you will depend on the size of your site, whether or not the site is new, how much content you have, time constraints and other factors. IA as a field is intricate; entire books and plenty of articles have been written on the subject. Today we’ll give a brief overview of a few options for taking stock of what content you have and planning out what your site’s navigation ought to look like.

Small and Simple New Site? A small chart may be enough.

This is a quick example I sketched up on one of WebDotUNC’s whiteboards (whiteboards are awesome, especially for wrapping your head around

IA diagram on a whiteboard.

A simple IA diagram, showing hierarchical structure of a hypothetical student organization site.

content). Essentially, you try to chart out the hierarchical structure of a site. In this example, I imagined how a student organization might want to structure a site. The home page would be a the top level; secondary pages – such as an About, Roster, Outreach and Alumni page – would serve as either standalone pages or introductory section pages for pages that would subsequently be categorized beneath them (5K’s and Volunteer, for instance, could be found under the Outreach “overview page”).

If you need more official or polished documentation of what a structure for your site might look like, you can also use programs such as Microsoft Visio, Adobe Illustrator, or even Microsoft PowerPoint to generate charts.

Your site does not have to be brand-new for you to consider sketching out a chart – charts can help you visualize current sites as well, and force you to think about where different pages and content make the most sense.

IA documentation

IA chart documentation for an intranet, made in Adobe Illustrator.

Got your site already? Consider a Content Inventory

Content inventories can be daunting initially, depending on how much content you have. What do you do to perform a content inventory? Essentially, you’ll want to go through each page of the site and document its  title and URL, trying to adhere to the current structure of the site. Spreadsheets (made using

Google Docs’ Spreadsheets or Excel) work well for this. For example, below is a screenshot of the content inventory performed on ITS in January 2014, prior to its re-design. You can see that it included a lot of metadata (data about the files) that was not necessarily crucial.

Content inventory of ITS website

A portion of the content inventory done for the ITS website, prior to its redesign.

Essentially, a content inventory allows you to take stock of what you have on a site and from there, interpret what it may be missing, what you may want to get rid of, and what you may want to re-structure.

Card sorting

The last option we’ll talk about will be card sorting.  Card sorting is especially good for understanding what sort of navigation your users might expect to have on your site.

In card sorting, you’ll be sitting down with a person and asking them to sort items (in this case, probably the titles of all pages of your site) into groups or categories that they think make sense to them. After they have finished sorting the items, you will ask them to give each group a category title. Index cards,

Cardsort

A rough cardsort done with a list printed from a word document.

sticky notes, and even pieces of paper cutouts with the titles printed on them can work well for card sorting. It’s probably a good idea to have your  cardsorting subject come from a group of potential users for your site in order to have more relevant feedback.

More Resources for Information Architecture

If information architecture seems like a pretty cool topic to you, you might be interested in reading about it from some other sources. Smashing Magazine, A List Apart and Boxes and Arrows are solid resources for finding more to read. Information architecture is a vast field, but definitely worth learning about.