Information architecture in web design is the practice of organising, labelling and structuring the content on a website so that visitors can find what they need without thinking about it. If your navigation menu feels crowded, if pages get buried four clicks deep, or if visitors keep using search instead of your menu, you have an information architecture problem, not a graphic design problem. Related reading: What Is Information Architecture.
This guide explains the whole process in plain language and walks through it with a running example: a small plumbing and heating company. By the end you will know how to run a content inventory, use card sorting, build a labelling system, and convert all of that into a sitemap, a navigation menu and a sensible URL structure.
What Is Information Architecture in Web Design?
Information architecture (often shortened to IA) is the structural design of your content. It answers four questions:
- What content do we have? (inventory)
- How should it be grouped? (organisation systems)
- What do we call each group? (labelling systems)
- How do people move between groups? (navigation and search systems)
A useful mental model: if a website were a supermarket, the shelves, aisle signs and store layout would be the information architecture. The paint colour, the logo and the font would be the visual design. You can have beautiful signage in a badly laid out store and customers will still walk out empty handed.
Information Architecture vs Sitemap vs Navigation vs UX
These four terms get used interchangeably, which causes a lot of confusion in project meetings. Here is the difference:
| Term | What it actually is |
|---|---|
| Information architecture | The underlying structure and logic of your content. Invisible to users, felt by everyone. |
| Sitemap | A diagram that visualises that structure. A deliverable, not the architecture itself. |
| Navigation | The menus, breadcrumbs, filters and links that expose part of the structure on screen. |
| UX design | The wider discipline. IA is one component of it, alongside research, interaction design and content design. |
Key point: your navigation menu does not have to show every branch of your information architecture. Good IA gives you options; navigation is where you choose which options to surface first.
Why Information Architecture Matters More Than People Think
- Findability. If a visitor cannot find a service page, that service effectively does not exist.
- Fewer support requests. Clear structure answers questions before someone has to phone or email you.
- Search visibility. Search engines infer topical relationships from your internal links and URL hierarchy. A logical structure spreads authority to the pages that matter.
- Scalability. A structure designed for 12 pages will break at 60. IA decided early saves an expensive rebuild later.
- Conversion. Shorter paths to quotes, bookings and contact forms almost always outperform prettier buttons.
The Running Example: Northside Plumbing & Heating
Northside is a fictional but very typical small business: eight staff, three service areas, a handful of accreditations, and a website that grew page by page over six years. Their current menu looks like this:
Home | About | Services | Boilers | Emergency | Gallery | Reviews | Blog | Areas | Contact | Book Now
Eleven top level items, overlapping categories (is an emergency boiler repair under Boilers or Emergency?), and no obvious home for pricing information. Let us fix it properly.
Step 1: Build a Content Inventory
You cannot organise content you have not listed. A content inventory is a simple spreadsheet of every page on your site. Pull the list from your CMS, an XML sitemap, or a crawler, then add columns so the inventory doubles as an audit.
| URL | Page title | Topic | Purpose | Action |
|---|---|---|---|---|
| /boiler-repairs | Boiler Repairs | Heating | Generate quote requests | Keep |
| /emergency-boiler | 24h Boiler Callout | Heating | Urgent phone calls | Merge into /boiler-repairs |
| /gallery-2019 | Photo Gallery | Proof | Build trust | Rework as case studies |
| /accreditations | Our Certifications | Company | Build trust | Keep, move under About |
For every row, mark one of four actions: keep, rewrite, merge or delete. Northside started with 47 pages and finished with 31, because nine were near duplicates and seven were outdated.
Add content you do not have yet
The inventory should also capture planned content. Northside added three pages that customers kept asking about by phone: pricing guidance, service area coverage, and what happens on the day of a visit. IA is not just tidying up; it is deciding what the site needs to contain.
Step 2: Run a Card Sort to See Your Content Through Users’ Eyes
Card sorting is the most useful low cost research method in information architecture. You write each content item on a card (physical or digital) and ask real people to group the cards in a way that makes sense to them. toptal.com published something useful on the subject.
Open, closed and hybrid card sorts
| Type | How it works | Best for |
|---|---|---|
| Open | Participants create and name their own groups | New sites, discovering natural categories and vocabulary |
| Closed | You supply the categories, they sort items into them | Validating a structure you already drafted |
| Hybrid | You supply categories but allow new ones | Redesigns where some groupings are fixed |
How to run one for a small business site
- Pick 30 to 50 content items from your inventory. Use plain descriptions, not internal jargon.
- Recruit 12 to 15 participants who resemble your customers. Past clients, local contacts and referrals work fine.
- Ask them to group items and, in an open sort, to name each group in their own words.
- Ask a follow up question on anything they hesitated over. The hesitation is the insight.
- Look for agreement patterns: items that most people put together belong together.
What Northside learned surprised them. Participants did not separate plumbing from heating the way the business does internally. Instead they sorted by urgency and situation: “something is broken right now”, “I want something installed”, “I need a yearly check”. Two participants created a group they labelled “how much will this cost” using cards the company had scattered across five pages.
Step 3: Design the Labelling System
A labelling system is the shared vocabulary of your site: menu labels, page headings, link text, category names, form field names. Consistency matters more than cleverness.
Rules for labels that work
- Use the customer’s words, not yours. If they say “boiler service” and you say “annual heating maintenance programme”, change the label.
- Be specific enough to predict the page. Vague labels like “Solutions” or “Resources” force people to click to find out what is there.
- Stay parallel in form. If one item is a noun phrase, all siblings should be noun phrases.
- Keep one label per concept. Do not call the same thing “Book Now”, “Get a Quote” and “Request Service” on three different pages.
- Aim for one to three words in primary navigation, where scanning speed matters.
| Weak label | Better label | Why |
|---|---|---|
| Our Offering | Services | Conventional labels are scanned faster |
| Gallery | Recent Projects | Describes value, not file type |
| Areas | Areas We Cover | Removes ambiguity |
| Emergency | 24/7 Emergency Callout | States the promise in the label |
Step 4: Turn the Card Sort Into a Sitemap
A sitemap is where organisation and labelling come together. Draw it as a simple tree: home at the top, top level sections below, child pages under those. Any diagram tool works, and so does a spreadsheet with indentation.
Breadth versus depth
Two forces pull against each other. A shallow, broad structure has many top level items and short paths. A deep, narrow structure has few top level items and long paths. For small business sites, lean shallow: five to seven top level sections and rarely more than three levels of depth.
Northside’s new sitemap
- Home
- Services
- Emergency Callout
- Boiler Repairs
- Boiler Installation
- Annual Boiler Service
- Bathroom Installation
- Leaks and Blockages
- Pricing
- Callout Rates
- Service Plans
- Areas We Cover
- Individual town and district pages
- Recent Projects
- Case study pages
- About Us
- Our Team
- Accreditations and Insurance
- Reviews
- Advice (the blog, renamed)
- Contact
Notice three decisions driven directly by research:
- Emergency Callout moved inside Services rather than sitting as a competing top level item, and gets a permanent phone link in the header instead.
- Pricing became a top level section because customers grouped cost questions together.
- Reviews and Accreditations moved under About Us, because they answer the same underlying question: can I trust these people?
Step 5: Convert the Sitemap Into Navigation
The sitemap is the full structure. Navigation is the edited highlights. You have several navigation layers to work with:
| Layer | Role | Northside example |
|---|---|---|
| Primary nav | Main sections, always visible | Services, Pricing, Areas We Cover, Projects, About, Contact |
| Utility nav | High intent shortcuts | Phone number plus a “Book a Visit” button |
| Local nav | Siblings within a section | Sidebar list of the six service pages |
| Breadcrumbs | Show position in hierarchy | Home > Services > Boiler Repairs |
| Contextual links | Cross links between related pages | Boiler Repairs links to Callout Rates and to Emergency Callout |
| Footer nav | Complete map plus legal pages | All sections, area list, privacy, terms |
Practical navigation guidelines
- Cap the primary nav at seven items. Northside went from eleven to six plus a call to action.
- Make dropdown parents clickable. A “Services” landing page that summarises all services serves people who are still exploring.
- Do not hide the phone number in a menu. For urgent services, the contact route belongs in the header on every screen size.
- Keep the mobile menu identical in order and wording to the desktop one. Different labels on different devices destroy learnability.
- Avoid mega menus on small sites. They are a solution for hundreds of pages, not for thirty.
Step 6: Let the Structure Shape Your URLs
URL structure is the most visible output of information architecture, and one of the easiest to get wrong. Once a hierarchy exists, mirror it in your URLs so that both people and crawlers can infer relationships from the address alone. slickplan.com has a solid rundown on this.
| Before | After | Reason |
|---|---|---|
| /emergency-boiler-2019-new | /services/emergency-callout | Removes dates and clutter, shows parent section |
| /page-id=482 | /pricing/callout-rates | Readable and descriptive |
| /services/heating/boilers/repairs/gas/urgent | /services/boiler-repairs | Cuts unnecessary depth |
URL depth rules of thumb
- Keep important pages within two or three segments of the root.
- Use folders only when they represent a real grouping people navigate through.
- One page, one URL. Do not let the same service live under two paths.
- If you change URLs during a restructure, set up 301 redirects from every old address and update internal links rather than relying on the redirects.
Depth in clicks matters more than depth in slashes. A page three folders deep that is linked from the homepage is easy to reach. A page at the root that nothing links to is invisible.
Step 7: Test the Architecture Before You Design Pages
You can validate a structure with nothing more than a list of labels. Two quick methods:
- Tree testing. Show participants your text only hierarchy and ask where they would click to complete a task, such as “find out what a weekend callout costs”. Track success rate, directness and where people go wrong.
- First click testing. Show a static homepage and record the first click for a given task. Where the first click is right, task success rises sharply.
Aim for a success rate above 80 percent on your most valuable tasks. Anything under 50 percent points to a labelling or grouping problem worth fixing before a single page gets designed.
After launch, keep listening
- Review internal site search queries monthly. They are free labelling feedback.
- Watch for pages with high entries and high exits. Often a dead end that needs contextual links.
- Check Search Console for queries landing on the wrong page, a classic symptom of two pages competing for one topic.
Seven Common Information Architecture Mistakes
- Mirroring your org chart. Customers do not care which department owns which page.
- Adding a top level item every time someone asks. That is how you get eleven menu items.
- Using insider jargon in labels. Internal names rarely match search behaviour.
- Creating catch all sections named Resources or Information. Content goes in and never comes out.
- Designing pages before the structure exists. The structure then bends to fit the layout.
- Ignoring the footer. It is prime real estate for orientation and secondary links.
- Treating IA as a one off project. Every new page is an IA decision.
Your Information Architecture Checklist
- Export a full list of pages and build a content inventory with a keep, rewrite, merge or delete decision for each.
- Define your top three to five user tasks and the audiences behind them.
- Run an open card sort with 12 to 15 participants.
- Draft category labels using participants’ own vocabulary.
- Build a sitemap with no more than seven top level sections and three levels of depth.
- Decide which sections appear in primary, utility, local and footer navigation.
- Map the hierarchy to clean URLs and plan redirects for anything that changes.
- Tree test the structure and revise anything scoring under 50 percent task success.
- Add breadcrumbs and contextual cross links.
- Schedule a review every six months, or whenever you add a new service line.
Good information architecture in web design is rarely noticed, which is exactly the point. When the structure is right, visitors simply get where they were going, and your site can grow for years without needing a rebuild. If you want a second opinion on your current structure before your next redesign, the team at Purlize is happy to take a look.
Frequently Asked Questions
Is information architecture UI or UX?
It sits within UX. Information architecture defines how content is structured, grouped and labelled, which is a UX concern. UI design then presents that structure visually through menus, cards, filters and typography. The two are closely linked: a strong structure with a poor interface is frustrating, and a beautiful interface over a weak structure is confusing.
What are the eight principles of information architecture?
The eight principles most often cited come from Dan Brown: the principle of objects (treat content as living things with lifecycles), choices (offer meaningful but limited options), disclosure (preview what lies beneath), exemplars (show examples of category contents), front doors (assume people arrive on any page, not just the homepage), multiple classification (allow several routes to the same content), focused navigation (keep each menu about one thing) and growth (design for more content than you have today).
What is the difference between information architecture and a sitemap?
Information architecture is the structure itself, including organisation, labelling and navigation logic. A sitemap is a visualisation of that structure, usually a tree diagram used to communicate and agree on it. A sitemap is one deliverable produced while doing IA work, not the whole discipline. Note that an XML sitemap for search engines is a different thing again: a machine readable file listing your URLs.
What does an information architect do?
An information architect audits and inventories content, researches how users think about that content through card sorting and interviews, designs category structures and labelling systems, produces sitemaps and navigation specifications, and validates the result with tree testing. On small business projects, this role is usually handled by the web designer, UX designer or content strategist rather than a dedicated specialist.
How many items should be in a website navigation menu?
For most small business sites, five to seven primary items work best, plus one call to action such as a phone number or booking button. Beyond seven, scanning slows down and items get overlooked. If you genuinely need more, group them into fewer parent sections and use local navigation or a well organised footer for the rest.
Do I need card sorting for a small website?
You do not need a formal study, but you do need real input. Even six to eight participants sorting 30 cards will reveal groupings and vocabulary you would never guess from the inside. It typically takes an afternoon and prevents the most expensive kind of mistake: a structure that only makes sense to the people who built it.
Does information architecture affect SEO?
Yes, indirectly and significantly. A clear hierarchy helps crawlers understand which pages are most important, distributes internal link value, reduces duplicate and competing pages, and makes descriptive URL paths possible. It also improves the engagement signals that follow from people actually finding what they came for.