Summary: In this article we’ll look at how some museums are approaching the design and organisation of their navigation on desktop.
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
Of all the patterns, the single tier menu is the easiest to achieve visual harmony with. Both the V&A and Wellcome Collection have done a great job at removing visual clutter and reducing complexity. The challenge here is helping people navigate beyond the simplicity that the menu presents.
V&A have done two things to create this simplicity
- 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.
- 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 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, Somerset House, and The Hepworth Wakefield all use a two tier menu consisting of a main menu and a utility menu.
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
A mega menu is essentially a drop-down menu that spans the width of the page and includes many links and, in some cases, featured content. Getting this right is difficult and creates usability problems that must be solved.
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?
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 hamburger menu is an accepted standard mobile navigation pattern. But on desktop, where there is plenty of space to display menu links, it makes little sense to hide them. As NNGroup’s article states, the “hamburger menu on desktop hurts UX metrics”.
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
In the following examples, these museums/galleries have hidden the clutter of their menu under an additional link (in the case of The Broad, it’s a hamburger icon).
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 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
The most radical approach found was Rijks Museum. It’s worth visiting their site to see how it works. If they’ve proven this to be effective in testing then I applaud them for their boldness to try something new and different.
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.
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.
