How a controlled and structured vocabulary frees us from focusing where online content lives. Now we can focus on what it’s about.

One of the main goals of the EMBL Corporate Design Sprint 2 is to enable better user journeys on a future pan-EMBL web architecture. One key aspect is content structure and navigation.

Note: this piece builds off my last post in July, where I wrote about extracting an information architecture from the EMBL brand map. The output was a controlled taxonomy which captures EMBL’s core identity (who, what, where). If you’ve not read that piece, read it here.

Why this approach?

I try to remember that while I clearly see the importance of information structure, that need is less visible to those who haven’t been working on content reusability and discoverability for the last 10 years.

Currently we structure web content with implied relationships, such links from page-to-page, or pages appearing as parent-child URLs (i.e. /research-parent/research-child-page). While this approach is useful for tunel silos of information, it often binds user journeys in more complex web ecosystems.

The pain of information silos is not felt so badly by staff and regular users of EMBL’s websites but for those that have just learned of EMBL through an article on news.embl.de or otherwise seek to educate themselves on just what EMBL is, siloing significantly increases friction in the user journey.

A structure for possibilities

Who, What, Where. These three core “facets” speak to the heart of EMBL’s brand identity and they’ll make a great building block for the core of our information architecture.

• Who: the EMBL people and teams involved;
• What: the division (research, services, training, industry transfer) and activity/type of work being done (disease modeling, bioinformatics, structural biology, tissue biology, etc.); and
• Where: EMBL’s six physical geographic sites and virtual websites.

By tagging content with these three “Ws” we can allow for flexible navigation from a key view of EMBL’s work to adjoining one.

Today

To go from Hamburg Research, a user must traverse back up the site’s silo and descend through EMBL Rome to Research.

Envisioned A structure based off the three Ws allow a user clean descent paths into a silo (location and topic) and lateral moves across silos.

The possibilities gained by introducing structured secondary relationships are quite large. For a tangential example, consider the number of possibilities gained by adding a second pendulum to a system.

By moving from a parent-child to our controlled taxonomy of three Ws, we see an equivalent growth in navigation diversity as we see in the red vs blue trajectories.

In practice

But how would this technically function, and what does the end result feel like to a user?

The navigation system would be governed by an HTML meta-tag based specification that would indicate where a page (or piece of content) sites, and a hybrid automated-curated metadata look-up service.

A few example tag specifications:

EMBL Research group overview
<meta name="embl:facet-active"   content="who:Groups" />
<meta name="embl:facet-parent-1" content="what:Research" />
<meta name="embl:facet-parent-2" content="where:EMBL.org" />
Heidelberg news
<meta name="embl:facet-active"   content="what:news" />
<meta name="embl:facet-parent-1" content="where:Heidelberg" />
EMBL-EBI Services overview
<meta name="embl:facet-active"   content="what:Services" />
<meta name="embl:facet-parent-1" content="where:Hinxton" />

Note: This meta-tag system would not drive the links within the page’s main content (although it can be leveraged), rather it enables indicating current context and possible other navigation paths.

To illustrate and get a feel for this, I’ve built a skeleton HTML and JavaScript prototype.

A quick demonstration of the previous user journey from EMBL»Hamburg»Research»Rome Research.This is not a demonstration of visual look, content, or even navigation placement, but only a demonstration of structure.

With this illustrative prototype in place, we’ll further test the concept by:

• Refining an initial controlled vocabulary for the “three Ws”;
• Grafting a visual design onto the prototype; and
• Inject real test content into this skeleton.

And we’ll be mindful that the aim of this structure is to enable user behaviour and better user journeys.  

Thoughts? I’d welcome conversation on this system: khawkins@ebi.ac.uk or @khawkins98, or a comment below.

Stay tuned

Today we’re starting the second week of the EMBL Corporate Design Sprint 2, where we’ve been working to refine and test ideas from the first sprint. Look for more blog posts from the sprint over this week.