60

modèles de navigation pour satisfaire vos internautes
à l’accessibilité au référencement
KENAZART STRATEGY INTERACTIVE

Avec des recommandations liées :
à l’ergonomie

PATRICIA GALLOT-LAVALLÉE

APPORTEZ VOS COMMENTAIRES SUR

www.navigation-web.com

KENAZART STRATEGY INTERACTIVE

Publié par KENAZART STRATEGY INTERACTIVE KENAZART STRATEGY INTERACTIVE 17, bd Pereire 75017 Paris France. Contact@strategy-interactive.com - Tél. : 00 33 (0)1 47 63 29 52 www.strategy-interactive.com

LIMITES DE RESPONSABILITÉ ET DE GARANTIE L’auteur et l’éditeur de cet ouvrage ont consacré tous leurs efforts à préparer ce livre. Kenazart Strategy Interactive et l’auteur déclinent toute responsabilité concernant la fiabilité ou l’exhaustivité du contenu de cet ouvrage. Ils n’assument pas de responsabilités pour ses qualités d’adaptation à quelque objectif que ce soit, et ne pourront être en aucun cas tenus responsables pour quelque perte, profit ou autre dommage commercial que ce soit, notamment mais pas exclusivement particulier, accessoire, conséquent, ou autres. Ils ne sont pas responsables si les adresses internet ne sont pas accessibles, que ce soit lorsque les sites ne sont, soit plus en ligne, soit différents ou qu’ils nécessitent l’utilisation d’un plug-in. Aucun des prix indiqués dans cet ouvrage n’est contractuel. MARQUES DÉPOSÉES Toutes les informations connues ont été communiquées sur les marques déposées pour les produits, services et sociétés mentionnés dans cet ouvrage. Kenazart Strategy Interactive et l’auteur déclinent toute responsabilité quant à l’exclusivité et à l’interprétation des informations. Tous les autres noms de marque et de produits utilisés dans cet ouvrage sont des marques déposées ou des appellations commerciales de leur propriétaire respectif. Kenazart Strategy Interactive n’est lié à aucun produit ou vendeur mentionné dans ce livre. © PATRICIA GALLOT-LAVALLÉE Tous droits réservés. Aucune partie de ce livre ne peut être reproduite ou transmise sous aucune forme ou par aucun moyen : électronique ou mécanique, y compris les photocopies, enregistrements ou par un système de stockage et de récupération d’information, sans la permission écrite de l’éditeur.

Version numérique du livre disponible sur www.navigation-web.com
Imprimé en France par

LOUISJEAN Imprimeur 59, avenue Émile Didier 05003 GAP
Dépot légal Bibliothèque Nationale de France : 3ème trimestre 2007 ISBN 978-2-9528507-0-4 Publié en français pour la première fois en Septembre 2007

à l’inter-action

Remerciements à Lucie, Adeline, Nadège, Stéphanie, Séverine, Corinne, Karine, David, Steven, Benoît, Stuwart, Nicolas et Cédric pour avoir toujours su appuyer sur la touche automatique de leur téléphone. À Maha ALMARUSH, Xavier ARNAUD, Maëva BAUDIC, Hélène BELLETTI, Charlotte CERLES, Alexandre CHANZY, Nicolas CHAVANNE, Jérôme CORDIER, Thibault CUISINIEZ, Alban DE FERRIERES de SAUVEBOEUF, Guillaume DE LESCAZES, Christophe DELSART, Julien DERET, Max DEROUBAIX, Alliaume DOUILLET, Hugues DUHAZE, Mona DUMITRACHE, Mathieu GAUCHEE, Thomas GOUYETTE, Rostane GRIBI, Valentin HAUSER, Camille HUMEAU, Damien KERHOAS, Thomas LAMBERT, Cédric LECOQ, Guillaume LELLOUCHE, Nicolas LETREGUILLY, Arnaud MAFFIOLI, Julien MASSE, Bertrand MASSON, Guillaume MAURIAC, Aurélia MICHELIX, Geoffrey MONDET, Alexandra MOREL, Pierre-Yves MOULARD, Myriam NEJDI, Yvan NGNODJOM, Cécile PAILLAUD, Arnaud PALIN STE AGATHE, Sébastien PERROT, Bich PHAN, Davy PHOMMASONE, Rémy RAAD, Julien RATEAU, Mathieu ROUMEGOUX, Bastien SAUDEMONT, Nicolas SEIGNEUR, Jérôme SIMHON, Florian SIMON, Boris VAUGENOT, Julien VERNAY, Stéphane VOYEZ, Gabriel WALTH et Michaël WEINBERG, tous les élèves de la promo 2010, à l’équipe pédagogique de l’Institut International du Multimédia pour avoir participé à l’aventure. À Pierre-Olivier GUERIN, François DOUARRE, Pierre MURA, Walid MILED, Paul CHABERT, Vincent LAPPARTIENT, Bruno PERRIER, Florent NEGRE, Edouard AGUETTANT, Romain BOUDRE et Pierre FENAUT pour toutes les informations que nous avons pu échanger. À mes parents, pour m’avoir toujours soutenue. À toutes les personnes interviewées dans le livre, pour avoir accepté de partager leur expérience. À toutes les personnes que j’ai croisé et qui m’ont aidée à affiner le projet. À Tanguy Lohéac, mon premier lecteur, pour son expertise en accessibilité. À Anne, Flora, Melody et Ronald : l’excellente équipe projet.

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Table des matières
Préface de Frédéric Cavazza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 10 Prologue - Pourquoi ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 12 - Comment concevoir un site ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 14 - Que veulent-ils ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 20

