A major aspect of EMBL.org’s navigation is the global footer, and we’ve known it needs work. In partnership with colleagues from across EMBL and EMBL-EBI we have created and implemented this first in a range of subtle — but broad — improvements to support the footer and navigation across One EMBL.org.

The problem

Here’s how EMBL.org’s global footer has looked over much of the past year.

Scroll further,  there’s still more.

That means each page on EMBL.org has a screen-and-a-half of navigation, oh my.

Our excessively large footer plays a role as a combination footer and sitemap — it has become lovingly referred to as the “footmap”.

Why do we have a footer?

A website footer is a functional tool for the website’s target users¹ to orient themselves. If users are lost they can find answers to questions like:

• What is EMBL? 
• What do you do? 
• How do I get in touch? 
• How do I get a question answered?
• Where are you located?
• and other similar questions

The footer should not be a directory of the website. Our current extremely verbose footer is not only visually unappealing, but it hinders these missions.

The action here is clear: split the directory from the footer.

Here’s what the revised global footer looks like:

It is a global footer that focuses on EMBL’s major mission areas, getting in touch and connecting with a new EMBL.org directory.

Mapping EMBL.org

EMBL.org has not had a singular overview of key areas — a map of everything the EMBL.org shopping centre offers; something a bit like:

In contrast to the global footer, a directory answers the following questions:

• I’m looking for a specific type of content on the website (research teams, jobs, training, news, etc.)
• How is the website structured?
• What content is on this website?

The directory is a highly utilitarian information map of EMBL and needs to be easily scannable. 

Here’s a static screenshot of the new page:

Here’s how that directory behaves: clean, functional and fast — while still giving a flavour of what EMBL is.

Many are working together for One embl.org

The work done to create these changes was done with input from a multidisciplinary group, consisting of contributions from:

• EMBL Communications’ Digital Team who contributed context around the problems.
• EMBL-EBI Web Development’s UX team who contributed input on web best practice and insights into the usability of various approaches and ensuring directories remain easily accessible. 
• Visual Framework service who contributed technical development and considerations to ensure work done is applicable across EMBL’s broad ranges of web services and collaborations — the Visual Framework also provided the structure to allow for a “sprint” of broad navigation work.
• Many other individuals who contributed feedback, time and ideas into navigation patterns.
• And particular thanks to:
  • Full stack developer Nitin Jadhav
  • Senior user experience designer Nikiforos Karamanis
  • Product designer Cindy Natassia

Don’t stop now

The technical work and guidance made to support the above pages reaches beyond itself and will empower future improvement to EMBL.org — and its supporting component library, the Visual Framework. That means the work here will not only improve EMBL.org but all users of the Visual Framework, including www.EBI.ac.uk, COVID19DataPortal.org and others.

This not only maximises the value delivered, but it also benefits more users and ensures we remain more cohesive as One EMBL.

What else are we working on?

1. Guide and destination pages

A review of pages across EMBL sites revealed we have pages of two major types: “guide” pages (such as a listing of research areas) and “destinations” where a user is likely to complete their task (a job application). 

Identifying pages as either a guide or destination allows us to create better guidance on how the pages should function and visually look.

• Guide pages: uses visual components such as hero imagery and cards to draw users in so that they can find links they need and discover related content they might not know about. Likely to have a full-width layout with many elements.
• Destination pages: focused on text, imagery and form actions. Likely to have centred content.

This concept also relates back to the “EMBL Design audit system” concept from 2018, where pages that targeted broader audiences (such as a guide page) would be more visually diverse.

Some examples of guide vs destination page types.

2. An improved “on this page” sticky bar

To help users find content on pages, we include an “on this page” quick link tool. This is helpful but doesn’t always perform well due to aesthetics and function.

Here’s what “on this page” looks like on the current EMBL Barcelona page:

As you’ve seen on the new EMBL.org/directory page, this tool has been visually updated and “sticks” to the user’s page. We need to do some further technical optimisation and will intend to use this across other pages.

Here’s how we expect pages like EMBL Barcelona to look in the near future:

We’re still evaluating this component’s effectiveness and investigating a couple of UX-related issues. The new EMBL.org/directory page will provide valuable real-world insights.

3. Revised content grids

A long-requested feature is a way to have a standardised left-aligned section of text. We now have a method to do this and plan to introduce guidance on when to use which grid (hint: guide pages will use left-aligned and destination contet will use centred).

4. Section header improvements

The “section header” is often linked to content, and sometimes not. This causes confusion among users and is often out of logical order.

We are evaluating a deprecation of the links in the section header in most scenarios. Further evaluation and guidance to come.

5. Preliminary work into interactive menus

The first version of EMBL.org intentionally avoided migrating dropdown menus as the tool is often attempted to be used in place of well-considered content design. However, a menu can still provide useful secondary navigation. 

One common approach for interactive menus is called a “mega menu” and offers a wide space for navigation and content — however this also presents the need for well-written guidance and a robust technical solution.

Here are some concepts the EMBL-EBI Product designer Cindy Natassia has begun exploring — you can see the mega menu on the far right.

The UK’s website (gov.uk) has also begun considering a mega-menu and outlines some additional thoughts on pros and cons.

Discussions and feedback

This article presents only a very high-level summary of the thinking and efforts to improve EMBL.org and all Visual Framework-powered sites. 

If you have ideas, concerns or just want to discuss this: digital-comms [at] embl.org or ken.hawkins [at] embl.de

—

1) Who are the website’s target users? They are broad but include external users, collaborators, funders, the general public, media, and even EMBL’s staff.