Information Architecture and Navigation

Introduction

A product can have excellent content and still frustrate people if they cannot find it. Information architecture (IA) is how content is organised, grouped and labelled so people can find what they need. Navigation is the way they move through it.

The simple explanation

IA decides where things live. Navigation shows people the way.

Start with the content and the users

1. List the content and features you have. A content inventory is a simple spreadsheet.
2. Understand tasks: what are users trying to find or do?
3. Remove what is outdated, duplicated or never needed.
4. Group related items, then give each group a clear name.

Card sorting

Card sorting shows how users group things.

• Write each content item on a card.
• Ask participants to sort the cards into groups that make sense to them, and name the groups.
• Open sort: people create their own groups and names. Good for discovering structure.
• Closed sort: people sort into groups you provide. Good for checking an existing structure.
• Use 15 to 30 cards, and several participants. Look for patterns in the groups and the words people use.

You can do it with paper cards, or with online tools.

Labels matter

• Use words your users use, not internal jargon. If customers say "prices", do not call it "Commercial terms".
• Be specific: "Contact us" is clearer than "Get in touch", and "Delivery and returns" clearer than "Information".
• Keep labels short and consistent in style.
• Avoid overlapping categories that make people guess where something is.
• Test labels by asking: "Where would you click to find...?"

Depth and breadth

A site can have many top-level choices (broad) or many layers (deep). Too many items in a menu overwhelms, and too many layers hides things. Aim for clear groups with a manageable number of choices, and make sure each click gets people closer to their goal, with clear signals of where they are.

Navigation patterns

• Top navigation bar: a few main sections, always visible. Common on websites.
• Hamburger or drawer menu: hides navigation behind an icon. Saves space, but hidden options are used less. Use it sparingly on desktop.
• Bottom tab bar: three to five main destinations on mobile apps, easy to reach with a thumb.
• Sidebar: for apps with many sections.
• Breadcrumbs: show the path (Home > Recipes > Soups) and help users go back up.
• Search: essential for large sites, so make it easy to find and good at forgiving typos.
• Footer links: for secondary information such as contact and policies.
• Related links within content help people continue.

Show the current location, such as a highlighted menu item, and keep navigation consistent across pages.

Findability and search

People use navigation or search. Support both:

• Search results should be relevant, and handle misspellings and synonyms.
• Show helpful "no results" pages with suggestions.
• Clear page titles help people (and search engines) understand content.

Test it

Before building, test your structure:

• Tree testing: give people a text-only version of your hierarchy and ask them to find items. See where they go wrong.
• First-click tests: ask where they would click first to do a task. The first click predicts success.
• Usability tests on prototypes.

Measure success rate and time, and fix confusing labels or groups.

Accessibility of navigation

Make sure navigation works with a keyboard, has visible focus, uses real links and buttons, and has a skip link that lets keyboard users jump to the main content.

Try it yourself

Take a site with a messy menu. List 20 of its pages, run a card sort with three people, compare their groups with the site's actual menu, and propose a better structure with labels in their words.

Summary

• Information architecture organises and labels content, and navigation helps people move through it.
• Card sorting reveals how users group things, and labels should use their words.
• Choose navigation patterns to suit your product, show where people are and test structure with tree tests and first clicks.