The Purple Agency: UX, UI, IA and Usability

Getting the website information architecture right: how to structure your site for optimal user experiences.

Time to read: 10 minutes and 30 seconds

The terms UX (user experience), UI (user interaction), IA (information architecture) and usability are all the rage at the moment, but they all pretty much mean the same thing – how people interact with your site.

What kind of content should you have on your site? How should you structure the menu? What should be the first-level menu items? One or two menus? What should the menu links be called?

Here at Purple we use the term Information Architecture and use it to plan and build our sites, so that you, the end user, get the information you need in a considered and simple way.

Information architecture is not a 'nice-to-have', yet the overwhelming majority of businesses have structured their site using the IMO method (in my opinion). While common sense, and personal opinion, is a useful tool, and a lot of sites are very simple, there’s a smarter way to go about it.

If you already have many pages on your site, you should consider an information architecture analysis. Guiding people through the vast amount of page information is something that requires thought and research. Intuitive navigation doesn't happen with blind luck!

What is information architecture (IA)?

As Wikipedia iterates, it’s “the art and science of organizing and labelling data including: websites, intranets, online communities, software, books and other mediums of information, to support usability”. In this article we’re only talking about it in the context of websites.

Louis Rosenfeld and Peter Morville (IA wizards, check out their book) defined three circles of information architecture - content, users and context of use:

It’s about organising the content and flow of a website based on research and planning. The end goal of information architecture is to come up with a structure / design that balances the users’ desires with the client's needs.

Users have four fundamental questions when they arrive at a website:

Am I in the right place?
Do they have what I want?
Do they have anything better?
What do I do now?

One of the key tasks of IA is to make sure you do a good job at answering these questions – on every page of your site.

This means that you have to:

Assure visitors they’re in the right place (always make it clear where they are).
Make it easy for visitors to find what they’re looking for (clear navigation, search etc).
Make sure visitors know what their options are (links like “See also”, “Related products”).
Let them take various kinds of action (clear CTAs).
What’s the end deliverable?

The final goal is essentially to come up the architecture of the site. The end deliverable might be things like site maps, site-flow diagrams, and wireframes to convey how the site will work from a practical perspective.

It should determine the big picture – organising the content on the site to support the tasks that users want to perform. Information architecture should also include little things like deciding that products on a search page should be ordered by price rather than by name.

And all of it should be based on actual research and data and not the 'in my opinion' approach.

There are multiple ways to approach getting the website information architecture right. Here’s the method that we use here at Purple.

Five steps to putting IA together

You achieve your business goals when you help people achieve their goals. You can only do that when you fully understand your user’s goals, problems, and aspirations.

1: Gather data about the users

It’s critical that we get inside the user’s head. Before you embark on working on the information architecture, you need to know answers to these questions:

What problem are we solving?
Who needs it?
What’s this site for?

The earlier the purpose and goals are clearly defined the more easily problems are identified and solved, the easier it is to stay focused, and the better the end result.

The end goal here is to really understand what your users want and why they want it.

2: Create customer personas and write user stories

Your website should be designed for somebody, not everybody. This is where personas come in.

Personas are fact-based (derived from user research) fictional representations of your users. Personas represent the goals, motivations, characteristics and behaviours of the most important groups of your users.

Here’s a sample persona we used for one of our clients. Adding a photo to our personas helped us imagine a real person we’re building the site for:

@ Purple Agency

The next step is connecting user cases with personas. User cases provide a simple means to decide and describe the purpose of a project. User cases have 2 components: actors and goals.

Actors are people using the website. You only want to focus on the most prominent groups – the user personas. Goals are what one, some, or all of your defined personas want to achieve.

Goals might be things like visit a certain page, book an appointment, download software, take a test and so on. User cases define goals and purpose: the problems we are trying to solve.

When you approach your website organisation thinking about personas and what they wish to achieve, you will work with greater confidence and clarity.

3: Scenarios and pages.

Once you have an understanding of the users – their intent, the why behind it and how they’d like to achieve their goal – you can begin to figure out how to present your content in a way that will make sense to your users.

There are several good methods to do this, but here’s one that we like to use.

Create user scenarios

To design the most pleasing experience for your users, start thinking about scenarios featuring user personas. A scenario is a story about someone (your user persona) using your website to carry out a specific task or goal: like booking a flight, buying yoga pants or applying to speak at an event. Scenarios work together with personas by serving as the stories behind why the particular persona would come to your website.

What does the persona hope to accomplish on your website? What can help him complete the task at hand? What might cause friction? You should focus on users and their tasks rather than on your site’s organisation and internal structure. As a result, you will get insights to what content the site must have and how it should be organised.

Map user tasks to individual web pages

Before you even start thinking about actual design, you need to have the content in place.

The infamous tweet by Jefferey Zeldman which kick started a lot of what we now call UI, IA and UX

Next step is to decide what happens on your web pages and how many pages exist on your site. You must balance helping the users accomplish their current task while making certain the tools for what they need to do next are also available.

Each page must do two things:

help the user accomplish one specific task,
make the next step easy to access.

When you’re designing the site, making sure the user accomplishes each task is vitally important. However, achieving their objection usually consists of a series of small tasks, and it’s the relationship between tasks that creates the entire experience. Each page on your site needs to help build this chain of tasks.

There are three types of pages on your site:

