All articles

Website Information Architecture: How to Plan One That Works

Website information architecture is how your content is grouped, labeled and navigated. Learn the parts, a step-by-step plan, and how to test it before launch.

Website information architecture (IA) is how your site's content is organized, labeled and connected so people can find what they came for. It is the structure under your menus, not the menus themselves. Get it right before design starts and every page, menu and button has a clear job. Get it wrong and you pay for rework later.

This guide is for owners who are about to build or rebuild a site. It covers what IA is, what it includes, how to build one in six steps, and how to test it with real people.

TL;DR

  • IA is the plan for how content is grouped, named and linked. A sitemap is one picture of that plan, not the plan itself.
  • Start from what your visitors want to do, not from how your company is organized.
  • Four parts matter: organization, labeling, navigation and search.
  • Keep top-level navigation short and use plain words your customers already use.
  • Test the structure with card sorting and tree testing before you design or build.

What website information architecture is

Nielsen Norman Group (NN/G), a research firm that studies usability, describes IA as the practice and resulting structure for organizing content, its relationships and the visible navigation so content is findable. MDN, the web developer reference, says much the same: IA organizes a site's information, content and functionality so that information and services are usable and findable.

Think of a grocery store. The aisles, the signs and the way milk sits near eggs are the architecture. Shoppers never see a diagram of it. They just feel whether finding things is easy or annoying.

Your visitors work the same way. A homeowner looking for a furnace repair, a realtor looking for a listing tool and a distributor looking for a dealer login all arrive with one task. IA decides how fast they finish it.

IA, sitemap and navigation are not the same thing

People mix these up all the time. Here is the short version.

Term What it is Who sees it
Information architecture The underlying organization, relationships and naming of content Nobody directly. Everyone feels it.
Sitemap A diagram of the hierarchy of pages You, your designer, your developer
Navigation The menus, breadcrumbs and links on the screen Your visitors

NN/G says a sitemap is only one part of IA. It shows the broad hierarchy. IA also covers labels and smaller pieces such as search placement, breadcrumbs, pagination and tags.

Navigation is the set of interface pieces that help people reach content. IA is the backbone that informs that interface. So you plan IA first, then draw the sitemap, then design the navigation.

That order saves money. NN/G warns that choosing a navigation pattern before you know the full scope of content can force expensive rework once the real hierarchy outgrows it. A menu built for six pages breaks at forty.

The four parts of a site's information architecture

UW–Madison's IT group lists four components: organization, labeling, navigation and search. Here is what each means for a business site.

Organization. How content is grouped. A property manager might group by audience (owners, tenants, vendors). A home service business might group by service (plumbing, heating, electrical) or by city.

Labeling. The names you give things. "Services" is clear. "Our Value Stack" is not. UW–Madison advises short, descriptive labels in plain language, not internal jargon or acronyms.

Navigation. The routes between pages: main menu, local menus, breadcrumbs, footer links and related links. NN/G treats these as components of navigation, not the whole IA.

Search. A direct way to ask for something. It matters most on sites with many products, listings or documents. A ten-page brochure site rarely needs it.

How to build your information architecture in six steps

This sequence draws on guidance from several university web teams and usability researchers. Each step lists the common mistake.

1. Start with visitor tasks

Write down the top five things a visitor wants to do. Smashing Magazine suggests starting with users' questions, objections and tasks rather than the messaging your company prefers.

Examples: get a quote, book a visit, see pricing, log into a dealer portal, check a listing. The mistake here is starting from your org chart. Customers do not care which department owns a page.

2. Take stock of what you have

List every page. Mark duplicates, outdated pages and gaps. UW–Madison recommends reviewing existing content and removing or merging overlap before you reorganize anything.

If you are replacing a live site, keep this list. It also feeds your redirect plan. Our site migration SEO checklist shows what to protect so rankings survive the move.

3. Group content around needs

Sort pages into groups that match visitor tasks. The University of Oregon's digital team recommends dividing content into user-centered categories and subcategories after you study the terms users actually use.

Two habits help. Put each page in one clear home. And ask whether a page deserves its own place or belongs inside another. If you are unsure whether you need a full site at all, see landing page vs website.

4. Name each group in plain words

Use the words your customers say on the phone. If they say "furnace repair," do not label it "Heating Systems Care." Check your emails, reviews and search terms for the real phrases.

