{"id":6934,"date":"2021-08-30T11:14:22","date_gmt":"2021-08-30T11:14:22","guid":{"rendered":"https:\/\/www.embl.org\/about\/info\/communications\/?p=6934"},"modified":"2021-10-11T11:53:07","modified_gmt":"2021-10-11T11:53:07","slug":"embl-org-putting-our-best-footer-forward","status":"publish","type":"post","link":"https:\/\/www.embl.org\/about\/info\/communications\/blog\/2021\/08\/embl-org-putting-our-best-footer-forward\/","title":{"rendered":"EMBL.org: Putting our best footer forward"},"content":{"rendered":"\n<p>A major aspect of EMBL.org\u2019s navigation is the global footer, and we&#8217;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 \u2014 but broad \u2014 improvements to support the footer and navigation across One EMBL.org.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The problem<\/h2>\n\n\n\n<p>Here\u2019s how EMBL.org\u2019s global footer has looked over much of the past year.<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh6.googleusercontent.com\/8cIDODd5qLHl4_98F7nGp1nT1cePi8R2wjTNZoy4ThYCmCu3YB3IGi6zgON4cI7N7w4-ql-3G3yhv7r9gEj9srXpatLOCIyNfYS8tle6szX8hVeHj1zILHTyXF8uGnlKQnxo73w-=s0\" alt=\"\"\/><\/figure>\n\n\n\n<p>Scroll further,&nbsp; there\u2019s still more.<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh6.googleusercontent.com\/ZTCGt5lH0EiCDLCOo8-SyiqOHhkINnKlZC0LlZYR6wl5kBxKkFaJ06qlRJh-pV19zWS7gxS4mzN-84plma0G_6lx7UzLjDWefj8Y4j_cXFvuRhzBi6fUUN3zBcfzhj7-5M-wFLD5=s0\" alt=\"\"\/><\/figure>\n\n\n\n<p>That means each page on EMBL.org has a screen-and-a-half of navigation, <a href=\"https:\/\/www.youtube.com\/watch?v=6nSKkwzwdW4\">oh my<\/a>.<\/p>\n\n\n\n<p>Our excessively large footer plays a role as a combination footer and sitemap \u2014 it has become lovingly referred to as the \u201cfootmap\u201d.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why do we have a footer?<\/h2>\n\n\n\n<p>A website footer <a href=\"https:\/\/www.nngroup.com\/articles\/footers\/\">is a functional tool<\/a> for the website\u2019s target users<sup><a href=\"#1\">1<\/a><\/sup> to orient themselves. If users are lost they can find answers to questions like:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>What is EMBL?&nbsp;<\/li><li>What do you do?&nbsp;<\/li><li>How do I get in touch?&nbsp;<\/li><li>How do I get a question answered?<\/li><li>Where are you located?<\/li><li>and other similar questions<\/li><\/ul>\n\n\n\n<p>The footer <strong>should not<\/strong> be a directory of the website. Our current extremely verbose footer is not only visually unappealing, but it hinders these missions.<\/p>\n\n\n\n<p>The action here is clear: split the directory from the footer.<\/p>\n\n\n\n<p>Here\u2019s what the revised global footer looks like:<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh6.googleusercontent.com\/ndKme57gxtWcGhPQIT3TIohDIpcwPNIF67-W15jrngK8uw1O6Zq1Lwft5dWJH6MZ6cf2S1lXl3ofBzimBqlLx6Yha_RPtwpzkZdv59LEeJPqLy-wvlSWeLVCrDRxgzwyyOfWojpN=s0\" alt=\"\"\/><\/figure>\n\n\n\n<p>It is a global footer that focuses on EMBL\u2019s major mission areas, getting in touch and connecting with a new EMBL.org directory.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mapping EMBL.org<\/h2>\n\n\n\n<p>EMBL.org has not had a singular overview of key areas \u2014 a map of everything the EMBL.org shopping centre offers; something a bit like:<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh5.googleusercontent.com\/F42JJ-FQXlvfBEI5c2sjvk7Iq6ekNXrAcnNXpU9ROUL5X9JM3_GHjlpVK98Q-0bHROgLrtMmAfoUiFSE8X1Bg6SojDw662D62K09KhHV065zhqIO3_ISCJuFFka48jGPkvYLoL-C=s0\" alt=\"\"\/><figcaption class=\"vf-figure__caption\">A directory of shops at the Admiralty Centre Shopping Arcade in Hong Kong. Image by <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:HK_Admiralty_Centre_Shopping_directory_sign_shops_list_night_Mar-2013.JPG\">CIteinikea | Creative Commons license<\/a><\/figcaption><\/figure>\n\n\n\n<p>In contrast to the global footer, a directory answers the following questions:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>I\u2019m looking for a specific type of content on the website (research teams, jobs, training, news, etc.)<\/li><li>How is the website structured?<\/li><li>What content is on this website?<\/li><\/ul>\n\n\n\n<p>The directory is a highly utilitarian information map of EMBL and needs to be easily scannable.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s a static screenshot of the new page:<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image\"><a href=\"https:\/\/www.embl.org\/directory\/\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh6.googleusercontent.com\/VpO9Bg0I-wuMMk1_eYHXZFksuFtalY_-mjv4G1RgKvcS3AJ5d4bC7DPn0w8kSwoG0v97fiPGNC1CSEualmFE3UmiHkOcL-tI3BFHA8RFDFFHbcU_aAt9TZ81-utbFB0J7g8p6nEw=s0\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Here\u2019s how that directory behaves: clean, functional and fast \u2014 while still giving a flavour of what EMBL is.<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image\"><a href=\"https:\/\/www.embl.org\/directory\/\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh4.googleusercontent.com\/s9L-a2jlFdVmdKJhyLoVl-1qfGdsQXs5G8xyV4d4HdOArQIfAtHRIrCqxPzVs3uiZDkpq82PDBT4EnJdyR9DcecT5A-JPa93PCN6bDsSArlfO665WUhzIlNj5MUuL1C39Qbpiath=s0\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Many are working together for One embl.org<\/h2>\n\n\n\n<p>The work done to create these changes was done with input from a multidisciplinary group, consisting of contributions from:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>EMBL Communications\u2019 Digital Team who contributed context around the problems.<\/li><li>EMBL-EBI Web Development\u2019s UX team who contributed input on web best practice and insights into the usability of various approaches and ensuring directories remain easily accessible.&nbsp;<\/li><li>Visual Framework service who contributed technical development and considerations to ensure work done is applicable across EMBL\u2019s broad ranges of web services and collaborations \u2014 the Visual Framework also provided the structure to allow for a \u201csprint\u201d of broad navigation work.<\/li><li>Many other individuals who contributed feedback, time and ideas into navigation patterns.<\/li><li>And particular thanks to:<ul><li>Full stack developer Nitin Jadhav<\/li><li>Senior user experience designer Nikiforos Karamanis<\/li><li>Product designer Cindy Natassia<\/li><\/ul><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Don\u2019t stop now<\/h2>\n\n\n\n<p>The technical work and guidance made to support the above pages reaches beyond itself and will empower future improvement to EMBL.org \u2014 and its supporting component library, <a href=\"https:\/\/stable.visual-framework.dev\/\">the Visual Framework<\/a>. 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.<\/p>\n\n\n\n<p>This not only maximises the value delivered, but it also benefits more users and ensures we remain more cohesive as One EMBL.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What else are we working on?<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">1. Guide and destination pages<\/h4>\n\n\n\n<p>A review of pages across EMBL sites revealed we have pages of two major types: \u201cguide\u201d pages (such as a listing of research areas) and \u201cdestinations\u201d where a user is likely to complete their task (a job application).&nbsp;<\/p>\n\n\n\n<p>Identifying pages as either a guide or destination allows us to create better guidance on how the pages should function and visually look.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>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.<\/li><li>Destination pages: focused on text, imagery and form actions. Likely to have centred content.<\/li><\/ul>\n\n\n\n<p>This concept also relates back to <a href=\"https:\/\/blogs.embl.org\/communications\/2017\/07\/03\/cd-sprint-1-getting-excited-about-the-brand\/\">the \u201cEMBL Design audit system\u201d concept from 2018<\/a>, where pages that targeted broader audiences (such as a guide page) would be more visually diverse.<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh5.googleusercontent.com\/C4KQyTB3G1jN-63NZ-u3cZb_5oYhyXYWs_lF4s1BZD1OyfuIApXmidFJVuDHM5MARuTid3WwOO27KZTDGRFAoy-UaA-GRc6SnURmdpo_0y5jKXMkXHG77Ecx4E-JRgO5mHhQhdRf=s0\" alt=\"\"\/><\/figure>\n\n\n\n<p>Some examples of guide vs destination page types.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. An improved \u201con this page\u201d sticky bar<\/h4>\n\n\n\n<p>To help users find content on pages, we include an \u201con this page\u201d quick link tool. This is helpful but doesn\u2019t always perform well due to aesthetics and function.<\/p>\n\n\n\n<p>Here\u2019s what \u201con this page\u201d looks like on the current <a href=\"https:\/\/www.embl.org\/sites\/barcelona\/\">EMBL Barcelona page<\/a>:<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image\"><a href=\"https:\/\/www.embl.org\/sites\/barcelona\/\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh5.googleusercontent.com\/_WlN2P_UguNnfbHfdW3OSwbquE8fSrc8ENTmnlQjS0izQUmie0GzFvNNMOgqO3ujwmZWCpKI8rDMdDvhQIiGUO2QIww55tfP6Khd5WuLeTR-VxHgYSVhR5o37Sx4viyoeL3Wjcwy=s0\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>As you\u2019ve seen on the new <a href=\"https:\/\/www.embl.org\/directory\/\">EMBL.org\/directory<\/a> page, this tool has been visually updated and \u201csticks\u201d to the user&#8217;s page. We need to do some further technical optimisation and will intend to use this across other pages.<\/p>\n\n\n\n<p>Here\u2019s how we expect pages like EMBL Barcelona to look in the near future:<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh6.googleusercontent.com\/Lm4iDjDN3rBar1bBFc3GIYyDZRWmuqtQX2ymllr13LxKv_V8bs_3QpS1lcyS5zOAjeydv2ccfLDnvYeAeCFwmasp_bbpnbaZdCfL5kybiBxsEa_i9PAaFt8Oky2dv2P9CqHaJeQF=s0\" alt=\"\"\/><\/figure>\n\n\n\n<p>We\u2019re still evaluating this component\u2019s effectiveness and investigating a couple of UX-related issues. The new EMBL.org\/directory page will provide valuable real-world insights.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. Revised content grids<\/h4>\n\n\n\n<p>A <a href=\"https:\/\/github.com\/visual-framework\/vf-core\/discussions\/1506\">long-requested feature<\/a> 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).<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh6.googleusercontent.com\/YraSEZDd_QohfeBP56JS2zbkL8dQD8eNe0OdHCUobppDkb5O_0ZsIJEwxfqsNJunpZ0tPJoqYBC2hSD8--m0jrBEgb4W2VMgeeZEfgWrgV_qO5EWBNegktL4DiiqwqLaFaS2Zhr3=s0\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">4. Section header improvements<\/h4>\n\n\n\n<p>The \u201c<a href=\"https:\/\/stable.visual-framework.dev\/components\/vf-section-header\/\">section header<\/a>\u201d is often linked to content, and sometimes not. This causes confusion among users and is often out of logical order.<\/p>\n\n\n\n<p>We are evaluating a deprecation of the links in the section header in most scenarios. Further evaluation and guidance to come.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/nQ8rGm6BHn16WesaEb_l28m8aEvD-huMV7i5fQl8Ol8a2xnMta-Kc2YjRQDOoqa2KLj0tukrPvRpCLEl8bjgsGa1BgmNO39YUuWzFnE6dOYEUOegXgRBMyHGKbq8z5PAPf7bk1vq=s0\" width=\"602\" height=\"279\"><\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">5. Preliminary work into interactive menus<\/h4>\n\n\n\n<p>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.&nbsp;<\/p>\n\n\n\n<p>One common approach for interactive menus is called a \u201c<a href=\"https:\/\/www.nngroup.com\/articles\/mega-menus-work-well\/\">mega menu<\/a>\u201d and offers a wide space for navigation and content \u2014 however this also presents the need for well-written guidance and a robust technical solution.<\/p>\n\n\n\n<p>Here are some concepts the EMBL-EBI Product designer Cindy Natassia has begun exploring \u2014 you can see the mega menu on the far right.<\/p>\n\n\n\n<figure class=\"vf-figure wp-block-image\"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/lh6.googleusercontent.com\/eEjr8yiccCGVXdj7BCyRO5C_LiWMwsPfuGqayWRmrhcoHf610ORCqPtlqZndS9L-9WWLTEF7Ga6y144p6Qskf4-RQ9QdFrG59OySzoBxpvOEl8zQbMMNvjUAHcP72YEpV3rgUdka=s0\" alt=\"\"\/><\/figure>\n\n\n\n<p>The UK\u2019s website (gov.uk) <a href=\"https:\/\/gds.blog.gov.uk\/2021\/05\/17\/our-plans-to-improve-navigation-on-gov-uk\/\">has also begun considering a mega-menu<\/a> and outlines some additional thoughts on pros and cons.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Discussions and feedback<\/h2>\n\n\n\n<p>This article presents only a very high-level summary of the thinking and efforts to improve EMBL.org and all Visual Framework-powered sites.&nbsp;<\/p>\n\n\n\n<p>If you have ideas, concerns or just want to discuss this: digital-comms [at] embl.org or ken.hawkins [at] embl.de<\/p>\n\n\n\n<p>&#8212;<\/p>\n\n\n\n<p id=\"1\">1) Who are the website\u2019s target users? They are broad but include external users, collaborators, funders, the general public, media, and even EMBL\u2019s staff.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In partnership with colleagues from across EMBL and EMBL-EBI we have created and implemented this first in a range of subtle \u2014 but broad \u2014 improvements to support the footer and navigation across One EMBL.org.<\/p>\n","protected":false},"author":5,"featured_media":7104,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1832,1],"tags":[],"embl_taxonomy":[],"class_list":["post-6934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital","category-general"],"acf":[],"embl_taxonomy_terms":[],"featured_image_src":"https:\/\/www.embl.org\/about\/info\/communications\/wp-content\/uploads\/2021\/08\/pasted-image-0.png","_links":{"self":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/6934","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=6934"}],"version-history":[{"count":9,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/6934\/revisions"}],"predecessor-version":[{"id":7102,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/6934\/revisions\/7102"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/media\/7104"}],"wp:attachment":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/media?parent=6934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/categories?post=6934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/tags?post=6934"},{"taxonomy":"embl_taxonomy","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/embl_taxonomy?post=6934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}