Informing, inspiring, and engaging society with EMBL’s research, services and training
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.
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”.
A website footer is a functional tool for the website’s target users1 to orient themselves. If users are lost they can find answers to questions like:
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.
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:
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.
The work done to create these changes was done with input from a multidisciplinary group, consisting of contributions from:
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.
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.
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.
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.
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).
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.
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.
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.