5. Set the main navigation

Keep it short. Oregon's guidance is that primary navigation should cover roughly five to eight sections users care about most, with the most important or frequent tasks toward the left.

A short menu is easier to scan. Everything else can live in submenus, the footer or related links on the page.

6. Draw the sitemap and wireframe

Now document the result. Oregon recommends capturing it in an IA sitemap and wireframe. A sitemap lets you and your team see the whole hierarchy on one page and spot orphan pages or lopsided branches. For more on using a sitemap to plan structure, read these site architecture best practices.

Eight principles to check your plan against

Information architect Dan Brown published eight principles of IA. They make a good review list:

  • Objects: treat content as things with a life cycle, not just pages.
  • Choices: offer meaningful options, not a wall of links.
  • Disclosure: preview deeper content so people know what is ahead.
  • Exemplars: show examples of what a category contains.
  • Front doors: assume visitors enter on pages other than the homepage.
  • Multiple classification: offer more than one way to browse.
  • Focused navigation: keep menus coherent and not mixed in purpose.
  • Growth: plan for more content later.

Front doors matter most for small business sites. Visitors often land from search straight on a service page. That page must tell them where they are and where to go next. Our technical SEO checklist covers the crawl side of the same idea.

How to test your structure before you build

You can draw a sitemap that looks tidy and still confuses visitors. Testing fixes that. The U.S. Department of Energy's usability guide explains two kinds of card sorting. In an open card sort, participants create and name groups. In a closed sort, they place items into categories you have set.

Then run a tree test. This is a text-only version of your hierarchy where people try to find items. NN/G says it shows whether category names are understandable and whether the structure is too broad or deep. It recommends realistic tasks, such as finding an insurance plan that fits a family size and monthly budget.

For your site, the tasks might be:

  • Find the price range for a kitchen remodel.
  • Find where to apply for a dealer account.
  • Find the page for a rental unit in your city.

A few practical limits. Smashing Magazine advises keeping card-sort material to about 30 to 60 cards so participants do not get overwhelmed. Review where people took wrong paths, which labels confused them and what content is missing. Revise, then retest before launch and again after any big change.

Perspective

Most owners come to us with a page list and a deadline. The list is usually the company's view of itself: About, Services, Team, Contact.

We start somewhere else. We ask what a stranger needs to do on the site in the first minute. Then we build the structure around that, and we show you the sitemap before any design work starts.

That keeps you in the loop from the first sketch. Changing a box on a diagram costs nothing. Changing a finished site costs real money. For us, a clear structure is the first deliverable, not an afterthought.

Loic

Work with us on your site structure

We are Westcode, a studio in Vancouver and Kelowna, BC. We design and build custom websites with clients involved from concept to launch. Structure is where that starts: the pages, the labels and the paths between them. If you are planning a new site or a rebuild, see our web design and development service and talk to us about the plan before the first mockup.

FAQ

Is information architecture the same as a sitemap?

No. IA is the broader practice of organizing and naming content. A sitemap is a diagram that shows the page hierarchy. It leaves out labels and smaller navigation parts such as breadcrumbs and search placement.

How many items should my main menu have?

The University of Oregon's guidance is about five to eight sections. Choose the ones visitors use most and put the most important tasks toward the left. Move the rest into submenus or the footer.

When should I plan IA: before design or after?

Before. Settling content and structure first prevents the rework that comes from fitting a hierarchy into a menu you already designed. Your designer can then work from a clear map.

How do I know if my current site's structure is bad?

Run a tree test with real tasks, such as finding a price or a service page. If people take wrong paths or stall on certain labels, those are the places to fix. Start with the labels, then the grouping.

Sources

Written by westcode.io, an independent studio in Kelowna and Vancouver.

Websites & brands8 min read

Digital Product Roadmap: How to Build One That Works

A digital product roadmap shows what you build, why and roughly when. Learn what to include, how it differs from a backlog, and how to start.

Websites & brands9 min read

Real Estate Website Features That Earn Their Place

The real estate website features buyers actually use, from IDX search and listing pages to mobile, accessibility, lead capture and SEO, and how to rank them.

Websites & brands6 min read

Seven contractor website examples that bring in leads

Seven patterns from Canadian contractor websites that turn visits into calls, from plumbers to roofers, and how to build each one into your own site.