Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.
Advertisement

How to Architect a Better Site-Map

by

The site-map is often the first point in a design process, when all the research and considerations start to form into something tangible; something you can put in front of your client and say “this is the plan”.

The site-map is the architecture, the frame, or at least the foundation, which defines how people see, navigate and experience a system of information, and functionality.

So, I’m sure we can all agree, it’s worth getting this right.

Site structures can be changed and updated over time, and this is undoubtedly a great opportunity to constantly respond to changing needs. It is important however to properly research and consider your site-map from the outset. To think about how your content will be grouped and categorised.

There are a few potholes that can be easily avoided and some simple methods you can adopt to achieve a better site map from the start.


Bad Habits Die Hard

I see two negative patterns which seem to recur in site-map design:

  1. Site maps simply reflect the organisational structure of a company.
  2. Content is shoehorned into the assumptive default site-map, (not every website needs an
    “About us” page, or for that matter, a “Site-map” page).

The first example is extremely common; companies seem to think the best way to present their outward facing information is simply to mimic the departments, offices and production processes around which they work. This is hardly a very user-centered approach: can you imagine if the government did this? You probably can, because they used to, and it was hellish.

webtuts-sitemap-image11

As common as they might be; these habits aren't hard to avert.

Making a better site map is quite simple: you start with a blank slate and no assumptions. By focusing on the unique habits and behaviours of an audience, and the unique goals of an organisation or business. You work out what content you need, and how it should be presented.


Client Goals and User Needs … and Content

The process of mapping content to goals simply involves research; developing a deep understanding of your client and what they want to achieve is essential.

Resources vary, and some research is better than no research. So, without going into all possible complexities of an early stage research phase, we can identify just a few boxes that you should definitely be checking off:

  • Interview key stakeholders to find out their values, what they want their website to do, and who they think should be visiting it (you should also try and asses what kind of workflow might be possible when it comes to producing and maintaining content).
  • Carry out audience and market research, to find out who is actually engaging with the organisation, and what their website can really do.
  • Perform an audit on any existing content, internally and externally. (Don’t restrict yourself to the current website).

There’s a myriad of other research techniques you can adopt, but at the very least you need to gain a clear idea of the company, the audience, and the content.

One thing to note when performing a content audit it that looking into non-web content can lead to unearthing solid gold. By digging a little deeper, you can find articles and other material that your client wouldn't ever consider to publish, but which can easily be re-purposed to add huge amounts of value as part of your content strategy. Paula Land recently wrote a brilliant article on finding hidden gems through audits.


Mapping the Content

Once you have an idea of the business, the audience and the content possibilities; you can use simple content maps to work out the content that you will be including in your website. This is where the site-map begins to form its roots.

A content map is a really quick way to cross-reference goals with content, it helps you validate the existence of site content (washing away that famous ‘fluff’), and focus on using content to solve problems and answer questions.

Here’s an example of a content map for an oil company website:

webtuts-sitemap-image2

Content maps also help you to consider alternative ways of arranging content. This can be a good time to get your client, or different people from your own team involved in the process: discussing the various perspectives and considering different solutions. Different ways respond.

Since the outcome is quite visual, this can work well as a deliverable, or as a means to quickly communicate your rationale.


Forming Your Initial Site-Map

Now that you understand the content requirements, you might be thinking about logging into a shiny software package and setting yourself up with a coffee in a nice quiet corner … Not quite yet.

Before you go all lone wolf, it’s a good idea to get hands-on and sketch out the proposed content grouping on paper, or with post-it notes. Either way, you should do this with other people.

The beauty of this part of the process, and a good argument for staying out of technical software, is that this initial site-mapping can be very experimental, and therefore more accessible to different people in the project. You’re really just laying out the agreed content respectively, into a system that makes sense.

Here’s an example of how you might arrange the content for that same oil company:

webtuts-sitemap-image3

At this stage we’re looking to explore the connections between the agreed content. Exploring relationships between different categories of content, subjects, and most importantly the way people will navigate around the website.

This is a good point to call upon any user research data: analytics, SEO data, or user testing observations. If you’ve taken the time to develop some personas, they can be really useful as a means to cross reference content grouping with your early stage research. You’re essentially looking for search patterns and audience expectations. While this sounds all very technical, you’ll tend to find that common sense prevails in this part of the process.

Following this more playful approach, you can translate this into a more traditional site map:

webtuts-sitemap-image4

So, the Tools

You’ll notice that I haven’t mentioned any specific tools so far, and this is partly because there are literally thousands of site-mapping tools out there. Each tool has its ticks and crosses and at the end of the day, the platform you use is totally dependent on your workflow.

Here are a few of the most popular tools for building out your final site-map:

Illustrator or Photoshop can work as really flexible, tools when there is a single static presentation or report, while online services like Omnigraffle and Mindjet can work better when it comes to sharing and collaborating on site-maps. You also get more full-service tools like Powermapper and GatherContent which can bridge your site-mapping process to the next stage and help you to start collecting and developing the actual content and preparing your CMS.


Site-Maps Are Not Static

While I’ve clearly focused on creating a new site-map, much of same techniques can be adapted to visualise existing websites and look for ways to improve them. If you use this process as a starting point, the visual deliverables aren’t going to disappear, and you can use them to reevaluate your site on an ongoing basis. Things change; and so do their site-maps.

I hope this has been a useful insight into my idea of a better approach to planning a website, if you have different ways of working or developing a site-map with a client, I’d love to hear about this in the comments.

Advertisement