Flexibility, discoverability: using metadata for better user journeys

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

Today
Where we are today with our ad-hoc parent-child and only link-based relationships.

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

 

Envisioned

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.

Trajectories of a double pendulum
Trajectories of a double pendulum; Further reading | CC image by 100Miezekatzen  

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.

 

Author: Ken Hawkins

Making things slightly less messy than before. Interested in anything unusual. I'm the web design architect at EMBL-EBI in Hinxton (that's near Cambridge)

2 thoughts on “Flexibility, discoverability: using metadata for better user journeys”

  1. Interesting suggestions, Ken.
    Some comments:
    -Further to content structure and navigation, the IA model could also impact findability and better serve search purposes, both when there is a drive to integrate content/data from different dimensions, and, conversely, when more granularity and separation is needed.

    – Re. tagging content, in the tag example there is a 1-to-1 relationship between type of attribute and content (=). Have you explored having 1-to-many use cases (=) ?

  2. Hi Joseph, we’re on the same wavelength.

    This model aims to do two things:
    1) “You are here” local (JS) logic in the page allows you to indicate where the user is currently in the system by dynamically highlighting or showing breadcrumbs and neighbouring facets.
    2) “You might also be interested in” by consuming these tags in lookup service (or perhaps a search service) along with tags on who the content aims to reach (internal/external and emotional/rational) we can suggest related pages or content of interest.

    On tagging content, we’re looking at using a nested structure, so the “Contact Heidelberg” page might carry:
    “`
    metaActive: where:heidelberg:contact
    metaParent1: where:heidelberg
    metaParent2: null
    “`

    And an article on a research team might be:
    “`
    metaActive: what:news:profile
    metaParent1: who:team-xyz
    metaParent2: what:research:developmental biology
    “`

    We’ve been testing how this provides local context (You are here), and it seems to work well offering intuitive and dynamic navigation.

    The next step would be to draft “You might also be interested in”, where we have a system mocked up and now need to look at ways to test.

Leave a Reply

Your email address will not be published. Required fields are marked *