{"id":8189,"date":"2023-02-13T18:09:09","date_gmt":"2023-02-13T17:09:09","guid":{"rendered":"https:\/\/design.cnil.fr\/?page_id=8189"},"modified":"2023-02-20T10:29:58","modified_gmt":"2023-02-20T09:29:58","slug":"browsing-table-of-contents-as-a-browsing-menu","status":"publish","type":"page","link":"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-table-of-contents-as-a-browsing-menu\/","title":{"rendered":"[Browsing] Table of contents as a browsing menu"},"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\">Table of contents as a browsing menu<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><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 is mainly used in a privacy policy. It includes all the section headings in the form of a navigable menu. In this way, each title is clickable and scrolls the page to the corresponding policy section.<\/p>\n\n\n\n<p>This approach allows people to simply read the overall structure of the policy. This helps to find quickly the parts providing the searched information and to access it  with one click. This table of contents, if fixed, makes it easier to navigate through the policy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tips\">Tips<\/h2>\n\n\n\n<p><strong>\u25ba<\/strong> When this pattern is used, the titles of the policy must be designed to be clear and explicit about the associated content. Indeed, titles that are too vague or redundant will not allow the person to know where the different informations are located and therefore to be directed.<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> A reflexion must be carried out to the level of granularity to display in the navigable table of contents. Indeed, if the policy has many parts and sub-parts, the table of contents may be very long and tedious to explore.<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> In the case of a long privacy policy with many parts, it may be appropriate to leave the table of contents <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/attracting-attention-fixed-element\/\"><u>always visible<\/u><\/a> and to display the sub-sections dynamically depending on the progress of the reader. In this way, readers always has an overview of the policy, they can navigate more precisely within a section, knowing where they are in their reading process with the help of visual cues (e.g. highlighting of the part being consulted).<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> With this pattern, it is important to ensure that people understand that the different headings are clickable. This can be done by re-using the style already used in the rest of the service for links, a good practice being to underline them.<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> Special attention should be paid to this pattern in the case of mobile display. In such a case, because of the limited display space of the screen, the browsing menu cannot be displayed continuously. A simple means of access must be considered, for example by clicking on an <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/icons\/\">icon<\/a>.<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> This pattern can be associated with<a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-browsing-arrows\/\"> browsing arrows<\/a> that allow to move from one section to another section displayed in the table of contents when it is fixed in the interface.<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> This pattern can be associated with a <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-search-bar\/\">search bar<\/a>, allowing the relevant section to be found using keywords.<\/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 (animation)<\/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\/Toc-Ex1.gif\" alt=\"\" class=\"wp-image-8350\"\/><figcaption><em>Here the table of contents allows to scroll to the desired section. The table remains on the screen at all times and allows the person to move from section to section easily.<\/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 (animation)<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1728\" height=\"1080\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/2023-02-20-browsing-tableofcontent-ex2.gif\" alt=\"\" class=\"wp-image-8419\"\/><figcaption><em>Here, the table of contents is fixed to the left side of the interface. It remains in its position when the person scrolls through the content of the policy and updates itself according to the section being consulted, showing its sub-sections.<\/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\/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--1\"><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<\/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-Icones.png\" alt=\"\" class=\"wp-image-7002\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Attirer-lattention-Icones.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Attirer-lattention-Icones-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\" href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/icons\/\">Using Icons<\/a><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\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-Fleches-de-navigation.png\" alt=\"\" class=\"wp-image-6967\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Naviguer-Fleches-de-navigation.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Naviguer-Fleches-de-navigation-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\" href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-browsing-arrows\/\">Browsing arrows<\/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-7006\" 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--4\"><a class=\"wp-block-button__link\" href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-search-bar\/\">Search bar<\/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","protected":false},"excerpt":{"rendered":"<p>Table of contents as a browsing menu 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 and adapted &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/browsing-table-of-contents-as-a-browsing-menu\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;[Browsing] Table of contents as a browsing menu&#8221;<\/span><\/a><\/p>\n","protected":false},"author":8,"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-8189","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8189","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/comments?post=8189"}],"version-history":[{"count":10,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8189\/revisions"}],"predecessor-version":[{"id":8421,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8189\/revisions\/8421"}],"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=8189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}