{"id":425,"date":"2017-09-25T16:42:47","date_gmt":"2017-09-25T16:42:47","guid":{"rendered":"https:\/\/www.embl.org\/about\/info\/communications\/?p=425"},"modified":"2021-10-11T11:55:47","modified_gmt":"2021-10-11T11:55:47","slug":"flexibility-discoverability-using-metadata-for-better-user-journeys","status":"publish","type":"post","link":"https:\/\/www.embl.org\/about\/info\/communications\/blog\/2017\/09\/flexibility-discoverability-using-metadata-for-better-user-journeys\/","title":{"rendered":"Flexibility, discoverability: using metadata for better user journeys"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">How a controlled and structured vocabulary frees us from focusing <strong>where<\/strong> online content lives. Now we can focus on <strong>what<\/strong> it&#8217;s about.<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>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\u2019s core identity (who, what, where). If you\u2019ve not read that piece, <a href=\"https:\/\/www.embl.org\/about\/info\/communications\/blog\/2017\/07\/the-embl-triangle-key-from-brand-structure-to-information-architecture\/\">read it here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why this approach?<\/h2>\n\n\n\n<p>I try to remember that while I clearly see the importance of information structure, that need is less visible to those who haven\u2019t been working on content reusability and discoverability for the last 10 years.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image is-style-default\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh5.googleusercontent.com\/KOF9c7kCee3aeVZBSQpJYkHiMSAV0uuGrD0GgcWX1NTk2WHCHMwUy9VaEroDGfzSp7WiCiqkveA_YOM7MpDtUnpJ7KpYzySFykcEAwG8Z7uYk9-5g8MfW4rMnDKhrj1yBcavK39D\" alt=\"\"\/><\/figure>\n\n\n\n<p>The pain of information silos is not felt so badly by staff and regular users of EMBL\u2019s 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A structure for possibilities<\/h2>\n\n\n\n<p>Who, What, Where. These three core \u201cfacets\u201d speak to the heart of EMBL\u2019s brand identity and they\u2019ll make a great building block for the core of our information architecture.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Who: the EMBL people and teams involved;<\/li><li>What: the division (research, services, training, industry transfer) and activity\/type of work being done (disease modeling, bioinformatics, structural biology, tissue biology, etc.); and<\/li><li>Where: EMBL\u2019s six physical geographic sites and virtual websites.<\/li><\/ul>\n\n\n\n<p>By tagging content with these three \u201cWs\u201d we can allow for flexible navigation from a key view of EMBL\u2019s work to adjoining one.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Today<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"vf-figure wp-block-image alignnone is-style-default\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh3.googleusercontent.com\/5UIgvyEo78R_GdmgqgUvasvAzoKkyxyB_IKdKSz4P74m_eXYaPSZLtYSak55GENB0UOPQz4q6z31q3TcN50FmhTrhVWsvdeHVd6amsKTPU9_fc2Ez6c2Pd11uKPwMpruJ50hpc4y\" alt=\"Today\"\/><figcaption class=\"vf-figure__caption\">Where we are today with our ad-hoc parent-child and only link-based relationships.<\/figcaption><\/figure>\n\n\n\n<p>To go from Hamburg Research, a user must traverse back up the site\u2019s silo and descend through EMBL Rome to Research.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Envisioned <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/rYk84s8lHwBfHkg6nVoPJdDzEpZFLhgW4aeDlmv6dusRJLogaD4TNvYXlj5CaEa80CWZGTd1SQxTe1LB2hHIpKgupIfi-6OF8qRUkBNlXGNXJBVg83MxSqgdP06EhOeC3aMMmPba\" alt=\"envisioned\" width=\"1544\" height=\"452\">A structure based off the three Ws allow a user clean descent paths into a silo (location and topic) and lateral moves across silos.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"vf-figure  | vf-figure--align vf-figure--align-centered \"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh6.googleusercontent.com\/E-CNm1u0c3WxNPz5wBO9aVYXEscpWDZVkHlXMChRVECWUxB1YSUV9d1lCZhrWv-IDRXKEboOJTNKBaqMSZCtfnd5ZypaBCmboTJ8qSSb9DNmGw_oKgwruF06E75tAt5uqS6CwQCE\" alt=\"Trajectories of a double pendulum\"\/><figcaption class=\"vf-figure__caption\">Trajectories of a double pendulum;&nbsp;<a style=\"background-color: transparent; text-align: inherit; font-family: inherit;\" href=\"http:\/\/scienceworld.wolfram.com\/physics\/DoublePendulum.html\">Further reading<\/a><span style=\"background-color: transparent; text-align: inherit; font-family: inherit;\">&nbsp;| CC image by&nbsp;<\/span><a style=\"background-color: transparent; text-align: inherit; font-family: inherit;\" href=\"https:\/\/en.wikipedia.org\/wiki\/Double_pendulum#\/media\/File:Trajektorie_eines_Doppelpendels.gif\">100Miezekatzen&nbsp;<\/a><span style=\"background-color: transparent; text-align: inherit; font-family: inherit;\">&nbsp;<\/span><\/figcaption><\/figure><\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">In practice<\/h2>\n\n\n\n<p>But how would this technically function, and what does the end result feel like to a user?<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>A few example tag specifications:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>EMBL Research group overview\n<\/strong>&lt;meta name=\"embl:facet-active\" &nbsp;&nbsp;content=\"who:Groups\" \/&gt;\n&lt;meta name=\"embl:facet-parent-1\" content=\"what:Research\" \/&gt;\n&lt;meta name=\"embl:facet-parent-2\" content=\"where:EMBL.org\" \/&gt;\n\n<strong>Heidelberg news\n<\/strong>&lt;meta name=\"embl:facet-active\" &nbsp;&nbsp;content=\"what:news\" \/&gt;\n&lt;meta name=\"embl:facet-parent-1\" content=\"where:Heidelberg\" \/&gt;\n\n<strong>EMBL-EBI Services overview\n<\/strong>&lt;meta name=\"embl:facet-active\" &nbsp;&nbsp;content=\"what:Services\" \/&gt;\n&lt;meta name=\"embl:facet-parent-1\" content=\"where:Hinxton\" \/&gt;\n\n<\/pre>\n\n\n\n<p>Note: This meta-tag system would not drive the links within the page\u2019s main content (although it can be leveraged), rather it enables indicating current context and possible other navigation paths.<\/p>\n\n\n\n<p>To illustrate and get a feel for this, I\u2019ve built a skeleton HTML and JavaScript prototype.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>A quick demonstration of the previous user journey from EMBL\u00bbHamburg\u00bbResearch\u00bbRome Research.<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/sKdZhAlVjYgnWGkGLunT1UX1l4bI0EQrHPOoM_IVu20cNCaxYMG4qbwuPQeTwyeKWygPQVp7-ViNk84R5C8KHijPPrUL7OeV6E4VPpayeAkbg7U94g0U-ZhKp_bNFRxG8lMlA36p\" alt=\"\" width=\"1329\" height=\"780\">This is not a demonstration of visual look, content, or even navigation placement, but only a demonstration of structure.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>With this illustrative prototype in place, we\u2019ll further test the concept by:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Refining an initial controlled vocabulary for the \u201cthree Ws\u201d;<\/li><li>Grafting a visual design onto the prototype; and<\/li><li>Inject real test content into this skeleton.<\/li><\/ul>\n\n\n\n<p>And we\u2019ll be mindful that the aim of this structure is to <em>enable<\/em> user behaviour and better user journeys. &nbsp;<\/p>\n\n\n\n<p>Thoughts? I\u2019d welcome conversation on this system: khawkins@ebi.ac.uk or <a href=\"https:\/\/twitter.com\/khawkins98\">@khawkins98<\/a>, or a comment below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Stay tuned<\/h2>\n\n\n\n<p>Today we\u2019re starting the second week of the EMBL Corporate Design Sprint 2, where we\u2019ve been working to refine and test ideas from the first sprint. Look for more blog posts from the sprint over this week.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How a controlled and structured vocabulary frees us from focusing where online content lives. Now we can focus on what it&#8217;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&hellip;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1832,1],"tags":[475,479,460],"embl_taxonomy":[],"class_list":["post-425","post","type-post","status-publish","format-standard","hentry","category-digital","category-general","tag-information-architecture","tag-structure","tag-websites"],"acf":[],"embl_taxonomy_terms":[],"featured_image_src":"https:\/\/www.embl.org\/about\/info\/communications\/wp-includes\/images\/media\/default.svg","_links":{"self":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":2,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/425\/revisions"}],"predecessor-version":[{"id":576,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/425\/revisions\/576"}],"wp:attachment":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/categories?post=425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/tags?post=425"},{"taxonomy":"embl_taxonomy","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/embl_taxonomy?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}