Les cookies : être en règle sans faire fuir les internautes !
<div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_textblock av_drag ui-draggable” data-shortcodehandler=”av_textblock” data-modal_title=”Bloc de texte” data-modal_ajax_hook=”av_textblock” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_textblock” data-modal_on_load=”modal_load_tabs, modal_load_tiny_mce, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_textblock avia_textblock_style” data-update_with=”content”> <p style=”text-align: left; font-size: 16px;” data-mce-style=”text-align: left; font-size: 16px;”><strong>Depuis </strong><strong><img class=” alignleft wp-image-5809″ src=”http://www.ludotic.fr/wp-content/uploads/Fotolia_66342660_XS.jpg” alt=”Cookie loupe” width=”194″ height=”194″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/Fotolia_66342660_XS.jpg” /></strong><strong>quelques temps, les sites internet sont de plus en plus nombreux à afficher un message, dès notre arrivée, pour nous informer sur leur politique de confidentialité liée aux cookies.</strong></p> <p>Mais les internautes les comprennent-ils vraiment ? Quelle est leur utilité ? Sont-ils toujours bien conformes à la règlementation en vigueur ? Et surtout comment rendre la question accessible et digne d’intérêt pour les internautes ? L’approche UX (centrée expérience utilisateur) peut apporter des éléments de réponse.</p> <hr /> <p>Partie 1 : <a href=”#ckoi” data-mce-href=”#ckoi”>Les “cookies” : c’est quoi exactement ?</a><br />Partie 2 : <a href=”#cookiecheck” data-mce-href=”#cookiecheck”>Cookie Check : une interface <em>user-friendly</em> pour gérer ses cookies en toute légalité</a></p> <hr /> <h2 id=”ckoi”>Les « cookies » : c’est quoi exactement ?</h2> <p>Un cookie est un petit fichier texte (65ko) stocké sur l’ordinateur du visiteur d’un site internet. Il permet au site de garder en mémoire des informations concernant l’internaute pour les réutiliser lors de ses prochaines visites. Par exemple, son pseudo s’il le communique au site via un formulaire.</p> <p>Selon la <a href=”http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/” target=”_blank” rel=”noopener” data-mce-href=”http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/”>CNIL</a>, « le terme de cookies est à prendre au sens large et couvre l’ensemble des traceurs déposés et/ou lus, par exemple, lors de la consultation d’un site internet, de la lecture d’un courrier électronique, de l’installation ou de l’utilisation d’un logiciel ou d’une application mobile ».</p> <h3>Que doit faire un site internet pour être en règle ?</h3> <p>Pour être en conformité avec la règlementation, <strong>un bandeau</strong> doit apparaître dès l’arrivée de l’internaute sur le site qui requiert l’utilisation de cookies (quelle que soit la page).</p> <p>Ce bandeau, affiché préalablement à l’installation des cookies, doit :</p> <ul><li>Indiquer la finalité des cookies requis</li><li>Informer l’utilisateur que s’il poursuit sa navigation, il consent au dépôt de cookies sur son terminal</li><li>Proposer un lien permettant de s’opposer aux cookies ou de changer les paramètres</li></ul> <p><strong>Une page</strong> est donc disponible (au clic sur le lien du bandeau) pour permettre à l’utilisateur de comprendre ce qu’est un cookie et exprimer son choix (accepter, refuser ou paramétrer les cookies requis) en toute connaissance de cause.</p> <p>Le dépôt et la lecture des cookies ne sont pas autorisés si l’utilisateur exprime son refus ou ne poursuit pas sa navigation au clic sur un élément du site. Le consentement donné est valable 13 mois et la loi est applicable sur tous les terminaux (ordinateur, smartphone, tablette, consoles de jeux connectées etc.).</p> <h3> « Les cookies, c’est le mal » ?</h3> <p>Les cookies ont <strong>mauvaise réputation</strong> chez les internautes. La peur d’être traqué sur Internet, suivi dans ses activités de sites en sites semble aller de pair avec la crainte d’une société évoluant vers toujours plus de surveillance. Peut-être à juste titre.</p> <p>Or, la quasi-totalité des sites internet ont besoin de cookies pour fonctionner ! Résultat : les éditeurs de sites les utilisent mais n’en parlent pas (et en ce sens, contournent la loi) ou ne s’étalent pas sur le sujet (en maintenant les internautes dans leur ignorance voire en leur complexifiant la tâche pour rejeter les cookies).</p> <p>Mais, pourquoi les éditeurs ne peuvent-ils pas<strong> se passer des cookies ?</strong> Eh bien, si vous demandez à un développeur, celui-ci vous répondra certainement que l’utilisation d’un cookie est actuellement la manière la plus simple pour<strong> reconnaître un visiteur</strong> d’une session sur l’autre et même d’une page à l’autre du site, que la plupart des briques qu’il utilise pour façonner le site fonctionnent déjà avec des cookies.<img class=” wp-image-5813 alignright” src=”http://www.ludotic.fr/wp-content/uploads/Fotolia_66386694_XS.jpg” alt=”” width=”163″ height=”163″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/Fotolia_66386694_XS.jpg” /></p> <p>L’objectif premier d’un cookie participe à <strong>améliorer l’expérience utilisateur</strong> : savoir à qui l’on s’adresse, parler son langage, lui présenter du contenu pertinent, faciliter sa navigation en mémorisant ses préférences, ses dernières recherches etc. Ce n’est pas parce qu’un site utilise des cookies que c’est un mauvais site. D’ailleurs, ils en utilisent presque tous.</p> <p>En revanche, il y a <strong>plusieurs sortes de cookies</strong>. Certains sont plus ou moins utiles, plus ou moins intrusifs, plus ou moins légaux. Le sujet vaut donc la peine qu’on s’y intéresse !</p> <h3>La forme actuelle des bandeaux cookies satisfait-il quelqu’un ?</h3> <p>Malheureusement, personne ne semble vraiment satisfait par la forme que prennent les bandeaux cookies. Exemple de bandeau standard :</p> </div> </div> </div> </div> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_image av_drag ui-draggable” data-shortcodehandler=”av_image” data-modal_title=”Image” data-modal_ajax_hook=”av_image” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_image” data-modal_on_load=”modal_load_tabs, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_image avia_image_style avia_hidden_bg_box”> <div class=”avia-align-center ” data-update_class_with=”align”> <div class=”avia_layout_column avia_layout_column_no_cell avia_pop_class avia-no-visual-updates av_one_full avia-first-col av_drag ui-draggable” data-shortcodehandler=”av_one_full” data-modal_title=”Edit Column” data-modal_ajax_hook=”av_one_full” data-dragdrop-level=”2″ data-allowed-shortcodes=”av_one_full” data-modal_on_load=”modal_load_tabs, modal_load_multi_input, modal_load_colorpicker” data-width=”av_one_full”> <div class=”mceTemp”> <dl id=”” class=”wp-caption alignnone” style=”width: 967px;” data-mce-style=”width: 967px;”> <dt class=”wp-caption-dt”><a href=”http://www.ludotic.fr/wp-content/uploads/FireShot-Screen-Capture-308-Carrefour_fr-I-www_carrefour_fr.png” rel=”lightbox[postID]” data-mce-href=”http://www.ludotic.fr/wp-content/uploads/FireShot-Screen-Capture-308-Carrefour_fr-I-www_carrefour_fr.png”><img class=”attachment-full” title=”Exemple de bandeau cookies standard (www.carrefour.fr)” src=”http://www.ludotic.fr/wp-content/uploads/FireShot-Screen-Capture-308-Carrefour_fr-I-www_carrefour_fr.png” alt=”En poursuivant votre navigation sur notre site vous acceptez l’utilisation de cookies, pour vous proposer des contenus personnalisés en fonction de vos centres d’intérêts et mesurer la fréquentation de nos services, pour en savoir plus et paramétrer les cookies, cliquez ici” width=”967″ height=”47″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/FireShot-Screen-Capture-308-Carrefour_fr-I-www_carrefour_fr.png” /></a></dt> <dd class=”wp-caption-dd”>Exemple de bandeau cookies standard (www.carrefour.fr)</dd> </dl> </div> <p></p> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_textblock av_drag ui-draggable” data-shortcodehandler=”av_textblock” data-modal_title=”Bloc de texte” data-modal_ajax_hook=”av_textblock” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_textblock” data-modal_on_load=”modal_load_tabs, modal_load_tiny_mce, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <p>Les<strong> éditeurs de site</strong> voient probablement ces bandeaux imposés comme une contrainte qui peut effrayer et faire fuir leurs utilisateurs étant donné la réputation des cookies (hausse du taux de rebond, perte d’argent). Par ailleurs, ils craignent sûrement que leurs visiteurs refusent en grande partie leurs cookies s’ils mettent trop en avant la possibilité de le faire.</p> <p>Les <strong>utilisateurs novices</strong> qui ne comprennent pas le sujet ne le comprennent généralement pas mieux avec le bandeau. Le lien « en savoir plus » est souvent peu visible et conduit vers une page explicative de « six pieds de longs ». <a href=”http://www.pole-emploi.fr/informations/informations-legales-@/informations_legales/” target=”_blank” rel=”noopener” data-mce-href=”http://www.pole-emploi.fr/informations/informations-legales-@/informations_legales/”>Essayez pour voir</a> (exemple au clic sur le lien « En savoir plus » du site de Pôle Emploi) !</p> <p>Les <strong>utilisateurs intermédiaires</strong> qui souhaitent paramétrer les cookies peuvent cliquer sur le lien « en savoir plus/paramétrer » mais doivent lire ou scroller l’intégralité de la page-fleuve avant de se voir proposer des explications ou une liste de liens sur comment régler les cookies via leur navigateur. La tâche semble rude sachant que l’utilisateur est venu sur le site pour autre chose. A ce moment-là, il a d’autres préoccupations que celle d’aller lire des tutos et paramétrer son navigateur. Il risque de quitter le site (celui-ci perd un client potentiel) ou poursuivre sa navigation (le site frustre déjà son client potentiel d’autant plus que le fait de cliquer sur « en savoir plus » lui a fait quitter la page d’accueil, le portail du site).</p> <p>L’<strong>utilisateur avancé</strong> qui s’intéresse véritablement à la question des cookies a déjà configuré ses préférences via son navigateur Internet. Il n’a pas besoin qu’on lui demande ses préférences.</p> <p>Pour aller plus loin, une fois que l’utilisateur a vu défiler un certain nombre de bandeaux cookies insatisfaisants voire inutiles, il risque de les percevoir comme une pollution, une intrusion qui s’apparente quelque peu à un <strong>bandeau publicitaire</strong>. Pourquoi ? Parce que le bandeau est toujours placé au même endroit, sur le même format, sort du contexte et n’a rien à voir avec le sujet de la visite de l’internaute, comme une pop-up intempestive dont l’utilisateur peut se débarrasser au mieux au clic sur une croix, en se rendant sur une autre page ou au pire en quittant le site. Des études ont démontré qu’une zone publicitaire (ou apparentée) toujours placée au même endroit devient souvent progressivement ignorée par l’utilisateur. C’est ce qu’on appelle l’effet <a href=”http://www.ergolab.net/articles/publicite-sur-le-web-que-fait-l-ergonomie-.php/#4″ target=”_blank” rel=”noopener” data-mce-href=”http://www.ergolab.net/articles/publicite-sur-le-web-que-fait-l-ergonomie-.php/#4″><em>banner blindness</em> </a>!</p> </div> <h2 id=”cookiecheck”>Cookie Check : une interface <em>user-friendly</em> pour gérer ses cookies en toute légalité</h2> <div class=”avia_inner_shortcode avia-edit-element”> <p>Satisfaire à la fois les éditeurs et les internautes tout en étant conforme à la règlementation en vigueur : c’est l’objectif que s’est fixé une jeune entreprise innovante (avec l’interface <a href=”https://www.audito.fr/cookiecheck-plus.html” target=”_blank” rel=”noopener” data-mce-href=”https://www.audito.fr/cookiecheck-plus.html”>Cookie Check</a>) que nous avons eu le plaisir d’accompagner côté ergonomie.</p> <div class=”mceTemp”> <dl id=”attachment_6435″ class=”wp-caption aligncenter” style=”width: 525px;” data-mce-style=”width: 525px;”> <dt class=”wp-caption-dt”><img class=”wp-image-6435 size-full” src=”http://www.ludotic.fr/wp-content/uploads/pubCCplus.png” alt=”CookieCheck, après notre intervention (2016)” width=”525″ height=”421″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/pubCCplus.png” /></dt> <dd class=”wp-caption-dd”>CookieCheck, après notre intervention (2016)</dd> </dl> </div> <h3></h3> <h3>Les avantages de Cookie Check</h3> <p>La solution ne prétend pas à résoudre tous les problèmes évoqués plus haut mais propose néanmoins une interface de gestion parfaitement conforme à la loi, peu intrusive tout en permettant au visiteur de <strong>configurer son niveau de confidentialité directement depuis le site</strong> sans passer par son navigateur et sans changer de page. A chaque visite, l’internaute peut visualiser et modifier rapidement son choix s’il le souhaite. Il peut accéder à la liste des cookies utilisés par le site. Ces cookies sont classés par catégorie (audience, traceur etc.) et notés sur plusieurs critères (utilité, légalité, intrusivité etc.). Le visiteur a toutes les cartes en main pour faire son choix. Cette façon de procéder devrait encourager les éditeurs à bien choisir et justifier leurs cookies. Si c’est bien fait, il n’y a aucune raison pour que les internautes les refusent. ;-)</p> <p>Mais voilà… Comment<strong> rendre simple </strong>et<strong> attrayant </strong>un<strong> sujet d’apparence complexe </strong>et sensible pour un utilisateur lambda ? Comment lister tous les cookies (il peut y en avoir des centaines) et communiquer des informations sur chacun (utilité, légalité etc.) sans surcharger l’écran de l’utilisateur et sans le faire fuir ?</p> <h3>Les apports d’une approche UX</h3> <p>C’est là que les questions d’ergonomie interviennent, qu’il faut penser l’interface en fonction des <strong>besoins</strong> des internautes et du <strong>contexte</strong> dans lequel ils se trouvent ; prendre en compte les différents <strong>profils</strong> pour satisfaire le plus grand nombre.</p> </div> </div> </div> </div> <div class=”avia_layout_column avia_layout_column_no_cell avia_pop_class avia-no-visual-updates av_one_full avia-first-col av_drag ui-draggable” data-shortcodehandler=”av_one_full” data-modal_title=”Edit Column” data-modal_ajax_hook=”av_one_full” data-dragdrop-level=”2″ data-allowed-shortcodes=”av_one_full” data-modal_on_load=”modal_load_tabs, modal_load_multi_input, modal_load_colorpicker” data-width=”av_one_full”> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_textblock av_drag ui-draggable” data-shortcodehandler=”av_textblock” data-modal_title=”Bloc de texte” data-modal_ajax_hook=”av_textblock” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_textblock” data-modal_on_load=”modal_load_tabs, modal_load_tiny_mce, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <h3 class=”wp-image-6435 size-full”>Le bandeau cookies</h3> <p>La maquette de Cookie Check présente un bandeau sur le même modèle que ceux qu’on trouve un peu partout sur Internet.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_image av_drag ui-draggable” data-shortcodehandler=”av_image” data-modal_title=”Image” data-modal_ajax_hook=”av_image” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_image” data-modal_on_load=”modal_load_tabs, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_image avia_image_style avia_hidden_bg_box”> <div class=”avia-align-center ” data-update_class_with=”align”> <div class=”avia_layout_column avia_layout_column_no_cell avia_pop_class avia-no-visual-updates av_one_full avia-first-col av_drag ui-draggable” data-shortcodehandler=”av_one_full” data-modal_title=”Edit Column” data-modal_ajax_hook=”av_one_full” data-dragdrop-level=”2″ data-allowed-shortcodes=”av_one_full” data-modal_on_load=”modal_load_tabs, modal_load_multi_input, modal_load_colorpicker” data-width=”av_one_full”> <div class=”mceTemp”> <dl id=”” class=”wp-caption alignnone” style=”width: 997px;” data-mce-style=”width: 997px;”> <dt class=”wp-caption-dt”><a href=”http://www.ludotic.fr/wp-content/uploads/bandeau_cookie_check_avant.png” rel=”lightbox[postID]” data-mce-href=”http://www.ludotic.fr/wp-content/uploads/bandeau_cookie_check_avant.png”><img class=”attachment-full” title=”Bandeau Cookie Check avant intervention ergonomique” src=”http://www.ludotic.fr/wp-content/uploads/bandeau_cookie_check_avant.png” alt=”En poursuivant votre navigation sur ce site, vous acceptez l’installation de cookies pour la mesure d’audience, la connexion aux réseaux sociaux, la publicité personnalisée et l’adaptation de contenus à votre navigation. Changer votre niveau de confidentialité.” width=”997″ height=”32″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/bandeau_cookie_check_avant.png” /></a></dt> <dd class=”wp-caption-dd”>Bandeau Cookie Check avant intervention ergonomique</dd> </dl> </div> <p></p> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_textblock av_drag ui-draggable” data-shortcodehandler=”av_textblock” data-modal_title=”Bloc de texte” data-modal_ajax_hook=”av_textblock” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_textblock” data-modal_on_load=”modal_load_tabs, modal_load_tiny_mce, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_textblock avia_textblock_style” data-update_with=”content”> <h4>Susciter de l’intérêt</h4> <p>Un bandeau discret avec une phrase « bateau », c’est tout à fait conforme. Mais, <strong>côté expérience utilisateur, on peut faire mieux !</strong> On comprend tout à fait que les éditeurs ne souhaitent pas s’étaler sur la question mais cela se ressent et ne met pas en confiance. Avec une phrase commençant par « En poursuivant votre navigation sur ce site » vous êtes sûr que l’utilisateur comprenne tout de suite de quoi vous allez lui parler mais aussi quasi-sûr que celui-ci le perçoive en un clin d’œil comme inutile. Il risque de l’ignorer, légèrement agacé qu’on l’interrompe « encore » avec ça, sachant qu’il pense ne pas être en mesure de comprendre, ne pas avoir le choix ou ne pouvoir rien y faire simplement et rapidement.</p> <p>Puisqu’il faut faire apparaître un bandeau, autant l’assumer et faire ça bien ! <strong>La CNIL n’impose pas le format ni la formulation du contenu du bandeau</strong>. Alors, démarquez-vous pour être lu ! Faites savoir aux internautes que vous allez plus loin. Montrez-leur que, chez vous, ils ont véritablement le choix, tout est simple et rapide. Exemple :</p> <p>« Chez nous, le client est roi ! Vous pouvez tout gérer, même les cookies qui sont nécessaires à notre bon fonctionnement (ces cookies qui permettent…). <u>Choisissez votre niveau de confidentialité/sachez-en plus</u> ! Si vous vous en moquez, on s’occupe de tout : en poursuivant votre navigation, vous acceptez l’installation des cookies. »</p> <h4>Être explicite</h4> <p>Si le lien « changer votre niveau de confidentialité » conduit également à « en savoir plus » il est important de le préciser. Il n’est pas évident pour l’utilisateur de savoir s’il pourra accéder à la définition d’un cookie en cliquant sur « changer votre niveau de confidentialité ». De même, un lien intitulé « en savoir plus » n’indique pas clairement qu’il permet aussi l’accès à un paramétrage. S’il existe une page pour « en savoir plus » et une autre pour « paramétrer », il est, dans ce cas, pertinent de proposer deux liens dans le bandeau.</p> <h3>Le choix du niveau de confidentialité</h3> <p>Cookie Check permet un paramétrage des cookies sans quitter la page et sans se rendre dans les options de son navigateur. Comment ? Via une fenêtre modale apparaissant au clic sur le lien « changer votre niveau de confidentialité ».</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_image avia_image_style avia_hidden_bg_box”> <div class=”avia-align-center ” data-update_class_with=”align”> <div class=”avia_layout_column avia_layout_column_no_cell avia_pop_class avia-no-visual-updates av_one_full avia-first-col av_drag ui-draggable” data-shortcodehandler=”av_one_full” data-modal_title=”Edit Column” data-modal_ajax_hook=”av_one_full” data-dragdrop-level=”2″ data-allowed-shortcodes=”av_one_full” data-modal_on_load=”modal_load_tabs, modal_load_multi_input, modal_load_colorpicker” data-width=”av_one_full”> <div class=”mceTemp”> <dl id=”” class=”wp-caption aligncenter” style=”width: 620px;” data-mce-style=”width: 620px;”> <dt class=”wp-caption-dt”><img class=”attachment-full” title=”Maquette Cookie Check avant intervention ergonomique” src=”http://www.ludotic.fr/wp-content/uploads/cookie_check_avant.png” alt=”Interface de paramétrage du niveau de confidentialité Cookie Check” width=”620″ height=”383″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/cookie_check_avant.png” /></dt> <dd class=”wp-caption-dd”>Maquette Cookie Check avant intervention ergonomique</dd> </dl> </div> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_textblock av_drag ui-draggable” data-shortcodehandler=”av_textblock” data-modal_title=”Bloc de texte” data-modal_ajax_hook=”av_textblock” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_textblock” data-modal_on_load=”modal_load_tabs, modal_load_tiny_mce, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_textblock avia_textblock_style” data-update_with=”content”> <p>Dans cette maquette, les <strong>éléments visuels</strong> sont particulièrement intéressants. « <em>Funologie »</em> et « Design émotionnel » sont au rendez-vous :</p> <ul><li>le <strong>smiley-logo dynamique</strong> réagit en fonction des choix pris par l’utilisateur (orientation du regard, clignement d’œil)</li><li>le <strong>sélecteur</strong> pour changer son niveau de confidentialité est représenté sous la forme d’une porte ouverte, entrouverte ou fermée (acceptation totale, partielle ou refus des cookies)</li></ul> <p>Ce sont autant d’éléments qui rendent l’expérience agréable, humaine et divertissante. Mais cette interface donne-t-elle pour autant<strong> envie de poursuivre ?</strong> Est-elle<strong> claire et simple ?</strong></p> <h4>Aller à l’essentiel</h4> <p>Si par miracle (ou après usages de bons procédés au niveau du bandeau ;-)), votre utilisateur clique pour changer son niveau de confidentialité, ce n’est pas maintenant qu’il faut le faire fuir ! La question l’intéresse mais ne le noyez pas dans un flot d’explications. Rappelons que la <strong>configuration des cookies</strong> est, pour lui, <strong>une tâche secondaire</strong> qui doit être réalisée simplement et rapidement pour lui permettre de revenir à sa tâche principale. Il faut donc aller à l’essentiel.</p> <p>L’important pour l’utilisateur c’est de pouvoir changer son niveau de confidentialité. C’est d’ailleurs l’intitulé du lien sur lequel il a cliqué avant d’arriver sur cet écran. <strong>Le sélecteur qui permet le changement</strong> doit donc être central.</p> <p>Mais, avant de changer quoi que ce soit, il faut déjà rappeler à l’internaute ce qu’il change, <strong>« son niveau de confidentialité »</strong> (par défaut ou précédemment défini). Cet élément est à expliciter et mettre en avant. Pour <strong>clarifier les choses</strong>, la pop-up pourrait s’intituler « Changer votre niveau de confidentialité » ou « Votre niveau de confidentialité ».</p> <p>Pour finir, <strong>le bouton « appliquer »</strong> est d’une importance tout aussi capitale car c’est lui qui opère le changement après le choix effectué. Malheureusement, dans cette maquette, ce que l’utilisateur perçoit avant tout c’est un bloc de texte qu’il n’a pas forcément envie de lire.</p> <p>On dit qu’une image vaut mille mots. Peut-on pour autant supprimer complètement les explications sur le fonctionnement de la porte ? La métaphore de la porte est intéressante et plutôt bien choisie mais ne suffit pas à elle seule pour être comprise. Celle-ci n’est ni habituelle ni intuitive pour l’utilisateur. Il faut l’accompagner textuellement. Ces explications partent donc d’une très bonne intention mais un texte long risque d’être ignoré et, dans ce cas, ne résout en rien le problème d’incompréhension. Des <strong>labels</strong> et <strong>descriptions courtes</strong> d’une à deux phrases sont préférables pour une meilleure <strong>lisibilité au balayage du regard</strong>.</p> <h4>Présenter les informations dans un ordre logique</h4> <p>Bien disposer les éléments dans l’écran c’est prendre en compte <strong>la logique de l’utilisateur</strong> et suivre <strong>son cheminement pour réaliser la tâche</strong>. Ce que l’utilisateur veut savoir après avoir cliqué sur « changer son niveau de confidentialité », c’est avant tout :</p> <ol><li>Où il se trouve et quelle est la nature des informations qui lui sont présentées ?</li><li>Quelle est sa configuration et comment en choisir une autre (voir les autres) ?</li><li>Comment appliquer, valider son choix ?</li></ol> <p>Il est donc conseillé de disposer les éléments de la manière suivante :</p> <ol><li>Le <strong>logo</strong> et le <strong>titre</strong> en haut de l’écran pour le repérage</li><li>Le <strong>sélecteur</strong> de configurations prédéfinies en dessous, au cœur de l’écran</li><li>Le <strong>bouton « appliquer »</strong> en bas de l’écran (de coutume à droite) pour la validation</li></ol> <p>Le bouton « principal » étant le bouton « appliquer », on éloignera celui-ci du bouton « personnaliser ». Ce dernier est optionnel et doit donc être disposé de manière moins centrale, après les choix prédéfinis proposés et avant le bouton « appliquer » dans le sens de la lecture (de gauche à droite et de haut en bas en France).</p> <p>De cette manière, la disposition des éléments est cohérente avec le sens de lecture de l’internaute.</p> <p>Concernant la logique de fonctionnement du sélecteur, il est conseillé d’inverser la <strong>position du « + » et du « – »</strong>. On compte généralement du <strong>plus petit au plus grand</strong> et on lit de<strong> gauche à droite</strong>. On retrouve ce même ordre pour le réglage de zoom par exemple.</p> <p>Par ailleurs, dans la maquette de départ, cliquer sur le « + » ouvre la porte tandis que le « – » la ferme. Énoncé de cette manière, cela peut sembler logique : le « + » laisse entrer plus de cookies et inversement. Mais n’oublions pas de quoi on parle, d’où l’importance de donner un titre à l’écran ! On configure le niveau de confidentialité donc logiquement le « + » augmente le niveau (porte fermée aux cookies) et le « – » le diminue (porte ouverte aux cookies). Pour que le « + » mène vers une porte ouverte, il faudrait intituler l’écran « Nombre de cookies acceptés » et par soucis de cohérence renommer également le lien conduisant vers cet écran.</p> <h4>Proposer plusieurs niveaux d’informations</h4> <p>Cet écran va s’afficher pour tous les utilisateurs qui auront cliqué sur le lien « changer votre niveau de confidentialité » parmi lesquels on peut déjà différencier <em>grosso modo</em> les utilisateurs novices, intermédiaires et avancés.</p> <p>En proposant trois configurations prédéfinies aux utilisateurs, Cookie Check semble bien répondre au besoin de l’internaute novice en le guidant et lui formulant des suggestions. De même, il permet à l’utilisateur avancé de « paramétrer » son propre niveau de confidentialité en sélectionnant les cookies un à un. On a donc déjà deux niveaux d’informations proposés. Mais, est-ce suffisant pour <strong>couvrir tous les profils</strong> ?</p> <p>Lorsque l’utilisateur change son niveau de confidentialité en cliquant sur le « + » ou le « – », Cookie Check affiche la liste complète des cookies requis par le site internet (rappelons que cela peut aller jusqu’à plusieurs centaines). Lorsque la porte est fermée, ces cookies sont décochés. Lorsqu’elle est ouverte, ces cookies sont cochés. Lorsqu’elle est entrouverte, seulement ceux recommandés sont cochés. Voici la maquette initiale :</p> </div> </div> </div> </div> </div> </div> </div> </div> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_image av_drag ui-draggable” data-shortcodehandler=”av_image” data-modal_title=”Image” data-modal_ajax_hook=”av_image” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_image” data-modal_on_load=”modal_load_tabs, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_image avia_image_style avia_hidden_bg_box”> <div class=”avia-align-center ” data-update_class_with=”align”> <div class=”avia_layout_column avia_layout_column_no_cell avia_pop_class avia-no-visual-updates av_one_full avia-first-col av_drag ui-draggable” data-shortcodehandler=”av_one_full” data-modal_title=”Edit Column” data-modal_ajax_hook=”av_one_full” data-dragdrop-level=”2″ data-allowed-shortcodes=”av_one_full” data-modal_on_load=”modal_load_tabs, modal_load_multi_input, modal_load_colorpicker” data-width=”av_one_full”> <div class=”mceTemp”> <dl id=”” class=”wp-caption aligncenter” style=”width: 622px;” data-mce-style=”width: 622px;”> <dt class=”wp-caption-dt”><img class=”attachment-full” src=”http://www.ludotic.fr/wp-content/uploads/capture3_porte_ouverte.png” alt=”Niveau de confidentialité bas (avant)” width=”622″ height=”384″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/capture3_porte_ouverte.png” /></dt> <dd class=”wp-caption-dd”>Maquette Cookie Check avant intervention ergonomique (2)</dd> </dl> </div> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_textblock av_drag ui-draggable” data-shortcodehandler=”av_textblock” data-modal_title=”Bloc de texte” data-modal_ajax_hook=”av_textblock” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_textblock” data-modal_on_load=”modal_load_tabs, modal_load_tiny_mce, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_textblock avia_textblock_style” data-update_with=”content”> <p>Avec ce fonctionnement, on risque de <strong>surcharger</strong> inutilement l’écran pour l’<strong>utilisateur novice</strong>, qui se moque du détail. A l’inverse, en supprimant cette liste, on perd une <strong>information intéressante</strong> pour l’<strong>utilisateur intermédiaire curieux</strong> qui voudrait en savoir plus sur la configuration sélectionnée.</p> <p>Nous conseillons donc de placer ce niveau de détail sur un autre écran, qui serait accessible au clic sur un lien. Ainsi, l’utilisateur novice peut choisir d’accepter ou refuser tous les cookies sans se soucier de leur nature (sans être surchargé d’informations) et l’utilisateur intermédiaire peut se renseigner sur les cookies couverts par telle ou telle configuration, pour faire son choix en toute connaissance de cause. L’<strong>utilisateur avancé</strong> peut toujours cliquer sur <strong>« personnaliser »</strong> pour aller plus loin.</p> <p>Grâce à cet ensemble de règles d’ergonomie, voici un exemple de mise en page que nous pouvons proposer :</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_image av_drag ui-draggable” data-shortcodehandler=”av_image” data-modal_title=”Image” data-modal_ajax_hook=”av_image” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_image” data-modal_on_load=”modal_load_tabs, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_image avia_image_style avia_hidden_bg_box”> <div class=”avia-align-center ” data-update_class_with=”align”> <div class=”avia_layout_column avia_layout_column_no_cell avia_pop_class avia-no-visual-updates av_one_full avia-first-col av_drag ui-draggable” data-shortcodehandler=”av_one_full” data-modal_title=”Edit Column” data-modal_ajax_hook=”av_one_full” data-dragdrop-level=”2″ data-allowed-shortcodes=”av_one_full” data-modal_on_load=”modal_load_tabs, modal_load_multi_input, modal_load_colorpicker” data-width=”av_one_full”> <div class=”mceTemp”> <dl id=”” class=”wp-caption aligncenter” style=”width: 625px;” data-mce-style=”width: 625px;”> <dt class=”wp-caption-dt”><img class=”attachment-full” src=”http://www.ludotic.fr/wp-content/uploads/FireShot-Screen-Capture-323-pop-up_accueil-xotac3_axshare_com_pop-up_accueil_html.png” alt=”Niveau de confidentialité bas (après)” width=”625″ height=”385″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/FireShot-Screen-Capture-323-pop-up_accueil-xotac3_axshare_com_pop-up_accueil_html.png” /></dt> <dd class=”wp-caption-dd”>Maquette Cookie Check après intervention ergonomique</dd> </dl> </div> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_textblock av_drag ui-draggable” data-shortcodehandler=”av_textblock” data-modal_title=”Bloc de texte” data-modal_ajax_hook=”av_textblock” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_textblock” data-modal_on_load=”modal_load_tabs, modal_load_tiny_mce, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_textblock avia_textblock_style” data-update_with=”content”> <p>Par ailleurs, dans la maquette, hormis dans « personnaliser », les cases à cocher ne sont pas cliquables. Est-ce qu’on ne frustre pas l’internaute en lui proposant des cases à cocher avec lesquelles il ne peut pas interagir ? Nous recommandons donc de les supprimer et d’afficher uniquement les cookies autorisés ou refusés pour la configuration choisie.</p> <h3>Pour aller plus loin :</h3> <p>Concernant la façon de lister les cookies, il est intéressant de faire ce qu’on appelle un <strong>benchmark ergonomique</strong> autrement dit un tour d’horizon des pratiques courantes dans le domaine, sur des interfaces déjà connues par les internautes.</p> <h4>Se référer aux usages dans le domaine</h4> <p>Il n’est pas question de «copier» mais de reprendre les codes utilisés le plus couramment pour faciliter l’utilisation de notre interface. C’est une fois ces<strong> codes respectés</strong> que l’interface peut apporter en surcouche des <strong>éléments innovants et ludiques</strong> pouvant être appréciés et acceptés par les internautes. Comme pour la construction d’une maison, on commence toujours par bâtir les fondations (des bases solides et adaptées au mieux à la morphologie humaine) avant de meubler et décorer pour plaire et distraire. Ne mettez pas la charrue avant les bœufs !</p> <p>Mais revenons à nos <del>moutons </del>cookies. Les utilisateurs intéressés par la configuration minimale ou avancée des cookies ont probablement déjà utilisé les<strong> interfaces de gestion</strong> proposées par leur <strong>navigateur Internet</strong>. Alors, prenons, par exemple, Chrome et Firefox et intéressons-nous à la façon dont ils présentent les cookies.<br />L’un et l’autre ont un fonctionnement assez similaire qui permet d’afficher une grande quantité d’information dans une pop-up de taille limitée. Ils proposent une <strong>arborescence</strong> avec trois niveaux d’informations, les deux derniers étant accessibles au clic de l’utilisateur, selon son expertise et son intérêt.</p> <div class=”mceTemp”> <dl id=”attachment_5837″ class=”wp-caption aligncenter” style=”width: 1030px;” data-mce-style=”width: 1030px;”> <dt class=”wp-caption-dt”><a href=”http://www.ludotic.fr/wp-content/uploads/firefox_chrome_cookies-copie1.jpg” rel=”lightbox[postID]” data-mce-href=”http://www.ludotic.fr/wp-content/uploads/firefox_chrome_cookies-copie1.jpg”><img class=”wp-image-5837 size-large” title=”Interface de gestion des cookies de Firefox et Chrome” src=”http://www.ludotic.fr/wp-content/uploads/firefox_chrome_cookies-copie1-1030×450.jpg” alt=”” width=”1030″ height=”450″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/firefox_chrome_cookies-copie1-1030×450.jpg” /></a></dt> <dd class=”wp-caption-dd”>Interface de gestion des cookies de Firefox et Chrome</dd> </dl> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class=”avia_sortable_element avia_pop_class av_image av_drag ui-draggable” data-shortcodehandler=”av_image” data-modal_title=”Image” data-modal_ajax_hook=”av_image” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_image” data-modal_on_load=”modal_load_tabs, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_image avia_image_style avia_hidden_bg_box”> <div class=”avia-align-center ” data-update_class_with=”align”> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_textblock av_drag ui-draggable” data-shortcodehandler=”av_textblock” data-modal_title=”Bloc de texte” data-modal_ajax_hook=”av_textblock” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_textblock” data-modal_on_load=”modal_load_tabs, modal_load_tiny_mce, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_textblock avia_textblock_style” data-update_with=”content”> <ol><li>Au premier niveau, l’utilisateur visualise une <strong>liste de sites internet</strong> ayant déposé des cookies sur son ordinateur avec pour seule information le nombre de cookies déposés par chaque site internet</li><li>L’utilisateur peut cliquer sur chaque site pour dérouler la <strong>liste des cookies stockés</strong> par celui-ci, à un niveau d’informations complémentaires</li><li>Enfin, un troisième niveau de détail est offert, au clic, pour celui qui souhaite<strong> en savoir plus sur un cookie en particulier</strong></li></ol> <p>Ce dernier niveau diffère légèrement chez l’un et l’autre. Chrome le déroule directement en dessous du cookie sélectionné tandis que Firefox lui alloue une zone fixe en dessous de la liste et vient la remplir lorsqu’un cookie est sélectionné.</p> <p>On note également que le bouton de validation est toujours visible en position fixe en bas à droite de l’écran et la liste des cookies présentée au-dessus est, quant à elle, scrollable au besoin.</p> <h4>Application possible sur Cookie Check</h4> <p>Notre interface présente une liste de cookies groupés par catégories et évalués sur 5 critères. Par exemple, le niveau d’utilité et d’intrusivité : bon, moyen, mauvais. Mais, <strong>la place manque</strong> pour afficher ces critères de manière claire et le détail affiché pour chaque cookie résulte en un florilège de couleurs.</p> </div> </div> </div> </div> </div> </div> </div> </div> <div class=”avia_sortable_element avia_pop_class av_image av_drag ui-draggable” data-shortcodehandler=”av_image” data-modal_title=”Image” data-modal_ajax_hook=”av_image” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_image” data-modal_on_load=”modal_load_tabs, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_image avia_image_style avia_hidden_bg_box”> <div class=”avia-align-center ” data-update_class_with=”align”> <div class=”mceTemp”> <dl id=”” class=”wp-caption aligncenter” style=”width: 626px;” data-mce-style=”width: 626px;”> <dt class=”wp-caption-dt”><img class=”attachment-full” title=”Personnalisation du niveau de confidentialité avant intervention ergonomique” src=”http://www.ludotic.fr/wp-content/uploads/maquette_avant.png” alt=”Paramétrage des cookies” width=”626″ height=”389″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/maquette_avant.png” /></dt> <dd class=”wp-caption-dd”>Personnalisation du niveau de confidentialité avant intervention ergonomique</dd> </dl> </div> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_image av_drag ui-draggable” data-shortcodehandler=”av_image” data-modal_title=”Image” data-modal_ajax_hook=”av_image” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_image” data-modal_on_load=”modal_load_tabs, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_image avia_image_style avia_hidden_bg_box”> <div class=”avia-align-center ” data-update_class_with=”align”> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_textblock av_drag ui-draggable” data-shortcodehandler=”av_textblock” data-modal_title=”Bloc de texte” data-modal_ajax_hook=”av_textblock” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_textblock” data-modal_on_load=”modal_load_tabs, modal_load_tiny_mce, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_textblock avia_textblock_style” data-update_with=”content”>Avec cette mise en page et une <strong>arborescence à deux niveaux</strong>, il est impossible de pouvoir intituler chaque colonne/critère de manière lisible. Un système d’icône a été envisagé mais les critères sont trop peu communs pour que les icônes soient claires et facilement assimilables par les internautes. Reprendre le fonctionnement de Chrome et Firefox peut être une solution.</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class=”avia_sortable_element avia_pop_class av_image av_drag ui-draggable” data-shortcodehandler=”av_image” data-modal_title=”Image” data-modal_ajax_hook=”av_image” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_image” data-modal_on_load=”modal_load_tabs, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_image avia_image_style avia_hidden_bg_box”> <div class=”avia-align-center ” data-update_class_with=”align”> <div class=”avia_layout_column avia_layout_column_no_cell avia_pop_class avia-no-visual-updates av_one_full avia-first-col av_drag ui-draggable” data-shortcodehandler=”av_one_full” data-modal_title=”Edit Column” data-modal_ajax_hook=”av_one_full” data-dragdrop-level=”2″ data-allowed-shortcodes=”av_one_full” data-modal_on_load=”modal_load_tabs, modal_load_multi_input, modal_load_colorpicker” data-width=”av_one_full”> <p><a href=”http://www.ludotic.fr/wp-content/uploads/Liste-des-cookies3.jpg” rel=”lightbox[postID]” data-mce-href=”http://www.ludotic.fr/wp-content/uploads/Liste-des-cookies3.jpg”><img class=”aligncenter wp-image-5840 size-large” title=”Arborescence avant-après de la liste des cookies” src=”http://www.ludotic.fr/wp-content/uploads/Liste-des-cookies3-1030×752.jpg” alt=”” width=”1030″ height=”752″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/Liste-des-cookies3-1030×752.jpg” /></a></p> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_textblock av_drag ui-draggable” data-shortcodehandler=”av_textblock” data-modal_title=”Bloc de texte” data-modal_ajax_hook=”av_textblock” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_textblock” data-modal_on_load=”modal_load_tabs, modal_load_tiny_mce, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_textblock avia_textblock_style” data-update_with=”content”>Pour <strong>alléger l’écran</strong> tout en conservant un <strong>maximum d’informations pertinentes</strong>, nous recommandons l’ajout d’un <strong>troisième niveau d’arborescence</strong>. Au premier niveau, la catégorisation des cookies nous paraît pertinente. Mais le second niveau peut être simplifié et épuré. Au lieu d’afficher directement le classement du cookie (bon, moyen, mauvais) pour les cinq critères de référence, nous suggérons d’afficher dans un premier temps une <strong>note globale</strong> obtenue en faisant la moyenne de ces 5 valeurs.<br />Cette vue est synthétique et visible d’un coup d’œil par l’internaute qui peut plus rapidement comparer le classement des différents cookies. Pour reprendre une autre pratique courante, cette notation peut prendre la forme d’étoiles. 5/5 = 5 étoiles pleines, 0/5 = 5 étoiles vides etc.</div> </div> </div> </div> </div> </div> </div> </div> </div> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_image av_drag ui-draggable” data-shortcodehandler=”av_image” data-modal_title=”Image” data-modal_ajax_hook=”av_image” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_image” data-modal_on_load=”modal_load_tabs, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_image avia_image_style avia_hidden_bg_box”> <div class=”avia-align-center ” data-update_class_with=”align”> <div class=”avia_layout_column avia_layout_column_no_cell avia_pop_class avia-no-visual-updates av_one_full avia-first-col av_drag ui-draggable” data-shortcodehandler=”av_one_full” data-modal_title=”Edit Column” data-modal_ajax_hook=”av_one_full” data-dragdrop-level=”2″ data-allowed-shortcodes=”av_one_full” data-modal_on_load=”modal_load_tabs, modal_load_multi_input, modal_load_colorpicker” data-width=”av_one_full”> <div class=”mceTemp”> <dl id=”” class=”wp-caption aligncenter” style=”width: 636px;” data-mce-style=”width: 636px;”> <dt class=”wp-caption-dt”><img class=”attachment-full” title=”Personnalisation du niveau de confidentialité après intervention ergonomique” src=”http://www.ludotic.fr/wp-content/uploads/personnaliser_apres.png” alt=”personnaliser_apres” width=”636″ height=”391″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/personnaliser_apres.png” /></dt> <dd class=”wp-caption-dd”>Personnalisation du niveau de confidentialité après intervention ergonomique</dd> </dl> </div> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_textblock av_drag ui-draggable” data-shortcodehandler=”av_textblock” data-modal_title=”Bloc de texte” data-modal_ajax_hook=”av_textblock” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_textblock” data-modal_on_load=”modal_load_tabs, modal_load_tiny_mce, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_textblock avia_textblock_style” data-update_with=”content”>Si l’utilisateur souhaite en savoir plus sur la nature d’un cookie et la note qui lui est attribuée, celui-ci peut <strong>déplier ces informations</strong> en cliquant sur la « ligne » qui l’intéresse. Ce niveau de détail peut désormais occuper 100% de la largeur de l’écran ce qui permet de <strong>clarifier </strong>l’interface et <strong>expliciter</strong> les critères.</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class=”avia_inner_shortcode avia_connect_sort av_drop ui-droppable” data-dragdrop-level=”2″> <div class=”avia_sortable_element avia_pop_class av_image av_drag ui-draggable” data-shortcodehandler=”av_image” data-modal_title=”Image” data-modal_ajax_hook=”av_image” data-dragdrop-level=”3″ data-allowed-shortcodes=”av_image” data-modal_on_load=”modal_load_tabs, modal_load_colorpicker”> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_image avia_image_style avia_hidden_bg_box”> <div class=”avia-align-center ” data-update_class_with=”align”> <div class=”avia_image_container” data-update_with=”src” data-update_template=”<img src='{{src}}’ alt=”/><p>”></p> <div class=”mceTemp”> <dl id=”” class=”wp-caption aligncenter” style=”width: 633px;” data-mce-style=”width: 633px;”> <dt class=”wp-caption-dt”><img class=”attachment-full” title=”Personnalisation du niveau de confidentialité après intervention ergonomique (2)” src=”http://www.ludotic.fr/wp-content/uploads/personnaliser_apres_2.png” alt=”personnaliser_apres_2″ width=”633″ height=”394″ data-mce-src=”http://www.ludotic.fr/wp-content/uploads/personnaliser_apres_2.png” /></dt> <dd class=”wp-caption-dd”>Personnalisation du niveau de confidentialité après intervention ergonomique (2)</dd> </dl> </div> </div> </div> </div> </div> </div> </div> <div class=”avia_inner_shortcode avia-edit-element”> <div class=”avia_textblock avia_textblock_style” data-update_with=”content”> <p>De même, au lieu de présenter les catégories de cookies dans des <strong>onglets</strong> (statistique, réseau social, publicitaire, traceur), il pourrait être intéressant de les présenter sous forme de <strong>liste</strong> et de manière dépliable puisque c’est une pratique courante sur les navigateurs.</p> <p>Pour aller plus loin, un <strong>système de tri</strong> pourrait être proposé pour visualiser la liste sous différents angles (par catégories, par ordre alphabétique, par notation, par critère spécifique, etc.). D’autres détails peuvent être améliorés. Par exemple, le fait que la différence de notation des critères ne se fasse pas uniquement par la couleur (rouge, orange, vert).</p> <p>Ce type d’approche est valable pour toute autre problématique ! Un <a href=”http://www.ludotic.fr/prestations-ergonomie/test-utilisateur/” target=”_blank” rel=”noopener” data-mce-href=”http://www.ludotic.fr/prestations-ergonomie/test-utilisateur/”>test utilisateur</a> permettrait de mesurer concrètement l’impact des modifications.</p> <p>C’est pas tout mais moi je file chez <a href=”http://www.emiliescookies.com/” target=”_blank” rel=”noopener” data-mce-href=”http://www.emiliescookies.com/”>Emilie’s</a>, notre fournisseur de cookies préféré ! ;-)</p> <h4>Sources :</h4> </div> <p><a href=”https://www.audito.fr/” data-mce-href=”https://www.audito.fr/”>https://www.audito.fr/</a></p> <div class=”avia_textblock avia_textblock_style” data-update_with=”content”> <p><a href=”http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/” data-mce-href=”http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/”>http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/</a></p> <p><a href=”http://www.ergolab.net/articles/publicite-sur-le-web-que-fait-l-ergonomie-.php/#4″ data-mce-href=”http://www.ergolab.net/articles/publicite-sur-le-web-que-fait-l-ergonomie-.php/#4″>http://www.ergolab.net/articles/publicite-sur-le-web-que-fait-l-ergonomie-.php/#4</a></p> </div> </div>