--- title: "Navigation Nobody Gets Lost In: Information Architecture Step by Step" url: "https://insideuxdesign.com/en/blog/navigation-nobody-gets-lost-in-information-architecture-step-by-step" language: "en" description: "Learn how to build navigation people understand: collect your content, sort it with card sorting and check it with tree testing. Start step by step now." published: "2024-11-13T09:00:00+01:00" updated: "2026-10-15T00:35:36+02:00" --- # Navigation Nobody Gets Lost In: Information Architecture Step by Step How to build navigation where people find what they’re looking for: step by step with card sorting and tree testing, no prior knowledge needed. Picture this: a parent is standing in the kitchen one evening, phone in hand. Their daughter wants to learn the cello, and the local music school supposedly rents out instruments. They open the website and see five menu items: “Offerings”, “Service”, “About us”, “News” and “Contact”. “Offerings” lists courses. “Service” holds downloads, holiday dates and a form. The rental instruments eventually turn up as a PDF under “About us”, in a section called “Friends’ Association”. By then, the parent has guessed wrong three times and nearly given up. Nobody at the music school meant for this to happen. The friends’ association pays for the instruments, so that’s where the information ended up. From the school’s point of view, it makes sense. From the parent’s point of view, it’s a hiding place. That’s exactly what information architecture is about: organizing and naming content so people find it where they expect it. In this article, you’ll build the navigation for an example project like this one, step by step. You’ll learn two simple methods that take the guesswork out of it: card sorting, to find out how people group content, and tree testing, to check whether your structure actually works. No prior knowledge needed. ## What information architecture has to do with your navigation [Information architecture](https://insideuxdesign.com/en/glossar/information-architecture) (IA for short) describes how the content of a website or app is organized, grouped and labeled. It’s the invisible framework. Navigation is the visible part of it: the menu, the submenus, the footer links, the breadcrumb trail at the top of a page. A comparison helps: the IA is the floor plan of a supermarket, meaning which products sit in which aisle. The navigation is the signs above the aisles. If the floor plan is illogical, nice signs won’t help much. And if the floor plan is fine but the signs say “Range B”, nobody will find the pasta. Three terms come up again and again: - **Structure:** which content belongs together and what sits above or below what. How deep that structure should be is covered in [Flat vs. Deep Hierarchy](https://insideuxdesign.com/en/blog/flat-vs-deep-hierarchy-which-structure-is-best). - **Labels:** the words used to name sections and menu items. - **Navigation tree:** the structure written as a list of levels, with no visual design. That’s where the name tree testing comes from. If you’d like to dig into the basics and history of the discipline, read [An Introduction to Information Architecture](https://insideuxdesign.com/en/blog/introduction-to-information-architecture). From here on, this article is all about practice. ## Why navigation goes wrong so often Most confusing menus aren’t the result of carelessness. They happen because the team knows its own organization too well. Three patterns show up especially often. ### The inside view becomes the menu Many navigation menus mirror the org chart: departments, responsibilities, internal project names. In the music school example, instrument rental belongs to the friends’ association for organizational reasons. Parents couldn’t care less. They have a task (“I need a cello”) and look for a word that matches it. UX folks call this the [mental model](https://insideuxdesign.com/en/glossar/mental-model): the picture people have in their heads of how something works and where to find things. Good navigation matches the visitors’ mental model, not the team’s. ### Vague labels with no trail “Service”, “Solutions”, “Offerings”, “Good to know”: words like these sound tidy but say very little about what’s behind them. With every click, people decide which link is most likely to lead to their goal. They follow a kind of trail that UX calls [information scent](https://insideuxdesign.com/en/glossar/information-scent). A concrete label like “Rent an instrument” has a strong scent. A label like “Service” has almost none. ### The junk drawer Almost every website that has grown over time has one menu item where everything ends up that doesn’t fit anywhere else. It’s often called “Service”, “More” or “Miscellaneous”. Every new piece of content makes the drawer fuller and messier until nobody looks inside anymore. If you spot a section like this, it’s a clear signal: a structure that fits people’s tasks is missing. ## Step 1: Collect your content before you sort it Before you think about menu items, you need a list of all your content. It sounds obvious, but it’s often skipped. Without that list, you’re sorting assumptions instead of content. For a small website, a simple spreadsheet will do. Go through every page and note what’s on it. For the music school, the list might start like this: piano lessons, string lessons, early childhood music, band courses for teens, fees and discounts, registration, cancellation, holiday dates, teachers, instrument rental, concerts, friends’ association, room hire, job openings. Write down what a piece of content *is*, not where it currently lives. “Holiday dates” is content. “Service” is just a location. Also watch for things people ask about often that don’t have a page of their own yet. A quick look at emails to the front office or at the website’s search terms often shows what people are really looking for. For a smaller website, you’ll typically end up with 30 to 60 items. That’s a good size for the next step. ## Step 2: Use card sorting to learn how people think In [card sorting](https://insideuxdesign.com/en/glossar/card-sorting), you write each piece of content on a card, either on paper or digitally in a tool. Participants from your target audience then sort these cards into groups that make sense to them. There are two variants. In an **open card sort**, participants create their own groups and name them. That’s ideal when you don’t have a structure yet or want to question your current one from the ground up. In a **closed card sort**, you provide the groups and participants simply assign the cards. That works when you already have a structure and want to check whether content is in the right place. For the music school, you start with an open card sort. How many participants do you need? A frequently cited study by Tullis and Wood found that the groupings barely change once you reach around 20 to 30 participants. Fewer will do for a first impression, as long as you read the results with care. When you analyze the results, you’re interested in three things: - **Which cards almost always end up together?** If “Fees”, “Registration” and “Cancellation” sit in one group for most people, you have a clear candidate for a shared section. - **Which cards keep moving around?** If “Instrument rental” lands with courses one time, with costs the next and under “Miscellaneous” after that, it’s a sign that this content will need more than one way in. - **What do participants call their groups?** This is pure gold. If several people name a group “Lessons” and nobody calls it “Offerings”, you’ve found your label. Many online tools show these patterns as a matrix, so you can see at a glance how often two cards were grouped together. For a detailed guide on running one, see [Card Sorting Basics](https://insideuxdesign.com/en/blog/card-sorting-basics-information-architecture-for-beginners). ## Step 3: Build your first navigation tree The card sorting results now turn into your first draft. Write it as a simple indented list. No colors, no layout, just levels and words. For the music school, it might look like this: - **Lessons**: instruments and voice, early childhood music, bands and ensembles, teachers - **Sign up and costs**: fees and discounts, registration, cancellation, rent an instrument - **Dates**: concerts, holidays and days off - **About the school**: team, friends’ association, room hire, jobs - **Contact** A few rules of thumb help when you write your labels: **Name tasks and things, not departments.** “Rent an instrument” instead of “Friends’ association”. The association still gets its own page, just not as a hiding place for the rental service. **Use your audience’s words.** The group names from your card sort are the best source. If parents say “costs” and the team says “fee schedule”, “costs” wins. **Make labels distinct.** If two menu items sound alike, say “Offerings” and “Services”, people have to guess. Each item should clearly promise something different. **Leave out the junk drawer.** If a piece of content doesn’t fit anywhere, that’s a question for your structure, not an invitation to create “Miscellaneous”. A quick before-and-after shows the difference. Before: “Offerings”, “Service”, “About us”, “News”, “Contact”. After: “Lessons”, “Sign up and costs”, “Dates”, “About the school”, “Contact”. The new version isn’t more creative. It’s more concrete, and that’s exactly what makes it easier to use. ## Step 4: Check your tree with tree testing Your draft is now based on real data, but it’s still an assumption. Only a test will show whether people can find their way around it. That’s where [tree testing](https://insideuxdesign.com/en/glossar/tree-testing) comes in. The method is sometimes called “reverse card sorting”: instead of sorting cards, participants look for content within a finished structure. Here’s how it works: participants see your navigation tree as a plain text list. They get a task, such as “You want to know whether your daughter can borrow a cello. Where would you look?” Then they click through the levels until they reach the spot where they expect to find the answer. The trick is in what’s left out. There’s no design, no images, no search, no teasers on a home page. The test only checks whether structure and labels hold up on their own. That makes tree testing fast and cheap, because you don’t have to design or build anything. And you can use it very early, long before the first page exists. ### Writing good tasks A tree test is only as good as its tasks. Three rules help: **Don’t give away the answer.** If the task says “Find the fees” and the tree contains an item called “Fees”, you’re only testing whether people recognize words. Describe the situation instead: “You’re wondering whether you can afford lessons. Where would you find out what they cost?” **Use realistic scenarios.** Good tasks come from real needs: questions to the front office, search terms, conversations with your audience. An easy-to-understand task with a clear reason behind it tells you more than a contrived one. **Keep the number small.** With every task, participants get to know the tree a little better, which makes later results look better than they are. The European Commission’s web guide recommends no more than ten tasks, and the University of Glasgow’s UX framework suggests five to eight. So focus on the content you’re unsure about and on what matters most to most people. Also decide in advance which spot in the tree counts as correct for each task. Sometimes there are two, if a piece of content is deliberately linked from more than one place. ### Participants and tools Tree tests usually run online and unmoderated: participants get a link and work through the tasks on their own. The University of Glasgow estimates about 10 to 15 minutes per person and recommends 15 to 50 participants, with at least 10. The European Commission mentions up to 50 participants for unmoderated tests. More important than the exact number is that participants match your audience. Fifty students won’t help the music school much if the website is mostly used by parents. If you want to understand the why, you can also run a few moderated sessions and ask participants to think aloud. Then you don’t just see where they take a wrong turn, you hear why. There are dedicated tools for this, such as [Optimal Workshop](https://insideuxdesign.com/en/ressourcen/optimal-workshop) with its tree testing tool Treejack, or [Maze](https://insideuxdesign.com/en/ressourcen/maze). They handle the analysis and visualize the click paths for you. ## Reading the results without a statistics course After the test, you get a handful of metrics for each task. For starters, four of them are enough. **Success rate:** How many participants ended up in the right place? This is the most important number. A low success rate tells you that a piece of content is hard to find in your structure. **Directness:** How many got there without a detour, meaning without clicking back? A high success rate combined with low directness means people find it eventually, but only after searching and trying. That’s a warning sign, because on a real website many would give up first. **First click:** Where do participants click first? This number is surprisingly telling. Jeff Sauro of MeasuringU analyzed eight tree testing studies with more than 1,000 participants: when the first click was correct, the success rate was around 80 percent. When it was wrong, it was only around 14 percent. If people take a wrong turn at the top, they rarely find their way back. **Time:** How long did a task take? Long times point to hesitation, for example because two labels sound alike. Here’s what that might look like in practice: for the cello task, most participants correctly go to “Sign up and costs” and then to “Rent an instrument”. But some click “Lessons” first, because it’s about an instrument. The success rate is decent, the first click is split. That’s no reason to rebuild everything. It’s a hint that “Rent an instrument” should also be linked from “Lessons”. Also look at the actual click paths. If many people end up in the same wrong place, that’s not random noise. That place makes sense to them, and you should consider whether the content really belongs there. ## Step 5: Improve and test again A tree test rarely tells you “everything is wrong”. Usually there are three or four sticking points. Typical fixes are: - renaming a label that sets the wrong expectations - moving content that many participants looked for elsewhere - making content reachable from two places when expectations are split - merging two sections that look the same from the outside Then you test the revised version again, ideally with new participants. Since you don’t have to design anything, a second round is quick. Two or three short rounds often teach you more than a single big test. And once you have a clickable design, check it with a classic [usability test](https://insideuxdesign.com/en/glossar/usability-testing) as well, because then layout, copy and images come into play too. ## From tree to real navigation Your tested tree is the foundation. On the finished website, it spreads across several navigation elements that work together: **The main navigation** shows the top level, in the same place on every page. On smartphones, it often disappears behind a [hamburger menu](https://insideuxdesign.com/en/glossar/hamburger-menu). That saves space but makes the items less visible. For especially important tasks, it’s worth linking them directly from the home page as well. **Local navigation** shows the subpages within a section, for example as a sidebar list or below the heading. Anyone in “Lessons” immediately sees all the lesson options. **Breadcrumbs** show the path to the current page, such as “Home › Sign up and costs › Rent an instrument”. They’re especially helpful for people who land directly on a subpage from a search engine and need to get their bearings first. **Contextual links** connect content across the structure. A link on the cello lessons page saying “Don’t have an instrument yet? Here’s how rental works” is often where the parent from the opening example actually arrives. **Search** is a supplement, not a replacement. When navigation fails, search becomes a fallback, and it only finds what people can name correctly. ## Common beginner mistakes **Designing first, structuring second.** If you start with the layout, it’s easy to fall in love with a menu of exactly five pretty items and squeeze your content into it. Better: test the structure first, then design. **Sorting only with your team.** A card sort with colleagues is a good warm-up, but it doesn’t replace your audience. The team knows the internals, and that’s exactly what skews the results. **Tasks that contain the answer.** If the task already includes the label, your test looks better than reality. **Taking every result literally.** Card sorting and tree testing give you hints, not finished answers. If a single participant does something unusual, it’s interesting but not a mandate. Look for patterns. **Testing once and never again.** Websites grow. New content needs a home, and every new item can tip the structure over. A quick tree test before bigger changes keeps your navigation healthy. ## Conclusion Good navigation doesn’t come from taste or gut feeling. It comes from a simple process: collect your content, use card sorting to learn how your audience thinks, build a tree with clear labels from that, and check the tree with tree testing. None of these methods requires a big budget or a finished website. The most important shift in perspective: navigation belongs to the people looking for something, not to the organization offering it. If you name your labels after their tasks and test your structure with them, even the parent from the example will find the cello on the first try. ## Checklist - All content captured in a list, including frequent questions without their own page - Open card sort run with people from your target audience - Participants’ group names used as a source for labels - Navigation tree written as a plain text list - Labels concrete, distinct and free of junk drawers - No more than ten tree testing tasks, without answer words - Correct spot in the tree defined for each task - Success rate, directness and first click analyzed - Weak spots fixed and tested again - Key content also reachable through contextual links ## Sources - European Commission, Europa Web Guide: [Tree testing method](https://commission.europa.eu/resources/europa-web-guide/planning-your-web-presence/architecture-and-navigation/architecture-building-and-testing-methods/tree-testing-method_en) - University of Glasgow, UX Framework: [Tree testing](https://www.gla.ac.uk/myglasgow/ux/deliver/treetesting) - Jeff Sauro, MeasuringU: [How important is the first choice users make when navigating a website?](https://measuringu.com/?p=193) - MeasuringU: [10 Things to Know about Card Sorting](https://measuringu.com/card-sorting/) - Maze: [Tree Testing](https://maze.co/features/tree-testing)