Navigation patterns for ten common types of websites

Navigation is one of the most important aspects of any website. Without good navigation, a site becomes useless to visitors. They can’t find the information they need, and then seek out competing sites instead. It’s vital that your sites be easy to navigate if you want to be a successful designer.

iBut there are no one-size-fits-all solutions to navigation. What works great on a news site might not work well for a personal site. Something that’s incredibly user-friendly on a blog might be frustrating on an e-commerce site.

Below are ten common types of sites, with suggestions for the kinds of navigation patterns that work well for each one.

There are also examples, to give you a better idea of what we’re talking about. Feel free to share more great examples in the comments!

All sites

There are certain navigation patterns that work on virtually all sites. Rather than re-hashing the same information in each of the categories below, I’ll just include them here.

The first pattern is tabbed navigation. Tabs are perfectly suited for navigation, because psychologically they remind visitors of paper tabs, and navigating to a new section of a notebook or binder, something that buttons or plain text links don’t do. Tabs are almost always the preferred method of styling your main navigation links, though of course they work best when there’s a limited number of links in a menu.

The second pattern is header navigation. If your website has a header (and most websites do), then header navigation is a good idea. Visitors are accustomed to looking at the header for navigation links. This pre-determined behavior makes it easy for you to make your website more user-friendly by locating your navigation in or near the header.

The final pattern that applies to virtually all sites is footer navigation. Many users (though not all) will look to the footer for a link if they can’t find what they’re looking for in your other navigation. Many basic pages are often linked from a footer, including “about”, “contact”, and “sitemap” links, whether they’re linked elsewhere in the navigation or not.

1. Blogs

Blogs generally have a large volume of content, in reverse-chronological order. This presents both a logical framework for your navigation, as well as some unique challenges, depending on the type of blog.

Most blogs will use a combination of pagination (or continuous scrolling), an archive page, sidebar navigation for categories and/or tags, and possibly header and footer navigation as well. It’s important to think through exactly how your visitors are likely to want to access the content on your blog.

For example, a personal blog might not need category or tag navigation outside of links in the meta information for each post. In these cases, you want visitors to access content in reverse-chronological order, rather than jumping around by subject matter. A topic blog, on the other hand, needs to have category and tag navigation, because visitors are likely looking for information on specific subjects within the overall topic.

At a bare minimum, blogs should include navigation for moving chronologically through the content (either pagination, next/previous links, or continuous scrolling), as well as header or sidebar navigation for specific pages outside the main blog page.

Topic (and sometimes corporate) blogs should also include category or tag menus in their navigation, either in the header or sidebar. Particularly large blogs should also consider implementing a search function, to make it easier for users to quickly find exactly what they’re looking for. Just make sure the search function works as intended, and really does bring up all relevant results.

Ecoki, below, includes top-level categories in their header navigation, with navigation to important pages in a secondary header navigation bar. It’s an effective layout that clearly places emphasis on the most-used links.

2. News sites

News sites are similar to blogs, in that they generally present stories in reverse-chronological order. News sites are often highly categorized, and have more complex information architecture than many other kinds of sites. Because of this, their navigation patterns are often more complex.

The key is not making the navigation more complicated than it needs to be. Drop-down and fly-out menus are both good ways to deal with larger menus without cluttering up the page. If you look at the larger news sites (like Google News, for example, below), they break down the news into broad categories like Politics, Local, World, Sports, Entertainment, etc. Which categories you use will depend on whether the site is a general news site or a topical news site.

Tags can also improve navigation substantially. By tagging each story, it makes it easy for users to find related stories, without creating a complicated or bloated category structure. It’s a good idea to not only include tag links in each article, but also to include a list of tags or a tag cloud somewhere (only including popular tags can be a good idea for sites with hundreds of tags).

Linking inline within articles improves user experience greatly. Many of the larger news sites do this, allowing users to immediately gain access to all articles on a topic. It’s very similar to including tags, but rather than a list at the beginning or end of the article, the links are within the text itself.

