Designing the structure for a website is never a lockstep 1-2-3 process, and different designers will approach it in different ways.
It’s always good, however, to start with some knowledge. In The research phase in Chapter 3, we described how some basic user research (such as contextual inquiry, open card sorts, and tree-testing the existing site) can give us a head start.
If we’ve done the research, we are not starting with a blank slate:
We can now sketch out some new structures to test. Let’s take a look at the most common ways sites are organized, and some common tactics that can help us create our own trees.
The way we organize a site depends, obviously, on its content. But your site is probably similar to others already out there. Here are some of the most common ways that websites are structurally grouped:
When a site caters to several audiences, and the content is different for each, this is a popular choice. For example, a bank may divide its site into sections for personal banking, small business, large corporations, and so on.
Sometimes the role is age-based, such as this example from the NZ Ministry of Education:
Jakob Nielsen warns about the problems with audience-based navigation, but if done properly, it can be effective.
Grouping content by tasks may be the most common way to organize a website. It takes advantage of the fact that most users arrive with a specific task in mind:
Note that activity groups often resemble audiences and roles; sometimes it is just a question of labeling.
Topic-based navigation is often seen on larger websites, where the content varies widely and it’s critical to get the user to the right section before they can start their task.
Grouping content by internal parts of an organization (e.g. Human Resources, Finance, IT, etc.) is common in intranets, but is usually not a good idea for public websites (where site visitors may not understand (or care about) the organization’s internal structure).
On shopping sites, dividing the content by brand is sometimes used as primary navigation, but more often used in a secondary role or as an alternate way to filter:
Where content varies largely by region, it may be a good idea to divide content accordingly. However, this does assume the user knows the regions by name, and it also means grappling with geographical boundaries and content that does not fit into a specific region.
Some sites offer sections devoted to certain formats, such as documents (often PDFs), videos, or picture galleries.
This can make things hard to find, because a site visitor with a task in mind may not know which format the site has used for that information.
For example, if you’re at the Home Depot site looking for help on patching a roof, do you try “Project guides”, “How-to advice”, or “How-to videos”?
When you start creating a site tree, you will usually play with various kinds of top-level groups, probably trying some of the variations described above.
A very common tactic is to combine some of these schemes as first- and second-level headings. For example, you may use audiences as your primary navigation, then activities within each of the audience sections:
You may then decide to try replacing activities with, say, geography:
Another common tactic is to flip the primary and secondary navigation, to see if it fits the content better.
For example, the audience/activity tree that we tried earlier…
…could be flipped to become an activity>audience tree:
We may do the flip, think about it, and decide that it won’t work for our purposes (perhaps the content doesn’t fit as well, or we’re sure that it will be confusing for users).
But, if it looks reasonable, and we’re not sure how well it will work with users, it’s probably worth testing both versions in side-by-side tree tests.
When we create site trees, a common question is “Should we create a shallow tree with lots of headings at the same level, or a deep tree with fewer choices at each level?”
For example, here’s a tree designed as shallow and deep:
In most cases, it’s best to go with a shallower, wider tree because:
Note, though, that wide/shallow trees can cause problems if they’re too wide:
For more on this, check out Kathryn Whitenton’s excellent article on Flat vs. Deep Website Hierarchies.
If you’re working with a project team, you have an advantage in generating ideas for site trees – other people’s brains.
Different people have different backgrounds, different knowledge, and different biases, and if we share our IA research with them, they are likely to come up with new and useful ideas for our site structure.
When we’re working with a project team, we typically do the following:
For easy collaboration, we use a shared spreadsheet (e.g. Google Drive or equivalent) with:
Using a shared spreadsheet means that we don’t have to email spreadsheets to each other, and each person can “peek” at what others are doing to help them get going.
When we “rough out” a site tree, it means that we create a quick-and-dirty site structure in an hour or less.
The point of this is to do the minimum work to convey an idea to others, so we can then decide whether it’s worth fleshing out enough to test. We don’t want someone to spend an entire day creating a detailed site tree, only to have the team decide that they’re going a different direction.
To rough out a site tree:
Next: Picking candidates to test