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? This post will give you the answers.
Information architecture is no joke, yet the overwhelming majority of businesses have structured their site using the IMO method – “in my opinion”. While common sense is a useful tool and a lot of sites are very simple (e.g. 5 pages total), there’s a better way to go about it.
If you already have tens of pages on your site, you should do proper information architecture analysis. Guiding people through the vast amount of information on offer is something that requires thought and research. Intuitive navigation doesn’t happen by chance.
Peep Laja and Brian Massey discuss optimizing your websites main navigation.
What is information architecture?
As per Wikipedia, it’s “the art and science of organizing and labeling data including websites, intranets, online communities, software, books and other mediums of information, to support usability”. We could simplify it to “the art and science of organizing websites” (we’re only talking about it in the context of websites in this article).
Louis Rosenfeld and Peter Morville (information architecture gurus, you should read their book) defined the ‘three circles of information architecture’ as content, users and context of use:
It’s about organizing the content and flow of a website based on research and planning. The end goal of information architects is to come up with a structure/design that balances the users’ desires with the business’s needs.
Users have four fundamental questions when they arrive at a website: Am I in the right place? Do they have what I am looking for? Do they have anything better (if this isn’t what I want)? What do I do now? One of your key tasks 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 visitor’s 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 sitemaps, site-flow diagrams, and wireframes to convey how the site will work from a practical perspective.
It should determine the big picture – organizing 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. Not much room for opinions here.
There are multiple ways to approach getting the website information architecture right. Here’s the method that has worked for me over the years.
Five steps to putting information architecture 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.
Step #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 (and written down!), the more easily problems are identified and solved, the easier it is to stay focused, and the better the end result.
Talk to your users. In person interviews and phone calls are best, but online surveys are also great. Here’s a post I wrote about conducting user research.
The end goal here is to really understand what your users want and why they want it. There will be probably different intents and use cases, and that’s to be expected.
Step #2: Create customer personas and write user stories
Your website should be designed for somebody, not everybody. This is where customer personas come in.
Personas are fact-based (derived from user research) fictional representations of your users. They represent the goals, motivations, characteristics, and behaviors of the most important groups of your users.
Here’s a sample persona (attaching a photo to a persona helps us imagine a real person we’re building the site for):
Next step is connecting use cases with personas. Use cases provide a simple means to decide and describe the purpose of a project. Use 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 the personas want to achieve. Every use case must have a specific goal and the actors that will perform tasks to achieve that goal.
Goals might be things like reading a blog post, check account balance, book an appointment, download software, take a test and so on. Use cases define goals and purpose: the problems we are trying to solve. (this is the first step to improving customer lifetime value too)
When you approach your website organization thinking about personas and what they wish to achieve, you will work with greater confidence, clarity.
Step #3: Metadata, scenarios, 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 I like to use:
Figure out the metadata
Metadata is information about information. It’s what helps users find the content they’re looking for. Let’s say you want to buy a coffee grinder, and go to a website that you know that sells those. If you browse around and can’t find it, it’s a sign of bad metadata. If you get your metadata right, you’ve already cleared the first hurdle of effective site design.
You have to determine what kind of information to store about stuff that people care about – life coffee grinders. Maybe they’d like to search by blade size? Color? Brand? Knowing what are all the different parameters and variables you need to store in your system is crucial for excellent search results.
The metadata for a book could be a title, description, author, release date, ISBN, comments, cover image. Plan for it!
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 organization and internal structure. As a result, you will get insights into what content the site must have and how it should be organized.
Map user tasks to individual web pages
Before you even start thinking about actual design, you need to have the content in place.
Content precedes design. Design in the absence of content is not design, it’s decoration.
— Jeffrey Zeldman (@zeldman) May 5, 2008
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 create 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 optimized for a different kind of user task. Understanding the type of page you need helps you tailor the interface design. When you draw a sitemap or map out your user flows, it’s important to note there whether a page is a navigation page, consumption page or interaction page – and design accordingly.
Offer the right help at the right moment in the most unobtrusive way possible.
Some web pages are easy to use, some might require some learning. Plan for help texts and microcopy to make sure users can complete tasks without confusion.
Information should be offered in context. Users should get answers to any booking related questions on the page where they would book stuff. Testimonials and FAQs that are on separate pages are not an optimal solution and information is not offered when it’s needed.
On-page FAQs do have a place though – when they’re used to answer actual questions, and not as a sales tool (“Should I buy it?” -> “Of course you should!”). I really like how R. Stephen Gracey put it:” A good FAQ is like insurance for your users: There when they need it, but hopefully they never will.“
Here’s Groupon answering questions in context: the on-page FAQ on their checkout page:
Step #4: Create user flows
Now that you’ve figured out the kinds of pages you need on your site, map out the optimal user flows (I’ve written about creating user flows here).
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 a 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 fulfill it. They might be looking for a re-marketing solution or a new laptop. People will recognize an answer to their question, but don’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 jewelry will realize 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 color of visited links, use permanent shopping carts etc).
Each information-seeking behavior relies on specific navigational tools to succeed.
Step #5: Create sitemaps, wireframes – and gather feedback
You’re only 1 person, and you need fresh sets of eyes and brains to challenge your thinking. Maybe you missed something, maybe you misunderstood the importance of something. This is why you need to go through it all with your teammates (or other peers).
You can use sketches, diagrams, sitemaps 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.
You have a bunch of pages on your website that needs to be categorized. 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 (e.g. audio-video equipment or apparel).
Here’s how the basic method works:
- You take a set of index cards (e.g. those yellow post it notes) 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. If you’re an audio-video ecommerce site, you might write down things like ‘digital SLRs’, ‘Canon lenses’, ‘DVD players’ etc.
- Test subjects (people that you’ve recruited for this purpose, representatives of your ideal customer) are given a set of index cards with terms already written on them.
- You ask people to put the terms into logical groupings, and find a category name for each grouping.
- This process is repeated with each test subject.
- After going through the exercise with all the test participants, you analyze their output and start seeing patterns.
Here’s a great video explaining the concept in 3 minutes:
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 classifies 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. The first test subject does a traditional open card sort. The following testers start with whatever the previous tester created. A participant can choose either to modify that organization (rename or restructure stuff), or even scrap the whole thing and start over (create a new, different organization). You repeat the process until participants are no longer making any significant changes (the structure stabilizes). The possible threat here is that since anyone can start over, an outlier participant could compromise the whole study.
Modified-Delphi method in action (see the changed category name):
Tree testing (reverse card sorting)
Tree testing is where you create a menu structure (either yourself or based on other card sorting research outcomes), and you let people find items from the menu. The goal of tree testing is to prove that your site structure will work – before you get into actual user interface design.
It is done on a simplified text version of your site structure – without the influence of navigation aids and visual design.
In this example the user would navigate through the menu structure until they think they’ve reached the place where they’d expect protective cases to be:
Reverse card sorting is perfect for validating your menu structure assumptions (or getting necessary feedback for re-arranging it).
Online (remote) card sorting
You don’t have to conduct card sorting in person. Doing it online is cheaper, doesn’t require logistics planning and can be done without geographical limitations. You can’t be “there” and moderate it (although you could be having a Skype chat at the same time), so proper pre-education of test participants is a must. Some pros and cons of online card sorting are pointed out in this article.
The limitation of these online card sorting tools is that they can’t be used with the Modified-Delphi method.
Online tools you can check out for this:
These tools will also help you analyze the results (as opposed to doing it 100% manually).
Analyzing card-sort results
2 questions that often come up about results.
- #1: What if half the people want to find page X from category Y, but half the people from Z? The answer: it’s okay to have the same link under 2 different categories! If that helps people to find the content they want, that’s the way to go.
- #2: Do I just use the results as my site structure? Not quite. You should use card sorting results mainly as a guide to organization and labeling. 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.
As you design your navigation system, ask yourself, “What do the bulk of the visitors coming to my site want?” And ask yourself a follow-up question: “What do I want my visitors to be able to find easily?”
How many users to test with?
Tullis and Wood (authors of a prominent study, 2004) recommend testing twenty to thirty users for card sorting. However, based on his research Jakob Nielsen recommends to test only 15 users (and 30 users in big projects with lavish funding). Testing it with more people does give more insight, but there are diminishing returns and when testing past 15 users the costs are often not justified.
Further reading: Here’s a great guide to card sorting.
Guiding principles for navigation design
Card sorting technique will help you figure out how to structure you menus. What about navigation menu design?
In good navigation design, links look clickable.
They have clear labels that set expectations of what lies beneath. Unclear menu links cause click fear.
Take a look at the navigation menu I have up there. I’ve done a good amount of testing to find the
perfect good enough wording for those. (If some of those are not clear enough, do let me know).
Here’s another one:
The menu items do look like obvious buttons, but I would argue that “learn more” and “order now” are pretty poor choices here. It’s impossible to understand what will I learn more about and what am I ordering?
Provide consistent, reliable global navigation
Whatever links you have in your navigation menu and footer, have to be the same on every page of your site.
Wherever you go on Made.com, the top menu remains unchanged:
Where to put the menu?
Should the main menu be horizontal or vertical? While there’s a strong case against the left vertical menus, two studies (2003 and 2004) actually claim it’s better. I say you should opt for horizontal menu whenever possible, but go for the left vertical menu if you’ve got a ton of menu items (Amazon!). This eyetracking study says top menu is easier to use, but there’s only so much space there.
If you do use vertical menus, make sure they’re aligned left. Right-aligned menus impede scannability.
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 the 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, he’s going to reach for the local navigation before looking at the global navigation.
Similarly, if the page does not have the content he’s 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. Some websites with a lot of content – like Schwab – have 4 (sub-sub-sub-menus) or more levels of content:
They feel that each level of navigation helps users zero in on their goals.
Most websites only have enough content for two levels of navigation—the global navigation and one level of local navigation.
Tools to use
- Balsamiq Mockups. A great, fast wireframing tool. There’s almost 0 learning to get going, and I love the fact that it focuses on the big picture, and not the little design elements.
- Omnigraffle. The tool of choice for a lot of UX professionals. Diagrams, process charts, quick page-layouts, website mockups, and more. Mac-only.
- Microsoft Visio. Many people prefer it for diagramming and website planning.
- MindJet MindManager. Mindmapping tool that’s also great for diagramming and sitemaps.
- LovelyCharts. Diagramming application that allows you to create diagrams of all kinds, such as flowcharts, sitemaps, wireframes and more.
People can only buy what they can find. There are a number of studies that show websites are losing money because the navigation system has failed and user can’t find the product they are interested in. I’ve seen the claim “up to 50% of sales lost due to bad navigation” being thrown around, but I haven’t found the actual study confirming this. Nevertheless, good navigation is critical. Check out this Jakob Nielsen article on costly content organization and navigation mistakes.
Information architecture works hand in hand with usability and conversions. If your information architecture is good, but your usability sucks, your visitors will be able to find what they are looking for but will struggle to complete the purchase flow – resulting in poor conversions. However 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 entering the sales funnel.
Gettting the information architecture of your site right will ensure a great user experience, which in turn leads to higher retention rate and improved conversions.