3. E-commerce sites

E-commerce sites are sometimes incredibly complex and have hundreds (or thousands) of individual pages for products and other information. For this reason, the way that navigation is handled is vital to both the user experience and the bottom line. Without excellent navigational structure, visitors to an e-commerce site will have a more difficult time finding the products they’re looking for, which means there’s a good chance they’ll turn to competitors out of frustration.

The main thing every e-commerce site with more than a handful of products needs is a good search system. Assisted search is key, where users can not only search by keyword, but also refine their results based on things like price, size, category, or other metrics (depending on your specific products).

Category navigation is also a must, for users who want to browse. Depending on whether you use sub-categories, breadcrumb navigation may also be a good idea (if your site is more than two or three levels deep, breadcrumbs can improve usability).

Giving your visitors multiple ways to find the products they want is a great way to increase sales, but make sure that each method is showing all relevant products. If visitors find that searching returns one set of products while browsing returns a different set, it’s only going to lead to frustration.

The Blik website, below, is a great example of a site that uses a sidebar with filters to refine product results. It’s the guided search pattern, without the appearance of search.

4. Informational and reference sites

Reference sites generally have one thing in common: a ton of information across a lot of pages. This makes it tough to create any kind of standard menu. Categories can be helpful for browsing, but when you start to get to the point of having thousands, tens of thousands, or even millions of pages (like Wikipedia), the category system breaks down. Plus, most people go to reference sites for a specific purpose, and not to browse, making categories not particularly helpful.

It’s vital that reference sites have excellent search capabilities. Guided search, much like those used on e-commerce sites can be useful, too, especially if used in conjunction with a good tagging and category organization.

It’s obvious that Reference.com, below, wants visitors to use search to find whatever they’re looking for, as it’s placed prominently at the top of the screen.

Pages on a reference site should also make use of inline linking to related information. This makes it easy for visitors to find all the material they need to understand what they’re reading, without having to perform multiple searches. The need for inline linking is why wiki platforms generally have a standard syntax for linking within the text of an article, so that content creators don’t have to spend the time to look up the relevant links.

Wikipedia, below, and other wiki sites make good use of inline linking for adding context to articles.

5. Corporate sites

There’s a huge variety in the structure and size of corporate sites. Some are simply to entice new customers. Others are created to keep current customers informed. Still others must serve as both an enticement to new customers, a news portal for existing customers, and the front-end for a company intranet.

Regardless of the purpose of the corporate site, clear-cut navigation is key. You don’t want users to have to spend time looking for your navigation or trying to figure out which link to click on to get where they need to go. Make sure that links are arranged logically, that they each have an easy-to-understand meaning, and that they’re located in logical places (the header and sidebar are your friends here).

All of the sites below show that just because navigation is located in the most common places, doesn’t mean it can’t be creative. As long as it’s usable and easy to find, feel free to create something unique.

In sites larger than a dozen or so pages, it’s a good idea to include search functionality. It’s also a good idea to include a sitemap to make it easy for users who are having trouble with your regular navigation to find exactly what they’re looking for.

6. Community or social network sites

Generally with big social networking sites, search is the primary means of navigation. It makes sense when there are millions (or even billions) of pages on the site. Standard menu-based navigation is pretty much pointless when dealing with that volume of information.

So search takes care of overall site navigation. But that still leaves member profile pages. Here, it’s important that there’s consistency across the entire site. Regardless of whether your site allows members to customize their profiles or not, it’s imperative that links be located in the same place across every page.

Take Facebook, for example: every member profile and every page has links to things like photos and info on the left-hand side. Notifications, messages, and friend requests are always linked at the top, as are links to account settings and to log out. A standard top navigation bar like that, that always links to the visitor’s account and information has become a mainstay of well-designed social networks.

Inline links should also be consistent. For example, any time a username shows up as a link, it should link to that user’s profile, regardless of what content it’s associated with. Think through which information should logically link to which pages, and then make sure it’s consistent regardless of where those links show up.

