Site map

Q: Card sorting or tree testing: what is the difference?

Card sorting is used to build: participants group the content themselves, which brings a categorisation to the surface. Tree testing is used to validate: you present a structure that has already been defined and ask people to find a specific item. One produces the material, the other checks that it works.

Q: What is the ideal tree structure depth?

There is no universal answer: it depends on your context. In general, there are two to three levels in the main menu. Once you are inside a section, other contextual menus let you carry on navigating through the content. Depth matters as much as breadth when you work on a tree structure.

Q: What is the link between the tree structure and navigation?

The tree structure is how the different content of a site is organised. It does not necessarily match the navigation offered in the menus. You can choose to include a page in a tree structure without it being referenced in a menu. The same tree structure can also translate into different navigations depending on the context of use, mobile or desktop.

Q: How do you manage the evolution of a tree structure over time?

When you map out the tree structure of a digital system, you generally arrange things so that it can evolve. The idea is to test whether a new section can be added simply. If you already have new features in mind, you need to think about fitting them in from the moment you create the tree structure.

Q: What are the limits of a tree structure?

Building a tree structure calls for real work on hierarchy and prioritisation, which means deciding between pieces of content that the business often considers all to be priorities. It also describes a structure, not usage. It does not say how users actually move around, which is what tree testing and analytics reveal once the service is live.

Design deliverable

Organising your content into a site map

A site map of a website or app reflects the hierarchical, logical way its pages and features are organised. Proposing a sound site map means choosing a categorisation that fits the mental model users already have. Defining the site map is a turning point in designing navigation that works for the user. Co-building it with the various business stakeholders provides an overall view of the content to organise.

What is a site map for?

The site map is the backbone of a website or mobile app. Defining it means translating your goals and priorities into the way your content is organised. The site map is what helps users get their bearings and find the information they need. A poorly thought-out site map can push users to give up on their search and leave with a bad impression.
Beyond structuring and categorising the information on the platform, the site map also plays a key role in how your content gets picked up by search engines.

Why build a site map?

To set the overall information architecture
To organise the content of your site or app into a limited number of categories
To rank content by its position or level within the structure
To visualise the information architecture of your content
To check how easy it is to reach the content
To prepare the design by identifying the page templates that need to be created

List the content and organise it

The site map is the structure. Before organising the content, the first step is to draw up an exhaustive list of all the content and features your interface will hold.

Visualise the various user journeys

The site map formalises the paths users can take to reach the content they're after. It's a hierarchical, logical way of arranging pages and features.

Check that the information sits in the right place

A good site map categorises information in a way that fits the mental model users already have. It's worth testing it with users through methods like card sorting, to confirm the structure makes sense from their side.

Identify how many page templates you'll need

The site map shape will drive the type of pages the future platform will hold: news item, contact form, offer page, and so on. Doing this work upfront helps identify the various templates and where they sit in the platform. It also helps prioritise templates by site map level. For instance, the team may decide to design only the top-level pages first.

The same site map can be represented in several ways. The choice depends on the level of detail expected and on what the deliverable will be used for.

The linear view. Produced in a simple word processor, as a multi-level list. The hierarchy reads easily and the deliverable is quick to produce and to amend. The format stays austere and incomplete, though, without the additional information such as page templates or the links between pages. The larger the site map grows, the harder it becomes to read.
The spreadsheet view. The principle is the same, but columns handle the depth of the levels better and the formatting makes the deliverable more readable than the linear view. The additional information is still missing.
The functional view. This is the most widely used representation. Each page appears as a block connected to the others, which makes the deliverable far more readable and allows annotations of any kind to be added. The trade-off is the time it takes to update, since every change means reviewing the links, the alignments and the templates.

Card sorting or tree testing: what is the difference?

What is the ideal tree structure depth?

What is the link between the tree structure and navigation?

How do you manage the evolution of a tree structure over time?

What are the limits of a tree structure?

Related methods

Co-design

Drawing on collective intelligence, these workshops align stakeholders and surface solutions with the team and/or the end users.

User testing

User testing has target users assess the usability of your product or service. Depending on the goals, several approaches exist.

Information architecture

Information architecture organises content and navigation so that users find what they're looking for. It guides interface design

Zoning

Zoning is the visual representation of an interface through the placement of its simple content blocks, without detail: no text, no images.

Wireframe

A mockup with no graphic elements, describing the zones and essential components an interface should contain.

User flow

The user flow is a visual representation that models the paths a user can take when going through a site or an app.

Card sorting

This sorting method lets users group cards into categories, in order to establish the site map architecture of a website or an application.

Curious to learn more about us?

Everyone talks about user experience, service design, ergonomics...
It's not always clear, and you'd like to find out, or sharpen what you already know.

Let's talk