How Much Navigation Can Responsive Patterns Hold?

Posted: 05 Aug 2013 05:30 AM PDT

How many levels of navigation and how many links to include at each level is something I consider with every design, but I’ve been thinking about it more than usual the last couple of weeks.

You might remember a recent post here about making tradeoffs in design, in which I referenced something Brad Frost said in an interview. As a reminder his response to a question about responsive navigation patterns suggested not needing 10 layers of navigation.

Since writing that post I’ve been thinking about navigation and wondering how many levels you really need and how many links at each level are reasonable. I also want to consider how many links and levels different responsive navigation patterns can accommodate

How Many Links and Levels Do You Really Need?

Brad was probably exaggerating a bit with the mention of 10 layers in order to make a point. I can’t recall coming across many sites where the navigation runs more than 4, maybe 5, levels deep. Perhaps a few go deeper, but not a lot.

When choosing a responsive pattern for navigation you’ll discover that there are patterns that can accommodate as many levels and links as you want.

Different sites have different needs and there’s no specific limit on how many links and levels of navigation you can have. However, I tend to follow the principle of choices, which suggests that fewer options increases the probability that one of them will be chosen. More navigational links does not necessarily make it easier to navigate a site.

There’s an interesting contradiction in navigation in that the less links you have at any one layer, the more layers you’ll probably end up with. Our goal should be to reduce both the number of layers and the number of links at each layer, but doing one makes it more difficult to do the other.

Ultimately there’s no single right way to organize content on a site. It depends on the site, how much content there is, how many different types of content there are, and the types of people who will visit. The only honest answer to the question posed by this section is your goal should be to have fewer levels of navigation and fewer links at each level.

Responsive Navigation Patterns

If we’re going to work to reduce how many levels of navigation we use and how many links we add to each, it would probably help to know something about responsive navigation patterns and how much navigation each can accommodate.

There are quite a few responsive navigation patterns in existence, but most can be classified in 3 ways based on how much space they use. If these patterns aren’t familiar, click on any of the links in this post that say both responsive and navigation or have a look at any of the sites at Media Queries for examples

Top of the screen — (eg. do nothing patterns and grid patterns) can handle a single level of links with 4 to 8 links max.
Full screen — (eg. footer, toggle, flip, and select menu patterns) can handle a couple of levels of links with about 12–15 links at each level.
Multiple screens — (eg. multi-toggle and off canvas patterns) can handle multiple levels of navigation with 12–15 links at each leve.l

Top of screen patterns don’t do much more than restyle navigation. The links sit at the top of the screen in a small amount of space. It’s the most restrictive pattern and can only accommodate a single level of navigational items.

My 4–8 estimate is an observation that 4 links across is about as many as can fit comfortably on the smallest screens and 2 rows of links is typically as many as you’d probably use. Grid patterns will sometimes use 3 or 4 rows, but when they do they tend to have only 2 columns. 8 links is a likely max, but 6 links is sometimes pushing it.

Full screen patterns take up the full screen with links as the name implies. They differ in how you access the navigation, but ultimately each can make use of the entire screen to present links.

In theory there’s no limit to how many links each can include. If you’re willing you can make visitors scroll through several screens of links. I think a more practical recommendation is to use no more than a single screen and keep everything visible. How many links that is, I’m not sure. I think less would be better, but I’d guess 12–15 is workable.

These patterns can show multiple levels of navigation by nesting the list of links presented. While you can probably go deeper, I’d think anything beyond 2 layers becomes difficult to use. Keep in mind you’re still only showing the same 12–15 links even if you’re showing multiple levels.

Multiple screen patterns make use of additional layers that are called from off-canvas. The trigger to call the first layer of navigation might differ, but once present additional screens come in from off canvas, with each new screen representing another level of navigation.

In theory these levels can continue to be called forever, but visitors would quickly get lost. I’d think the same rules would apply to these patterns as apply to navigational patterns on widescreen monitors. The limits have less to do with the capabilities of the pattern and more to do with what makes sense for people who will use the navigation.

This last group shows that responsive navigation doesn’t really limit how many layers of navigation or how many links you include at each layer. You can find a way to use the same amount of layers you use on desktop screens.

Thoughts for Organizing Content and Navigation

Again I would suggest that less is more where global navigation is concerned. That doesn’t mean your limit is 3 or 4 links, but it does mean you should try to find a way to reduce how much navigation you need.

How might you do that?

Reduce content to what’s absolutely necessary — Do you really need all those pages? Does each have a purpose?
Combine content into fewer pages when possible — Can the information on one page be included on another?
Organize content into related groups — Think of the people who will visit the site. What different information might they be looking for? What kinds of tasks might they want to complete?
Organize your content in multiple ways — Don’t settle on the first way you organize your information. Think through several different ways to organize everything and if possible test on real people.
Use cross systems of organization where necessary — For examples categories and tags can both be used to place content under two systems of organization.
Place outlier content in a utility group — Some pages are important, but may not fit into any of the related themes you create. For example login, contact, and legal pages might work best in a separate small utility menu.
Build a sitemap — Build either an html or xml sitemap and link to it from every page of your site. Here you can show every level and link in your navigation on a single page or 2 levels of pages depending on how much content you have.

I generally prefer as few links as possible on the first level of global navigation. This requires fewer groups of related pages. I aim for no more than 6 where possible. I’m not a big fan of drop down menus and prefer each top level link take you to a distinct section that includes its own submenu.

The structure silos content into sections, which possibly has some search engine benefits, but more importantly is relatively easy for people to understand and find their way around the site. It quickly gets them to the right general location before presenting more detailed options.

It seems reasonable to think the deeper someone gets into this structure, the stronger the information scent and the more committed they are to making a choice. The deeper in the site, the more links you can include at each submenu as more options aren’t the same barrier to choice as they are at the top of the structure.

Accordion patterns or nested links in the submenu can be used to indicate an additional level of navigation below the submenu. Pages deeper into the hierarchy than listed on the submenu can usually be linked to in-content. This won’t necessarily work for all sites, but I’ve found it works well for many.

Summary

There’s no absolute right way to create easy to use navigation, but I think the general guideline to have fewer links, particularly at the top level of global navigation is a good one to follow. As people get deeper into sites you can offer them more, but at the top keep it as minimal as you reasonably can.

Instead of trying to show many levels of navigation all at once, hold off on showing sub-levels until someone has clicked into a section of your site. Showing every page across the site in your global navigation is overwhelming. Get people deeper into the site quickly and then present more options.

When choosing a responsive pattern for navigation you’ll discover that there are patterns that can accommodate as many levels and links as you want to use. The real limit on both is how usable that many levels and links will be. I agree with Brad about not needing 10 layers of navigation, but if you really need that many, there’s a responsive pattern that can handle it.

The post How Much Navigation Can Responsive Patterns Hold? appeared first on Vanseo Design.