7. Event sites

Event sites are generally simple and don’t have a huge number of pages. But it’s important to think about how your visitors will use the site. It’s most likely they’ll want to do one of the following: sign up for the event, see who’s attending or speaking, get information about attending (including costs and things like location and area hotels), and see the schedule for the event.

Signing up for the event, even if it’s a free event, should be looked at as an e-commerce transaction. For that reason, you want a prominent call to action button for signups.

Standard header and/or sidebar navigation is an excellent choice for links to other pages. Local navigation may also be necessary if you’re going to include individual pages for things like specific workshops or speakers. Drop-down or fly-out menus can work in this case only if you have a limited number of sub-links. Otherwise, you’re better off to use sub-navigation in a sidebar or within a main page.

The Hull Digital Live 10 website has a concise, easy-to-use header navigation that makes it easy to find exactly what a visitor might be looking for.

Tip: If your event site is going to include an attendees area or intranet, look to the suggestions for navigation on a social network or community site for navigation guidelines.

8. Review sites

Review sites are generally used in two ways. The first is when users are interested in a specific product and want to see reviews for that item. In this case, an excellent search function is the best navigation. It lets users quickly access exactly the product they’re looking for.

The second use is to research certain types of products. For this use, search is still a valuable navigation method. But categories and guided search are just as important. Allowing users to browse reviews by category and sub-category lets them find a variety of products that fit their needs. By further letting them refine those results based on things like price or brand allows for even better user experience.

Blippr, below, includes both category navigation (with drop-downs for sub-navigation) and a prominent search bar.

9. Personal sites

Personal sites are really the wild-cards of the web design world. You can use pretty much any kind of navigational pattern you want. Mainstays like header and sidebar navigation are still going to be the most usable, but there’s nothing wrong with doing something completely different.

Personal sites should be a reflection of the site owner. If something unexpected fits within the personality of the site, then by all means: go for it. It can still be a good idea to include a sitemap link somewhere, though, if you’re using non-standard navigation, to make it easy for visitors who don’t “get it” to find what they’re looking for.

Daniel Mall’s portfolio page has one of the most unique navigation patterns I’ve seen. It’s easy to use while still being very different from the norm.

10. Galleries

Image galleries and portfolio sites should generally use a combination of standard header or sidebar navigation, tagging, and categories. Allowing visitors to narrow the images being displayed based on a tag or category is important for good user experience, especially as the volume of images grows.

Pagination is also going to be vital for larger sites. Continuous scroll can seem like a good idea, but since galleries and portfolio sites, by their very nature, are filled with media, continuous scroll can end up using a lot of system resources. I’d recommend against it for any site with more than a few dozen images (though on smaller gallery and portfolio sites it can be a really nice touch).

Minimal Exhibit uses categories, search, and pagination.

The take-away

If there’s one navigation concept that is an absolute must regardless of what kind of site you’re designing, it’s this: consistency!

You can get away with most logical navigation choices as long as it’s consistent across your entire site. Don’t start out with sidebar navigation for half your site, and header navigation for the other half, without any logical reason for doing so. If the home link is always in the upper left, then make sure it stays in the upper left. This applies to every element of your navigation, and becomes exponentially more important as the size of the site increases.

Other than consistency, the most important thing to do when designing your navigation patterns is to think about how visitors are actually going to use your site. Don’t be afraid of A/B or multivariate testing to find out if your navigation patterns are actually working the way they should.

Regardless of how cool or new your navigation is, if it doesn’t perform it’s basic function of allowing visitors to move from one area of your site to another in the way they want to, your navigation has failed.

Feel free to share examples of great navigation patterns in action in the comments below! Also let us know if you have any other tips for suitable navigation patterns for specific types of sites.

Cameron Chapman

Cameron Chapman is a freelance writer and designer from New England. You can visit her site or follow her on Twitter.