{"id":8084,"date":"2023-02-10T14:29:36","date_gmt":"2023-02-10T13:29:36","guid":{"rendered":"https:\/\/design.cnil.fr\/?page_id=8084"},"modified":"2023-02-17T16:45:19","modified_gmt":"2023-02-17T15:45:19","slug":"summarising-tables","status":"publish","type":"page","link":"https:\/\/design.cnil.fr\/en\/design-patterns\/summarising-tables\/","title":{"rendered":"[Summarising] Tables"},"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\">Tables<\/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 aims to present the information related to personal data and their processing in a table format. This presentation gives a synthetic view and structures the information available in a homogeneous way for quick browsing.<\/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><strong>\u25ba<\/strong> <strong><strong>In a privacy policy<\/strong><\/strong> : this pattern is a good alternative or complement to textual descriptions for presenting information about a data processing operation. It can be used in many ways and may be appropriate to use with a<a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/purpose-structure\/\"> purpose structure<\/a> or a<a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/data-structure\/\"> data structure<\/a> as it is a simple and clear way of presenting some of the interconnected information required by the GDPR such as data relationships, purposes, retention periods and legal bases. It can also be used as a <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/summary\/\">summary<\/a> to synthetise the information in a given section of the privacy policy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tips\">Tips<\/h2>\n\n\n\n<p><strong>\u25ba<\/strong> It is necessary to pay attention to the dimensions of the table and its cells, especially the horizontally. In cases where it is particularly long and wide, it is important to make it easy to read and navigate. This is particularly true on mobile phones. For this type of terminal, it is necessary to design a responsive version of the table or to display in another form the information contained in the table in order to ensure easy access on a mobile medium.<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> To make the table accessible to people with disabilities, a relevant summary describing its contents and structure should be added to the table in order to make it easier to read. One should also make sure that the column and row headers are correctly declared using the <em>&lt;th&gt;<\/em> tag with a unique <em>id <\/em>attribute, a <em>scope <\/em>attribute with the value <em>&#8220;col&#8221; <\/em>or <em>&#8220;row&#8221; <\/em>respectively, and a WAI-ARIA <em>role <\/em>attribute with the value <em>&#8220;columnheader&#8221; <\/em>or <em>&#8220;rowheader&#8221; <\/em>respectively.<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> A table is not always the best way to present parts of the information required by the GDPR. It is better to design tables that present a sub-part of the information about the processing, and that act as a complement to a textual approach.<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/icons\/\">Icons <\/a>can be used in a table to make it easier to read or identify certain information, such as the processed data categories.<\/p>\n\n\n\n<p><\/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<h3 class=\"wp-block-heading\">Attention point<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"375\" height=\"821\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Summarising-Tables-Ex2.png\" alt=\"\" class=\"wp-image-8078\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Summarising-Tables-Ex2.png 375w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Summarising-Tables-Ex2-137x300.png 137w\" sizes=\"auto, (max-width: 375px) 100vw, 375px\" \/><figcaption><em>The mobile version of that privacy policy does not support the table and its width: it is cut off with no way to scroll to view the full content.<\/em><\/figcaption><\/figure><\/div>\n\n\n\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\/Summarising-Tables-Ex1.png\" alt=\"\" class=\"wp-image-8076\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Summarising-Tables-Ex1.png 1440w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Summarising-Tables-Ex1-300x188.png 300w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2023\/02\/Summarising-Tables-Ex1-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><figcaption><em>At the beginning of a privacy policy, a summary table shows how the different categories of data collected by the site are processed<\/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\/Structurer-Par-donn\u00e9es.png\" alt=\"\" class=\"wp-image-6994\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Structurer-Par-donn\u00e9es.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Structurer-Par-donn\u00e9es-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\" href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/data-structure\/\">Data structure<\/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\/\">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\/Synth\u00e9tiser-R\u00e9sum\u00e9.png\" alt=\"\" class=\"wp-image-6996\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Synth\u00e9tiser-R\u00e9sum\u00e9.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Synth\u00e9tiser-R\u00e9sum\u00e9-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\/summary\/\">Summary<\/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\/Structurer-Finalit\u00e9.png\" alt=\"\" class=\"wp-image-6990\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Structurer-Finalit\u00e9.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Structurer-Finalit\u00e9-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\/purpose-structure\/\">Purpose structure<\/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>Tables 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 and &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/summarising-tables\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;[Summarising] Tables&#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-8084","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8084","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=8084"}],"version-history":[{"count":6,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8084\/revisions"}],"predecessor-version":[{"id":8405,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/8084\/revisions\/8405"}],"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=8084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}