Most website redesigns fail long before anyone picks a font. They fail at the moment someone writes a menu with nine top-level items, names one of them “Solutions”, and hides the pricing page three clicks deep. That is an information architecture problem, not a visual design problem. You can read more here.
This guide explains information architecture in web design in plain language, then shows annotated sitemap and navigation structures for three very common site types: ecommerce, SaaS and local service businesses. The goal is practical: by the end you should be able to group your pages, name your menu labels and decide how deep your menu should go, all before a single mockup is created.
What is information architecture in web design?
Information architecture (IA) is the practice of structuring, grouping and labeling the content of a website so that people can find what they need and understand where they are. In web design, IA answers four questions:
- What content exists? (pages, products, articles, documents, forms)
- How is it grouped? (categories, sections, hierarchies)
- What is it called? (menu labels, category names, breadcrumb text)
- How do people move through it? (navigation, internal links, search, filters)
A useful mental model: if a website were a supermarket, IA would be the decision to have a dairy aisle, a bakery and a frozen section, plus the signs hanging from the ceiling. Visual design is the lighting, the shelving material and the brand colours. You can have beautiful shelving and still lose customers who cannot find the milk.
Information architecture vs sitemap vs navigation
These three terms get mixed up constantly, and the confusion causes real problems in projects. Here is the difference:
| Concept | What it is | Who sees it |
|---|---|---|
| Information architecture | The full logic: content inventory, grouping, labeling, hierarchy, relationships and rules | Nobody directly. Users only feel it. |
| Sitemap | A diagram or list that documents that hierarchy (the deliverable, not the strategy) | The project team, plus search engines in the case of an XML sitemap |
| Navigation | The interface that exposes part of the IA: header menu, footer, sidebar, breadcrumbs, filters | Every visitor, on every page |
Key point: your navigation is never your whole IA. A site can have 400 pages and a header with five links. Navigation is a curated view of the architecture, chosen based on what most users need most often.
Why IA has to come before visual design
When teams jump straight to layouts, the structure gets reverse-engineered from whatever fits in the header design. That produces predictable damage:
- Orphan pages that exist but are not linked from anywhere meaningful
- Duplicate content, for example three near-identical service pages created by different departments
- Vague labels like “Resources”, “Offer” or “Discover” that nobody clicks
- Keyword cannibalisation, where several pages compete for the same search query
- Expensive rework, because changing structure after development means redoing templates, URLs and redirects
IA is also an SEO foundation. Search engines infer topical relationships from your hierarchy and internal linking. A clean structure concentrates authority on the pages that matter and makes crawling efficient. A messy one buries your money pages five clicks from the homepage. The piece Information Architecture vs. Sitemaps makes a good next read.
The building blocks of information architecture
1. Organisation systems
How content is grouped. The common patterns:
- By audience: For Individuals / For Business / For Developers
- By topic or category: Furniture / Lighting / Textiles
- By task: Book an appointment / Get a quote / Track an order
- By product type: Software / Hardware / Accessories
- Chronological: useful for news, releases, changelogs
Pick one primary organising principle per level. Mixing audience and product in the same menu row is one of the fastest ways to confuse people.
2. Labeling systems
The words you use. Labels should match how your visitors talk, not how your internal teams talk. “Client Success Platform” means nothing to a first-time visitor searching for “help desk software”.
3. Navigation systems
Global navigation (header), local navigation (in-section menus), contextual links (in body copy), supplemental navigation (footer, sitemap page) and breadcrumbs.
4. Search systems
Site search, filters and facets. On sites with more than roughly 150 pages or 100 products, search stops being optional.
How to build your IA in 7 steps
- Inventory everything. Export all URLs into a spreadsheet. Add columns for page title, purpose, target query, traffic, conversions and a verdict: keep, merge, rewrite or delete. This single step usually reveals that 30 to 50 percent of an old site is dead weight.
- List user goals. Write 8 to 15 sentences that begin with “I want to…”. For a dentist: “I want to know if they take my insurance”, “I want to book on Saturday”, “I want to see prices for whitening”.
- Group content into candidate categories. Use sticky notes, a spreadsheet or a whiteboard tool. Aim for groups where every item genuinely belongs and the group name is obvious.
- Name the groups with real user language. Pull vocabulary from search queries, support tickets, sales calls and competitor menus.
- Draw the sitemap. Levels, parents, children. Mark which items appear in the header, which in the footer only.
- Test the structure before designing. Card sorting tells you how people group things. Tree testing tells you whether they can find things in your proposed hierarchy. Both can be run with 15 to 20 participants and cost far less than rebuilding a site.
- Map URLs and redirects. Decide your URL patterns now, while nothing is built. If you are restructuring an existing site, build the redirect map at the same time as the sitemap.
Annotated navigation examples by site type
Below are three realistic structures with notes explaining why each decision was made. These are patterns, not templates to copy blindly, but they cover the majority of business websites we work on.
Example 1: Ecommerce site (around 400 products)
Header navigation:
- Shop (mega menu: categories in column 1, collections in column 2, “New in” and “Sale” in column 3)
- Living room > Sofas, Armchairs, Coffee tables
- Bedroom > Beds, Wardrobes, Bedside tables
- Lighting > Pendants, Floor lamps, Table lamps
- New in
- Sale
- Inspiration (lookbooks, room guides, buying guides)
- Help (shipping, returns, size guides, contact)
Annotations
- Category before collection. Most shoppers arrive with a product type in mind (“sofa”), not a marketing collection name (“Nordic Calm”). Product type gets the top level; collections live inside.
- Three levels maximum for browsing: Shop > Living room > Sofas > product. Anything deeper and filters should do the work instead of new subcategories.
- Filters are not IA levels. Colour, price, material and size belong in facets, not in the menu. Creating a menu item for “Grey sofas” only makes sense if it has real search demand and you can support it as a landing page.
- “Help” beats “Customer Service Centre”. Shorter, plainer, and it holds returns and shipping, the two pages that reduce purchase anxiety most.
- Sale gets its own item because discount hunters are a distinct, high-intent segment and they should not have to hunt.
- Footer carries the rest: About, Careers, Press, Sustainability, Terms, Privacy, Store locator. Nobody needs Careers in the header.
Example 2: SaaS site (B2B, two audience types)
Header navigation:
- Product
- Overview
- Features (one page per major feature, not a single mega page)
- Integrations
- Security
- Solutions
- By role: Marketing teams, Operations teams
- By industry: Retail, Healthcare, Agencies
- Pricing
- Customers (case studies, testimonials, logos)
- Resources
- Blog
- Guides and templates
- Documentation
- Webinars
- Log in + Start free trial (buttons, visually separated from navigation)
Annotations
- Pricing is always top level and never nested. It is one of the three most requested pages on any SaaS site. Hiding it behind “Product” costs conversions and increases bounce.
- Product vs Solutions is a deliberate split: Product answers “what does it do”, Solutions answers “is it for someone like me”. If you cannot fill both credibly, keep only Product and drop Solutions.
- Features as individual pages give each capability a chance to rank for its own query and to be linked from campaigns. A single scrolling feature page cannot do that.
- Documentation sits under Resources in the menu but lives on its own subdomain or path with its own local navigation. Docs have completely different browsing behaviour and should not inherit the marketing menu.
- Two levels of depth is the ceiling in the header. Anything below that belongs to local navigation inside the section.
- Actions are not navigation. Log in and trial buttons get visual separation so the menu stays about information and the buttons stay about conversion.
Example 3: Local service business (plumber, dentist, law firm, garage)
Header navigation:
- Services
- Emergency repairs
- Boiler installation
- Bathroom fitting
- Maintenance contracts
- Areas we cover (one page per key town or district if demand justifies it)
- Prices
- Reviews
- About (team, certifications, insurance)
- Contact + visible phone number
Annotations
- One page per service, always. A single “Services” page listing eight services cannot rank for eight queries and cannot answer eight sets of questions. This is the highest-return IA decision for local businesses.
- Location pages need unique substance: local projects, local response times, parking or access notes. Ten pages that differ only by town name are a liability.
- “Prices” instead of “Pricing” or “Investment”. Use the word your customer would type. Even a price range with clear conditions outperforms silence.
- Flat is fine. A 15 page local site needs one level of depth. Do not invent a hierarchy to look bigger.
- Contact is a top-level item and the phone number is in the header on mobile. For emergency services, the fastest path to a call is the whole point of the architecture.
How to name menu labels that people actually click
Labeling is where most IA work quietly fails. Use these rules:
- One to three words. If a label needs four words, the grouping is probably wrong.
- Use nouns for content, verbs for actions. “Pricing” is content. “Book a call” is an action.
- Match search language. Check the queries people already use to reach your site before inventing vocabulary.
- Front-load the distinguishing word. “Boiler installation” scans better than “Installation of boilers”.
- Avoid internal jargon and brand names for categories. Nobody searches for your internal product codename.
- Be consistent in grammatical form. Do not mix “Reporting”, “Analyse your data” and “Dashboards” in one dropdown.
| Weak label | Better label | Why |
|---|---|---|
| Solutions | Services / Software / For Retail | “Solutions” carries no information on its own |
| Resources | Guides / Blog / Help centre | Users look for a specific format, not a container |
| Our Approach | How we work | Plainer, matches spoken language |
| Discover | Shop / Products / Catalogue | Marketing verbs hide the destination |
| Get in touch | Contact | Shorter, universally understood, better for scanning |
How deep should your menu go?
Depth is a trade-off between breadth (more items per level) and depth (more levels). Broad and shallow is generally easier for users, until a level has so many items that scanning becomes work.
| Site size | Recommended header items | Recommended depth | Notes |
|---|---|---|---|
| Under 15 pages | 4 to 6 | 1 level, flat | No dropdowns needed |
| 15 to 60 pages | 5 to 7 | 2 levels | Simple dropdowns, add breadcrumbs |
| 60 to 300 pages | 5 to 7 | 2 to 3 levels | Local sidebar navigation per section, site search |
| 300 pages or more | 5 to 8 | 3 levels plus facets | Mega menu, filters, strong search, HTML sitemap page |
Practical rules of thumb:
- Any important page should be reachable in three clicks or fewer from the homepage.
- If a dropdown has more than about 8 items, split it into labelled columns or rethink the grouping.
- Three levels of dropdown (flyouts inside flyouts) are painful on touch devices. Use a landing page with local navigation instead.
- Design the mobile navigation at the same time as the desktop one. If your structure only works with hover, it does not work.
Common IA mistakes we see in audits
- The org chart menu. The navigation mirrors internal departments rather than user tasks.
- Everything in the header. Twelve top-level items means no hierarchy at all.
- Empty parent categories that exist only to hold a dropdown and offer no content of their own.
- Same page, several paths, several URLs. Pick one canonical location per page.
- No breadcrumbs on deep sites. Users landing from search have no idea where they are.
- Structure decided by the CMS template rather than by content needs.
- Restructuring without redirects. A better architecture that loses all your rankings is not an improvement.
Deliverables to produce before design starts
- Content inventory spreadsheet with keep, merge, rewrite or delete decisions
- User goals list written as “I want to…” statements
- Sitemap diagram showing levels and parent-child relationships
- Navigation specification: exact header labels, dropdown contents, footer groups
- URL and redirect map for existing pages
- Tree test results with success rate per task, so decisions are evidence based
With these six documents in hand, wireframes and visual design become much faster, because the hardest questions are already answered.
FAQ
Is information architecture UI or UX?
IA is part of UX. It deals with structure, grouping and labeling, which are decisions about meaning rather than appearance. UI then presents that structure through menus, buttons and layout. In small teams the same designer often handles both, but the IA work should come first.
What are the main principles of information architecture?
The most quoted set comes from Dan Brown and includes the principles of objects (treat content as living things with life cycles), choices (offer fewer, meaningful choices), disclosure (preview enough to help people decide), exemplars (show examples of category contents), front doors (assume people arrive on any page, not just the homepage), multiple classification (allow several ways to browse), focused navigation (keep menus purposeful and consistent) and growth (assume the content you have today is a fraction of what you will have later).
What are the four components of information architecture?
Organisation systems, labeling systems, navigation systems and search systems. Every website has all four, whether they were designed deliberately or not.
What is the difference between information architecture and a sitemap?
Information architecture is the thinking: how content is grouped, named and related. A sitemap is one of the documents that records the outcome of that thinking. You can draw a sitemap without doing real IA work, and it will show.
How long does an IA phase take?
For a small business site of 10 to 20 pages, one to two weeks including a round of tree testing. For a mid-sized ecommerce or SaaS site, three to five weeks. For large multi-language sites with several stakeholder groups, plan for six to ten weeks. It is nearly always cheaper than fixing the structure after launch.
Does information architecture affect SEO?
Yes, significantly. Clear hierarchy and internal linking help search engines understand which pages are important and how topics relate. A logical structure also reduces duplicate and competing pages, improves crawl efficiency, and produces cleaner URLs and breadcrumbs. Good IA and good technical SEO usually point to the same decisions.
What tools can I use to build an IA?
A spreadsheet for the content inventory, a whiteboard or diagram tool such as FigJam, Miro, Whimsical or Octopus.do for the sitemap, a crawler such as Screaming Frog for auditing an existing site, and a dedicated research tool such as Optimal Workshop or Maze for card sorting and tree testing. Sticky notes on a wall still work perfectly well for the grouping stage.
Ready to fix your structure?
If your site has grown page by page over the years and the menu now looks like a compromise between five different teams, an IA audit is usually the highest-impact starting point. At Interact Studio we map your existing content, test a new structure with real users, and hand over a sitemap and navigation specification your designers and developers can build from. Get in touch to talk through your project.