Navigation pages. These help users determine where to find what they want, and give them access to it. Their goal is to send users somewhere else. Typically that’s a home page or search results page.
Consumption pages. These are the “somewhere else” you usually go to: articles, videos, pricing information and so on.
Interaction pages. These pages let users enter and manipulate data. Think search page or a sign-up form.

Each type of page is optimised for a different kind of user task. Understanding the type of page you need helps you tailor the interface design.

Offer the right help at the right moment in the most unobtrusive way possible.

4: Create user journeys

Now that you've figured out the kinds of pages you need on your site, map out the primary user journeys.

@ Purple Agency

When designing flows, it’s also important to know the four modes of searching information.

There’s an excellent article by Donna Spencer on this very topic.

According to her, the four types are:

Known-item search. Often, when people know exactly what they are looking for and what it’s called, they’ll mostly use search. But some prefer navigation, so it has to work with search to get people where they know they want to go.
Exploratory seeking. This happens when users may have a need, but aren't certain what will fulfil it. They might be looking for a re-marketing solution or a new laptop. People will recognise an answer to their question, but won’t know if they've actually found the right answer (doesn't know if there’s a more suited option out there).
Don’t know what I need to know. Sometimes people don’t know what they need to know. Somebody looking to buy gemstone jewellery will realise that she has to figure out precious metals, treatments, gemstone clarity, hardness and many other things. They’re looking for one thing, but discover they really need to know about something else.
Re-finding. People may want to go back to things they discovered in the past. If they saw something they liked on your site during their previous visit, make it easy to find it again (change the colour of visited links, use permanent shopping carts etc).

Each information-seeking behaviour relies on specific navigational tools to succeed.

5: Create sitemaps, wireframes – and gather feedback

You can use sketches, diagrams, site maps or wireframes to communicate your findings and proposals for going forward.

Gather feedback, iterate, and move on to planning your site structure.

Techniques for figuring out the optimal menu structure

Intuitive navigation doesn't happen by chance. Here are research and testing techniques UX professionals use to determine the best information architecture, workflows, menu structure or website navigation paths.

Card sorting

You have a bunch of pages on your website that need to be categorised. What should go where? Card sorting lets you figure out where people would want to find something. It’s an awesome (and reliable!) method for finding patterns in how users would expect to find content or functionality. It works the best if the subject matter is something people understand.

Below is a snapshot we took at one of our clients card sorting exercises.

Biscuits were used as a reward :)

@ Purple Agency

Here’s how the basic method works:

You take a set of blank cards and write a term (e.g. name of the page, content) on each one of them. Each card represents a (category) page on your website.
Test subjects are given a set of index cards with terms already written on them.
You ask them to put the terms into logical groupings, and find a category name for each grouping.
This process is repeated with each test subject or group.
After going through the exercise with all the test participants, you analyse their output and start seeing patterns.

This video on Youtube sums up card sorting perfectly:

There are 3 main types of card sorting:

Open card sorting. This is where the test participants create their own names for the categories. It gives you insight to how your customers think and mentally classify items.
Closed card sorting. Here participants are provided with a predetermined set of category names. Their goal is to assign the index cards to these fixed categories.
Modified Delphi method. This is different from the rest. Here participants work one after another, refining a single model.

Analysing card-sort results

Do I just use the results as my site structure? Not quite. You should use card sorting results mainly as a guide to organisation and labelling. Don’t just blindly take the results and use them as your actual site structure. Your card sort results can (and should be) supplemented with additional user research and task analysis.

Global and local navigation

Almost all websites with more than 1 page have some sort of global navigation. Then there’s also local navigation (sub-menu).

Local navigation should appear below the global navigation. This is logical as conceptually global menu is the main category and local navigation is like the sub-categories below it. Local navigation links should be closest to where the user needs them. Content is #1, but once the user is done reading the content, they're going to reach for the local navigation before looking at the global navigation.

Similarly, if the page does not have the content they're looking for, the local navigation is the navigation he looks for first.

How many levels of navigation do you create?

As many as you need – without driving users crazy. Most websites only have enough content for two levels of navigation—the global navigation and one level of local navigation.

Tools we use

Balsamiq Mockups. A great, fast wireframing tool. There’s almost zero learning to get going.

Axure. The tool of choice for complex sites. Diagrams, process charts, quick page layouts, website mock-ups, and more.

Conclusion

People can only interact with what they can find.

Information architecture works hand in hand with usability and conversions. If your information architecture is great, but your usability sucks, your visitors will be able to find what they are looking for, but will struggle to complete page objectives (like buying something) – resulting in poor conversions. However, if your website information architecture is bad (even if your usability is good), most of your website visitors won’t even be able to find what they are looking for, and thus will leave your site even before completing any of the page requirements.

Getting the information architecture of your site right will ensure a great user experience, which in turn leads to higher retention rates, improved conversions and happy people.

This post is a rehash and rewrite of material I've saved, stored, flagged, printed out, filed and bookmarked over the years. It only scratches the surface of website interaction. I'll be covering more topics in later posts :)

UX, UI, IA and Usability – What Does It All Mean?

Getting the website information architecture right: how to structure your site for optimal user experiences.

Users have four fundamental questions when they arrive at a website:

This means that you have to:

Create user scenarios

Map user tasks to individual web pages

Each page must do two things:

Techniques for figuring out the optimal menu structure

Analysing card-sort results

Global and local navigation

How many levels of navigation do you create?

Tools we use

Conclusion

Further reading