<!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 des objets - 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="principles4-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 des objets</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> Traiter le contenu comme une chose vivante qui respire avec un cycle de vie, des comportements et des attributs.</p>
<p><strong>Dans la pratique :</strong> Un bulletin, une galerie de photos, un produit d’apprentissage, une procédure, un répertoire de contacts ou une politique sont des types de contenu très différents. Les types de contenu sont des objets numériques et ont leur propre cycle de vie, ainsi que des comportements et des attributs pour répondre aux besoins de l’utilisateur et de l’organisation. Ces attributs doivent être formalisés par des <strong>modèles de conception cohérents et reproductibles</strong>, propres à chaque type de contenu.</p>
<p> Un certain nombre de types de contenu et de modèles de conception ont déjà été élaborés pour favoriser de meilleurs résultats lors de la conception sur Canada.ca. Vous pouvez les consulter dans les <a href="https://www.canada.ca/fr/secretariat-conseil-tresor/services/communications-gouvernementales/specifications-contenu-architecture-information-canada.html
">Spécifications du contenu et de l’architecture de l’information</a>. </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> Les deux calculatrices intégrées sont traitées de la même façon, mais elles sont distinctes de la façon dont la navigation du produit est traitée. </p>
<div class="wb-lbx thumbnail"> <a href="images/objects-pass1-f.jpg"><img src="images/objects-pass1-f.jpg" alt="Website screenshot" class="img-responsive" /> </a> </div>
<p><strong> Rappelez-vous : Les types de contenu similaires devraient être traités de la même façon.</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> L’alerte et la table des matières sont chacune dotées de leur propre conception qui soutient le mieux le contenu qu’elles contiennent. </p>
<div class="wb-lbx thumbnail"> <a href="images/objects-pass2-f.jpg"><img src="images/objects-pass2-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong> Rappelez-vous : Les types de contenu qui sont différents devraient être sensiblement différents. </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> Voici l’étape 2 d’un processus en quatre étapes. La conception tient compte de l’effet visuel de manière à ce que l’utilisateur sache combien il y a d’étapes, où il en est actuellement dans le processus et quelles étapes ont été complétées.</p>
<div class="wb-lbx thumbnail"> <a href="images/objects-pass3-f.jpg"><img src="images/objects-pass3-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Remarque :</strong> La conception ci-dessus imite un modèle déjà utilisé, dans le monde entier, pour les plans de métro. Un processus et un métro sont similaires en ce sens qu’ils amènent l’individu d’un endroit à un autre, le long d’un chemin structuré. </p>
<div class="row">
<div class="col-sm-6">
<p><strong>Montreal subway map</strong></p>
<div class="wb-lbx thumbnail"> <a href="images/objects-pass3a.jpg"><img src="images/objects-pass3a.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</div>
<div class="col-sm-6">
<p><strong>Seoul subway map</strong></p>
<div class="wb-lbx thumbnail"> <a href="images/objects-pass3b.jpg"><img src="images/objects-pass3b.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</div>
</div>
<p><strong>Rappelez-vous : Chaque fois que cela est approprié, la conception et l’expérience en situation réelle devraient influencer les modèles de conception de sites Web. </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> Sur le site Canada.ca, il y a de nombreuses façons d’afficher une table des matières qui mène aux en-têtes sur la même page :</p>
<div class="row">
<div class="col-sm-6">
<ul class="list-unstyled mrgn-bttm-sm">
<li><strong>En-tête :</strong> (aucune)</li>
<li><strong>Format de liste :</strong> Numérotée</li>
</ul>
<div class="wb-lbx thumbnail"> <a href="images/objects-fail1a-f.jpg"><img src="images/objects-fail1a-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</div>
<div class="col-sm-6">
<ul class="list-unstyled mrgn-bttm-sm">
<li><strong>En-tête :</strong> (aucune)</li>
<li><strong>Format de liste :</strong> Puces</li>
</ul>
<div class="wb-lbx thumbnail"> <a href="images/objects-fail1b-f.jpg"><img src="images/objects-fail1b-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<ul class="list-unstyled mrgn-bttm-sm">
<li><strong>En-tête :</strong> Sur cette page</li>
<li><strong>Format de liste :</strong> Puces</li>
</ul>
<div class="wb-lbx thumbnail"> <a href="images/objects-fail1c-f.jpg"><img src="images/objects-fail1c-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</div>
<div class="col-sm-6">
<ul class="list-unstyled mrgn-bttm-sm">
<li><strong>En-tête :</strong> Sur cette page</li>
<li><strong>Format de liste :</strong> (aucune)</li>
</ul>
<div class="wb-lbx thumbnail"> <a href="images/objects-fail1d-f.jpg"><img src="images/objects-fail1d-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<ul class="list-unstyled mrgn-bttm-sm">
<li><strong>En-tête :</strong> Table des matières <br>
<small>(en-tête gris)</small> </li>
<li><strong>Format de liste :</strong> Puces <br>
<small>(encadré blanc)</small> </li>
</ul>
<div class="wb-lbx thumbnail"> <a href="images/objects-fail1e-f.jpg"><img src="images/objects-fail1e-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</div>
<div class="col-sm-6">
<ul class="list-unstyled mrgn-bttm-sm">
<li><strong>En-tête :</strong> Table des matières</li>
<li><strong>Format de liste :</strong> Puces </li>
</ul>
<div class="wb-lbx thumbnail"> <a href="images/objects-fail1f-f.jpg"><img src="images/objects-fail1f-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</div>
</div>
<p><strong>Rappelez-vous : Soyez cohérent. Ceci est soutenu par le principe de conception visuelle, la <a href="https://www.nngroup.com/videos/jakobs-law-internet-ux/
">Loi de l’expérience passée <small>(disponible en anglais seulement)</small></a>, qui stipule que les utilisateurs préfèrent que des choses similaires fonctionnent de la même façon. La prévisibilité réduit la charge cognitive et permet aux utilisateurs d’accomplir des tâches ou de trouver l’information plus rapidement.</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> Chaque élément de contenu est traité de la même façon, même si les liens sont d’une portée et d’une finalité très différentes.</p>
<div class="wb-lbx thumbnail"> <a href="images/objects-fail2-f.jpg"><img src="images/objects-fail2-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Rappelez-vous : Le contenu doit être optimisé et non pas homogénéisé. Les types et éléments de contenu différents doivent être faciles à distinguer. </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 présentait les liens les plus populaires sur la page d’accueil, mais utilisait la même conception visuelle pour la présentation des sujets et des tâches dans le reste du site (c.-à-d. des blocs de liens avec texte descriptif dans la zone de contenu principale).</p>
<div class="wb-lbx thumbnail"> <a href="images/objects-fail3-f.jpg"><img src="images/objects-fail3-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> Il existe un concept de traitement précis pour « Les plus populaires », distinguant ces éléments des liens associées aux sujets et aux tâches. </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 : Un contenu différent devrait être traité différemment, tant sur le plan du placement que de la conception. </strong></p>
</li>
</ul>
<h2 id="h_3">À retenir</h2>
<p>L’objectif de ce principe est de montrer que les types de contenu peuvent rendre le contenu plus distinct et utilisable. 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> un contenu similaire est traité de la même manière, distinct du contenu non apparenté en termes de conception et de placement</li>
<li><span class="fas fa-li fa-check text-success"></span> les modèles de contenu sont appliqués de façon uniforme </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="principles3-f.html" rel="prev">Principe des portes d’entrée</a> </li>
<li class="next"> <a href="principles5-f.html" rel="next">Principe de croissance</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="active"><span>Principe des objets</span></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">2017-12-05</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>