For most websites, navigation is not particularly challenging. A primary navigation bar, supported by sub-navigation, is often enough.
Typically, sub-navigation displays the parent, siblings and children of the current page. A persistent primary navigation bar shows top-level pages, allowing users to move between sections.
Further Reading on SmashingMag: Link
- Responsive Navigation On Complex Websites1
- Breadcrumbs In Web Design: Examples And Best Practices2
- Responsive Upscaling: Large-Screen E-Commerce Design3
- Responsive Web Design: What It Is And How To Use It4
However, there is one class of website for which this traditional form of navigation falls short. It is what I refer to as a “mega-site”.
What Is A Mega-Site? Link
A mega-site is typically owned by a large organization that encompasses a broad range of services or products. The organization also often supports a diverse user base.
Organizations with mega-sites include institutions such as the BBC135, companies with diverse portfolios such as Microsoft6, government bodies, higher-education institutions and large charities that run many campaigns, such as the World Wildlife Fund7.
- are extremely large,
- are many levels deep,
- are made up of many micro-websites and subsections,
- cater to many audiences,
- have multiple entry points.
Websites of this size and complexity bring some unique navigational challenges.
The Challenges Of Navigation On Mega-Sites Link
At our company, we do a lot of work on mega-sites, and they can prove to be particularly challenging, especially when trying to use traditional navigation.
Traditional Navigation Cannot Support Depth Link
The deeper the website, the more that traditional navigation struggles. Navigation can comfortably accommodate three levels; beyond that, one of two things happens. Either the navigation expands to the point where more screen real estate is dedicated to navigation than to content (a problem made worse by the sheer number of pages on a mega-site), or higher pages in the information architecture no longer appear in the navigation.
In the latter case, if the user is deep within the website, they will lose the context of where they are because they are not seeing where the current page fits in the website’s structure.
The latter problem can be partially mitigated by well-implemented breadcrumbs. However, this is not the only issue with traditional navigation.
Traditional Navigation Cannot Support Multiple Entry Points Link
Traditional navigation can confuse users who enter the website via a micro-site or subsection.
Take a student who is considering attending a university for post-graduate studies. This person is probably more interested in a particular faculty or school than in the institution as a whole. They could, therefore, very well enter the website at that level, rather than at the university’s home page.
Another example would be a single mother wanting to know about child benefits. They are more likely to arrive on the benefits subsite than on the government’s home page. In such situations, the user’s focus is on their current context (i.e. post-graduate studies or child benefits). They are not immediately interested in the broader mega-site.
Unfortunately, traditional primary and secondary navigation exposes the user to this broader context, whether they want it or not.
Does a section labelled “Research” on a university’s page refer to the entire university or just the school being viewed? What about when the same label appears twice but goes to two separate places? Larger version11.
To make matters worse, the current context can actually alter the user’s perception of the navigation items. For example, would our post-graduate student think that a link labelled “About us” is about the school in question or about the larger institution. In some extreme cases, you can even find the same navigation labels being used for both the current context and the broader institution (for example, information about the university and about the school might both be labelled “About us” on the same page).
How, then, can we solve the navigation problems of mega-sites?
Navigation Solutions Link
As with all things, there is no perfect solution. However, there are solutions that are a step forward from navigation better suited to small websites. The first of these solutions is the most radical.
Get Rid of Navigation Entirely Link
I first heard of this approach in Russ Weakley’s talk about doing away with traditional navigation12 back in 2006. It rejects the idea of imposing a navigational structure upon users, instead allowing them to find their own path through the website.
This is achieved by making each Web page a standalone document and tagging it with appropriate meta data. Users can then find pages through a combination of search and navigating by tags. Pulling in links to related documents based on the meta data associated with each page would also be possible.
This approach has several advantages:
- It supports a website of limitless size.
- It is ideally suited to users who come to the website from a deep link.
- It allows for a much more dynamic relationship between pages and easily accommodates pages being added and removed.
Of course, it is not without its challenges. While individual sections of the website could still have a landing page (for example,
section.acme.com), the business may well struggle with the idea of not having a specific website to manage. More importantly, this approach relies heavily on having well-tagged documents and powerful search functionality, both of which are hard to achieve with a mega-site.
That said, it is an option, and one that shouldn’t be quickly dismissed.
Split the Website Into Smaller Micro-Sites Link
Instead of treating its Web presence as a single entity, the BBC has broken it down into subsites, such as news, sports, TV, radio and so on. Each website has its own navigation and thus avoids the problems associated with mega-sites.
The way the BBC avoids a disjointed experience for users who move between micro-sites is to ensure consistency in top-level navigation and in the user interface.
Although the BBC’s micro-sites do vary in appearance, they make use of the same primary navigation, and also have a consistent design language for things like typography, layout and modules. This language, defined on the BBC’s Global Experience Language16 (GEL) website, is consistent enough to ensure a stable user experience yet flexible enough to cater to different audiences and subject matter.
It is a fine line to walk. Make each micro-site too different and users will become confused by changes in the UI. Make them too similar and users will be thrown off upon finding that the website does not have a single navigational structure.
Use a Breadcrumb-Driven Approach Link
A third solution is the one adopted by Gov.uk17. It does away with dedicated areas for navigation, and instead uses the page’s content to link to its children. It then uses breadcrumbs to help the user identify where they are within the navigational hierarchy and to move back up the tree when needed.
The approach has many advantages. For a start, it minimizes the space dedicated to navigation, while at the same time allowing for much more detailed descriptions of each child. In that sense, it is the simplest, cleanest and easiest to understand of the approaches.
The prominent breadcrumbs make clear to the user where they are on the website, while in-page navigation to child pages makes the next step obvious. Most of all, the emphasis on content, rather than navigation, appeals to me the most.
Unfortunately, it does have its downsides.
By relying entirely on breadcrumbs and in-page links to children, the user has little context of their current position. They are unaware of the siblings of the current page and of the overall shape of the website (for example, they are unaware of the top-level sections).
This is not a problem if the user is trying to complete a specific task and the website has catered to that task by bringing all content related to it in a single place. However, when a user is in general research mode or when the content related to the task is spread across multiple pages, this approach can prove frustrating.
The frustration is caused by the breadcrumb navigation requiring the user to navigate up and down the website’s structure. There is no way to enable jumping between sections.
Fortunately, there is a hybrid approach, which uses breadcrumbs as the primary navigational tool, but augmented with more traditional navigation.
My Preferred Solution Link
My preferred solution is inspired by the navigational approach used by BBC Sports before GEL was introduced.
Instead of running them horizontally, the BBC flipped the traditional breadcrumbs vertically. At the end of each breadcrumb list, the current page also showed its children. When you reached the bottom of the tree, the navigation would continue to display the siblings of the current page, instead of its children.
The old BBC Sports website used vertical breadcrumbs as the primary navigation tool. When the user entered a section, such as football, all other sports (i.e. the siblings) would be removed, focusing the user on the subject at hand. Larger version22.
This approach grouped all navigation together in a single place, gave the user a clear sense of their location and reduced the space dedicated to navigation. Yet, it still suffered from the problems of Gov.uk.
When working on the University of Brighton23, we proposed BBC Sports’ approach, but added one important thing. We suggested keeping a consistent top-level navigation bar. While this adds more navigation to the page, it gives the user an instant overview of the structure of the website. This enables users who require information from multiple sections (say, a prospective student researching courses as well as accommodation) to jump quickly between those sections.
In many cases, this is enough to create a simple yet powerful user experience. However, it does not address the need to be able to see the siblings of the current page.
Showing Siblings While Using Breadcrumb Navigation Link
So far, I have considered two possible solutions to this issue.
One works on the assumption that siblings often have a relationship with each other; they are part of the same story, if you will. On that basis, the simple addition of “next” and “previous” buttons (such as you find on many blogs) might be enough of a solution. Users could then move between siblings with the single click of a button.
An alternative approach would be to make each level of the breadcrumb navigation a flyout menu, thereby exposing the siblings of that level. This would enable the user to jump to any sibling on any level of the website and potentially do away with the need for a separate primary navigation bar.
This could work whether you use vertical breadcrumb navigation or traditional horizontal breadcrumbs.
That said, I haven’t tested this approach, and some will have concerns about touch devices.
More Ideas Needed Link
As you can see, the issue of navigation on mega-sites is a thorny one, and there does not seem to be a single obvious solution. One of the primary reasons for writing this post is to open a discussion on the subject and hopefully encourage the exploration of some alternative approaches.
As a result, I would really appreciate your thoughts in the comments section and any examples of alternative navigational approaches you have found.
- 1 https://www.smashingmagazine.com/2013/09/responsive-navigation-on-complex-websites/
- 2 https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/
- 3 https://www.smashingmagazine.com/2015/08/responsive-upscaling-large-screen-e-commerce-design/
- 4 https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
- 5 http://bbc.co.uk
- 6 http://www.microsoft.com
- 7 http://worldwildlife.org
- 8 http://boagworld.com/wp-content/uploads/2013/02/unilever.jpg
- 9 http://boagworld.com/wp-content/uploads/2013/02/unilever.jpg
- 10 http://boagworld.com/wp-content/uploads/2013/03/uni-of-bath-670x508.jpg
- 11 http://boagworld.com/wp-content/uploads/2013/03/uni-of-bath-670x508.jpg
- 12 http://www.r2.co.nz/20060525/russ.mp3
- 13 http://bbc.co.uk
- 14 http://boagworld.com/wp-content/uploads/2013/03/bbc-670x972.jpg
- 15 http://boagworld.com/wp-content/uploads/2013/03/bbc-670x972.jpg
- 16 http://www.bbc.co.uk/gel
- 17 http://gov.uk
- 18 http://boagworld.com/wp-content/uploads/2013/03/gov-uk-670x422.jpg
- 19 http://boagworld.com/wp-content/uploads/2013/03/gov-uk-670x422.jpg
- 20 http://digital.cabinetoffice.gov.uk/2013/03/12/were-not-appy-not-appy-at-all/
- 21 http://boagworld.com/wp-content/uploads/2013/03/BBC-sports-old.jpg
- 22 http://boagworld.com/wp-content/uploads/2013/03/BBC-sports-old.jpg
- 23 http://brighton.ac.uk
- 24 http://boagworld.com/wp-content/uploads/2013/03/vertical-breadcrumb-nav.jpg
- 25 http://boagworld.com/wp-content/uploads/2013/03/vertical-breadcrumb-nav.jpg