Menus and architecture

On this page:
Draft a blueprint | Build for your users | Test what you've got | The paradox of choice | A sample menu

1. Draft a blueprint

When a new website gets the green light, the first response is often: "Great! Let's start writing." That can sometimes work, but it's usually a better idea to plan your site out first – laying down the structure before the content, just as you'd draw a floorplan before building a house.

To do this, you need a list of all the bits and pieces of content you'll want on your site: event listings, HR policies, lab opening hours – absolutely everything.

Depending on the size of the site you need, this can be a fair bit of work, but we promise: it's worth it. And if you skip this step, and build your site without a plan, there's a good chance it'll look a lot like a house built without a blueprint.

Architecture is hierarchical

To go back to our house analogy, you don't just throw a building together all at once.  You need to follow a structural hierarchy: foundation first, then the supporting walls, and so on... Try building the roof before the walls, and you're going to have a bad day.

Similarly, once you know exactly what content will live on your site, you can start organizing it into a hierarchy called an "information architecture." For our purposes, that's just a fancy way of splitting your content into intuitive groups, sub-groups, sub-sub-groups and so on. These groups will become the sections, sub-sections, etc. of your site.

2. Build for your users (not for yourself)

Get to know your audiences

Before you build a site, you need to know who you're building it for. Who are your primary and secondary audiences? For large sites with multiple audiences, the audiences themselves can even provide the basis for your architecture’s top level. For example, a typical faculty's website might have these sections:

About us | Prospective students | Current students | Research | News & events | Contact

Dividing your architecture by audience also gives you a chance to tweak your messaging for different people. For example, undergraduate and graduate students likely want different information, so they may appreciate an admissions-oriented site that triages them right away and addresses their individual needs separately. You may also want a more promotional tone for externally targeted content, and a more informational one for your internal audiences.

Learn how your users think

This might sound odd, but it isn't all that important that these groups make sense to you.  What matters is that they make sense to your users. If they can't find your content, you may as well not be writing it.

For example, you may think about your faculty's services in terms of which unit provides them. That probably makes a lot of sense from, say, a budgetary perspective.  But your student-heavy audience doesn't care which unit does what -- and if they have to go to each unit's section of the site to find a complete list of services available to them, they'll likely either get frustrated, give up, or both.

For a fresh perspective, you may want to run a quick card-sorting exercise. In a nutshell, you take your list of content, write each of those items onto an individual card, and ask a focus group of your audience members to sort them into piles and sub-piles that make sense to them. With a little finessing, those piles can then become the basis of your site's new architecture.

3. Test what you've got

If you're overhauling an existing site, consider running a usability survey to see how your audiences use it now, where the bottlenecks are, and what they'd like to see improved. Ask what they look for most, how easy it is to find, and how easily they can understand it once they've found it.

A word of caution: audience input is invaluable, but while your users generally have a good idea of what's broken, they don't always know how to fix it. Make sure common sense prevails -- and when in doubt, give us a ring!

4. The paradox of choice

For each menu, sub-menu, etc., aim for a maximum of six to eight menu items. Research shows that our brains can generally process roughly 7±2 items at once. More than that, and we tend to get confused, miss things, or forget the first few items by the time we get to the last ones.

In the same vein, site editors are sometimes tempted to plaster their pages with links, so that everything is just one click away. But the paradox of choice dictates that these overwhelming options can paralyze visitors, and make your site all but unnavigable. Imagine standing in a grocery aisle, staring at 50 brands of dish soap. Where do you start?

A good menu should answer that question for you: not by removing choices, but by organizing them in a way that makes sense. Say you're a student visiting the Faculty of Zoology's website, and you want a list of the faculty's academic advisors. A clear path might be:

Home page —> Services for students —> Academic advising —> Meet our advisors

That's just three clicks, and each time the user selects an option, his next step is clear. Now imagine navigating a menu like this one:

Student services Advising Staff directory Resources
International students Contact us About advising About us
Undergraduate students Money matters Help! More services
What we do News & events Research Trouble with classes?

Granted, this second menu is terrible. But it illustrates the point: do you click on Advising, or Student Services? Staff directory, or Contact Us?

5. A (very simple) sample menu

If all goes well, your menu (or "information architecture") might look a bit like this when you're done:

Notice how, on this sample site, pathfinding is pretty simple. A Canadian grad student looking for information about courses has a clear path to his goal.

It's worth mentioning, too, that this is just a blueprint: a rough map of every page you plan to publish, and how they're organized in relation to each other. But like all our best-laid plans, this can (and should) shift and grow organically as needs change and new audiences arise.

Throughout that growth though, even as this blueprint goes more and more out of date over time, try to keep in mind the big-picture themes you used to build the site in the first place, and stick to them. This may help prevent what many McGill sites experience: a clear cut and fresh start, followed by months or years of unchecked growth in all directions. It isn't enough to build a site well; you've got to maintain it well too!