<!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 navigation ciblée - 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="principles8-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 navigation ciblée</h1>
<div class="row">
<div class="col-md-8">
<p class="small"><span class="far fa-clock"></span> Durée de la lecture : 4 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> Garder les menus de navigation simples. </p>
<p><strong>Dans la pratique :</strong> Concevoir chaque élément de navigation dans un but particulier. Il est possible de combiner plus d’un modèle, mais chaque élément devrait être axé sur une seule façon de naviguer.</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> Concevoir chaque élément de navigation dans un but particulier. Il est possible de combiner plus d’un modèle, mais chaque élément devrait être axé sur une seule façon de naviguer.</p>
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/focused-pass1-f.jpg"><img src="images/focused-pass1-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong>Rappelez-vous : La taille de la police, l’emplacement, la largeur, l’espace blanc et d’autres éléments de conception influencent tous la perception de l’utilisateur et sa capacité à distinguer les informations primaires des informations secondaires, similaires ou différentes. </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> Un processus en plusieurs étapes indique clairement à l’utilisateur que chaque étape doit être terminée avant de passer à l’étape suivante. </p>
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/focused-pass2-f.jpg"><img src="images/focused-pass2-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong> Rappelez-vous : Un processus complexe peut être simplifié en le décomposant en éléments plus petits et en ajoutant une navigation claire et des indicateurs de progrès.</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> Les éléments de navigation ont tous la même conception et le même poids visuel, ce qui occasionne un manque de concentration, de priorité et de fluidité sur la page. </p>
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/focused-fail1-f.jpg"><img src="images/focused-fail1-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p><strong> Rappelez-vous : Quand tout est pareil, rien ne ressort.</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> Immédiatement après l’en-tête d’une page de contenu, vous devriez être en mesure de trouver le contenu lié à cet en-tête, et non un système de menus qui vous permet de quitter la page et d’aller à des pages connexes. La seule façon pour un utilisateur d’accéder au contenu de la page est d’ignorer la navigation à l’échelle du processus en la faisant défiler </p>
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/focused-fail2-f.jpg"><img src="images/focused-fail2-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<div class="row">
<div class="col-sm-6">
<p>Cette conception devient plus confuse dans la vue mobile, car elle pourrait amener les utilisateurs à croire que le menu est une table des matières de la page. Le premier lien, « Aperçu », pourrait amener les utilisateurs à penser que le fait de le sélectionner les ramènerait à une section de survol sur la même page, et non à la page de survol dans l’ensemble du processus. </p>
</div>
<div class="col-sm-6">
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/focused-fail2a-f.jpg"><img src="images/focused-fail2a-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</div>
</div>
<p><strong> Rappelez-vous : La page de contenu doit être axée sur le contenu et non sur la façon de s’en éloigner.</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 existe de nombreux systèmes de navigation concurrents.</p>
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/focused-fail3-f.jpg"><img src="images/focused-fail3-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
<p>Quel est l’objectif principal? </p>
<ul class="lst-spcd">
<li>Les trois premiers liens qui ont :
<ul class="fa-ul">
<li><span class="fa fa-li fa-check text-success"></span> la couleur d’arrière-plan la plus forte, et</li>
<li><span class="fa fa-li fa-check text-success"></span> tout est en majuscule, et </li>
<li><span class="fa fa-li fa-check text-success"></span> des images décoratives, mais</li>
<li><span class="fa fa-li fa-times text-danger"></span> la plus petite largeur de menu.</li>
</ul>
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/focused-fail3a-f.jpg"><img src="images/focused-fail3a-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</li>
<li>Les trois liens du milieu qui ont :
<ul class="fa-ul">
<li><span class="fa fa-li fa-check text-success"></span>la plus grande taille de texte, et </li>
<li><span class="fa fa-li fa-check text-success"></span> des icônes, et</li>
<li><span class="fa fa-li fa-check text-success"></span> des liens plus larges que le premier menu, mais</li>
<li><span class="fa fa-li fa-times text-danger"></span> des couleurs de fond pastel voilées.</li>
</ul>
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/focused-fail3b-f.jpg"><img src="images/focused-fail3b-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</li>
<li>Les quatre derniers liens qui ont :
<ul class="fa-ul">
<li><span class="fa fa-li fa-check text-success"></span> les liens de menu les plus larges, et </li>
<li><span class="fa fa-li fa-check text-success"></span> des icônes, mais</li>
<li><span class="fa fa-li fa-times text-danger"></span> la plus claire des couleurs de fond.</li>
</ul>
<div class="wb-lbx thumbnail mrgn-tp-md"> <a href="images/focused-fail3c-f.jpg"><img src="images/focused-fail3c-f.jpg" alt="Website screenshot" class="img-responsive" /> </a></div>
</li>
</ul>
<p><strong>Rappelez-vous : Garder les systèmes de navigation simples.</strong></p>
</li>
</ul>
<h2 id="h_3">À retenir</h2>
<p> Ce principe vise à simplifier la navigation. 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 systèmes de navigation ne sont pas en concurrence </li>
<li><span class="fas fa-li fa-check text-success"></span> la navigation primaire se distingue facilement de la navigation secondaire ou de soutien</li>
<li><span class="fas fa-li fa-check text-success"></span> la conception de la navigation est simple et sans effort </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="principles7-f.html" rel="prev">Principe de la classification multiple</a> </li>
<li class="next"> <a href="disciplines-f.html" rel="next">Disciplines et domaines d’études connexes</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="completed"><a href="principles6-f.html">Principe de l’exemplarité</a></li>
<li class="completed"><a href="principles7-f.html">Principe de la classification multiple</a></li>
<li class="active"><span>Principe de la navigation ciblée</span></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>