IA or the highway

What is IA?

Information Architecture (IA)–one of those big jargony words that is used to scare off people that don’t have “UX” in their job title. IA is simply how we structure our content to improve usability across a site or application. Visually, IA can be seen as the navigation and page hierarchy of a website. When it’s properly implemented, you wouldn’t ever notice it–seamless and natural. However, when it’s not properly considered… Well, allow me to illustrate with a real world IA example.

Imagine yourself in an airport waiting for your flight. All of a sudden, nature calls and there’s an immediate urge to use the “facilities”! You look around, but can’t see a single toilet sign. After walking around for several minutes, frustrated and stressed, you finally give up and ask an airport staff member who takes you through a series of doors to an obscure part of the airport, ending your ordeal.

The truth is that example almost never happens in real life. It would be an EPIC fail! So why would we allow it to happen on our sites? Looking for information on a site is very much the same as finding your way around an airport. Like the wayfinding system of signs in an airport terminal, site IA should orientate visitors, helping them understand where they are and guiding where they want to go.

The big scary question: How?

An airport serves thousands of people every day–all going through the airport at different rates, with needs and expectations at different times. Checking in, waiting in transit, eating lunch etc. There’s no fixed order in which tasks are carried out. Furthermore, what works on one site may not directly translate on to another.

So how do we serve the right information in the right time to guide all our visitors through? What information should you present first? There are a number of elements to consider. Here are a few:

Importance vs. Urgency
Information that guides travellers on to the plane maybe more important, but in terms of urgency, it may be surpassed by the desire to head to a toilet to relieve oneself or the need to grab some food before the flight.

Option vs. Direction
Do visitors want to see a range of options or is it best to serve a limited amount of information to direct them quickly onto the next step? Provide too much information at once and risk overwhelming and disorientating the visitor. However, if information is too limited, visitors might assume it doesn’t exist and go elsewhere.

Consistency vs. Emphasis
Information delivered in consistent patterns helps visitors understand what to do. When they arrive at a new page, they can rely on navigation patterns learnt from other areas. e.g. airport gate numbers all positioned at same heights, with same font, colour and size. However, a gate sign may light up to create emphasis, indicating to passengers that they may start boarding their plane.

All these variables can cause a bit of a disturbance in the force. Like an airport staff member, we know the place inside out, thus aren’t able to accurately depict what order information should be served in first based on our own experiences, no matter how awesome we are.

The “simple” answer: TESTING!

Fortunately the answer is simple and cheap as chips, compared to the consequences of not doing it. It’s far too easy to skip the testing phase. Too easy to turn a blind eye, buckle under tight deadlines and business pressures. Yes, under certain circumstances, it's necessary. However, it should never be a comfortable decision to drop testing.

The larger unknowns within a project, the more important testing becomes. Hence, as a rule of thumb, the amount of testing should correspond to the size and importance of a project. Improving the experience of the site doesn’t solely belong to the “UX” guy/girl, we all have a part!

Test before development. Just start and confirm your hypothesis. A great way to start off is by doing card sorts. Get your visitors to help you map out where the information goes. This can be done:

• in person, if time and location permits, so you can prod with questions
• Using third party tools such as Treejack can also be great alternatives, if your users are too “busy” or far away to do it in person.

Keep testing during and post development. Create a feedback loop–not just to make sure your concepts are working, but because people change.

• User test: Observing how visitors navigate your site can help give tremendous insight into how your IA is performing.
• Analytical tools: Google Analytics and CrazyEgg are valuable if you can’t user test in person. They are a great way to "stalk" your visitors, without being called a creep and getting arrested.
• Passive feedback tools: we use a feedback tool on our sites call Usabilla. These are generally quite easy to install and also help generate feedback, especially if don’t have a lot of time. The important thing is deciding on actions based on this feedback!

Case Study: Improving our own navigation

Only recently, we were given the opportunity to work on the redesigning the navigation across the SilverStripe sites - Community Site, Company Site and SilverStripe Platform page. As a result of our initial work to lower the number Silverstripe sites from 7 to 3, in an effort improve overall quality and efficiency, a number of issues arose within our user testing:

1. Pages were too deep and hard to find
2. Navigation inconsistencies meant user got lost in some areas
3. Loss of orientation when jumping between different sites

The IA clearly needed a rework and so we fired up the card-sort machine, enlisting a sample group of 10 in-house hopefuls who weren’t regularly exposed to the SilverStripe sites. The party mix of testers consisted of frontend and backend developers, designers, solutions and marketing teams, juniors, seniors (and anyone who believed our “Free chocolate for card-sort” poster).

The results of the card-sort exercise produced evidence that allowed us to confirm certain hypothesis and eliminate others. This effectively gave us clear direction on wireframing the new navigation that no one could argue. It also gave us a good indication of what wording we could use.

The MegaNav
We ended with a concept that focused on two major changes–an easily accessible new “meganav” panel and a streamlined navigation bar that work together to help solve the problem. These included:

Consistent navigation experience was across all pages, which meant that the navigation only needed to be learnt once.

Reducing the visible levels of content from 3, which overwhelmed many visitors, to 2 levels.

Visual cues (link hovers, active states) helped bring emphasis to the users' orientation of where they are and where they could go.

Multi-levels accessibility across all stages of the site (at least one main level and a secondary level), which increases accessibility for visitors who want get to deeper page quickly, without distracting new visitors away from introductory information located on main pages.

Active navigation meant that as visitors scroll down to view page content, only one level (of the two) remains visible. This keeps context, while allowing visitors to direct their attention to page content. However, as a user decides to move on to another page, the second level becomes available on hover of the navbar.

With these changes implemented, and team getting directed onto other urgent projects, we quickly showed our new navigation and IA to our original user testers who identified the issues, to make sure the changes were working. Additionally, we kept an eye on the Google Analytics.

"Looks massively better! Well done. Easy to move seamlessly, I didn’t even know I was in two sites."

– Stephen Corbett, Marketing Manager of Spotlight Reporting

Final word

We’ve covered a bit more that just IA here. However, hopefully it has outlined the importance of testing our information architecture throughout a project.