{"id":8132,"date":"2023-02-10T14:28:47","date_gmt":"2023-02-10T13:28:47","guid":{"rendered":"https:\/\/design.cnil.fr\/?page_id=8132"},"modified":"2023-02-17T16:34:44","modified_gmt":"2023-02-17T15:34:44","slug":"browsing-browsing-arrows","status":"publish","type":"page","link":"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-browsing-arrows\/","title":{"rendered":"[Browsing] Browsing arrows"},"content":{"rendered":"\n<div class=\"alignfull header color\">\n<p class=\"p1\"><span class=\"s1\">\n<\/span><\/p>\n<\/div>\n\n\n\n<div class=\"wrapper principles\">\n  <div class=\"sidebar principles\">\n    <div class=\"theiaStickySidebar\">\n      <div class=\"box\">\n       <div class=\"box-content\">\n\n\n\n<h3 class=\"wp-block-heading\">Browsing arrows<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#use\">Using the pattern in the user journey<\/a><\/li><li><a href=\"#tips\">Tips<\/a><\/li><li><a href=\"#examples\">Examples<\/a><\/li><li><a href=\"#related-patterns\">Related patterns<\/a><\/li><\/ul>\n\n\n\n<\/div>\n  <\/div>\n\n\n\n<\/div>\n<\/div><div class=\"content examples\">\n    <div class=\"theiaStickySidebar\">\n      <div class=\"box\">\n\n\n\n<blockquote class=\"wp-block-quote\" style=\"color:#0013E4\"><p><em>This design pattern is part of the LINC\u2019s research initiative focusing on interface design. It comes from frequent proposals made by participants of the Data &amp; Design workshops to implement the principle of transparency provided in the GDPR. It can be used and adapted to the specific context of your services and products. However, its reuse as such do not guarantee compliance with the GDPR in general and the principle of transparency in particular..<\/em><\/p><\/blockquote>\n\n\n\n<p>This pattern allows to navigate between different sections, whether they are on the same page or on different pages. The browsing arrows thus offer a sequencing of the navigation and complement other ways of navigating between sections.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"use\">Using the pattern in the user journey<\/h2>\n\n\n\n<p>\u25ba <strong><strong>When signing-up<\/strong><\/strong> : when registration is done through several screens, the browsing arrows are relevant to allow people to go back. They may wish to change a choice they have made, modify information they have entered previously, or consult information they may have missed.<\/p>\n\n\n\n<p>\u25ba <strong><strong>In a privacy policy<\/strong><\/strong> : this pattern allows the user to move from one part of the policy to another. Coupled with a <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-table-of-contents-as-a-browsing-menu\/\">navigable table of contents<\/a>, which keeps an overview of the policy, this pattern makes it possible to scroll through the sections one by one without having to scroll manually.\u00a0<\/p>\n\n\n\n<p>\u25ba <strong>In case of a problem with data or its use<strong>\u00a0<\/strong><\/strong>: this pattern allows the implementation of a navigation thread for the results given through a <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-search-bar\/\">search<\/a>, which avoids going back and forth between the list of results and the pages associated with the results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tips\">Tips<\/h2>\n\n\n\n<p>\u25ba The use of this pattern should not condone or encourage the dissemination of data protection information and settings across multiple pages.<\/p>\n\n\n\n<p>\u25ba This pattern may provoke the multiplication of clicks to find information. To avoid this, it should be used in addition to more direct means of navigation, such as a <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-table-of-contents-as-a-browsing-menu\/\">navigable table of contents<\/a> or <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/attracting-attention-fixed-element\/\">fixed elements<\/a> added to the structure.<\/p>\n\n\n\n<p>\u25ba The design of this pattern must take accessibility into account. Thus, the arrows must be visible : neither too thin nor too clear and be readable on all screen formats. Furthermore, the use of icons alone can be confusing for some people who are not very comfortable with digital technology, as their meaning is not clear enough to make the pattern easy to understand. In this case, the arrow can be attached to a text explaining its action (such as &#8220;next result&#8221;).<\/p>\n\n\n\n<p>\u25ba This pattern is based on the use of <em>javascript<\/em>. Some scripts are not readable by all browsers, or are even deactivated by some Internet users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"examples\">Examples<\/h2>\n\n\n\n<div class=\"wp-block-columns has-2-columns block-ex-1col is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Possible approach<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Navigate-Navigation-arrows-Ex1.png\" alt=\"\" class=\"wp-image-8108\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Navigate-Navigation-arrows-Ex1.png 1440w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Navigate-Navigation-arrows-Ex1-300x188.png 300w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Navigate-Navigation-arrows-Ex1-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><figcaption><em>In this dashboard-like policy, people can navigate from one section to another using the browsing arrows, in addition to the navigation menu.<\/em><\/figcaption><\/figure><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns block-ex-1col is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Possible approach<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Navigate-Navigation-arrows-Ex2.png\" alt=\"\" class=\"wp-image-8110\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Navigate-Navigation-arrows-Ex2.png 1440w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Navigate-Navigation-arrows-Ex2-300x188.png 300w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Navigate-Navigation-arrows-Ex2-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><figcaption><em>The search function implemented on this site allows the creation of a navigation path corresponding to the results found. The person can then move from result to result simply by using the browsing arrows.<\/em><\/figcaption><\/figure><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"related-patterns\">Related patterns<\/h2>\n\n\n\n<div class=\"wp-block-columns has-3-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column home-block is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"616\" height=\"362\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Naviguer-Table-des-mati\u00e8res.png\" alt=\"\" class=\"wp-image-6971\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Naviguer-Table-des-mati\u00e8res.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Naviguer-Table-des-mati\u00e8res-300x176.png 300w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-outline home-block__link is-style-outline--1\"><a class=\"wp-block-button__link has-text-color has-dark-gray-color\" href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-table-of-contents-as-a-browsing-menu\/\">Table of contents as a browsing menu<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column home-block is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"616\" height=\"362\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Naviguer-Barre-de-recherche.png\" alt=\"\" class=\"wp-image-7007\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Naviguer-Barre-de-recherche.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Naviguer-Barre-de-recherche-300x176.png 300w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-outline home-block__link is-style-outline--2\"><a class=\"wp-block-button__link has-text-color has-dark-gray-color\" href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-search-bar\/\">Search bar<\/a><\/div>\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column home-block is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"616\" height=\"362\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Attirer-lattention-Elements-fixes.png\" alt=\"\" class=\"wp-image-7001\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Attirer-lattention-Elements-fixes.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Attirer-lattention-Elements-fixes-300x176.png 300w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-outline home-block__link is-style-outline--3\"><a class=\"wp-block-button__link has-text-color has-dark-gray-color\" href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/attracting-attention-fixed-element\/\">Fixed element<\/a><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<\/div>\n  <\/div>\n <\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Browsing arrows Using the pattern in the user journey Tips Examples Related patterns This design pattern is part of the LINC\u2019s research initiative focusing on interface design. It comes from frequent proposals made by participants of the Data &amp; Design workshops to implement the principle of transparency provided in the GDPR. It can be used &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-browsing-arrows\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;[Browsing] Browsing arrows&#8221;<\/span><\/a><\/p>\n","protected":false},"author":11,"featured_media":0,"parent":6957,"menu_order":16,"comment_status":"closed","ping_status":"closed","template":"template-parts\/page-principles-subpage.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-8132","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/comments?post=8132"}],"version-history":[{"count":12,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8132\/revisions"}],"predecessor-version":[{"id":8400,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8132\/revisions\/8400"}],"up":[{"embeddable":true,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/6957"}],"wp:attachment":[{"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/media?parent=8132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}