Designing for mega-sites

How do you design navigation for a site ten or more levels deep, made up of many thousands of web pages and organised into multiple sub-sites? This is the challenge of designing for mega-sites.

Designing navigation for most websites is a bit of a no-brainer. You show the parent, the siblings and children of the current page. Job done.

However, This model quickly falls apart when you are designing for mega-sites.

Organisations that often have mega-sites are institutions like the BBC, companies with diverse portfolios like Microsoft, Government bodies, higher education institutions and large charities that run many campaigns (like the World Wildlife Fund).

Some of the navigational challenges they face include:

  • Each level can have many siblings making for very long navigational lists.
  • Beyond about three levels the navigation starts to take up a lot of page real estate.
  • On deeper pages the navigation needs to be supported by breadcrumbs so users don’t get lost.
  • Users deep linking into the site often find it hard to orientate themselves.
  • Users arriving on a sub-site can be confused by navigation relating to the mega-site and not their current context.

The list could go on.

Image showing navigation dominating page real estate
Although traditional navigational approaches, combined with breadcrumbs can scale to accommodate mega-sites, they do so at the cost of page real estate. Look how little space is left for content on the Unilever site.

These are problems that I have been forced to face almost daily at Headscape. The majority of work we do are mega-sites and so I have spent long hours considering the different options.

In my latest post for Smashing Magazine, I lay out these options and discuss their pros and cons. I look at what can be learned from sites like the BBC or gov.uk and even propose a new approach you probably haven’t considered before.

If you are responsible for, or work, on a mega-site then I highly recommend checking out this post.

Read my Smashing Magazine post on mega-site navigation

“Fat Man” image courtesy of Bigstock.com

Headscape

Boagworld