Au début linéaires puis transversales
001 - Navigation guidée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 24 002 - Menu horizontal mono niveau non déroulant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 26 003 - Menu horizontal sur deux niveaux non déroulant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 28 004 - Menu horizontal déroulant encore appelé menu en cascade ou menu à coulisse . . . . . . . . . . . p. 30 005 - Menu de gauche vertical standard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 32 006 - Menu de gauche vertical avec développement de la sous-catégorie dans les pages internes uniquement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 34 007 - Menu de gauche vertical déroulant encore appelé menu en cascade ou menu à coulisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 36 008 - Un niveau de navigation en colonne de droite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 38 009 - Menu déroulant sur pavé fixe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 40 010 - La double navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 42 011 - Carte heuristique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 44 012 - Carte conceptuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 46 013 - Navigation marguerite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 48 014 - Navigation glissante (en anglais : sliding navigation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 50 015 - Navigation au survol de la souris (en anglais : on mouse over navigation) . . . . . . . . . . . . . . . . . . . . p. 52 016 - Boutons « suivants » et « précédents » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 54
APPORTEZ VOS COMMENTAIRES SUR

www.navigation-web.com

7

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

017 - Navigation par le bouton « retour » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 56 018 - Plan du site trié par catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 58 019 - Plan du site alphabétique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 60 020 - Sous-menu contextuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 62 021 - Barre de navigation horizontale en pied de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 64 022 - Pagination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 66 023 - Liste verticale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 68 024 - Liste déroulante (en anglais : drop-down list) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 70 025 - Navigation par catégorie en pied de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 72 026 - Nuage de tags (en anglais : tag clouds) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 74 027 - Navigation dans le texte (en anglais : in-text links) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 76 028 - La navigation à dérouler (en anglais : scroll down navigation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 78 029 - Navigation sur deux colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 80 030 - Navigation pastille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 82 031 - Navigation jeu de cartes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 84 032 - Bouton de sérendipité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 86 033 - Index des mots-clés du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 88 034 - Ouverture de popup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 90 035 - Ouverture de popup automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 92 036 - Page d’accueil plongeante (deep linking homepage) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 94 037 - Navigation « Pendant que vous attendez » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 96 038 - Moteur de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 98 039 - Suggestion de résultat dans le moteur de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 100 040 - Affiner sa recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 102 041 - Moteur d’inspiration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 104 042 - Cross-clicking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 106 043 - Recherche de contenu similaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 108 044 - À lire aussi (en anglais : related topics) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 110

8

APPORTEZ VOS COMMENTAIRES SUR

www.navigation-web.com

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

p. 112 p. 114 046 - Navigation cachée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 116 047 - Navigation exploratrice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 118 048 - Les barres d’outils (1/2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 120 - Les barres d’outils web 2.0 (2/2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 122 049 - Multi-recherches simultanées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 124 050 - Calendrier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 126 051 - Url avantage produit (en anglais : benefit driven url) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 128 052 - Page d’atterrissage (en anglais : landing pages) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 130 053 - Bandeau horizontal accessible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 132 054 - Navigation sociale (en anglais : social navigation) - (1/2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 134 - Navigation sociale (en anglais : social navigation) - (2/2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 136 055 - Le fil d’Ariane (en anglais : breadcrumbs) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 138
045 - Newsletter, alerte email : étape 1 - l’inscription
.......................................................

- Newsletter, alerte email : étape 2 - l’email envoyé

...................................................

056 - Carte interactive encore appelée navigation géolocalisée, ou navigation de proximité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 140 057 - Les comparateurs de produits et de prix (1/2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 142 - Les comparateurs de produits et de prix (2/2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 144 058 - No-navigation : application du pull avec les flux RSS (1/3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 146

p. 148 - No-navigation : les widgets (3/3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 150 059 - Les personnages virtuels (1/2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 152 - Les personnages virtuels (2/2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 154 060 - Messageries instantanées et présence virtuelle (1/3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 156 - Univers et mondes virtuels (2/3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 158 - Univers et mondes virtuels (3/3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 160
- No-navigation : les widgets (2/3)
............................................................................

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p. 162
APPORTEZ VOS COMMENTAIRES SUR

www.navigation-web.com

9

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Préface

V

oilà près de 15 ans que le web est accessible au grand public. Après des débuts laborieux, ces 10 dernières années ont été témoins d’une croissance spectaculaire du nombre de sites et de services en ligne.

Une croissance pas toujours maîtrisée où les concepteurs et designers se sont livrés à une surenchère technologique et graphique avec des exemples emblématiques de sites trop en avance sur leur temps comme Boo.com. Cette euphorie a permis d’engendrer une prise de conscience de la nécessité de soigner la simplicité d’usage. Des mots barbares comme « utilisabilité et accessibilité » sont alors devenus à la mode et ont permis le développement de ces disciplines. Petit à petit les éditeurs de sites ont compris l’importance de ne pas déstabiliser les visiteurs, de les aider à trouver ce qu’ils cherchent et surtout de les accompagner dans leur découverte d’un site. Ceci est d’autant plus vrai pour les boutiques en ligne qui ont adopté des parcours-clients optimisés en fonction de leur audience. Mais la mode est un éternel recommencement et l’internet ne déroge pas à cette règle. Au web 1.0 déjà ringard, les internautes plus jeunes ont préféré le web 2.0 qui privilégie une approche plus ouverte et plus collaborative des services en ligne. La génération MySpace et Skyblog était née, et tout était à refaire : couleurs hideuses et criardes, organisation chaotique, saturation des pages avec des éléments multimédias... plus ces sites personnels de nouvelle génération sont laids et plus les internautes adorent, comme si les défauts de conception étaient des preuves de l’authenticité du discours de l’auteur. Et nous n’en étions qu’au début d’une révolution des interfaces et des systèmes de navigation : plus d’arborescences complexes, les contenus des sites sont maintenant structurés de façon chronologique (comme sur les blogs) ou selon un principe de mots-clés (à l’image du site de partage de photos FlickR) ; des fonctionnalités dites « sociales » qui complexifiaient encore le repérage et la navigation (« cet article a été publié par X, commenté par Y, corrigé par W et noté par Z »).

10

APPORTEZ VOS COMMENTAIRES SUR

www.navigation-web.com

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Car l’enjeu est de taille : comment domestiquer un contenu qui grossit de façon exponentielle et empirique ? Des services comme Wikipedia (encyclopédie collaborative) ou YouTube (partage de vidéos) ne pouvaient pas se contenter d’une arborescence traditionnelle, il leur fallait des principes de navigation plus flexibles et surtout auto-apprenant, ou plutôt auto-satisfaisant. Comprenez par là, qu’ils devaient faire face à une croissance tellement forte et à une audience tellement large qu’ils leur fallaient repenser les systèmes de navigation traditionnels. Certains sont revenus aux sources avec une navigation entièrement contextualisée par hyperliens à l’exemple des wikis, d’autres ont opté pour des solutions plus sophistiquées avec des nuages de mots-clés ou des menus déroulants à plusieurs niveaux. Aujourd’hui, les sites sont toujours plus riches et plus nombreux. Même si les modèles de conception traditionnels (logo en haut à gauche, navigation principale en haut, navigation secondaire à gauche) ont démontré leur efficacité, la surface d’affichage disponible (la résolution d’écran moyenne) ne croît pas assez vite pour assouvir la soif d’espace de ces nouveaux contenus et services. Il est très délicat de se prononcer sur un modèle universellement performant : la simplification à outrance de Google ? La structuration forte mais cohérente des différentes chaînes de Yahoo! ? L’originalité des modes de découverte des produits d’Etsy ? La sophistication des Concept Maps ou des Hot Maps de Cnet ? L’éventail des possibilités est vaste... Tout comme les probabilités d’échec pour ceux qui essayent de sortir des sentiers balisés et perdent leurs visiteurs en chemin. Cet ouvrage est une collection des principaux systèmes de navigation mis en œuvre. Soixante types de navigation parmi lesquels vous trouverez forcément le système qui convient le mieux à votre contexte ou l’inspiration pour en créer un nouveau.

Fred Cavazza
www.fredcavazza.net

APPORTEZ VOS COMMENTAIRES SUR

www.navigation-web.com

11

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Prologue
Pourquoi ce livre ?
Petite histoire... Allons voir si l’herbe est plus verte ailleurs – ou pourquoi si peu d’innovation.
En 2006, j’ai réalisé un projet qui me tenait à cœur : un séjour en Amérique du Nord. Je voulais y vivre, y travailler pour vraiment faire l’expérience des différences et des similitudes entre les Gaulois, chers compatriotes qui font de la résistance aux idées nouvelles un sport , et les Yankees, qui eux, ont la réputation d’être si innovants. Si je me place, moi, sur la courbe d’adoption de l’innovation de Rogers. Je dirais que je suis là : thousiasme communicatif, j’ai rencontré beaucoup de Gaulois qui m’ont pourtant résistés. Nos cousins les Canadiens m’ont offert visa et travail en moins de 15 jours. C’est parti pour l’aventure. J’intègre une agence web en tant que « Gestionnaire de projet ». L’agence travaille avec de nombreuses sociétés à New York, en Californie. Je prends une bonne dose de nouvelles habitudes de travail. J’en importe aussi du vieux continent et de mes propres bagages. Je reste tout de même très surprise du peu d’originalité des productions. Toujours les mêmes modèles de navigation. Rien de très innovant. Pourtant, il en existe plein ! Pourquoi ces traditionnels bandeaux verticaux et horizontaux ? Tiens, le problème n’est pas que Gaulois ? Intéressant, cela vient d’autre chose. Peut-être parce que l’on n’y pense pas et que personne ne les a listés ? Peut-être parce qu’en avant-vente, alors qu’il n’y a ni politique, ni limite, le temps d’investiguer et d’accumuler le retour d’expérience pour être convaincant coûterait encore trop cher ? Peut-être parce que les réalités des projets sont telles que si l’on voulait innover pour un client une fois qu’il a acheté le projet, il faudrait passer de précieuses heures à concrétiser des applications de nouveaux modèles de navigation au risque de ne pas le satisfaire ?
La courbe de Rogers représente les volumes d’individus plus ou moins ouverts aux adaptations que les autres. Un produit ou idée qui a du succès passera par tous les groupes.

Un early adoptor de la deuxième génération. Je regarde ce que les inventeurs font, de loin. Lorsque je vois des possibilités d’application, je cherche des exemples de ce que d’autres ont fait. Si tout est dans le vert, j’adopte corps et âme. À l’en-

Un site web, c’est comme une maison. Une fois que c’est acheté, difficile d’ajouter des salles de bain et des pièces à tout va. Il faut donc un moyen de proposer de nouveaux modèles de navigation de manière suffisamment concrète pour savoir séduire le client dans un minimum de temps. Seth Godin,
www.navigation-web.com/prologue

12

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

marketeur de renom, dit « Safe is Risky ». Ok, mais comment innover sans trop risquer ?

Les panneaux « Tourist attraction »
Durant mon séjour, j’ai la chance de partir en voyage dans les Rocheuses. 9 heures de route entre Vancouver et Red Mountain – le paradis de la poudreuse. Sortie de la ville, peu d’éléments extérieurs suscitent mon attention. Ah si, un panneau « Tourist Attraction ». L’idée me vient alors de nous arrêter dans un endroit dépaysant pour déjeuner. Après quelques panneaux, nous nous arrêtons pour déjeuner dans une station service sans aucun charme. Nous repartons aussitôt à l’assaut des rocheuses et devinez quoi, un autre panneau « Tourist attraction ». Alors, c’en est trop. Frustrée de ne pouvoir découvrir ce qui se cache derrière ces panneaux. Je m’énerve en moi-même, je suis à 9 234 km de ma boulangerie favorite et je mange un paquet de chips dans une voiture dont les vitres sont couvertes de buée. Ces panneaux ressemblent à des « cliquer ici » sur une page web. Ils auraient dû appliquer la pyramide inversée sur ces panneaux. Nous dire, ce que c’était que ces attractions touristiques, un lac, un point de vue sur les rocheuses ? Nous dire combien de temps cela allait nous prendre. C’est vrai quoi, nous sommes des touristes oui, mais attendus pour dîner ! Je ne comprends pas que dans un pays aussi neuf et capitalistique, les panneaux ne soient pas plus explicites. C’est comme sur le web. C’est toujours les mêmes erreurs qui sont faites. Mais pourquoi ? Peut-être parce que la personne qui fait le panneau n’est pas le responsable de la promotion touristique
APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

Encore beaucoup trop de sites web affichent l’équivalent d’un panneau « Cliquez ici » sur la route des utilisateurs. Pas assez explicite pour décider l’internaute à changer de route.

de la région. Peut-être parce que c’est déjà bien d’avoir un panneau « Attraction touristique ». Et pire peut-être parce que celui qui a posé le panneau sait ce qu’il y a derrière. Il nous a oubliés. Peut-être aussi parce que celui qui a fait le panneau, s’est posé les questions de la couleur, de la taille, de la typo, a suivi les normes techniques de la région. Il ne s’est pas imaginé touriste traversant un continent. Ou mieux, peut-être parce que des panneaux identiques coûtent moins cher. Finalement, beaucoup de sites web sont un peu comme ces panneaux « Attraction touristique », déconnectés des besoins utilisateurs. Si l’on créait une courbe d’adoption des bonnes pratiques du web, on trouverait encore énormément de sites à la traîne. Normal ! Pour faire un bon site web mon « constructeur de panneau » devra lire : • 4 à 5 livres d’ergonomie. • lire et comprendre toutes les recommandations d’accessibilité. Ce qui n’est pas tâche facile. • faire de la veille sur 5 à 6 sites spécialisés en référencement. 7 heures plus tard, nous arrivons pour dîner et le projet est ficelé dans ma tête. Ce sera un livre qui listera 101 modèles de navigation avec pour chacun les bonnes pratiques à appliquer sur une double page. Pas plus, mon installateur de panneaux à d’autres choses à faire.

www.navigation-web.com/prologue

13

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Comment concevoir un site ?
Un site web, c’est comme un bâtiment.
Il y a des maisons achetées sur plan, des maisons d’architecte, des cabanes au fond du jardin, des immeubles de 10 étages avec une galerie commerciale et heureusement presque plus de panneau « en construction ».

Étude de cas : l’histoire des chambres d’hôtes à Noirmoutier.
Un jour, une connaissance m’appelle et me dit « Je voudrais créer un site internet pour promouvoir mes chambres d’hôtes à Noirmoutier, île au sud de la Bretagne. Je m’émancipe de mon réseau de promotion actuel.».

Pour correctement le concevoir, il faut... ...Qu’il soit bien positionné (Stratégie, prix et techno)
Le site web, comme un bâtiment commercial, doit être positionné dans un endroit où il a du passage. C’est ce que les anglophones désignent par l’expression « Location, location, location ». Nous pourrions faire une carte du territoire linguistique couvert par les sites internet. Chaque point orange représenterait les sujets couverts. Plus un point est gros, plus cela signifie qu’il y a de la concurrence. Nous pourrions de la même manière créer une carte du territoire linguistique couvert par les demandes des utilisateurs. Des points verts représenteraient les demandes. Plus un point est gros plus cela signifie qu’il y a de demandes. Maintenant, superposons ces cartes. Lorsque les points verts et les points oranges se superposent, cela signifie qu’a priori les internautes trouvent ce qu’ils veulent. De nombreuses demandes utilisateurs (point verts) restent pourtant seules. Pour positionner votre site et générer du trafic, votre site web doit créer des points en orange aux endroits où il n’y en a pas ou peu.

Que faire ? Stratégie n°1 : Proposer aux internautes ce qu’elle a et créer des points oranges sur le territoire.
Pour cela, nous créerions un site qui contienne : • deux, trois pages développées avec sa charte graphique, • un outil dynamique permettant d’afficher les disponibilités, • un nom de domaine « optimisé » pour le référencement de type : « Chambre-d-hotes-noirmoutier.com ». >> Coût moyen de l’opération : 50 à 700 euros selon qu’elle le fasse seule ou intégrer par le développeur de son quartier. Je dégaine, comme toujours, mes outils d’écoute des internautes. Que recherchent les internautes autour du mot-clé « Noirmoutier ». Nous nous sommes vite rendues compte que quasiment personne ne cherchait de chambre d’hôtes à Noirmoutier. Il y avait beaucoup de recherches sur le tourisme à Noirmoutier mais pas de chambre d’hôtes. Cela n’est pas vraiment dans les mœurs de nos chers utilisateurs. Toutes les recherches étaient faites en français. Si je tape ce qu’ils recherchent, que voyons-nous ? des hôtels, l’office du tourisme, c’est un peu le bazar, rien de très extraordinaire. Aucun site de référence. Il y a des points oranges mais ils sont un peu flous. Clairement, en regardant les termes recherchés, c’étaient vraiment des touristes purs et durs qui n’avaient aucune info sur l’île.
www.navigation-web.com/prologue

14

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Logique ! Ceux qui ont des amis sur place, ont un hébergement ou ils demandent conseils à leurs connaissances.

La Stratégie n°2 est née : Donner aux internautes ce qu’ils veulent.
Les internautes ce qu’ils veulent, ce sont des informations touristiques. Donnons-leur ce qu’ils veulent avec un blog répondant à toutes les questions de ces supers touristes. En colonne de droite du blog, nous ferons la promotion des chambres d’hôtes. Bon d’accord, cela lui demande plus de boulot. Mais ça tombe bien, mon interlocutrice est pigiste. Elle appellera son site www.noirmoutier-autrement.com. Ça donne envie ! >> Coût moyen de l’opération : 50 à 400 euros selon si elle veut faire habiller ou non son site par un designer. Au lieu d’avoir un site qui ne générait aucun trafic, nous créons un blog qui a beaucoup plus de potentiel de trafic.

sonnalité du blogueur / habitant qui transparaît et fait la différence. Concrètement, en une demi-journée de son développeur local, notre hôtesse existera sur internet. Un site, à la différence d’un livre, n’a pas besoin d’être fini pour exister. Avec tous les sites achetés sur « plans », on gagne 6 à 8 mois de réflexion, de développement, et de tests. Pensez évolutif par définition : c’est une fois que le site est en ligne que l’on commence à travailler. Ensuite ? Du temps, de l’effort, de la qualité - dans 3 ans son blog la nourrira. Il existe sur le web plusieurs types de construction : • les maisons achetées sur plan (blog, site brochure qui utilisent des CMS, des boutiques en ligne) – Prix moyen entre 50 et 15 000 euros, • les maisons d’architecte (réalisées spécialement pour la marque) – comptez entre 20 000 et 40 000 euros, • les bâtiments de plusieurs étages (type intranet), • les bâtiments de plusieurs étages avec galerie commerciale au rez-de-chaussée.

Mais pourquoi avoir prescrit un blog ?
Ce terme agace un peu, je comprends. Surtout par chez nous, les Français, nous sommes un peu résistants aux effets de masse. Un blog, c’est simplement l’application du concept KISS (Keep It Stupid Simple). Un blog, c’est comme une maison achetée sur plan : • c’est le moins cher, • contient tout ce qu’il faut, • fonctionne toujours plus ou moins de la même manière, • est aux normes : pour une maison d’électricité, de plomberie, pour un blog, au standard du W3C et ses recommandations en terme d’accessibilité, • beaucoup se ressemblent « physiquement », c’est la perAPPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

...Qu’il ait des portes d’entrée (le référencement)
Comment faire coïncider notre offre et leur demande ? Créez des pages de portes d’entrée qui répondent précisément à leur demande. Pour cela, le site doit contenir des pages qui soient optimisées pour répondre aux recherches de l’internaute.

Créer des portes d’entrée qui s’inscrivent dans le territoire
Pour nos chambres d’hôtes à Noirmoutier, il faudra : • Que chaque billet publié réponde à une demande précise

www.navigation-web.com/prologue

15

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

des internautes. C’est le titre qui répond. Bannir les titres exotiques et sexy, les moteurs de recherche n’ont pas de libido ! Ils ne sauront pas faire la relation entre « location voiture noirmoutier » de la recherche de l’internaute et du titre « Partez à l’assaut du bitume », • Il faudra faire des liens vers ses propres pages avec dans le libellé du lien les requêtes type « Où louer une voiture sur Noirmoutier », • Qu’elle trouve un moyen pour que des sites de référence fasse des liens vers elle dans le corps de leur article.

...Qu’il parle à un profil de passants
La tendance générale, grands comptes, institutions, et PME est de consciencieusement ranger son site web. Ce qui a pour conséquence de cacher l’information la plus importante. La tendance générale des utilisateurs est au pogo-sticking. C’est le fait de faire des allers-retours entre une liste de résultats et un détail de résultat. Typiquement, l’internaute va taper une recherche plutôt précise (riche de plus de 2 motsclés à 89%), cliquer sur les liens qui lui paraissent les plus pertinents. Une fois sur la page, vous avez 5 secondes pour lui confirmer qu’il est au bon endroit. Sinon, il cliquera sur le bouton retour, tentera le lien suivant ou changera sa requête. Il est primordial de créer des portes d’entrée, où pages d’atterrissage (voir nav 51) qui sachent le convaincre qu’il est au bon endroit en moins de 5 secondes. Ceci passe par le ciblage de vos pages. Si vous êtes fournisseur d’information sur l’alimentation et qu’à un salon vous voyez arriver une femme enceinte, vous allez adapter votre discours à son état. Vous n’allez pas lui parler de l’alimentation des sportifs, ni lui dire : « voici toutes les informations, débrouillez-vous ! » Pour ce fournisseur d’information sur l’alimentation, une des solutions pour rendre son site plus sensible aux profils utilisateurs est de créer une page hub qui soit optimisée pour des recherches de type « Alimentation de la femme enceinte ». Elle rassemblera en une seule page les liens vers toutes les parties du site qui concernent la femme enceinte.
www.navigation-web.com/prologue

Placer ses portes dans les 5 premières positions
Pour que son site apparaisse en haut des listes des résultats de recherche, il faut avoir des liens qui pointent vers notre site. Si elle a des concurrents qui dominent le marché, il faudra sur ce site tiers, faire intégrer des liens vers son site à côté de ces liens à battre. Elle pourra aussi créer des mini opérations de marketing viral, par des pages « rigolotes », contenant une image-clé que l’internaute pourra personnaliser, faire booster son ego ou faire un « cadeau ». Il faudra soumettre cet espèce d’objet publicitaire numérique (buzzies) auprès de quelques blogueurs. S’ils sont amusés, ils mettront l’image sur leur site en faisant un lien vers elle. Plus le site à partir duquel est fait le lien, est de référence, plus cela améliorera votre position sur les moteurs de recherche. Avoir des liens qui pointent vers vous, c’est magique. Cela profitera non seulement au positionnement de la phrase-clé sur laquelle vous travaillez (avec le libellé du lien) mais aussi sur l’ensemble du territoire de phrases-clés intégrées dans votre site.

16

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

...Que l’on ait quelque chose à y faire
L’ergonomie n’est rien sans volonté d’interaction. Votre porte d’entrée doit être vitrée, on doit voir à travers la porte ce que l’on peut y faire. La stratégie du site doit être simplissime. Plus vous aurez de difficultés à expliquer l’objet du site, moins votre site sera efficace. Votre site web doit s’expliquer en 3-4 mots. Le premier mot doit être un verbe d’action de type acheter, vendre, télécharger, rencontrer, échanger, découvrir etc. Dans la vraie vie, ça ne vous arrive pas d’aller à un endroit pour ne rien faire. Vous y allez pour dîner, faire faire un passeport, vous instruire. Alors pourquoi serait-ce le cas pour un internaute sur le web ?

Ce verbe d’action, c’est leur objectif.
Votre business plan / projet est basé sur cet objectif de transformation. Si vous voulez que les internautes cliquent pour qu’ils se transforment de prospect à client, il faut que cela se voie ! Intégrez de bons gros boutons contenant des verbes d’action.

graphes, le texte écrit sur les gros boutons et éventuellement celui écrit sous les images. Ne lit pas le détail à l’écran, • Il est particulièrement impatient, • Il adore jouer, • Clique et s’intéresse principalement aux images, • Il a besoin d’être rassuré. Si l’action représente « un danger » pour lui (être spammé, utiliser sa carte de crédit) il va avoir besoin de se rassurer en recherchant les marqueurs de sécurité. Ils pourront être : - Des mots-clés tels que gratuit, no spam, politique de confidentialité : dans le cas d’une inscription à une newsletter. - L’affichage des conditions d’utilisation et règles du jeu. - La présentation de citations clients, labels qualités et les conditions de vente dans le cas d’achat de produits et de services. Il faut que les internautes trouvent ces marqueurs proches des boutons d’action pour que nos enfants de 7 ans restent concentrés. S’il y a des éléments dans la page pour les disperser, ils se disperseront !

Un enfant de 7 ans, avec une tirelire.
Affichez vos prix, ne serait-ce qu’une fourchette de prix. Cela permettra à l’internaute d’insérer dans son budget 8 mois avant, la ligne correspondant à votre facture. Parce que, sans la réponse à « combien ça coûte », un produit ne rentre pas dans le monde des possibles.

...Qu’arrivé dans une pièce, l’on comprenne tout de suite comment faire (ergonomie)
Un internaute, c’est un être humain dont le comportement se rapproche beaucoup d’un enfant de 7 ans : • D’après ce qu’il tape sur internet, il n’a pas un vocabulaire très évolué, quoi qu’expert dans son domaine, • Il semble clairement avoir encore quelques difficultés à lire, alors il scanne une page pour définir si c’est la bonne page. Il lit grosso-modo les 2 premiers mots des deux premiers paraAPPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

...Que tout le monde puisse y entrer (l’accessibilité)
Les bâtiments de nos jours sont construits avec des rampes d’accès, des ascenceurs, les portes sont suffisament larges pour laisser passer des fauteuils roulants. Afin de s’assurer que tout le monde pourra y accèder.

www.navigation-web.com/prologue

17

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

De la même manière, l’accessibilité, c’est s’assurer que tout le monde pourra avoir accès à notre site web quel que soit son handicap, quel que soit le matériel qu’il utilise pour accéder aux sites. C’est s’assurer que l’on ne laisse aucun de nos clients à la porte. Pour rendre son site accessible, il faut respecter un certain nombre de critères techniques qui impactent la présentation du site, il suffit de suivre les recommandations établies par le World Wide Web Consortium. Il a été fondé en octobre 1994 pour promouvoir la compatibilité des technologies du World Wide Web.

site web sur vidéo-projecteur de moyenne qualité (les contrastes) ;-) • les moteurs d'indexation des moteurs de recherche (type Google...) et tous les utilisateurs qui n'accèdent pas au site car il n'est pas référencé. Google est l’aveugle le plus célèbre du monde ! Faire un site web accessible, c’est réaliser 80% du chemin à faire pour bien référencer son site. Assurez-vous que votre prestataire sait faire un site web qui respecte les recommandations du W3C en terme d’accessibilité. Ces recommandations sont un peu comme les règles à appliquer pour implémenter une prise électrique. Dans un bâtiment, les rampes d’accès étaient à l’origine prévues pour les fauteuils roulants, maintenant les poussettes, les livreurs, les utilisent aussi. L’accessibilité finit toujours par servir à beaucoup plus de monde.

...Qu’il les fassent rester dans le bâtiment (les modèles de navigation)
Le cerbère, que représente un site web non accessible laisse à la porte : • les personnes n'ayant pas accès à l'installation de plug-ins, • les personnes n'ayant pas accès aux javascripts, • les utilisateurs des derniers téléphones portables, • les personnes handicapées moteur et les personnes ne pouvant pas utiliser de souris, • les personnes malvoyantes ou non voyantes, • les personnes âgées, • les personnes présentant un handicap cognitif, • les équipes web qui font des présentations de leur prochain Nous avons donc créé toutes les « pièces » de notre maison. Elles servent toutes à faire quelque chose. L’internaute a trouvé une page qui correspond à un de ses besoins, il va chercher ce qu’il y a d’autre à faire sur votre site. C’est pour cela que l’on va introduire des systèmes de navigation. La navigation devra prendre plus ou moins de place selon nos objectifs de transformation. Un système de navigation principal, c’est un couloir à travers la maison. Il doit être là en permanence. Imaginez être dans une maison dont le couloir changerait sans cesse, ne donnant plus accès aux autres pièces de la maison. Déroutant ? Et bien,
www.navigation-web.com/prologue

18

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

c’est applicable à nos internautes qui seront déroutés de ne pas retrouver un système de navigation identique sur toutes les pages. Ce principal système est généralement linéaire. Des modèles de navigations secondaires peuvent être installés pour permettre aux internautes de passer de pièce en pièce par des raccourcis. Ajoutez à cela des modèles de navigation transversaux de type plan du site, moteur de recherche pour répondre aussi bien aux besoins de globalité et de précision de nos internautes. Notre internaute doit pouvoir passer de pièce en pièce simplement. Il doit toujours voir à travers la porte, l’objet de la page d’après. Bannissez les panneaux « cliquez ici ».

Cela se traduit par les commentaires sur les blogs, par les avis des lecteurs sur Amazon. J’ai voulu vous faire profiter de ce que la communauté pouvait apporter. Voici donc un livre à la mode 2.0. 50 éditeurs de site (acheteur/faiseur), des experts en référencement, en ergonomie et en accessibilité ont accepté de partager avec nous leur expérience.

... Qu’il soit le mieux fait possible du premier coup (Comment lire les fiches ?)
Les notes sont indiquées pour vous donner une vision globale du modèle de navigation. Elles évaluent le modèle de navigation de manière générale et non les exemples affichés. Le coût moyen est un repère très très approximatif. Le web, c’est comme le bâtiment. On trouve de tous les prix pour toutes sortes de complexité de réalisation. Les prix ne sont pas contractuels et sont exprimés hors taxes. La note d’accessibilité évalue la facilité à rendre un modèle de navigation accessible. Le web évolue et une des grandes zones d’évolution est d’avoir ouvert des espaces de paroles à la communauté sur les sites web.
APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

www.navigation-web.com/prologue

19

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Comment savoir ce que veulent les internautes ?
Être à l’écoute de vos utilisateurs est primodial de nos jours, même pour un grand groupe.
Vous pouvez connaître leurs attentes... ...En observant ce qui fonctionne sur votre site
• analysez les logs de vos moteurs de recherche (nav. 040), • certains modèles de navigation comme le nuage de tags vous permettent de voir ce qui intéresse le plus. (nav. 025) • observez avec des systèmes de mesure tels que Crazy Egg, Google Analytics, ClickTale, ce qui fait cliquer votre audience ainsi que les pages les plus populaires. associées à un territoire linguistique. Ces outils vont vous permettre de vous positionner sur une typologie de recherche. Cartographier les réseaux d’influence. Des technologies qui cartographient le web se développent. Elles permettent aussi de mesurer au jour le jour les sujets qui émergent, l’évolution des rapports d’influences, le suivi de l’image de marque. Par exemple un acteur du textile pourra savoir comment sa marque est perçue, ce qu’il se dit et comment sont organisés les sites où l’image se joue.
L’image ci-après affiche les réseaux d’influence qui disent « du mal » sur les produits cosmétiques - le réseau rouge. Et les réseaux qui disent du « bien » - les quelques points verts.

Sur l’exemple de la page « Choisir un président au hasard » de mon blog, le logiciel de mesure de clics CrazyEgg.com indique les liens les plus cliqués. Image technologie RTGI - www.rtgi.fr

...En observant la toile
Les outils de régie publicitaire des moteurs de recherche de type Google Adwords embarquent des outils gratuits qui vous soumettent des propositions de phrases-clés recherchées

Pour obtenir ce type d’image, quelques adresses internet représentatives sont injectées dans le système. Ces adresses souches sont identifiées par le travail-clé d’un expert. Il sélectionne des sites connus, populaires, fortement connectés et possédant une forte audience. La machine prend ensuite le relais en réalisant une exploration exhaustive du domaine web à proximité de ces sites souches. Elle suit les liens contenus dans ces sites. De nombreuses publications scientifiques ont montré que l’extrême majorité des sites traitant d’une thématique se trouvait en forte proximité topologique, c’est-à-dire proches en distance de clics. Les sites s’agrègent donc en proximité théwww.navigation-web.com/prologue

20

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

matique, ce qui nous amène à penser que l’approche est exhaustive si l’expert a correctement identifié les sites souches. >> Une idée de prix ? Prix d’une cartographie : à partir de 10 000 euros. Prix d’un outil de veille incluant cartographie et suivi temporel des tendances au sein de la carte : à partir de 5 000 euros/mois. Pratiquer l’écoute active de la communauté. D’après les fournisseurs d’accès internet 90% du trafic généré par le grand public sont réalisés sur des sites communautaires. Le web communautaire a la parole, et les internautes l’écoutent. Si une marque veut s’inscrire dans ce réseau d’influence, elle doit comprendre les communautés qui la concernent pour pouvoir toucher ses interlocuteurs par des arguments personnalisés.

sage directement dans un forum ou un blog influent et le laisser se propager. • d’établir aussi bien la stratégie de référencement que de formuler une réponse appropriée. Les communautés ont leur propre vocabulaire et mode de fonctionnement. On saura alors parler leur langue aussi bien verbale qu’émotionnelle. >> Une idée de prix ? Pour une analyse sociologique de vos communautés influentes par une agence spécialisée, comptez 18 à 25 000 euros de diagnostic et 6 000 euros par mois pour un rapport de veille. Une agence spécialisée aura mis en place des méthodes et des outils d’analyse.

...En analysant les besoins de l’être humain
Le web évolue
Le terme web 2.0 vient d’une constatation, le web a tellement évolué qu’il faudrait changer sa version. Pour un logiciel, il existe des versions mineures 1.3, 1.4, 1.5 qui correspondent à de petites évolutions. Un jour, les équipes marketing et techniques font tellement changer le logiciel, qu’ils changent sa version en version majeure 2.0, 3.0 etc. Le web 2.0 est un terme qui représente une évolution majeure du web. On dit qu’une application est web 2.0 lorsqu’elle : • lève les barrières techniques (vidéo en streaming, blog,...), • laisse les utilisateurs s’exprimer (avis utilisateur, recommandations, se mettre en réseau), • laisse la communauté manipuler l’information pour l’aggréger, la partager, la compléter (avec des technologies tels que API, RSS et des widgets), • simplifie l’application : - le design est épuré et contient de gros boutons d’action

Image Agence Boléro www.bolero.fr

Connaître ses communautés permet : • d’identifier et combler créativement les marchés, en ne se basant plus uniquement sur l’intuition des marketeurs, mais sur ce que vivent les utilisateurs. De cela, émergent des idées de publicité, de produits. • de connaître les points stratégiques d’influence à activer en cas de lancement de produit ou de situation à crise. Les communautés sont plus ou moins sédentaires, elles bougent et propagent le message. On pourra implanter un mesAPPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

www.navigation-web.com/prologue

21

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

- tente de fluidifier les étapes à compléter pour réaliser une action sans recharger les pages (grâce à l’ajax) - intègre des représentations graphiques de l’information (résultats de recherche sous forme d’images, etc). Les résultats visuels générés par certains moteurs de comparatif de prix, vont au-delà de l’interaction humaine traditionnelle. Le web remplit vraiment sa promesse en créant par exemple un schéma des prix des billets d’avions selon les dates du mois.

faire des cadeaux aux autres. Comme par exemple des cadeaux d’une minute d’une vidéo drôle ou étonnante. La campagne de buzz de Yahoo! Questions / Réponses pour générer des inscriptions d’experts, jouait sur l’ego et le besoin d’estime de soi, de considération, de prestige en simulant un reportage télé qui intégrait la photo de l’expert, son domaine d’expertise, ainsi que son nom. Lorsque l’on publie une vidéo sur un site tel que YouTube ou DailyMotion, on peut mesurer sa popularité.

Du besoin naît l’interaction

À l’origine de toute interaction, un besoin. Reprenons la Besoin de La socialisation, l’estime de soi et l’accomplissement pyramide des motivations de Maslow. Abraham Maslow s'accomplir (réalisation personnelle) se retrouvent dans les applia défini une hiérarchie des besoins chez chaque indications de personnalisation de type meschausvidu. Ces besoins constituent la base des motivaBesoin d'estime sons.com, monalbumphoto.com, le site de Ttions des individus, c’est une réalité qui se retrouve Besoin d'appartenance shirts Lafraise.com, mymms.com qui permet de dans la vie professionnelle. Ils sont présents, de personnaliser ses dragées de M&Ms. Le site façon latente, chez chacun de nous. Les besoins Besoin de sécurité web permet de designer/personnaliser ses sont hiérarchisés. Chaque besoin supérieur propres objets et de les recevoir ensuite ne devient conscient que lorsque les Besoins physiologiques - survie par la poste. Sur certains sites, les design besoins inférieurs sont satisfaits. Dans les applications à succès du web, nous retouvons la pyra- sont soumis à la communauté. Plus ils plaisent, plus ils sont mis en avant. Ce qui est flatteur pour l’internaute designer. mide de Maslow. La survie est rarement le problème d’un internaute, ni des Je pense donc que le futur du web est dans les applications cibles de notre marketing. qui aideront les utilisateurs à s’accomplir, se réaliser. Une grande partie des recherches liées faites sur internet sont En véritable laboratoire d’expérimentation et de valorisation pour trouver de l’information. L’information qui va rassurer l’utilisateur. « L’avion va-t-il avoir du retard ? Est-ce le bon personnelle où nos utilisateurs seront gardés dans ce que logiciel à acheter ? Qui est cette personne ? ». L’information Mihaly Csikszentmihalyi appelle le Flow, cet état virtueux à l’équilibre du challenge et des compétences qui permet de est une question de « sécurité ». garder l’utilisateur / créateur hors de l’ennui et de l’anxiété. Le web 2.0 voit énormément d’applications de socialisation, Cet état est un marqueur de bonheur et d’amélioration de ses où les gens vont pouvoir se mettre en réseau, partager. Ils vont capacités, donc d’évolution.

22

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

www.navigation-web.com/prologue

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Plus d’expérience dans notre shopping
De nos jours, nous sommes encore beaucoup dans une volonté d’interaction : « je vais quelque part pour faire quelque chose ». Pour moi, le futur est dans « je vais quelque part pour vivre quelque chose ». On voit à New York des applications de ce que j’appelle l’expérience shopping. Acheter un cadeau à un enfant dans ce type de boutique sans l’enfant, c’est lui voler la moitié du cadeau ! The Build a Bear Factory, par exemple, fait faire tout un trajet dans le magasin où l’on doit choisir la peluche que l’on veut, il faut ensuite la faire rembourrer, insérer un cœur, mettre son code barre à l’intérieur au cas où elle se perde, l’habiller, éditer un bulletin de déclaration de naissance et payer. Au magasin Disney, le stand Mr Patato Head applique d’autant plus le principe. Mr Patate est une pomme de terre à laquelle on peut ajouter oreilles, chaussures, yeux, chapeau. Le stand était rempli de mini pièces à acheter avec une patate. Un message sur le stand indiquait 18 USD la boîte. Jusque-là intéressant, mais rien de transcendant. Mon accompagnatrice de 13 ans et bien décidée depuis quelques jours déjà à me démontrer le caractère d’un adolescent, restait toujours aussi bougonne. Elle sera mon groupe témoin. Une jeune femme nous indique après quelques minutes, que c’était 18 USD pour tout ce que l’on pourra mettre dans la boîte. Quoi ? Plus je suis performante, plus j’en aurai. Ni une, ni deux, l’adolescente et moi-même sommes traversées d’une folie frénétique. Notre objectif : remplir la boîte. Le stand a même une personne attitrée pour aider les Mr Patate fanatiques à remplir leur boîte. Je peux vous dire qu’après ça, je n’étais pas prête de laisser les boîtes à la caisse ! Et ma pré-adolescente était enfin heureuse. Merci Mr Patato Head !
APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

En France, les magasins Monoprix Gourmet et Monop’ en sont un autre exemple. Aller faire ses courses devient une expérience de part la variété et le caractère innovant des produits présentés. Ce type d’expérience pourrait être retranscriptible en numérique entre autres avec des applications sociales, de personnalisation et dans les univers virtuels en 2,5 ou 3D . Dans la conception de l’application, il suffit d’appliquer les règles du jeu vidéo (voir navigation 060).

Des besoins émergents en situation de mobilité
Louise Fantini, conceptrice d’applications multimédia pour entre autres des musées au Canada, disait « Bientôt, cela ne vaudra pas toujours le coup de se déplacer dans les lieux physiques. L’information offerte en ligne surpasse souvent celle offerte sur place ». Par exemple, chez votre libraire favori, vous n’avez pas accès aux commentaires des lecteurs comme sur les librairies en ligne. L’écart entre les univers physiques et virtuels devra être comblé pour répondre aux attentes créées par le web. Les applications mobiles commencent à se faire désirer.

Conclusion
À l’heure, où beaucoup se posent la question de ce que sera le web 3.0, je dirais que le futur du web est dans le bonheur, portatif ou non, quoi qu’il en soit incroyablement graphique ! Amusez-vous bien à réaliser une application qui répond aux besoins plus ou moins profonds de vos utilisateurs. Bref, donnez-leur ce qu’ils veulent, vous aurez ce que vous voulez !

www.navigation-web.com/prologue

23

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

001 - Navigation guidée
ou fonctionnalité de « Naviguer et rechercher » en anglais « Browse and search ».
NOTE COÛT ACCESSIBILITÉ

Laisse-moi découvrir ou affiner ce que je veux sans trop réfléchir.
Majoritairement utilisée par les sites d’e-commerce ou les sites à gros contenu tels que des sites affichant les lois, règles et régulations applicables.

Capture d'écran du site www.amazon.fr au 10/06/2006

La navigation guidée présente à l’internaute un enchaînement de listes de catégories disponibles pour une catégorie sélectionnée. Ainsi il affine sa recherche par rapport à ce qui est disponible. Tout au long de sa navigation, il a accès à une liste de produits ou de contenus correspondant à sa sélection.

L I N É A I R E

Un produit ou contenu peut être classé dans plusieurs catégories. Plus vous attribuez - généralement manuellement - de catégories à un produit, plus il s’affiche dans de nombreuses pages.
Ce qu’il faut retenir La navigation guidée repose sur des outils d’administration puissants qui permettent aux contributeurs de mettre en ligne et classifier leurs produits.

Si une catégorie est vide, le système doit l’indiquer clairement. Vous pouvez choisir de rendre le lien inactif, d’afficher le nombre d’éléments contenus dans la catégorie, ou simplement de ne pas afficher le lien. Surveillez votre catégorisation. Si les catégories sont trop précises, peu de contenus s’y réfèrent et l’internaute risque de percevoir votre site comme pauvre. A l’inverse, une catégorisation trop large risque de perdre l’internaute dans une abondance de résultats.
APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

24

www.navigation-web.com/001

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

La catégorisation, appelée aussi taxonomie, doit être créée selon les “envies”, besoins ou interrogations des utilisateurs. Pour affiner votre système de catégorisation, consultez et analysez les recherches faites par vos internautes sur votre site et sur internet (voir règle d’or numéro 2). Lors de l’implémentation de ce type de navigation pensez à : • doubler l’enchaînement des pages par la présentation d’un fil d’Ariane (cf. Navigation 055) pour permettre à l’internaute de se repérer dans sa navigation et de revenir en arrière à tout instant s’il le souhaite. • afficher les liens déjà visités d’une autre couleur que les liens non visités. Ainsi l’internaute peut facilement découvrir toutes les catégories, sans consulter par erreur plusieurs fois la même page. • préférer de vraies listes à puces (code html UL et LI) afin d’optimiser l’analyse des liens par les moteurs de recherche.

$50,000
C’est le prix du ticket d’entrée des outils leader du marché, comme les produits de Endeca Inc., et les prix montent vite. Beaucoup de sites utilisent une solution développée “maison”.

«La société Endeca a été pionnière dans la solution de recherche que même Google glorifie. La navigation guidée jouera un rôle de plus en plus important dans le futur de la recherche. »
Beyond Googling, AlwaysOn, 20/05/2005

INTERVIEW > Marie Oneissi, directrice-gérante, Texto - La maison du dictionnaire

« Ce système de navigation permet une ergonomie de recherche optimisée au sein de notre catalogue. »
Comment avez-vous été amenée à mettre en place ce type de navigation ? M.O. : Nos clients demandaient souvent à se procurer notre catalogue et, comme il est enrichi quasiment tous les jours, nous l’avons mis en place sur notre site. Chaque fois que le client se connecte et clique sur l’onglet “catalogue, il peut avoir accès à tous nos produits, y compris les plus récents. Comment avez-vous créé les différents niveaux de navigation ? M.O. : Nous avons voulu réduire au minimum les niveaux de navigation pour éviter à l’internaute de se perdre
www.navigation-web.com/001

dans les méandres du site. Sur la page d’accueil, les catégories sont associées à quelques sous-catégories, pourriez-vous nous indiquer comment vous avez décidé de prioriser ces informations ? M.O. : La priorisation a été créée en fonction de la demande et/ou de la rareté. Ainsi, certaines matières, où on trouve peu d’ouvrages en général, méritaient d’être mises en avant. D’autres matières sont tellement populaires qu’il était naturel que nous leur donnions une visibilité supérieure.

Capture d'écran du site www.dicoland.com au 22/04/2007

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

25

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

002 - Menu horizontal mono niveau non déroulant
Ce menu est un des plus simples qui existe. Tel un chapeau au-dessus du site, il permet à l’internaute d’avoir une vue globale du contenu à consulter.
NOTE COÛT ACCESSIBILITÉ

Pour qui ? Pour les sites de prestataires de services ou de vendeurs de logiciels, cette navigation est particulièrement utilisée.

Capture d'écran du menu www.lavachequirit.com au 25/05/07

Un menu horizontal affiche les liens vers les pages principales du site. Les sites utilisant cette navigation ont très peu de pages. Cette navigation donne en un coup d’œil l’accès aux 5 voire 6 grands thèmes du site. Les liens de barre horizontale changent rarement. Avec ce type de navigation, vous êtes limité en largeur par la largeur de l’écran de l’internaute. Ceci limite donc le nombre de catégories que vous pourrez afficher. Veillez à ce que, lorsque l’utilisateur cliquera sur un des items de la barre, le bouton reste « allumé » et, dans l’idéal, non cliquable. Ceci quelle que soit la technologie. Ainsi l’internaute pourra se situer dans le site. Vous pouvez doubler cet allumage visuel par l’insertion d’un caractère de type « > » devant le nom de la rubrique allumée. Ainsi les internautes qui surfent sur votre site sans afficher les couleurs et les feuilles de styles font la distinction entre les différents boutons. Un point de technologie : Créer sa navigation en texte et html est préférable à tout autre technologie. C’est plus léger, évolutif et accessible aux moteurs de recherche. Généralement une navigation horizontale n’évolue pas, vous pouvez - pour des raisons de design - faire des séries d’images ou une Image Map. Rares sont les fois où une Image Map est appropriée.
APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

Approprié pour les sites ayant peu de grandes catégories de contenu 3 à 7 pages maximum. Les catégories répondent aux questions « quoi », « pour qui / pourquoi », « pourquoi nous » et « comment ».

L I N É A I R E

Mettez en évidence l’action transformante phare de votre site par une couleur différente, un point d’exclamation ou autre élément graphique. C’est cette action que les internautes veulent en majorité et c’est ça que vous voulez de votre site, alors facilitez-leur la tâche !

26

www.navigation-web.com/002

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Dans ce cas, veillez à : • insérer un tag alt et title aux images répétant le texte du bouton. Ceci permet aux utilisateurs n’affichant pas les images de connaître l’intitulé du lien. Ces utilisateurs sont : - les non ou mal-voyants, - les personnes ayant décidé de ne pas charger les images pour des raisons de rapidité de navigation. • garder une copie des fichiers sources ainsi que les polices nécessaires pour créer ces images. Ainsi vous pourrez les faire évoluer si besoin après quelques mois. • afficher la version allumée dans les pages internes. Si vous choisissez une barre de navigation en Flash, pensez à : • répéter les liens contenus dans le Flash en bas de page ou ailleurs dans leur version html afin que les moteurs de recherche et les personnes n’ayant pas accès au Flash puissent avoir accès aux pages internes du site. • garder une copie du fichier source. • afficher la version allumée dans les pages internes.

Astuce Vous voulez ajouter d’autres catégories sans changer de système de navigation ? Google ajoute un lien « more » ou « plus ». Un clic sur ce lien mène vers toutes les fonctionnalités de Google.

Capture d’écran de www.google.com au 07/07/06

INTERVIEW > Olivier CREICHE, Vice-président, general manager EMEA

« On veut que le visiteur comprenne en 4 pages maximum puis ait envie d’essayer le produit. »
Pourquoi ce menu ? O.C. : Cela permet d’exprimer la simplicité attendue par le produit. Utiliser un autre type de menu pourrait inciter à penser que notre solution de blog est un produit complexe. On veut que le visiteur puisse avoir compris en 4 pages maximum puis ait envie d’essayer le produit. Le menu « sign up » est en orange, pourquoi avoir choisi de le faire ressortir ? O.C. : C’est l’acte d’achat. La finalité de la visite doit être l’essai puis l’achat d’où le besoin de le faire ressortir visuellement.
www.navigation-web.com/002

Pourquoi avoir mis des intitulés de menu sous forme de questions ? O.C. : Nos visiteurs se posent des questions. Reprendre ces questions de base permet d’exprimer notre empathie et notre compréhension de leurs interrogations. De plus, ouvrir un blog ne répond pas à un besoin vital, même si tout le monde en parle. Il convient donc de mettre en avant l’intérêt pratique de ce type d’outil.

Capture d’écran du site www.typepad.fr au 06/02/07

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

27

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

003 - Menu horizontal sur deux niveaux non déroulant
Créer des univers adaptés à mes utilisateurs. À chaque profil utilisateur son « onglet ».
NOTE COÛT ACCESSIBILITÉ

Pour qui ? Ce type de navigation correspond aux sites contenant beaucoup de contenu. Idéal pour les sites affichant une offre de services ou de produits pouvant aller de 10 à 20 grandes pages thématiques.
Capture d’écran http://www.templatemonster.com au 23/04/07

Parmi tous les univers que votre organisation propose, laisse-moi atteindre au plus vite l’univers que je viens chercher.

Rappel Un utilisateur moyen ne mémorise pas plus de 5 éléments (+/- 2) selon le sujet. Limitez vos sous-sections à 7.

L I N É A I R E

Si votre site a un objectif de transformation de type « inscription » , « acheter », « faites la promotion de nos produits », faites comme Template Monster.com - voir exemple à droite - et utilisez le décoché créé par les deux niveaux pour introduire un bouton de transformation de manière évidente.

Cette navigation est à deux niveaux. Chaque catégorie de niveau 1 contient un ensemble de sous-pages/sections. Le système peut afficher directement deux niveaux de navigation directement à l’arrivée sur le site où c’est en cliquant sur un des éléments de niveau 1 qu’un sous-menu s’ouvre. Il reste affiché tant que l’utilisateur ne change pas de catégorie de niveau 1. Comme le modèle de navigation 002, utiliser cette barre de navigation vous limite en nombre de catégories et sous-catégories affichables en largeur. Cette largeur dépend de l’équipement de vos internautes. Affichez votre barre de navigation sur 980 pixels maxi si vos utilisateurs ont une résolution d’écran de 1024.

Important
Affichez les catégories en cours de consultation de manière différente des autres liens. Ceci permet aux internautes de se situer facilement dans le site. Cette différenciation peut se faire par la couleur et par l’insertion d’un caractère de type « > » devant le libellé de la catégorie en cours de consultation. Le caractère « > » sert aux internautes qui n’affichent ou ne perçoivent pas les couleurs. Surveillez les constrastes des couleurs utilisées. Même actif un libellé doit être bien visible.

28

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

www.navigation-web.com/003

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Tant qu’un internaute n’est pas au bout de l’arborescence du site, les libellés doivent être cliquables. Pensez comme pour la navigation 002 : • à créer votre navigation en texte et html est préférable à tout autre technologie. • à préférer des listes à puces (code html UL et LI...) • Si vous utilisez des images, - à insérer un tag ALT et TITLE. Ils sont visibles en passant la souris sur les images et en affichant les propriétés de l’image grâce à un clic droit sur l’image. - à garder une copie des fichiers sources pour les faire évoluer plus facilement. Ce système de navigation permet aux utilisateurs de retrouver aisément leurs sections « favorites ». Veillez à ce que les libellés soient explicites aux utilisateurs et non uniquement à votre organisation. Bannissez tout jargon interne.

Le site d’Apple utilise ce système de navigation. Les produits les plus en vogue sont mis en avant dans la barre de navigation. L’utilisateur qui vient chercher un élément en particulier sera donc servi très rapidement.

Attention !
La souplesse d’évolution de cette navigation peut générer des incohérences entre les différentes sections. Certains libellés deviennent parfois redondants.

Capture du site http://www.apple.com au 24/04/07

Astuce Testez votre navigation auprès de votre cible. 5 utilisateurs suffisent pour identifier 80% des problèmes d’ergonomie du site.

INTERVIEW > François BOURBOULON, éditeur www.metrofrance.com
Capture d’écran http://www.metrofrance.com au 23/04/2007

« Ce mode de navigation a bien convenu à notre situation pour sa capacité d’évolution. Nous avons pu mettre en ligne le nouveau site avec un nombre limité de catégories et ensuite commencer enfin à travailler. Nous pouvons ajouter et supprimer des catégories sans déstructurer le site. »
Nous avons voulu traduire dans la navigation les habitudes que les internautes ont avec la version papier de notre journal. Nos internautes retrouvent comme dans le journal les sections correspondant à l’actualité à gauche et les sections ludiques (astro, petites annonces,...) plus à droite.

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

www.navigation-web.com/003

29

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

004 - Menu horizontal déroulant encore appelé menu
en cascade ou menu à coulisse
NOTE COÛT ACCESSIBILITÉ

Pour qui ? Les sites à fort contenu éditorial comme par exemple les sites de presse en ligne.
Capture d’‘écran du site www.clarins.net au 28/05/07

Avoir accès à tout le site depuis toutes les pages.

L I N É A I R E

Attention au Royaume Uni et aux sections recrutements : Cette navigation est célèbre pour être quasiment impossible à rendre accessible selon les recommandations du W3C. Si vous y parvenez, je serais ravie de voir le résultat. Evitez cette navigation si votre site ou vos gabarits sont amenés à être utilisés pour un site UK. La réglementation britannique veut que tous les sites publics et privés soient accessibles selon un équivalent du niveau AA des recommandations du W3C. La réglementation française veut que tous aient accès aux offres d’emplois quel que soit le handicap.

Ce type de menu affiche les niveaux 1 de navigation en permanence. Lorsque l’internaute passe sa souris sur un lien, les sous-parties de la section apparaîssent. Ce menu généralement intégré en « CSS » est la star des recherches faites sur internet concernant les modèles de navigation, essentiellement pour le « challenge » technique qu’elle représente. Un utilisateur peut découvrir en passant sa souris l’ensemble du contenu du site. De nombreux éditeurs de site sélectionnent cette navigation car elle permet de faire des liens vers toutes les parties d’un site en un minimum d’espace. Les sousmenus s’affichent en superposition du contenu. Elle est aussi choisie car elle offre un sentiment de dynamisme et d’interactivité. Les menus déroulant sont généralement créés en DHTML. Ils apparaissent en surcouche du site couvrant une partie du site. Ce menu rend la souris très sensible. Ce qui peut être inconfortable pour l’internaute. L’affichage de menus successifs peut rendre le menu d’autant plus difficile et frustant à utiliser. Pour les personnes n’ayant pas de souris, il est souvent impossible à utiliser. Faîtes l’expérience, débranchez votre souris et tentez d’accéder au menu grâce au bouton tabulation de votre clavier. De plus, les sous-catégories sont généralement listées dans un javascript. Ce dernier n’est pas indexé par les robots d’indexation. Ce qui rend les sous-catégories invisibles sur les moteurs de recherche.
APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

30

www.navigation-web.com/004

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Si vous choisissez d’implémenter ce modèle de navigation, veillez à :
• ce que toutes les pages soient accessibles à un utilisateur qui n’a pas accès aux javascripts. Pour tester, désactivez l’exécution des javascripts de votre navigateur. Si ce n’est pas le cas, répétez les liens dans la balise <noscript> du code Javascript. Le résultat ne sera peut-être pas très élégant sans javascript mais vos pages seront visibles. • ce que les libellés des différentes catégories correspondent aux besoins des utilisateurs et à une logique utilisateur. • veillez aussi à ce que si les couleurs et les images de la page sont désactivées, le contenu des menus soit lisible. Depuis son téléphone mobile, un utilisateur peut choisir de ne pas les afficher afin de surfer plus vite. • éviter d’afficher plus de 9 catégories par menu. • pour les utilisateurs qui n’auraient pas accès au menu à coulisse, rendez les libellés de niveau 1 cliquable. Cliquer sur ces liens doit ouvrir une page qui donnera accès au reste du contenu de pages contenues dans cette catégorie.

Hydropool, ajoute une image à ses menus afin d’ajouter une touche de visuel dans cette masse de texte.

Capture d’écran www.hydropoolhottubs.com au 24/04/07

Avis personnel
Ces menus sont utilisés à tout bout de champ et souvent n’importe comment. Ajoutez à cela qu’ils ne sont pas accessibles à 100% à tous. J’ai longtemps cherché à prouver que les utilisateurs ne les appréciaient pas. Tous les experts en tests utilisateurs m’ont indiqué la même chose. « Si, s’il est bien implémenté ». Un éditeur de site m’a même rapporté « ce sont les habitués du site qui l’utilisent le plus ». Je m’incline donc... pour l’instant et j’augmente un peu sa note.

« J’ai sélectionné cette navigation car j’aime trouver rapidement et sur une seule ligne les principales informations concernant un site. Sans avoir à naviguer sur de multiples menus dans lesquels je me perds. »
Nicolas Thébault, fondateur TEBOPRO, Activateur de carrière

RETOUR EXPERT > Laure SAUVAGE, consultante usabilité - réalisation de tests utilisateurs

« Dès la page d’accueil, les utilisateurs gagnent un clic. »
Nous constatons lors de tests utilisateurs que les menus à coulisse fonctionnent bien même avec les novices. Dès la page d’accueil, les utilisateurs gagnent un clic. Pour bien fonctionner ces menus à coulisse doivent cependant respecter certains critères : • avoir des titres synthétiques. Les intitulés des sous-rubriques ne doivent pas être trop longs. • afficher un seul niveau. Les deuxièmes niveaux ne fonctionnent pas vraiment avec les utilisateurs. • lister un nombre de liens inférieur à 7-8 par rubrique • il faut que les menus soient bien calibrés, qu’ils ne se referment pas trop vite. L’optimisation et la simplification de ce type de menu doivent se faire dans le sens d’une économie d’utilisation des ressources cognitives de l’utilisateur. Plus il devra faire appel à
www.navigation-web.com/004

sa mémoire – en particulier si les intitulés des rubriques et des sous-rubriques sont trop longs et/ou trop nombreux – plus il aura de difficultés à maîtriser sa navigation. Alors on perd les bénéfices de l’accès direct en page d’accueil. Le bouton /onglet principal doit-il être cliquable ? L.S. : Pas forcément. Il doit l’être si c’est logique par rapport au contenu de la page, sinon ce n’est pas nécessaire.

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

31

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

005 - Menu de gauche vertical standard
Grand classique de navigation, le menu de gauche vertical reste une valeur sûre.
NOTE COÛT ACCESSIBILITÉ

Pour qui ? Principalement utilisé par les sites de PME, les sites institutionnels et ceux ayant beaucoup de contenus, trop de contenus pour utiliser une navigation horizontale (navigation 002).
Capture d’écran de www.journaldunet.com au 16/06/06

J’aime bien ce menu car je retrouve toujours ce que je cherche.

L I N É A I R E

Trucs de designer Idéal pour un découpage en 3 colonnes de la page. À gauche, la navigation linéaire, au centre le contenu, à droite la navigation transversale. Le contenu n’est donc pas collé à la gauche du navigateur, ce qui facilite la lecture. Ne dépassez pas 80 caractères par ligne dans la colonne de contenu. Si les lignes de contenu sont trop longues, il est difficile pour l’œil de suivre une ligne jusqu’à la fin.

Le menu de gauche, vertical non déroulant, affiche les liens vers les catégories de niveau 1, 2 et parfois 3 dans la colonne de gauche du site. Cette navigation est particulièrement évolutive. Vous pouvez ajouter et supprimer autant de rubriques que vous le voulez. Les libellés des liens doivent être courts et explicites. Affichez strictement le même menu dans toutes les pages du site. Les habitués d’un site utilisent beaucoup les liens de cette navigation car ils savent où ils veulent aller et aiment les trouver toujours au même endroit. Cassez la monotonie qu’ils peuvent facilement susciter. Variez les couleurs pour mettre en avant une rubrique (voir capture d’écran), insérez des pictos à côté des liens les plus populaires, ou affichez des informations de manière proactive comme le fait le journaldunet.com (voir capture). Cette technique a pour avantage d’augmenter l’indice de passivité de l’internaute. Votre visiteur obtient des informations sans avoir à cliquer.

Attention !
Évitez d’avoir un menu de gauche plus long que le contenu des pages du site.

32

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

www.navigation-web.com/005

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

Les bonnes pratiques à connaître sont les suivantes : • allumer les liens en cours de consultation. • utiliser du texte et non des images afin de rester le plus léger et évolutif possible. Si vous utilisez des images, reprenez leur contenu dans les tags ALT et TITLE. Ceci permettra aux moteurs d’indexation des moteurs de recherche et aux personnes n’ayant pas accès aux images de savoir où ils vont. • ajoutez des pictos (petites images) à côté du libellé pour varier le menu. Assurezvous qu’ils ont un tag ALT vide de type alt=”“ afin que les illustrations soient ignorées par les synthèses vocales. • utilisez des imbrications de liste à puces (tag UL et LI) pour améliorer l’accessibilité du menu.

Pour donner aux internautes ce qu’ils veulent, il suffit de les écouter Demandez à quelques utilisateurs types, pourquoi ils viennent sur le site. Les réponses sont généralement simplissimes. Libellez vos liens de leurs réponses. Exemple : Trouver revendeur...

Suivez les traces des prédécesseurs Regardez vos statistiques de consultation. Les pages les plus consultées sont les plus populaires. Mettez-les en avant dans le menu.

INTERVIEW > Benoît DROUILLAT - Directeur de création

« C’est un menu persuasif qui appelle à l’action. »
Le menu de gauche est un menu qui garde ses objectifs de transformation en tête et en page. Pourriez-vous nous en parler ? B.D. : Effectivement, c’est un menu persuasif qui appelle à l’action.
Capture d’écran de www.valeocareers.com au 13/06/07 réalisation SQLI

Pourquoi l’avoir placé à gauche ? B.D. : C’est l’usage qui détermine l’emplacement des items. Ce sont les standards d’ergonomie qui déterminent son emplacement. La plus grosse contrainte des interfaces est le calibrage, la gestion de l’espace disponible. Les interfaces de nos jours ont une dimension visuelle prépondérante. Le visuel très grand a un impact sur la manière d’articuler l’image avec le contenu et la navigation.
www.navigation-web.com/005

Comment décider des libellés ? B.D. : Les libellés doivent être courts. Plus un libellé est court, plus on a de chance de l’intégrer dans l’interface de façon fonctionnelle et esthétique. Cela correspond aussi à une facilité d’usage. La charge mnésique, un concept d’ergonomie cognitive est gardée au plus faible. C’est le travail effectué par la mémoire qu’un utilisateur doit effectuer pour retenir un intitulé de menu. Comment le verriez-vous évoluer ? B.D. : En général, les équipes web ont peu de retours sur l’efficacité d’un menu ou d’un site. Il serait bon d’avoir la possibilité d’avoir une démarche de création itérative.

APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

33

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

006 - Menu de gauche vertical avec développement de la
sous-catégorie dans les pages internes uniquement
NOTE COÛT ACCESSIBILITÉ

Pour qui ? Pour les sites contenant beaucoup de contenus. Cette navigation est très populaire auprès des sociétés et institutions qui démontrent sérieux et structure.

Je sais que tu as plein de choses à raconter mais donne-moi des détails uniquement lorsque j’en demande.
Capture d'écran du site www.barclays.fr au 10/06/06

L I N É A I R E

Affichées en colonne de gauche, les catégories principales apparaissent les unes au-dessous des autres. Lorsque l’internaute clique sur une catégorie, il est redirigé vers une nouvelle page présentant cette catégorie. Le menu de gauche apparaît alors « ouvert » faisant un lien vers toutes les sous-rubriques de la rubrique sélectionnée. Les sousrubriques s’affichent sous le lien sur lequel l’internaute vient de cliquer. Comme toutes les navigations en hauteur, le nombre de catégories et sous-catégories est en théorie illimité. Les ergonomes conseillent néanmoins d’afficher moins de 7 catégories par niveau. Il est possible de mettre en place un script qui permette aux internautes d’ouvrir et de fermer les menus de gauche sans forcément recharger la page principale. Cette pratique est déconseillée car elle déconcerte les internautes. Lorsqu’un internaute clique sur un lien, il s’attend à changer de page. Ces scripts sont aussi très souvent ignorés par les moteurs de recherche et par les internautes qui ont désactivé l’exécution des scripts. Si vous choisissez ce menu : • laissez le sous-menu d’une catégorie ouvert. Si l’internaute consulte une catégorie, bloquez la possibilité de fermer le sous-menu. • allumez (par la couleur et l’insertion d’un signe de type « > »), voire désactivez les
APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

Projet www.jvcpro.co.uk

Jouez en variation avec les niveaux 1. Ici, les boutons varient en taille et en couleur selon les besoins utilisateurs. Je suis l’architecte de ce projet. Je vous laisse donc apprécier par vous-même.

34

www.navigation-web.com/006

INTERNET, DONNE-MOI CE QUE JE VEUX ! 60 MODÈLES DE NAVIGATION POUR SATISFAIRE VOS INTERNAUTES

liens des pages en cours de consultation. • variez le menu de gauche (couleur, picto...) afin de mettre en avant certaines catégories et ainsi de casser la monotonie. Veillez à ce que les tags ALT et TITLE soient vides s’ ils sont purement décoratifs. • privilégiez le texte accompagné d’une illustration plutôt qu’une série d’images. Cela vous permettra de faire évoluer votre site à moindres frais et le rendre plus accessible entre autres aux moteurs de recherche. • vérifiez qu’aucune des variations du menu ne soit démesurément plus longue que le contenu lui-même. • vérifiez que l’ensemble de vos pages soient accessibles sans javascript. Testez en désactivant les javascripts de votre navigateur. • préférez une imbrication de liste à puces (code html UL et LI) pour la construction de ce menu. • une variante de ce menu existe. Elle ouvre le sous-menu en haut de page.

Capture d’écran www.linternaute.com au 13/06/07 La variante de cette navigation affiche le contenu du sousmenu en haut de liste. Cette variante s’applique bien aux sites dont le menu est extrêmement long. Ce sont des sites dont les rubriques sont très variées. Un utilisateur viendra pour une rubrique et y restera. Lors de l’implémentation de cette variante : appliquez au sous-menu des codes graphiques (couleur de fond) bien différents du menu de niveau 1 afin que l’internaute puisse faire la différence.

INTERVIEW > Catherine GUICHON, Responsable internet, MANPOWER

« Ce système de navigation permet une ergonomie de recherche optimisée au sein de notre catalogue. »
Pourquoi avez-vous choisi de réaliser ce type de navigation ? C.G. : C’est un type de navigation courant, clair, qui correspond à la notion de marge. Ce menu était initialement amené à se « déplier » lorsque l’utilisateur cliquait sur un intitulé, pour faire apparaître les intitulés secondaires. Nous avons opté pour un menu fixe dans lequel l’utilisateur se repère mieux. Quels en sont les avantages ? C.G. : Elle permet à l’internaute d’avoir une vision globale de toutes les propositions et de choisir plus facilement. Elle favorise la mémorisation des menus et
APPORTEZ VOS COMMENTAIRES SUR CETTE NAVIGATION SUR

des repères. Elle permet de valoriser des sujets en les mettant au premier plan. Ses inconvénients ? C.G. : Il faut avoir très bien structuré les menus pour que l’utilisateur trouve après avoir cliqué dans l’onglet, des intitulés en lien avec l’univers attendu. Le nombre d’items est limitant. Avez-vous testé le menu ? C.G. : Nous avons effectivement effectué des tests utilisateurs et nous les avons impliqués dans le choix des intitulés et leur répartition avec l’aide de la société d’ergonomie Yuseo.

Capture d'écran du site www.manpower.fr au 02/05/07

www.navigation-web.com/006

35

INTERNET

60

modèles de navigation pour satisfaire vos internautes
à l’accessibilité au référencement

Avec des recommandations liées :
à l’ergonomie

Vous voulez un site internet efficace ? Donnez à vos internautes ce qu’ils veulent, vous aurez ce que vous voulez.
POUR REMPLIR CET OBJECTIF, 4 ÉTAPES :
• mettre les internautes sur écoute • rendre vos pages accessibles à tous • optimiser votre site pour le référencement quelque soit leur équipement (téléphone • construire un site simple et facile à utiliser mobile…) ou handicap

Patricia GALLOT-LAVALLÉE
Webmaster, puis chef de projet web, architecte de l’information et chargée d’unité d’enseignement à l’Institut International du Multimédia, Patricia approfondit sa passion depuis plus de 8 ans. Elle a travaillé sur des sites internet tels que le Journal du Net, Barclays Bank France, Centre d'Information des Viandes, Petro-Canada, etc. Patricia est diplômée Expert en Accessibilité selon la méthode AccessiWeb. Aujourd’hui, elle met à disposition des entreprises sa créativité et ses connaissances techniques au sein de la société de conseil Kenazart Strategy Interactive dont elle est la fondatrice.

60 EXEMPLES DE NAVIGATIONS INTERNET AFIN :
• d'aider les responsables de site web à choisir les modes de navigation à mettre à disposition de leurs internautes. • de fournir une source d'idées de fonctionnalités et d'interfaces web pertinentes. • de proposer des pistes d'amélioration des systèmes de navigation déjà en place sur le site. • de regrouper les recommandations d'ergonomie, de référencement et d'accessibilité sur une même page.

CE LIVRE S'ADRESSE AUX PERSONNES AMENÉES À CONCEVOIR UN SITE WEB :
• chefs de projet web • responsables de site internet • responsables marketing et communication • architectes de l'information • ergonomes chargés de concevoir des interfaces web • personnes chargées de la direction artistique /designers / graphistes web • consultant(e)s et chargé(e)s de clientèle en agence • développeurs web • étudiant(e)s
KENAZART STRATEGY INTERACTIVE

VISITEZ

www.navigation-web.com
« INTERNET, DONNE-MOI CE QUE JE VEUX ! »

ISBN10 : 2-9528507-0-4 ISBN13 : 978-2-9528507-0-4 31 € (Prix France TTC)
Maquette et couverture : Ronald TEXIER Photo : © Balthasar Thomass

LE SITE DU LIVRE ET RETROUVEZ LA COMMUNAUTÉ EXPRESSIVE DES LECTEURS DE