<!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 croissance - 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="principles5-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 croissance</h1>
<div class="row">
<div class="col-md-8">
<p class="small"><span class="far fa-clock"></span> Durée de la lecture : 6 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> Prévoir que le contenu que vous avez aujourd’hui représente une petite fraction du contenu que vous aurez demain.</p>
<p><strong>Dans la pratique :</strong> La conception du contenu page par page n’est pas stratégique, car un site prend de l’ampleur avec le temps. Les formes, les modèles, les systèmes de navigation et le contenu lui-même doivent prévoir les façons dont le site pourrait croître. Il faut élaborer un plan stratégique pour permettre cette croissance. </p>
<blockquote class="mrgn-lft-lg">
<p>Pour la plupart des sites Web, le contenu est une entité organique et inconstante. Il est peu probable que la complexité ou la quantité de contenu présenté sur un site Web cette année reste la même l’année prochaine.</p>
<p>Ce qui signifie qu’il est important de gérer votre contenu avec souplesse. Les outils de recherche et le cadre général de données que vous mettez en œuvre devraient être évolutifs de façon inhérente, de sorte qu’ils puissent assimiler de grandes quantités de nouveau contenu avec peu d’efforts.</p>
<p>Vous devez prendre le temps de réfléchir au type de contenu qui pourrait être incorporé dans les années à venir, et cela doit se rapporter à des catégories de contenu complètement nouvelles, ainsi qu’à l’expansion de celles déjà présentées sur le site Web. C’est une bonne idée de considérer comment ce nouveau contenu sera lié au contenu existant, comment ils pourront se compléter et comment il pourra être facilement assimilé sans avoir à refondre le site.</p>
<p>Les principes énoncés sont essentiels pour établir des hiérarchies de données efficaces. Bien que certains seront sans aucun doute plus utiles que d’autres pour des tâches spécifiques, la capacité de réfléchir à chacun d’eux et de les évaluer est quelque chose qui mènera à des approches de données simplifiées. Comme tous les concepteurs devraient le savoir, une hiérarchie améliorée des données est une bonne façon d’accroître la satisfaction des utilisateurs.</p>
<footer class="text-right">Bogdan Sandu<br>
<cite lang="en"><a href="https://www.designyourway.net/blog/inspiration/the-principles-of-information-architecture/" rel="external">The Principles Of Information Architecture (disponible en anglais seulement)</a></cite> </footer>
</blockquote>
<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> La conception de la page permet d’ajouter facilement un plus grand nombre d’éléments de navigation, au besoin. </p>
<div class="wb-lbx thumbnail"> <a href="images/growth-good1-f.jpg"><img src="images/growth-good1-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Les sites Web du gouvernement sont en croissance, et non en décroissance ou plafonnement. Par conséquent, concevez et planifiez dès maintenant les ajouts de contenu futurs et ne vous contentez pas de concevoir en fonction de l’information d’aujourd’hui. Ceci étant dit, <a href="https://medium.com/@altspaces/digital-content-needs-accountability-governance-and-multidisciplinarity-48212ba03e2a
">les gouvernements devraient adopter en réalité une approche de mise à jour du contenu plutôt qu’une approche de « croissance du contenu » pour améliorer l’expérience des utilisateurs <small>(disponible en anglais seulement)</small></a>.</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> Par défaut, les onglets s’affichent horizontalement à l’écran de l’ordinateur, ce qui signifie qu’il n’y a qu’une poignée d’onglets qui tiennent dans cet espace. Dans cet exemple, il n’y a plus de place pour développer le système d’onglets, ce qui signifie que le nouveau contenu doit être glissé de force dans un des onglets existants. La conception limite la croissance future du contenu.</p>
<div class="wb-lbx thumbnail"> <a href="images/growth-fail1-f.jpg"><img src="images/growth-fail1-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Rappelez-vous : Le fait de tout mettre dans des onglets limite la capacité de croissance de la page. Cela crée également des contraintes de conception pour le contenu existant, ce qui pourrait constituer un obstacle à une bonne convivialité. Par exemple, plus il y a d’onglets, moins il y a d’espace pour le texte de l’étiquette, réduisant les étiquettes à des mots-clés qui peuvent ne pas être suffisamment descriptifs. De plus, les onglets ont tendance à dissimuler des informations importantes. S’il est utile d’avoir tout le contenu sur la même page, envisagez plutôt d’utiliser une table des matières. Il n’y aura pas de restrictions d’espace pour les en-têtes de section et il pourrait y avoir un lien avec l’information en dessous. </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 n’y a pas de règle générale stricte quant aux cas où il y a tout simplement trop de liens sur une page, car cela dépend du contexte. Cependant, lorsque l’information est organisée par sujet et que vous vous attendez à ce qu’un utilisateur fasse des choix en fonction de catégories exploratoires, le fait d’avoir plus de 10 catégories pourrait être un bon indicateur que l’AI pourrait avoir besoin d’amélioration.</p>
<p>Cette page est un bon exemple du problème. L’obésité juvénile, les soins des nourrissons et le sommeil sécuritaire devraient être regroupés sous une rubrique plus large telle que « Enfants en santé » ou « Santé des enfants », ce qui réduirait le nombre d’options présentées. Cela permettrait également à cette page de continuer de croître au fil du temps.</p>
<div class="wb-lbx thumbnail"> <a href="images/growth-fail2-f.jpg"><img src="images/growth-fail2-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong> Rappelez-vous : Lorsqu’il y a beaucoup d’options, vous devrez voir où les éléments peuvent être regroupés et les déplacer vers une nouvelle page ou créer d’autres sous-titres. Cela permettra à la page des parents de continuer à croître, tout en permettant à la page des enfants de grandir de façon significative.</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> La conception horizontale du menu utilisé pour naviguer entre les sept étapes pour l’obtention des « Prestations de maternité et parentales de l’AE » rend nécessaire la répartition des boutons sur trois rangées. Ce qui divise visuellement le processus et pousse le contenu de la page plus bas sur l’écran. Cette conception à rangs multiples va à l’encontre de l’objectif qui est de linéariser le processus et devient plus problématique pour les processus qui ont 10 étapes et plus, ce qui fait que la navigation s’étend sur quatre rangées ou plus.</p>
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/growth-fail3-f.jpg"><img src="images/growth-fail3-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p> Cette utilisation d’un menu pour remplacer une table des matières conventionnelle ne correspond pas non plus aux expériences antérieures des utilisateurs (modèles mentaux), où ils parcourraient la table des matières de façon verticale, plutôt que de naviguer horizontalement. Cela peut créer de la confusion et de la frustration, car l’œil de l’utilisateur peut balayer dans la direction suivante :</p>
<ul>
<li>1. Aperçu</li>
<li>4. Ce qu’il faut savoir avant de commencer</li>
<li>7. Pendant que vous recevez l’assurance-emploi</li>
</ul>
<p><strong>Rappelez-vous : Les menus horizontaux ont toujours du mal à croître car ils sont limités par la résolution de l’écran de l’utilisateur. </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> Si une page a un contenu modeste, vous vous attendriez à ce qu’il soit entièrement affiché lorsque la page est chargée. Au fur et à mesure que le contenu s’enrichit, il y a souvent un désir de mettre de l’ordre dans l’aspect visuel de la page. Cela peut se faire efficacement en ajoutant une table des matières au-dessus du contenu ou en divisant le contenu en plusieurs pages. </p>
<p> Il <strong>ne devrait pas</strong> y avoir de point de rupture dans le volume de contenu, où vous arrêtez de faire ce que font toutes les autres pages (c.-à-d. afficher le contenu ou faire un lien avec les pages au sujet des enfants) et mettez en œuvre une nouvelle fonction de conception qui cache le contenu essentiel à l’utilisateur. Cette approche favorise la commodité de rendre la page facile à consulter au détriment d’une mauvaise découvrabilité et de l’expérience frustrante de l’utilisateur. </p>
<div class="wb-lbx thumbnail"> <a href="images/growth-fail4-f.jpg"><img src="images/growth-fail4-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong> Rappelez-vous : La surutilisation de la fonction développer/masquer est un signe qu’il peut y avoir trop de contenu sur une seule page ou qu’il y a un manque de compréhension de la façon dont ce contenu est utilisé. Au lieu de développer/masquer, ajoutez une table des matières au-dessus du contenu (les liens dans la table des matières seront les mêmes que les liens dans développer/masquer, mais le contenu est disponible en dessous au lieu d’être masqué) ou divisez le contenu et étalez-le sur plusieurs pages.</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> La version précédente de Canada.ca comportait un menu horizontal à l’échelle du site qui comportait trop de sujets pour l’espace disponible. Cela signifiait que certains éléments étaient visibles alors que d’autres, bien qu’ils soient au même niveau d’AI sur le site, étaient imbriqués sous le dernier lien appelé « Plus de services ». Il y avait tout simplement trop de sujets à afficher pour que cette conception fonctionne correctement.</p>
<div class="wb-lbx thumbnail"> <a href="images/growth-fail5-f.jpg"><img src="images/growth-fail5-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Remarque : La conception a été corrigée dans le nouveau concept Canada.ca.</strong> </p>
<p><span class="fas fa-check text-success"></span><span class="text-success"> Réussite :</span> L’accès au menu se fait par un seul lien « Menu ». Tous les sujets sont maintenant traités de la même manière, et les sujets futurs peuvent être ajoutés sans impact sur la conception.</p>
<div class="wb-lbx thumbnail"> <a href="images/growth-fail5a-f.jpg"><img src="images/growth-fail5a-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Rappelez-vous : Le fait d’avoir un lien « Plus » est un bon indicateur que l’approche de structuration de l’information n’est pas conçue pour prendre de l’ampleur et peut entraîner une fixation des priorités arbitraire ou non axée sur l’utilisateur de certains sujets par rapport à d’autres.</strong></p>
</li>
</ul>
<h2 id="h_3">À retenir</h2>
<p> L’objectif de ce principe est de créer une AI qui permette au contenu de croître avec le temps. 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> la structure du contenu soit robuste et puisse tolérer des ajouts </li>
<li><span class="fas fa-li fa-check text-success"></span> la conception de page permet la croissance </li>
<li><span class="fas fa-li fa-check text-success"></span> la conception de page facilite la croissance</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="principles4-f.html" rel="prev">Principe des objets</a> </li>
<li class="next"> <a href="principles6-f.html" rel="next">Principe de l’exemplarité</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="active"><span>Principe de croissance</span></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>