Sitemaps – The Beginner’s Guide
Our Beginner’s Guide series is designed to help those who are just starting to learn about user experience, or those who want to brush up on the basics. In this part, we take a look at sitemaps.
What is a sitemap?
Sitemaps are a hierarchical diagram showing the structure of a website or application. They are used by User Experience Designers and Information Architects to define the taxonomy through grouping of related content. They are an important step of the user centred process as they ensure content is in places users would expect to find it. They can also be used as a reference point for wireframes, functional specifications and content maps.
Why should I use a sitemap?
Sitemaps are useful in several ways:
- They show how the navigation should be structured
- They help identify where content will sit and what needs to be produced
- They help show the relationship between different pages
- They provide a structure upon which to begin estimates for development
- They are the first tangible deliverable showing what you will be creating
When do I create a sitemap?
Sitemaps are normally produced after you have completed your persona and user journey work, and after you have completed your initial discovery period. They visualise what you have learnt about how users will navigate the site, what sort of content they will need to support them in their goals and what sort of language they use to identify things. In addition, it is should also take into account the business objectives and any content which is required by the business to fulfil their overall strategy.
How do I create a site map?
There are two main workshop methods you can use to create sitemaps quickly and easily. For the purposes of this article we are going to look at card sorts assuming you already have an idea of the sort of content which needs to be on the site or application. You can of course use the same techniques to get the users themselves to generate content ideas, which we will cover in a future article.
In terms of how many participants you will require to get reasonably reliable results, Jakob Nielson recommends the following:
You must test fifteen users to reach a correlation of 0.90, which is a more comfortable place to stop. – Jakob Nielson
Open Card Sort
In this technique you provide participants with a bunch of cards or post-its, each with one item of content or functionality written upon it which you have identified from your discovery phase. Each card should have a reference number on it to make things easier further down the line. The participants are then invited to organise or sort the content into groups, and come up with a name for the groups. This technique is typically used to generate ideas for taxonomies.
Closed Card Sort
In the closed card sort you are generally further down the line with creating your site map and have come up with some initial top level category ideas. Participants are given cards with content written on them as in the open card sort, but are asked to sort them into the categories you have provided. If participants are putting cards in places you wouldn’t expect them to then there is a good chance you need to revisit your site structure. This technique is typically used to evaluate a taxonomy you have come up with.
Use the output
If you want to perform statistical analysis on your open card sort results (which you may need to for large scale projects) I suggest you take a read of open card sort analysis 101 as it is slightly beyond the scope of this beginner’s guide.
For our purposes and on smaller scale results you can simply put the results of the card sort into a spreadsheet with the category headings and content reference underneath, or even put them into a mindmap such as this:
You should then look at the way participants have named items, and in the case of the closed card sort, see if they put any items of content in places you wouldn’t expect. After you have come up with an approach it’s time to bring out your personas and user journeys again at this stage.
Your user journeys should have identified a few things which each persona will want to achieve on your site. You will want to question your sitemap with these in mind along with a few other key questions:
- Does your proposed taxonomy support your user journeys?
- Would your different personas understand the labelling you have come up with?
- Does the site map have any categories with only one item of content? (Generally creating categories for single item content isn’t good practice)
- Does the site map have more then 7 categories? If so can I group any together? (Anything more then 7 is generally excessive and indicative of a poorly grouped taxonomy)
You can create your sitemap in any number of programs including Axure, Visio, Mindmapple and even Powerpoint using Smartart (Although this becomes a poor choice for larger sites).
What should a sitemap contain?
The sitemap you ultimately create needs to have a few key attributes:
- A homepage/home screen item at the top
- A reference number for each item in the sitemap (This helps when creating wireframes or functional specifications)
- A label for each item in the site map
What should a sitemap look like?
A sitemap is generally a fairly basic diagram. If your website has a particularly large amount of content you may wish to split your site map into several pages, showing one category per page with a top level overview at the beginning.
The homepage should start with reference number 1.0 and categories beneath it should increase numerically (e.g. the first category would be 2.0, the second 3.0 and so on). Content should follow this same pattern, with content beneath category 2.0 going in the format 2.1, 2.2 and so on.
Your sitemap provides the initial definition for what you are going to be delivering along with the first steps of defining the interface (the navigation). You can reference it in sitemaps, content strategies and functional specifications and it’s also a great way to show to the client what you are planning to build them.
In our next beginner’s guide we take a look at wireframes and how they are used to definine interfaces.
Images courtesy boxman / nedrichards