Conseils pour simplifier la navigation sur votre site

Ce qui se passe dans les projets une fois que le mauvais chemin est pris, c’est que nous sommes généralement réticents à faire marche arrière, même si nous ne nous sentons pas tout à fait à propos de la direction que nous prenons. été investis pour suivre le mauvais chemin.

Il est essentiel de surmonter cette hésitation. Si une mauvaise structure de navigation pose des problèmes de convivialité (comme dans l'exemple de site de cet article), nous devons corriger cette mauvaise structure au lieu de continuer à développer le site.

Sinon, il sera plus difficile de réparer les dégâts ultérieurement. Lors de la conception ou de la refonte de la navigation, nous devons nous rappeler que les besoins de l'utilisateur sont primordiaux.

Des structures de navigation complexes sont rarement nécessaires. Nous pensons juste qu'ils le sont quand nous les créons pour la première fois. Ce que vous devez toujours faire, c'est vous demander s'il n'existe pas de moyen plus simple d'atteindre le même objectif.

S'il existe un moyen plus simple, vous devez l'utiliser, car toute autre solution, aussi impressionnante soit-elle, vous coûtera plus cher que ne vous bénéficiera à long terme. Dans cet article, nous allons utiliser un exemple de site Web en direct pour simplifier une structure de navigation complexe afin d'améliorer la convivialité.

Étape 1: Examiner la conception existante

Le problème avec lequel nous commençons est que la conception de la navigation existante présente une complexité excessive. Dans le cas du site d'exemple que nous réaménageons pour ce projet, cette complexité semblait nécessaire, mais seulement parce qu’un meilleur moyen n’était pas immédiatement évident.

Premièrement, il sera utile de comprendre pourquoi la navigation initiale était complexe en premier lieu. Le site en question est un site de didacticiel, dont l'objet est un système plutôt compliqué.

Etant donné que le site utilise un émulateur réel du système de sujets pour que l'étudiant puisse apprendre, cela signifie que nous ne pouvons pas (ou ne devrions pas) naviguer d'une page à l'autre. Nous devons afficher le contenu en l'insérant en ligne pour éviter de recharger constamment le système et de devoir sauvegarder l'état du système.

Les liens de navigation ne sont donc pas toujours redirigés vers des pages physiques, et la plupart seront redirigés vers des pages virtuelles. Dans ce cas, la navigation peut être considérée comme divisée en leçons, chapitres et sujets.

La barre de navigation supérieure est déjà assez simple, bien qu’elle puisse être mise à jour. Lorsque l'utilisateur arrive pour la première fois sur le site, il verra le menu dans la colonne de gauche.

L'utilisateur doit choisir une leçon dans ce menu avant de pouvoir voir les chapitres et les sujets de la leçon individuels, comme indiqué à la figure 2.

Ce qui rend cette structure trop complexe est qu'il ne devrait pas être nécessaire de diviser la navigation de cette façon (l'utilisateur ne peut pas sélectionner les éléments de navigation de niveau supérieur sans une étape de navigation supplémentaire), et la pagination numérique n'est pas idéale pour la sélection de sujets.

Cependant, il est facile de comprendre la logique derrière la conception originale de la navigation. Le périphérique émulé a été créé en premier et avait une certaine taille déterminée par le code SVG.

Changer sa taille avec du code avant la prise en charge complète universelle par le navigateur de la fonction Zoom CSS3 aurait signifié changer tout le code JavaScript (sur les lignes 10,000), ce qui aurait été un gaspillage.

Par conséquent, la conception de navigation d'origine est une tentative d'économiser de l'espace horizontal afin que le cours et le périphérique émulé puissent être affichés simultanément à l'écran.

Maintenant que nous connaissons la faille dans la structure de navigation existante, cela facilite la planification d'une nouvelle conception de navigation à l'étape suivante.

Etape 2: Planifiez un nouveau design

Comme il existe désormais une prise en charge plus cohérente (mais pas encore excellente) de CSS3 Zoom dans les navigateurs de bureau les plus courants, le périphérique émulé peut être agrandi à une taille plus petite sans nécessiter un recodage massif.

Si cela est fait correctement, plus d'espace sera disponible sur la gauche, ce qui nous permettra d'avoir une colonne supplémentaire au milieu.

Le changement le plus évident est que le corps de la leçon a été complètement éloigné de la zone de navigation, ce qui est exactement ce qu'il devrait être.

Cette modification permettra une plus grande flexibilité du système de navigation et offrira plus d'espace pour l'affichage du corps de la leçon.

Étape 3: Mettre en œuvre le plan

N'oubliez pas que chaque leçon peut comporter plusieurs chapitres et que chaque chapitre peut comporter plusieurs sujets. Comment traitons-nous cela? Le moyen le plus simple consiste à créer une pile d’éléments de menu pouvant être réduite. L'élargissement d'une leçon révèle ses chapitres et l'élargissement d'un chapitre révèle ses sujets.

