Navigation For Mega-Sites

Advertisement

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.

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?

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 BBC91, companies with diverse portfolios such as Microsoft2, government bodies, higher-education institutions and large charities that run many campaigns, such as the World Wildlife Fund3.

These websites:

  • 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

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

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.

Image showing navigation dominating page real estate4
While traditional navigational approaches, combined with breadcrumbs, can scale to accommodate mega-sites, they do so at the cost of ever-increasing real estate. Larger version5.

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

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.

An example of a site with confusing navigational labels6
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 version7.

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

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

I first heard of this approach in Russ Weakley’s talk about doing away with traditional navigation8 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

Another approach is to break the mega-site into a number of smaller more manageable micro-sites. This is the approach adopted by the BBC91.

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.

BBC web presences10
The BBC avoids being a mega-site by splitting its Web presence into a number of smaller websites, while maintaining consistency in navigation and design language. Larger version11.

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 Language12 (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

A third solution is the one adopted by Gov.uk13. 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.

Gov.uk website14
Gov.uk relies almost exclusively on breadcrumbs for navigation. Larger version15.

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.

It also translates well to mobile devices, which account for 45% of Gov.uk’s Web traffic16.

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

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.

Screenshot of the old BBC sports website17
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 version18.

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 Brighton19, 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

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.

An example of flyout breadcrumb navigation20
By adding flyout menus to the vertical breadcrumb navigation, you give users quick access to any sibling on any level of the website. Larger version21.

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

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.

(al)

Footnotes

  1. 1 http://bbc.co.uk
  2. 2 http://www.microsoft.com
  3. 3 http://worldwildlife.org
  4. 4 http://boagworld.com/wp-content/uploads/2013/02/unilever.jpg
  5. 5 http://boagworld.com/wp-content/uploads/2013/02/unilever.jpg
  6. 6 http://boagworld.com/wp-content/uploads/2013/03/uni-of-bath-670x508.jpg
  7. 7 http://boagworld.com/wp-content/uploads/2013/03/uni-of-bath-670x508.jpg
  8. 8 http://www.r2.co.nz/20060525/russ.mp3
  9. 9 http://bbc.co.uk
  10. 10 http://boagworld.com/wp-content/uploads/2013/03/bbc-670x972.jpg
  11. 11 http://boagworld.com/wp-content/uploads/2013/03/bbc-670x972.jpg
  12. 12 http://www.bbc.co.uk/gel
  13. 13 http://gov.uk
  14. 14 http://boagworld.com/wp-content/uploads/2013/03/gov-uk-670x422.jpg
  15. 15 http://boagworld.com/wp-content/uploads/2013/03/gov-uk-670x422.jpg
  16. 16 http://digital.cabinetoffice.gov.uk/2013/03/12/were-not-appy-not-appy-at-all/
  17. 17 http://boagworld.com/wp-content/uploads/2013/03/BBC-sports-old.jpg
  18. 18 http://boagworld.com/wp-content/uploads/2013/03/BBC-sports-old.jpg
  19. 19 http://brighton.ac.uk
  20. 20 http://boagworld.com/wp-content/uploads/2013/03/vertical-breadcrumb-nav.jpg
  21. 21 http://boagworld.com/wp-content/uploads/2013/03/vertical-breadcrumb-nav.jpg

↑ Back to topShare on Twitter

Paul Boag has been working with the web since 1994. He is now co-founder of the web design agency Headscape, where he works closely with clients to establish their web strategy. Paul is a prolific writer having written the Website Owners Manual, Building Websites for Return on Investment, Client Centric Web Design, Digital Adaptation and numerous articles for publications such as .net magazine, Smashing Magazine and the Web Designers Depot. Paul also speaks extensively on various aspects of web design both at conferences across the world and on his award winning Web design podcast boagworld.

Advertising
  1. 1

    Phil Vallender | Blend Marketing

    March 27, 2013 2:36 pm

    Great article – I find navigation and information architecture of large sites fascinating.

    Of the methods you review, I think that the micro-site approach is the most reliably scalable. Micro-sites can break larger sites down into manageable content areas. Most importantly, they can be simultaneously distinguished from and related to each other by careful use of graphic design.

    I don’t see breadcrumbs working as a large format navigation system on their own, but do think they are very powerful complement to traditional navigation formats.

    I’ll have a think as to what other navigation methods I can conceive for mega-sites!

    14
  2. 2

    Good article … but why no mention of mega menu? Like on msn or Mashable, where the menu expands as a full page width dropdown with clear breakdown of top level menu item ?

    5
  3. 5

    Good article. Another, slightly different, approach is to categorise secondary navigation options. E-commerce sites such as John Lewis use this to structure their products without providing a secondary category page to list them (E.g. Electricals/Sound & Vision/Televisions).

    1
  4. 6

    I’ve been very intrigued by Gov.uk’s approach to navigation and organization, and more generally the scope of their project (we’ll never see a project like that in the U.S.). Paul, I think you’ve summed up the very valuable difference in this approach:
    “Most of all, the emphasis on content, rather than navigation, appeals to me the most.”

    5
  5. 7

    Quick note about the mobile usage stat you quote for GOV.UK. The 45% is for just e-petitions not the content part of GOV.UK. The stat for GOV.UK was just above where you pulled your stat from:

    “In the run up to Christmas, GOV.UK saw around 20% of visits from mobile devices. Since Christmas this has jumped to nearly 25%”

    2
  6. 10

    I’m not sure about the no navigation approach. While it sounds nice for users who are tech savvy, the vast majority of users will be completely confused.

    Humans are visual creatures and by nature most of us require strong visual cues and direction to figure out how we can interact with whatever software/website is in front of us and I feel that doing away with it will cause an immediate drop in engaged users.

    I manage an e-commerce site that gets about 2-3 million page views a month and even with traditional navigation and breadcrumbs you’d be surprised how many people still get confused with how to navigate. The average person is still very tech illiterate and until that changes we unfortunately have to cater to the lowest common denominator. If we don’t the traffic goes to those who do :-/

    Good article by the way.

    9
    • 11

      I think your comment is backwards. Large menu’s that try to cover every page in an entire site can leave a non tech savvy person disoriented and confused. Pages can easily have similar menu names and become quite cumbersome as opposed to a really good search which is easy for any user to find what they are looking for (think google). The problem is, the search and tagging system has to be spot on and pages must be easily found.

      0
  7. 12

    Large-site navigation has been an issue we’ve wrestled with at the University of Nebraska-Lincoln for many years. We adapted a solution very similar to your hybrid approach and have found it to work quite well.

    For the entire site, only one navigation paradigm exists. It encompasses a mega-box approach for site navigation combined with breadcrumbs. The navigational elements are related to the current “micro-site”, and the breadcrumbs show the “micro-site” position in the tree (our approach to micro-site requires consistent UI/markup structure).

    The breadcrumbs also serve a functional role. Each breadcrumb is a link to a micro-site/page. When our user hovers the breadcrumb element, the navigation from the current page is replaced with the navigation from the micro-site/page found at the location in which the breadcrumb is pointing (a little AJAX/DOM parsing magic). Therefore, regardless how deep into the site a user is, she has access to entire site navigation without taking up extra room on the page. An example of this can be found at: http://admissions.unl.edu/discover/academics/research.aspx

    Touch interfaces do provide an issue, and honest’y we haven’t solved for these yet. Nonetheless, the combined navigation with the extra breadcrumb functionality has both tested well and has proven to be very helpful to our users over the past 4 years.

    1
    • 13

      Seth Meranda – I’m sorry, but your example is bad for usability. I think this article has some solutions that should be implemented for UNL. Props to Paul Boag!

      Stuff like: http://wdn.unl.edu/ is completely confusing to prospective and current students visiting the website. If you are an employee for the college, you should know where you need to find things. Don’t put that type of junk on the public facing website! Microsites are the answer – yes – but you are not giving an example of a micro-site – your “micro-sites” all live in the same hierarchy, use the same navigation menus, and have the same design.

      Also, your breadcrumbs and navigation links don’t always share the same titles. That is confusing!

      4
      • 14

        Thanks Dave for your insights. Your referenced site (http://wdn.unl.edu/) is not a site geared towards students, it is a site dedicated to the 300+ developers across our institution.

        W/r/t the breadcrumb & nav not sharing the same titles, I completely agree. It is something we update as we come across.

        0
    • 15

      Hi Seth. I have to agree with Dave. I applaud you for thinking outside the box, but your approach is rather confusing. It appears that you take a traditional layout approach with the placement of the top-nav and logo / name placement. Unfortunately the constant shift in “main” nav links (based on current position) , the change in logo title and no real visual indication of change beyond the subtle breadcrumbs, leaves me confused. I didn’t know where to click to find my way out once I started digging. When I did start to learn the process, I still found it a bit challenging to browse. Most of my attention was placed on learning the navigational process and less on the content. Should be the other way around.

      Please just consider this constructive criticism from peers.

      4
      • 16

        Thanks Brian, I appreciate the thoughts here.

        We’ve been giving a lot of thought to the titles: 1) for the institution and 2) for the current “site” (which is a college or department). The current juxtaposition does lean towards confusion, and is something we’ll be fixing.

        1
    • 17

      As a user and not a web designer I find it confusing and wonder why the page refreshes each time I click on anything (and I assumed I needed to click on the arrow to get it to pull down). It doesn’t give me a chance to even look at anything before it takes me somewhere else!

      It’s very confusing and makes me wonder if there is something wrong with the site or my browser. There’s too much information clumped together in too little space. Too many options and way to many pages loading before I got the hang of it and I can’t find the page I was looking at 2 minutes ago without using my history.

      The graphics are great and the colors are great though.

      I wish you the best. You have a decent start. Best to you.

      0
      • 18

        I’ve never seen the page refresh on hover, this is not expected/intended behavior. If you recall the page, I’d love to look into it.

        0
  8. 19

    I think an intelligent combination of traditional navigation elements can work pretty well. For example, limiting the primary (top) navigation to the top-most (parent) items, means a user always has a visual way to keep track of the major sub-sections of the site they’re viewing. A sidebar navigation that is limited to (and follows) the current context of the user allows for navigational depth without having to include every top level menu item. And finally, a breadcrumb is an excellent visual tool for users to keep track of where they are and how they got there.

    3
    • 20

      I agree with Jake on the combo method. We’re beginning to take on larger sites and recently implemented the combo.

      I do like the idea of microsites, as well. Not sure if USA Today’s sections (News, Life, Sports, etc.) would be considered a collection of microsites, but I kind of dig its structure: http://www.usatoday.com/. A lot happening, but I’m not overwhelmed. Anyhow, microsites are good because they immediately ask one of a few questions: Who are you / From what perspective will you be viewing this site (prospective student)? What are you interested in (finances)?

      Not a huge fan of gov.uk and the idea that you navigate by content. It seems there’s a lot more forced reading involved before getting what you want – ain’t nobody got time for that! Content is important and all, but a sound nav helps users access the content they believe is most important.

      1
  9. 21

    I would love to see an actual example of Russ Weakley’s concept. I’m having a hard time envisioning it as a good idea without seeing an example.

    2
  10. 23

    I like BBC’s idea of making micro sites.

    1
  11. 24

    I think the johnlewis.com site mentioned by Neal Griffiths is the best approach.
    It has a main navigation in the header (what is alway’s there).
    It shows the sub categories/levels from the selected main categorie.
    It have a breadcrumb navigation to follow back the navigation trace.So it brings you back to a point where you have seen more links you wanted to click.

    I think the combination is of the 3 is a logical choice.
    My experience with Fly out submenu’s, they never do what you want it to do.if move the mouse a little sloppy…. you have to start over again.
    Or they interact with the background to much that it starts to bug.

    1
    • 25

      This menu is typical of what’s called the “mega-menu”. I also agree that these provide a great overview, I employ this most of the time on large-ish sites for navigation. But for some reason the article writer commented earlier that he doesn’t see mega menu’s as a proper answer to the problem, which I suppose is true but they are still a good option for navigation. A lot of people reading the article may not know about mega-menu’s altogether which would be a shame.

      0
  12. 26

    I have to share my experience of navigation of my favourite e-shop. It is czech website without translation, though. But only for experience of the best navigation and user experience I recommend you to explore it: http://www.czc.cz/stolni-pc/produkty :) There is no way to get lost on the page. It’s soooo simple and brilliant. Hope I will create something similar someday…

    -3
  13. 27

    I am a fan of tabbed navigation (like this site: http://www.dearbornacademy.org/about and this one: http://www.gannacademy.org) both of which have hundreds of pages and could easily grow and still be easy to navigate. Tabs are easier for users than drop downs.

    Tabs help keep it clean and unfussy, but still allow for depth. Which is as it should be. Breadcrumbs and search and special tools (like a course catalog widget) also help.

    For our education clients we often advocate the use of tabbed navigation. While the the top level categories are usually straightforward for most institutions, the Level 2 categories are varied, numerous and always different. When the user clicks on a tab, they can see immediately many special points of differentiation at a glance. It’s good marketing, good UX, and good design.

    And, guess what, I first saw the genius of tabbed navs here! : )
    http://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/

    0
    • 28

      Tabs only work well if you have a very limited number of choices at the top level and the section titles are short but descriptive. They are not extensible past your nominal screen-size – which is a real problem for responsive sites.

      0
  14. 29

    Paul, we had the same problem on nidirect.gov.uk and took a similar approach to the old BBC Sport model you like, only showing siblings of the current page in the right nav when on article pages. Subsites/campaigns have their own nav and to date feedback has been positive. I’d appreciate your thoughts.

    0
  15. 30

    I think the navigation approach you adopt depends on the purpose and intended use of the site. In cases such as news and shopping sites you generally want to support and encourage discovery and sideways movement. Therefore the navigation needs to be more open and explicit, so that users can explore the hierarchy on a whim.

    In other cases users generally know exactly what they are after and if they land somewhere the likelihood is it contains all they seek, e.g. gov.co.uk. Here the breadcrumb-only or Russ Weakley’s no-navigation approaches are very effective because there is more room for the actual content. Furthermore, they are less likely to be randomly drawn to something else before the task of reading/whatever the page is complete just because they suddenly notice it in the navigation. This is sometimes a good reason for taking away general site navigation when someone gets into the checkout process on a shop site.

    In my experience, we, as designers, tend toward the discovery style navigation because it’s a safer bet: presenting something users might need and letting them opt to ignore it is less likely to frustrate them than something they want being missing. However, if you’re ever in doubt that the no-navigation approach really does work very well in certain circumstances then you only need to look at Google or Wikipedia. Just try to imagine what a more menu style navigation would do in those cases!

    Nice thought-provoking article, Paul!

    3
  16. 31

    I’ve personally seen major confusion and failings on sites that offer both a top navigation bar, or tabs AND a side navigation bar, particularly if the user can’t tell why or when the secondary vertical navigation bar is changing. The relationship between the two navigations isn’t always clear. I think it’s something that users can get their head around if they use the site for a while, but will they stick around if they get lost on their first visit?

    0
  17. 32

    My prior experience (which was mostly within exceptionally large companies on intranet sites) is facing the issue compounding the mega-site navigation, namely mega-content. Large corporate sites normally can only get that big with lots and lots of content and lots of content creators, each generating content merrily and, sadly, seldom taking the time to prune or tag it. When you add to that the politics of “My content needs more prominence above the fold than yours,” space for navigation (and the willingness to fight the political battles needed to even use card sort results in the organization of it) almost compels three- and four-level fly out menus. Naturally, along with the poor tagging and content maintenance, the end result is that search is seldom successful either. Favorite internal links can easily become the navigation of choice.

    3
  18. 33

    If I’m not mistaken this topic has been pretty well covered by the two smashing chapters in Book 1 and 3.

    The solutions provided there work very well for mega sites.

    0
  19. 34

    Microsoft has demonstrated a solution to this very problem within explorer (which boostrap has now borrowed from). It is an elegant combination of breadcrumbs and dropdown. Only drawback I can find from this method is users inability to recognize its full capability with regards to functionality (which is the actual dropdown).

    0
  20. 35

    Another example of a site with breadcrumbs that also operate as drop-downs showing siblings (and nephew pages too) can be seen at wowhead.com – it does have one advantage in that there is a pretty consistent hierarchy for all the content, something many mega-sites don’t have.

    http://www.wowhead.com/item=95022

    -2
  21. 36

    I’m currently redesigning a library website which covers many different media types and 100s of millions of items. The navigation has been an interesting exercise that I am enjoying exploring. One example of a different type of navigation that I have found as an inspiration is the Fold3 website (eg: http://www.fold3.com/image/#10985207 ) when viewing the page, a breadcrumb is available that also contains a contextually aware drop down structure – it is well worth playing around with as this is a very different type of breadcrumb!
    Cheers, Mossrocket.

    1
  22. 37

    I like your view son this topic, and I do agree; there is now one-size-fits-all-solutions to mega-site navigation. I work with a site comparable to BBC, and I like the Idea of removing as much traditional navigation as possible, and instead rely on good related content to take the user further. The content is what the user is interested in and a intriguing title is often better suited to trigger the users click, compared to going back to an menu and look through categories and site maps to find something interesting. Users on news-sites espeacially should be served good related content where ever they are.

    0
  23. 38

    This is an excellent point that you bring up with examples of problems with traditional navigation. I agree with what some others have said, I’m not a fan of the no navigation approach, however, there is no 1 button fix all solution.

    0
  24. 39

    Some interesting ideas from the UK!. Mmega site navigation is a challenge, for sure! Your preferred solution is something we have been doing for some time already, so not really a new idea for us… but I’m glad to hear someone else say it! AND I’m really glad you didn’t go Mega menu — I am dealing with one of those now and its very hard to manage and I have heard plenty of negatives about it form users… The KISS method really applies to navigation big time. I appreciate that you find an overall, simple main navigation important.. that is very reassuring!

    .

    0
  25. 40

    At the Department of Health in Victoria, Australia (health.vic.gov.au) we’ve lived with a microsite approach for over 10 years, similar to the BBC (and the Australian ABC) approach.

    We currently have 180+ and from a user perspective, they cause a lot of problems, chiefly that the sheer number and variation of microsites makes individual content pieces more or less undiscoverable other than via search. These problems have been compounded by diverse technologies and a devolved governance model.

    We’re redeveloping later this year and will be implementing a navigation model that’s inspired partly by the Guardian’s site (e.g. guardian.co.uk/football/football-league-blog) , in that it has a universal topic-based top nav supported by a beef-ed up breadcrumb that shows the path in the site hierarchy and also the sibling pages. Further down the page will be links to related content generated by tagging and resources drawn from content repositories.

    This will hopefully leave us lots of room for the content itself while supporting the user’s navigation requirements.

    0
    • 41

      I like the guardian breadcrumb idea, but I do find it interesting that on sites that have a good nav model can simultaneously drive you crazy with the way their page loads, the ‘jumpy camera’ style is so jarring I don’t want to stay for the content regardless of good nav.

      0
  26. 42

    Michael J. Williem

    April 19, 2013 9:18 am

    I always love how the BBC team worked their solutions to this issue and I think this is one of the best approach available. It takes more resources to manage the property but by the end of the day it’s all about the USER (like it or not). I personally would ask my clients to have a clear idea of what they want to create since I prefer to think of the solution by their objectives.

    Another reason why I love the BBC approach is most Mega Sites has more than 3 objectives at least, especially if it involves a lot of business units or departments. Micro sites are the best solution to come. Multi-entry-points for each of the objectives and context. The challenge is always to create a long red line that connects every digital properties as ONE.

    Just a thought from personal experiences. :)

    0
  27. 43

    Mega sites need to avoid exposing their inherent complexity to the user. A lot of the solutions on this page give the user the chance to skip from any page to any other, totally unrelated section. People don’t want to do that in my experience. Very few visitors to mega sites need or want a ‘broad overview’ of the site. They just want to do one thing, in one specific section. They’ll probably parachute straight into the right place from Google.

    Even when we run usability tests and ask people to perform unrelated tasks on our site one after the other (something that real users don’t actually do), then just return to the homepage between tasks.

    So my advice would always be to strip away as much navigation as possible without losing genuinely useful links to related content. This is especially true on mega sites.

    0
  28. 44

    Always enjoy Paul’s articles. For me it’s always been good to remind people that navigation is exactly that “navigation” and not “a list of every pages on your website.” Use data to see what users find most useful and most popular on your site (a combo of visits and search terms) and clear those paths for them with a few well-placed roadsigns. The rest can be left to a properly managed search feature on your website that allows users to sort by most-recent and by category.

    0
  29. 45

    I don’t spend much time designing large web sites, but I do work on large enterprise class web applications – typically thousands of screens, handling database transactions and workflow and all sorts of other fun stuff. These apps have big navigation systems and use different solutions. However, one thing I have found helpful is in how I frame the problem. I think of a navigation system as an application within an application. So, inside your big enterprise application there’s a navigation app whose entire job is to get the user to the right page and help the user figure out “where he is”. This navigation app is living symbiotically with the enterprise app (well, sometimes it’s more like a parasite than a symbiote).

    This helps me think about the problem differently: ok, I’ve got a list of a few thousand screens which are organized quasi-hierarchically (apps tend to be less hierarchical than web sites), what’s the best tool to use to find the right screen? If I know the name of the screen, searching is dead obvious. But what if I don’t? Should I use a tree? Menus? Mega menus? I can try out lots of different combinations of tools to find the one that works for my app.

    I’ve never tried carrying this frame of mind over to Mega web site design, but I wonder if you think it sounds like something that could be useful.

    0
  30. 46

    This is very useful article for me. I really like to read this article. I have a website designing company so it is very useful for me.

    0
  31. 47

    Well I think we can solve it by streamlining our navigation, We can group them together so the only obvious way is via those minimised navigation, this can then lead to other smaller microsites. This approach helps us to control user flow and gives more control.

    0
  32. 48

    Thanks for this great post. I guess when you want to handle a giant website, you must break it down in themes with a classical navigation. You want to orientate people not direct them to a particular page. Getting a second navigation to walk through a particular theme, but keep the same second navigation inside each theme like BBC is very effective to make your visitors feel home. Consistency is particularly enjoyable.

    0
  33. 49

    Regarding the vertical breadcrumb navigation on BBC you may want to check page 13 on this doc – http://instone.org/files/KEI-Breadcrumbs-IAS.pdf
    It did not work well for them. Cheers!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top