<!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 l’exemplarité - 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="principles6-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 l’exemplarité</h1>
<div class="row">
<div class="col-md-8">
<p class="small"><span class="far fa-clock"></span> Durée de la lecture : 3,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> Décrire le contenu de la catégorie en donnant des exemples. </p>
<p><strong>Dans la pratique :</strong> Dans la zone de contenu, concevoir la navigation de manière à incorporer des exemples. Il peut s’agir, par exemple, de textes explicatifs ou de graphiques qui soutiennent directement le lien. </p>
<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> Le graphique décoratif est en étroite corrélation avec le sujet. </p>
<ul class="list-unstyled mrgn-bttm-sm">
<li><strong>Titre :</strong> Citoyenneté canadienne</li>
<li><strong>Image :</strong> Photo d’une jeune fille souriante agitant le drapeau du Canada contre un ciel bleu</li>
</ul>
<div class="wb-lbx thumbnail"> <a href="images/exemplars-pass1a-f.jpg" ><img src="images/exemplars-pass1a-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<ul class="list-unstyled mrgn-bttm-sm">
<li><strong>Titre :</strong> Passeports canadiens</li>
<li><strong>Image :</strong> Photo d’une main tenant un passeport canadien devant une carte du monde</li>
</ul>
<div class="wb-lbx thumbnail"> <a href="images/exemplars-pass1b-f.jpg" ><img src="images/exemplars-pass1b-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Rappelez-vous : Les images peuvent renforcer et consolider le message de la page. Les images peuvent être littérales ou métaphoriques.</strong></p>
</li>
<li class="mrgn-bttm-xl">
<p><span class="fas fa-check-circle text-success fa-li"></span><span class="text-success">Réussite :</span> Au lieu de mettre simplement le texte du lien « Tables », « Chaises salle à manger », etc., des photos des produits sont également présentées dans le contexte du lien.</p>
<div class="wb-lbx thumbnail"> <a href="images/exemplars-pass2-f.jpg"><img src="images/exemplars-pass2-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong> Rappelez-vous : La combinaison du texte du lien avec des images en exemple aide l’utilisateur à faire un choix éclairé.</strong></p>
</li>
<li class="mrgn-bttm-xl">
<p><span class="fas fa-check-circle text-success fa-li"></span><span class="text-success">Réussite :</span> Le texte qui se trouve directement sous le lien du sujet donne des exemples du type de contenu que l’on pourrait trouver sur cette page. Par exemple :</p>
<p><strong> Emplois</strong><br>
Trouver un emploi, formation, programmes d’embauche, permis de travail, numéro d’assurance sociale (NAS)</p>
<div class="wb-lbx thumbnail"> <a href="images/exemplars-pass3-f.jpg"><img src="images/exemplars-pass3-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Rappelez-vous : Les mots-clés qui soutiennent un lien peuvent renforcer la compréhension de l’utilisateur, sans qu’il ait à passer à la page suivante.</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> Le thème de la page est la classe moyenne et quatre images y sont présentées. Le problème, c’est qu’on ne montre que des personnes âgées d’environ 25 à 35 ans. Bien que les images représentent bien la diversité ethnique et la diversité entre le travail et la vie personnelle, il n’y a presque pas de diversité d’âge. Comme la classe moyenne n’a pas de limite d’âge, les images manquent l’occasion d’être inclusives.</p>
<div class="wb-lbx thumbnail"> <a href="images/exemplars-fail1-f.jpg"><img src="images/exemplars-fail1-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong> Rappelez-vous : Une image n’a pas besoin de représenter tous les scénarios, elle est plus conceptuelle à ce stade. Cependant, l’ajout d’une suite d’images signifie qu’il devrait y avoir une représentation plus large.</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> Le graphique décoratif ne correspond pas au sujet. </p>
<ul class="list-unstyled mrgn-bttm-sm">
<li><strong>Titre :</strong> Subventions et financement pour les entreprises</li>
<li><strong>Image :</strong> Photo de mains tenant un tas de terre avec une petite plante qui en sort</li>
</ul>
<div class="wb-lbx thumbnail"> <a href="images/exemplars-fail2a-f.jpg"><img src="images/exemplars-fail2a-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<ul class="list-unstyled mrgn-bttm-sm">
<li><strong>Titre :</strong> Tabagisme, vapotage et tabac</li>
<li><strong>Image :</strong> Photo d’un adulte souriant avec un enfant souriant sur les épaules, sur un fond d’aquarelle bleue aux côtés tachetés de gris </li>
</ul>
<div class="wb-lbx thumbnail"> <a href="images/exemplars-fail2b-f.jpg"><img src="images/exemplars-fail2b-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<ul class="list-unstyled mrgn-bttm-sm">
<li><strong>Titre :</strong> Impôt sur le revenu</li>
<li><strong>Image :</strong> Photo d’un homme souriant à son ordinateur</li>
</ul>
<div class="wb-lbx thumbnail"> <a href="screenshots/exemplars2-e-f.jpg"><img src="images/exemplars-fail2c-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Rappelez-vous : Les images en exemple ne sont utiles que lorsqu’elles sont de véritables exemples de ce qui est véhiculé, au sens propre comme au sens figuré. Les images génériques n’ont aucune valeur pour l’utilisateur et peuvent en fait gêner son expérience. </strong></p>
</li>
</ul>
<h2 id="h_3">À retenir</h2>
<p>L’objectif de ce principe est d’améliorer le contenu en y ajoutant des exemples, le cas échéant. 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 images en exemple ajoutent de la valeur et se rapportent au contenu </li>
<li><span class="fas fa-li fa-check text-success"></span> le texte de l’exemple ajoute de la valeur et se rapporte au contenu</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="principles5-f.html" rel="prev">Principe de croissance</a> </li>
<li class="next"> <a href="principles7-f.html" rel="next">Principe de la classification multiple</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="completed"><a href="principles2-f.html">Principe de la divulgation</a></li>
<li class="completed"><a href="principles3-f.html">Principe des portes d’entrée</a></li>
<li class="completed"><a href="principles4-f.html">Principe des objets</a></li>
<li class="completed"><a href="principles5-f.html">Principe de croissance</a></li>
<li class="active"><span>Principe de l’exemplarité</span></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>