Sur fig 4, vous pouvez voir la liste non développée des leçons montrées dans le menu de gauche.

Notez également l'ajout nécessaire d'un bouton de navigation dans le corps de la leçon. Cela évite à l'utilisateur de toujours utiliser le menu de navigation pour passer au sujet suivant ou précédent du chapitre.

C’est ce que l’utilisateur verra s’il sélectionne une leçon dans le menu de gauche:

Ces liens à la recherche un peu cryptique ne signifient peut-être pas grand-chose pour vous, mais pour une personne qui s'entraîne à être un aviateur, ils s'expliquent d'eux-mêmes. Si vous élargissez la liste au troisième niveau, vous verrez les pages de sujets individuels, comme indiqué à la fig. 6.

À mesure que la liste de liens s'allonge, une barre de défilement verticale est ajoutée à la page. Nous pourrions associer la barre de défilement au menu lui-même en définissant une hauteur fixe pour le menu.

Trucs techniques

Les scripts externes, les frameworks CSS et les polices utilisés dans l'exemple ci-dessus incluent:

  • Bootstrap v3.3.7
  • Police Awesome v4.7.0
  • Google Fonts: pompiere, concert one, varela round

Ce ne sont en aucun cas les uniquement. Pour que quelque chose comme cela fonctionne, ils ont été utilisés dans ce projet comme un moyen de réaliser rapidement une solution Web sécurisée sans avoir besoin de trop de codage ou de balisage supplémentaire.

Le constructeur du prototype de menu est remarquablement simple si vous utilisez Bootstrap en tant que framework CSS.

Au premier niveau de retrait, vous créez un div pour la zone de navigation (ici, avec l'ID de "leftSide") et un div de classe à l'intérieur pour définir les propriétés que doit avoir l'espace contenant. Dans ce cas, nous utilisons simplement la classe standard «well» déjà prédéfinie dans Bootstrap (fig 7).

Dans cet ensemble, au troisième niveau de retrait, nous ajoutons une paire de paragraphes pour masquer et afficher le menu (fig 8). La propriété display de chacun est importante car elle permettra aux liens de fonctionner comme un commutateur à bascule.

Comme vous pouvez le constater, cliquer sur les liens déclenchera des fonctions JavaScript permettant de masquer ou d'afficher la colonne. Dans ce cas, "cacher" signifie simplement supprimer le contenu et réduire la taille de la colonne, comme indiqué sur la fig. 9.

La fonction de masquage réduit la largeur de la colonne de gauche à la largeur 40px (juste assez pour afficher l’icône requise pour la ramener à la normale) et étend la largeur de la colonne du milieu à 50% de la fenêtre. Afficher tout ramène à son aspect initial.

Nous devons maintenant créer un conteneur pour contenir les éléments de menu.

Ajoutez ensuite l'élément de navigation, dans ce cas le panneau «instructions».

La compression de l'élément est gérée par les propres CSS et JavaScript de Bootstrap. Il suffit donc d'ajouter des fonctions pour modifier le contenu de la colonne du milieu lorsqu'un élément est cliqué (l1s1 et l1s2).

Celles-ci sont gérées par un script externe, mais elles sont illustrées à la fig. 12 par souci de complétude.

Retour au menu dans notre fichier HTML. Un saut de ligne est ajouté en tant que simple séparateur, puis les éléments restants sont ajoutés en tant que série de listes imbriquées. Le constructeur initial est montré à la fig. 13.

À partir de ce moment, l'ajout des éléments de menu restants est très simple. Par souci de brièveté, seul l'ajout du premier jeu d'éléments est affiché, mais les jeux d'éléments restants sont ajoutés exactement de la même manière.

Tous les éléments doivent être ajoutés entre les paires de balises de liste, comme indiqué.

Le prochain élément de menu serait ajouté en insérant une nouvelle ligne à la ligne 75, puis en suivant exactement la même procédure pour l'élément T1-L2, etc.

Une fois que tous les éléments (chapitres) de T1-L1 à T1-L6 ont été ajoutés, nous ajoutons un nouveau saut de ligne, puis ouvrons une nouvelle liste (sous la catégorie T2), en suivant les mêmes procédures jusqu'à ce que le menu soit terminé.

La dernière étape de la refonte de notre menu de navigation consiste à ajouter un script pour vous assurer que nos éléments de menu sont initialement affichés non développés.

Si votre site n'obtient pas les résultats escomptés, l'une des raisons possibles pourrait être que votre système de navigation est plus complexe qu'il ne devrait l'être.

La réduction de la complexité des menus est une étape importante dans l'amélioration de la convivialité du site. En permettant aux utilisateurs de se repérer plus facilement dans des systèmes complexes, vous serez récompensé par davantage de visiteurs de retour et éventuellement plus de références.

Avatar

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.