Navigation patterns of museum websites: Part 1 Desktop

Summary: In this article we’ll look at how some museums are approaching the design and organisation of their navigation on desktop.

A collection of museum homepages
A collection of museum homepages

Museums are often large, amorphous organisations. When designing a museum website this poses a challenge for information architecture and the design of navigation. With their strong physical location, the job of a museum’s website is to prepare visitors for that physical space so they can have the best experience possible. If only that was where the complexity ended: As organisations, museums tend to do a lot of behind-the-scenes work, often for specialist audiences; they run e-commerce sections of their site; sell tickets just like theatres or cinemas do; run programmes of events that don’t fit neatly into single categories; the list goes on. To help a user navigate all this easily, by reducing complexity whilst balancing the internal needs of stakeholders and specialists is no easy task.

This article focuses on navigation patterns used by some well-known museums and galleries and provides some critique on their attempts to solve their individual problems. For the purposes of this article we’ll only look at desktop designs. We’ll follow-up with a dedicated list of mobile patterns soon.

Single tier menu

The V&A’s homepage
The V&A’s homepage
V&A
The Wellcome Collection’s homepage
The Wellcome Collection’s homepage
Wellcome Collection

V&A have done two things to create this simplicity

  1. The work of navigating to deeper sections of the site is done on the individual landing pages of each section. This makes most sense on pages like What’s On where users are likely to want to filter the listing. On other sections like Join & Support, users may need to work a little harder to find the right links on the page.
  2. The footer houses the depth of the site. The V&A is a large and complex organisation doing lots of varied work, most of which is only relevant to small minority of users.
The V&A’s footer
The V&A’s footer
V&A Footer

The Wellcome collection have kept their navigation simple by creating a landing page to house their varied work. Titled ‘What we do’, this landing page is simply a way to navigate to all the other areas of the site that are perhaps not a priority for the majority of visitors.

Two tier menu

Getty Museum homepage
Getty Museum homepage
Getty
Somerset House homepage
Somerset House homepage
Somerset House
The Hepworth Wakefield homepage
The Hepworth Wakefield homepage
The Hepworth Wakefield

The Getty stands out as their upper tier houses links to other parts of their organisation in addition to common utility links like ‘Support us’. It’s an interesting way to manage a multifaceted institution and not an uncommon problem for museums (Tate handle the problem of multiple locations well on a single site, V&A opt to have separate sites for Museum of Childhood and V&A Dundee).

This pattern establishes a hierarchy of importance between the two tiers. Users are familiar with finding different types of links in certain places. Logos are expect to be top left and links like ‘sign in’, ‘my account’ and search are expected to be top right. In that respect, the two tier menu conforms to this pattern and allows for more links whilst maintaining visual minimalism in the main menu. It’s an effective method of managing the visual noise that having more than five links begins to create.

Drop-down mega menu

For instance, is the main menu link a link in its own right or just a way to access the dropdown menu? And how is it interacted with on touch devices where there is no hover?

Barbican homepage with drop-down mega menu open
Barbican homepage with drop-down mega menu open
Barbican
The Royal Academy of Arts homepage with drop-down mega menu open
The Royal Academy of Arts homepage with drop-down mega menu open
Royal Academy of Arts

Both the Barbican and Royal Academy of Arts (RA) make use of the space afforded in their mega menus by including highlights or featured content. In our research with the RA we found that users made use of the links in the drop-down menu to move towards their intended destination more quickly. Drop-down mega menus like these are effective at helping users navigate to deeper content quickly.

Hamburger menu

The National Gallery homepage
The National Gallery homepage
The National Gallery
The Design Museum homepage
The Design Museum homepage
The Design Museum

Once revealed, the main menus of both the Design Museum and The National Gallery have relatively few links. It seems that the hamburger pattern is used purely for aesthetic reasons.

On both sites it’s possible to navigate to most of the main links from the content on the homepage; the homepages sort of become giant menus. Whether this is a result of their decision to use a hamburger menu or not is unclear.

Overflow menu

This is similar to the two tier menu in that it creates a primary and secondary hierarchy and no doubt much consideration has been taken to determine which links made it out of the hidden category. It seems neither of these sites totally solve all their problems though.

The Science Museum homepage
The Science Museum homepage
Science Museum
Dulwich Picture Gallery homepage
Dulwich Picture Gallery homepage
Dulwich Picture Gallery
The Broad homepage
The Broad homepage
The Broad

The Science Museum weirdly titles their overflow link ‘Menu’, and then in the dropdown repeats the main links alongside additional links.

Dulwich Picture Gallery use a drop-down mega menu for each of their main links. They use the same pattern on the ‘More’ link but it has a downward pointing arrow that suggests it might behave differently to the others.

The Broad suffers from the abstract hamburger icon issues discussed in the aforementioned NNGroup article.

Other approaches

Rijks Museum homepage
Rijks Museum homepage
Rijks Museum

The MOCO Museum Amsterdam weirdly opts for a hamburger icon on the homepage but then switches to a traditional single tier menu on all other pages. It seems they were driven to hide duplicate links that would have resulted from opting for such a bold quadrant menu that fills their entire homepage.

Moco Museum homepage
Moco Museum homepage
MOCO

And finally MOCA’s approach was just uncategorisable. It uses multiple patterns which no doubt create much confusion. The way their hidden overflow menu works is especially weird in that it animates from the top of the page instead of being visually connected to the hamburger icon. It’s visually awkward and takes up a lot of vertical space.

MOCA homepage
MOCA homepage
MOCA

👨🏼‍💻

Written by

Creative Partner at Same. We help purpose-led organisations make digital products that matter. https://www.projectsbysame.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store