<!DOCTYPE html><!--[if lt IE 9]><html class="no-js lt-ie9" lang="fr" dir="ltr"><![endif]--><!--[if gt IE 8]><!-->
<html class="no-js" lang="fr" dir="ltr">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->
<title>Principe de la divulgation - Architecture de l’information</title>
<meta content="width=device-width,initial-scale=1" name="viewport">
<meta name="description" content="">
<!--[if gte IE 9 | !IE ]><!-->
<link href="images/favicon-f.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="https://wet-boew.github.io/themes-dist/GCWeb/css/theme.min.css">
<!--<![endif]-->
<!--[if lt IE 9]>
<link href="images/favicon-f.ico" rel="shortcut icon" />
<link rel="stylesheet" href="https://wet-boew.github.io/themes-dist/GCWeb/css/ie8-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/wet-boew/js/ie8-wet-boew.min.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<![endif]-->
<noscript>
<link rel="stylesheet" href="https://wet-boew.github.io/themes-dist/GCWeb/wet-boew/css/noscript.min.css" />
</noscript>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="css/new.css" />
</head>
<body vocab="https://schema.org/" typeof="WebPage">
<ul id="wb-tphp">
<li class="wb-slc"> <a class="wb-sl" href="#wb-cont">Passer au contenu principal</a> </li>
</ul>
<header>
<div id="wb-bnr" class="container">
<section id="wb-lng" class="text-right">
<h2 class="wb-inv">Sélection de la langue</h2>
<div class="row">
<div class="col-md-12">
<ul class="list-inline margin-bottom-none">
<li><a lang="fr" href="principles2-e.html">English</a></li>
</ul>
</div>
</div>
</section>
<div class="row">
<div class="brand col-xs-5 col-md-4"> <a href="index-f.html"><img src="images/logo-f.png" alt=""><span class="wb-inv">Architecture de l’information</span></a> </div>
</div>
</div>
<nav id="wb-bc" property="breadcrumb">
<h2>Vous êtes ici : </h2>
<div class="container">
<ol class="breadcrumb">
<li><a href="index-f.html">Accueil</a></li>
<li><a href="principles-f.html">Principes</a></li>
</ol>
</div>
</nav>
</header>
<main property="mainContentOfPage" class="container">
<h1 property="name" id="wb-cont">Principe de la divulgation</h1>
<div class="row">
<div class="col-md-8">
<p class="small"><span class="far fa-clock"></span> Durée de la lecture : 5 minutes</p>
<h2 class="h4">Sur cette page</h2>
<ul>
<li><a href="#h_1">Aperçu</a></li>
<li><a href="#h_2">Exemples</a></li>
<li><a href="#h_3">À retenir</a></li>
</ul>
<h2 id="h_1">Aperçu</h2>
<p><strong>Définition :</strong> Afficher seulement assez d’information pour aider l’utilisateur à comprendre le type de renseignements qu’il trouvera au fur et à mesure qu’il fouillera davantage. </p>
<p><strong>Dans la pratique :</strong> La divulgation progressive consiste à ne présenter que la quantité d’information dont l’utilisateur a besoin pour accomplir une tâche donnée. Des informations supplémentaires pourront être trouvées dans les couches en dessous de cette page. <strong>Montrer l’information appropriée ne signifie pas nécessairement montrer moins d’information.</strong> </p>
<p>Cela est corroboré par :</p>
<dl class="dl-horizontal brdr-bttm">
<dt>La première loi de Krug </dt>
<dd>
<p><strong>Définition :</strong> Ne me faites pas réfléchir!</p>
<p><strong>Dans la pratique :</strong> La plupart des sites sont remplis de texte et d’images - y compris la navigation dans la barre de menu, les options du menu latéral, le contenu principal, le contenu secondaire, les annonces clignotantes, etc. Il peut être difficile pour un utilisateur de saisir rapidement ce qui est important. Au fur et à mesure qu’ils parcourent la page, de nombreuses questions surgissent dans l’esprit des utilisateurs.</p>
</dd>
<dt>La deuxième loi de Krug</dt>
<dd>
<p><strong>Définition :</strong> Le nombre de fois où je dois cliquer importe peu, tant que chaque clic est un choix aisé, <strong>sans ambiguïté</strong>. </p>
<p><strong>Dans la pratique :</strong> Les utilisateurs préfèrent les choix faciles. Ils veulent des clics non réfléchis si l’achèvement de la tâche nécessite de nombreuses pages.</p>
</dd>
<dt>Loi de Fitts</dt>
<dd>
<p><strong>Définition :</strong> Le modèle du mouvement humain utilisé principalement dans l’interaction homme-machine et l’ergonomie. Cette loi scientifique prédit que le temps nécessaire pour se déplacer rapidement vers une zone cible est fonction du rapport entre la distance à la cible et sa largeur. </p>
<p><strong>Dans la pratique :</strong> Plus un objet est grand et plus il est proche de nous, plus il est facile à utiliser. Réduisez les choix au minimum afin d’exposer le plus grand nombre d’éléments dans la fenêtre d’affichage.<strong> Rappelez-vous qu’il existe différentes clôtures d’affichage en fonction de la résolution de l’écran de l’utilisateur, du périphérique et de la taille de la police.</strong> </p>
</dd>
</dl>
<h2 id="h_2">Exemples</h2>
<h3 id="h_2_1" class="text-success">Exemples de réussite</h3>
<ul class="fa-ul">
<li class="mrgn-bttm-xl">
<p><span class="fas fa-check-circle text-success fa-li"></span><span class="text-success">Réussite :</span> Seules les tâches de haut niveau sont présentées sur cette page relative à la citoyenneté canadienne. Les liens sont clairs et ne se chevauchent pas, ce qui signifie que l’utilisateur peut anticiper les informations disponibles au <strong>niveau inférieur</strong>. </p>
<div class="wb-lbx thumbnail"> <a href="images/disclosure-pass1-f.jpg"><img src="images/disclosure-pass1-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Rappelez-vous : N’offrir que le nombre suffisant de choix pour aider l’utilisateur à comprendre et à prendre une décision éclairée. </strong></p>
</li>
</ul>
<h3 id="h_2_2" class="text-danger">Exemples d’échec</h3>
<p><strong>Avis de non-responsabilité :</strong> Les exemples ci-dessous sont utilisés à des fins d’apprentissage pour illustrer les principes brisés et leurs conséquences potentielles, et non pour juger les organisations ou les personnes qui conçoivent ces interfaces.</p>
<ul class="fa-ul">
<li class="mrgn-bttm-xl">
<p><span class="fas fa-times-circle text-danger fa-li"></span><span class="text-danger">Échec :</span> Cette page contient des ressources générales sur la santé, dont trois visent les enfants :</p>
<ul>
<li>« Sommeil sécuritaire »</li>
<li>« Obésité juvénile »</li>
<li>« Soins des nourrissons »</li>
</ul>
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/disclosure-fail1-f.jpg"><img src="images/disclosure-fail1-f.jpg" alt="Website screenshot" class="img-responsive" /> </a> </div>
<p>Au lieu de les présenter tous les trois sur cette page, il est logique de les regrouper dans une catégorie plus large qui se concentre sur ce segment d’audience. Par exemple, « Enfants en bonne santé » ou « Santé des enfants ».</p>
<p>Une fois le nouveau groupe formé, il deviendrait plus évident qu’il y a un certain chevauchement entre les « Soins des nourrissons » et le « Sommeil sécuritaire ». Vous devrez alors vous attaquer à ce problème et probablement faire du « Sommeil sécuritaire » une sous-catégorie (page enfant) sous « Soins des nourrissons ».</p>
<p>La « Santé des jeunes » est logique comme catégorie à part entière, car il est peu probable que ce groupe se considère comme des « enfants » et ne devrait pas être regroupé. Il faudrait que cette catégorie soit parallèle à l’équivalent pour l’enfance. Les options seraient donc « Santé des jeunes » et « Santé des enfants » ou « Jeunes en santé » et « Enfants en santé ».</p>
<p><strong>Rappelez-vous : Lorsque les liens sont en concurrence les uns avec les autres, l’utilisateur ne peut pas avoir une idée du but distinct de chaque lien. Par conséquent, l’utilisateur ne peut pas anticiper ce qu’il va trouver s’il fouille plus profondément.</strong></p>
</li>
<li class="mrgn-bttm-xl">
<p><span class="fas fa-times-circle text-danger fa-li"></span><span class="text-danger">Échec :</span> Cette page associée à l’emploi comporte deux liens qui sont en compétition lorsqu’ils sont présentés au même niveau :</p>
<ul>
<li>« Guichet-Emplois »</li>
<li>« Trouver un emploi »</li>
</ul>
<p>Voulez-vous trouver un emploi en utilisant le Guichet-Emplois ou allez-vous au Guichet-Emplois pour trouver un emploi? </p>
<div class="wb-lbx thumbnail"> <a href="images/disclosure-fail2a-f.jpg"><img src="images/disclosure-fail2a-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p>De plus, lorsque vous allez à la page « Trouver un emploi », le « Guichet-Emplois » figure comme premier élément. Cela rompt la hiérarchie de l’AI, parce que « Guichet-Emplois » ne peut pas être un équivalent à la page au-dessus et constituer aussi un sous-élément ici : </p>
<div class="wb-lbx thumbnail"> <a href="images/disclosure-fail2b-f.jpg"><img src="images/disclosure-fail2b-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Rappelez-vous : Bien qu’il soit courant de vouloir mettre en valeur des articles populaires, il faut les placer dans une section comme « Liens populaires » et ne pas les mettre dans l’espace où la structure générale du site Web est présentée en un coup d’œil (à moins, bien sûr, que cet article populaire soit aussi la catégorie d’information de haut niveau).</strong></p>
</li>
<li class="mrgn-bttm-xl">
<p><span class="fas fa-times-circle text-danger fa-li"></span><span class="text-danger">Échec :</span> Il y a quelques préoccupations liées à l’AI sur cette page : </p>
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/disclosure-fail3-f.jpg"><img src="images/disclosure-fail3-f.jpg" alt="Website screenshot" class="img-responsive" /> </a> </div>
<ul class="mrgn-tp-md lst-spcd">
<li>Il existe une vaste catégorie de « Maladies évitables par la vaccination » et la grippe est l’une de ces maladies. Par contre « Le vaccin antigrippal » a été élevé au même niveau. C’est peut-être parce que c’est un article populaire ou parce que les gens ne voient pas la grippe comme une maladie. Il s’agissait peut-être d’une tentative de résoudre un problème, mais il semble que la solution n’ait pas pris la forme d’une approche globale sur le Web; il y avait peut-être d’autres façons de résoudre ce problème en explorant davantage la différence de langage entre « vaccination » et « immunisation », qui peut poser un problème. </li>
<li>Il existe une vaste catégorie de « Vaccination pour enfants », mais les sous-catégories sur le thème de l’enfance ont été reprises au même niveau :
<ul>
<li>« Le calendrier de vaccination de votre enfant »</li>
<li>« Information pour les membres des Premières nations et les Inuits – Les vaccins : comment protègent-ils les enfants »</li>
<li>« Information pour les membres des Premières nations et les Inuits – Les vaccins : assurez-vous que vos enfants ont leurs vaccins »
</li>
</ul>
</li>
</ul>
<p> N’oubliez pas que si le moteur de recherche a conduit l’utilisateur directement à la page « Vaccination pour enfants », il n’a pas accès à ces trois pages parce qu’elles n’étaient pas présentées au bon niveau de l’AI.</p>
<p> Aussi, quelle est la différence entre ces deux pages : « Information pour les membres des Premières nations et les Inuits – Les vaccins : comment protègent-ils les enfants » et « Information pour les membres des Premières nations et les Inuits – Les vaccins : assurez-vous que vos enfants ont leurs vaccins »?</p>
<p><strong> Rappelez-vous : Souvent, l’élévation du contenu à un niveau d’AI plus élevé est un sous-produit de la nécessité pour l’organisation de présenter un contenu spécifique afin de maximiser sa visibilité. L’astuce consiste à trouver un équilibre entre les besoins opérationnels et ceux des utilisateurs au moyen des principes d’AI, et à trouver une solution qui réponde aux deux.</strong></p>
</li>
</ul>
<h2 id="h_3">À retenir</h2>
<p>Le but de ce principe est de ne montrer que l’information nécessaire pour permettre à l’utilisateur de faire un choix éclairé. Pour ce faire, vous devez veiller à ce que : </p>
<ul class="fa-ul lst-spcd">
<li><span class="fas fa-li fa-check text-success"></span> les choix sont logiques </li>
<li><span class="fas fa-li fa-check text-success"></span> les choix ne se font pas concurrence ou n’entrent pas en conflit les uns avec les autres </li>
</ul>
<nav role="navigation"> <h2 class="wb-inv">Navigation dans le document</h2>
<ul class="pager mrgn-tp-xl">
<li class="previous"> <a href="principles1-f.html" rel="prev">Principe des choix</a> </li>
<li class="next"> <a href="principles3-f.html" rel="next">Principe des portes d’entrée</a></li>
</ul>
</nav>
</div>
<div class="col-md-4">
<h2 class="wb-inv">Toutes les sections du cours</h2>
<ol class="vertical-steps">
<li class="completed"><a href="purpose-f.html">Objet</a></li>
<li class="completed"><a href="foundations-f.html">Fondements</a></li>
<li class="completed"><a href="elements-f.html">Éléments</a></li>
<li class="completed"><a href="principles-f.html">Principes</a>
<ol>
<li class="completed"><a href="principles1-f.html">Principe des choix</a></li>
<li class="active"><span>Principe de la divulgation</span></li>
<li><a href="principles3-f.html">Principe des portes d’entrée</a></li>
<li><a href="principles4-f.html">Principe des objets</a></li>
<li><a href="principles5-f.html">Principe de croissance</a></li>
<li><a href="principles6-f.html">Principe de l’exemplarité</a></li>
<li><a href="principles7-f.html">Principe de la classification multiple</a></li>
<li><a href="principles8-f.html">Principe de la navigation ciblée</a></li>
</ol>
</li>
<li><a href="disciplines-f.html">Disciplines et domaines d’études connexes</a></li>
<li><a href="resources-f.html">Ressources</a></li>
</ol>
</div>
</div>
<dl id="wb-dtmd">
<dt>Date de modification :  </dt>
<dd>
<time property="dateModified">2019-02-22</time>
</dd>
</dl>
</main>
<!--[if gte IE 9 | !IE ]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/wet-boew/js/wet-boew.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/wet-boew/js/ie8-wet-boew2.min.js"></script>
<![endif]-->
<script src="https://wet-boew.github.io/themes-dist/GCWeb/js/theme.min.js"></script>
</body>
</html>