{"id":7655,"date":"2022-09-30T10:01:01","date_gmt":"2022-09-30T08:01:01","guid":{"rendered":"https:\/\/design.cnil.fr\/?page_id=7655"},"modified":"2023-02-09T17:35:45","modified_gmt":"2023-02-09T16:35:45","slug":"icons","status":"publish","type":"page","link":"https:\/\/design.cnil.fr\/en\/design-patterns\/icons\/","title":{"rendered":"[Drawing attention] Using icons"},"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\">Using icons<\/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&#8217;s 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>Icons, the use of which is proposed in Recital 60 of the GDPR, represent information in a visual and systematic way. They are generally used to highlight information deemed important, to indicate a specific type of information or to visually structure content.<\/p>\n\n\n\n<p>They allow to quickly identify the elements dealt with in a section, or even in the service in general when a visual consistency is adopted.<\/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><strong><strong>When signing-up<\/strong><\/strong><\/strong>: <\/strong>this pattern can be used to highlight requests or information that is important to individuals with regard to their personal data. For example, if consent is requested, an exclamation mark icon can be used to highlight the importance of the decision.<\/p>\n\n\n\n<p>\u25ba <strong>In a privacy policy: <\/strong>this pattern can be used to complement the chosen structure with visual elements. For example, when a <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/data-structure\/\">data structure<\/a> is adopted it may be appropriate to associate each data type with a descriptive icon. It is also possible to highlight the key points of the policy, <a href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/providing-definitions\/\">definitions<\/a> or proposed examplesby using the same icon to indicate these elements.<\/p>\n\n\n\n<p><strong>\u25ba<\/strong> <strong><strong>When using the service<\/strong><\/strong>: this pattern can be associated with a given functionality of a service to make accessible explanations or means of control on the use of personal data. For example, when a targeted advertisement is displayed, a question mark icon may be added to provide further information about the underlying personal data processing and offer the possibility for the individual to withdraw consent. An icon can also be displayed when data is shared with a third party to alert the individual to this fact and thus inform them of the consequences of certain actions in the service.<\/p>\n\n\n\n<p>\u25ba <strong>Lorsque l&#8217;utilisateur param\u00e8tre ses pr\u00e9f\u00e9rences<\/strong> : this pattern is particularly suitable for visually presenting the different sections or settings of a dashboard. For example, in the case study <a href=\"https:\/\/design.cnil.fr\/en\/case-studies\/konect\/\">Konect<\/a>, icons visually detail and highlight the settings of the application. Their colour depends on the section of the dashboard to which they belong.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tips\">Tips<\/h2>\n\n\n\n<p>\u25ba The effectiveness of icons is based on the cognitive background of the user. For example, the icon representing a character generally corresponds to the user&#8217;s &#8220;account&#8221;. Icons that are too specific to a service or overloaded may instead create confusion. Thus, icons should be designed and implemented in such a way that they accurately reflect what they represent using known code to not mislead people.<\/p>\n\n\n\n<p>\u25ba Icons cannot replace textual information, which must be written in plain language. They complement, enrich and help to understand it, but people must be able to access all the information using text only, for purposes of accessibility;outes les informations uniquement avec du texte, dans un souci d\u2019accessibilit\u00e9.<\/p>\n\n\n\n<p>\u25ba Using a multitude of icons can become counterproductive by visually overloading the textual information.<\/p>\n\n\n\n<p>\u25ba It is recommended to keep consistency between the different icons by using the same icon library.<\/p>\n\n\n\n<p>\u25ba According to \u00a78 of Article 12 GDPR, data protection authorities such as the CNIL may propose standardised icons to express aspects of a data processing operation. It may be relevant to stay informed about these possible proposals in order to align an existing iconography with the one made available by a data protection authority.n des donn\u00e9es.<\/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\/2022\/09\/Icons-Ex1-en.png\" alt=\"\" class=\"wp-image-7661\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/09\/Icons-Ex1-en.png 1440w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/09\/Icons-Ex1-en-300x188.png 300w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/09\/Icons-Ex1-en-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><figcaption><em>The service offers a data management page. For each of them, an icon is associated to identify it quickly.<\/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\/2022\/09\/Icons-Ex2-en.png\" alt=\"\" class=\"wp-image-7663\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/09\/Icons-Ex2-en.png 1440w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/09\/Icons-Ex2-en-300x188.png 300w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/09\/Icons-Ex2-en-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><figcaption><em><em><em>The privacy policy always uses the same icon, an exclamation mark, to draw attention to particularly important points.<\/em><\/em><\/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<h3 class=\"wp-block-heading\">Attention point<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"900\" src=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/09\/Icons-Ex3-en.png\" alt=\"\" class=\"wp-image-7665\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/09\/Icons-Ex3-en.png 1440w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/09\/Icons-Ex3-en-300x188.png 300w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/09\/Icons-Ex3-en-768x480.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><figcaption><em>For the same data management page than above, the association between the data and the icon is not obvious. The drop, referring to a drop of blood, may also refer to a drop of water, which has little to do with health data.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\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 has-text-color has-dark-gray-color\" 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\/Rendre-clair-Donner-des-d\u00e9finitions.png\" alt=\"\" class=\"wp-image-6980\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Rendre-clair-Donner-des-d\u00e9finitions.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Rendre-clair-Donner-des-d\u00e9finitions-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\/providing-definitions\/\">Providing definitions<\/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\/Rendre-clair-Donner-des-exemples.png\" alt=\"\" class=\"wp-image-6983\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Rendre-clair-Donner-des-exemples.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Rendre-clair-Donner-des-exemples-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\/making-it-clear-giving-examples\/\">Providing examples<\/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\/Param\u00e9trer-Dashboard.png\" alt=\"\" class=\"wp-image-6975\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Param\u00e9trer-Dashboard.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Param\u00e9trer-Dashboard-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 has-text-color has-dark-gray-color\" href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/dashboard\/\">dashboard<\/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\/Penser-laccessibilit\u00e9-Accessibilit\u00e9.png\" alt=\"\" class=\"wp-image-6979\" srcset=\"https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Penser-laccessibilit\u00e9-Accessibilit\u00e9.png 616w, https:\/\/design.cnil.fr\/wp-content\/uploads\/2022\/07\/Penser-laccessibilit\u00e9-Accessibilit\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--5\"><a class=\"wp-block-button__link has-text-color has-dark-gray-color\" href=\"https:\/\/design.cnil.fr\/en\/design-patterns\/accessibility\/\">accessibility<\/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>Using icons Using the pattern in the user journey Tips Examples Related patterns This design pattern is part of the LINC&#8217;s 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\/icons\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;[Drawing attention] Using icons&#8221;<\/span><\/a><\/p>\n","protected":false},"author":7,"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-7655","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/7655","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\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/comments?post=7655"}],"version-history":[{"count":9,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/7655\/revisions"}],"predecessor-version":[{"id":8295,"href":"https:\/\/design.cnil.fr\/en\/wp-json\/wp\/v2\/pages\/7655\/revisions\/8295"}],"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=7655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}