The difference between information architecture (IA), sitemap, and navigation

In short: The information architecture (IA) defines the overarching structure and relationship between all areas of a site (or multiple sites) and informs the sitemap; the sitemap lists all the (labelled) pages in entirety and shows hierarchy, structure and often page goals and content/functionality that happens to be on that particular page; and finally, the navigation guides users via links to all areas of a website.

1. Information architecture (IA)

An information architecture is usually done at the initial phases of a project. Main goal is to organise and structure all relevant entities — preferably in a user-centric way.

Example 1: A retailer has websites for Australia and New Zealand, a blog, a community and a few social media channels. The AU website offers products/services for professionals and consumers, the NZ website only for consumers.

Example 2: A globally operating company employs a corporate intranet and several country intranets in multiple languages. Some content is produced centralised and shared with countries (e.g. news, jobs, events).

All of these entities can operate or exist individually, but it’s the job of the IA to show how they can/should interact with each other, how content can be shared and how people will navigate from one entity to the other, i.e. how the anticipated userflow will work.

Example for an IA (of an intranet).

2. Sitemap

Based on user and business needs, and backed up by research (e.g. card sorting exercises), the sitemap is created, challenged and enhanced. One starting point for the new sitemap can be the old one, enhanced with additional analytics data or business/user values.

The sitemap artefact usually lists all the pages that will exist within the new solution, ideally with assigned page goals and content/functionality that will be placed on the pages. In addition to that should the sitemap also define the in-page information hierarchy (hierarchy of content).

Example of a sitemap with several “universes”.

3. Navigation

The navigation is the most important interface element that people will use to get to the pages defined by the sitemap. A website usually consists of these common navigational areas:

• Main navigation. The main entryway for people to navigate the website, mostly task- and activity oriented, preferably user centric (= using the user’s language and adressing his or her mental models).
• Service navigation. Usually close to the main navigation, containing selected links that aren’t represented in the first level of the main navigation and functionality like login/register, language, and search.
• Footer navigation. Very often representing the main nav in some kind, with the option to show the partial sitemap. In addition, legal and compliance related links can be found here.
• And in some instances: “Universe navigation” e.g. if a website adresses multiple audiences that each have a unique main navigation and/or experience, e.g. consumers vs. professionals (predominantly seen on websites of financial institutions, utility providers, or insurance companies).

While the sitemap shows one particular page only once at the defined location, the navigation can offer alternative pathways to that page (e.g. links that guide people to an About Us page can live in the footer and the service navigation, as well as in the content area itself).

Examples for navigation of apps and websites (on Pinterest).

A navigation can basically take any shape or form, but it should be user-centric, task-oriented, and last but not least, easy to use on any device.

Further reading

• The Difference Between Information Architecture (IA) and Navigation by Jennifer Cardello
• Complete Beginner’s Guide to Information Architecture by UX Booth