Nouveau baromètre de la conversion

Les Astuces d’Ergoman : Faites des Menus de Navigation Simples !

Par Ergoman | avril - 9 - 2014 | 6 commentaires  
Auteur de ce billet : Ergoman vient de la planète Ergos, située à des milliards d'années lumière de la Terre. Super-affordant, maîtrisant parfaitement tous les secrets des critères de Bastien et Scapin, Grand Ninja de l'Ergonomie Digitale, il est venu dévoiler tous ses secrets aux humbles terriens pour améliorer l'expérience utilisateur sur les terminaux digitaux. Contactez Ergoman sur Wexperience
» Voir tous les articles de Ergoman

Ah, trouver un produit dans un site n’est pas toujours chose facile ! Des fois il y en a trop ! Des fois, on ne sait pas comment il s’appelle. Des fois, le moteur de recherche ne le trouve pas. Bref, à moins de disposer d’un bon moteur de recherche, pour l’utilisateur moyen, trouver un article peut s’avérer plus compliqué qu’il n’y parait.

Sur un site ecommerce, il y a deux moyens pour arriver : la navigation et le moteur de recherche. Aujourd’hui, nous nous intéresserons à la navigation et, en premier lieu, au menu de navigation principal.

Le menu de navigation principal, c’est un peu la carte de l’utilisateur. Celle qui va lui permettre de se retrouver plus ou moins facilement dans votre offre. Sans être trop simple, elle ne doit pas non plus être trop compliquée, sous peine de ne pas pouvoir être correctement mémorisée. Evidemment, il est aussi beaucoup plus facile de dessiner une carte pour quelques dizaines de produits que pour quelques milliers de produits.

Voici donc quelques astuces qui vous permettront de mieux concevoir « votre carte ».

Limiter le nombre d’objets

C’est le plus compliqué. Plus il y a d’articles dans votre boutique, plus votre carte risque d’être grande. Et grande aussi est la tentation de faire un menu compliqué qui range tous les articles dans des dizaines de rayons. Le problème, c’est qu’au bout d’un moment, plus personne ne s’y retrouve. Vous devez donc limiter le nombre d’objets de votre carte.

Pour cela respectez quelques règles :

  • Pas plus de 4 niveaux de profondeurs : univers, catégorie, produit. Au delà, vous créez inutilement de la complexité.
  • Pas plus de 8 univers principaux. Pareil, plus vous en mettrez, plus vous aurez du mal visuellement à tous les ranger dans la page que ce soit horizontalement ou verticalement.

Bien sûr, plus vous avez d’offre, plus il devient compliqué de respecter ces règles. Mais, au moins, fixez-les vous comme objectif. Même si vous n’y arrivez pas, vous devez tendre vers la simplicité.

L'enseigne Camïeu respecte cette règle en proposant 7 univers décomposés en 3 niveaux de profondeurs (comme nous pouvons le voir avec l'univers "collection").

Le layer principal de Camaïeu. Ici, l’arborescence est déclinée en 4 niveaux du fait de la richesse de l’offre, mais le menu reste clair grâce à l’usage de polices de caractères différentes différenciants les niveaux.

Sur le support tablette, l'organisation reste sensiblement la même et est plutôt confortable.

Sur le support tablette, l’organisation reste sensiblement la même et est plutôt confortable.

Utilisez les layers plutôt que des menus déroulants.

Certes, on voit de moins en moins de menus déroulants, mais pour utiliser au mieux l’espace qui vous est alloué sur un écran, vous pouvez déroulez au survol ou au clic un morceau de page (que l’on appelle un layer) contenant la sous arborescence de votre univers.

Les menus déroulants sont plus compliqués à utiliser et ne permettent pas de donner rapidement une vision d'ensemble d'un univers à l'utilisateur

Les menus déroulants sont plus compliqués à utiliser et ne permettent pas de donner rapidement une vision d’ensemble d’un univers à l’utilisateur

 

 Soignez vos polices de caractères pour les libellés d’univers

Utilisez des lettres capitales : même si les capitales sont moins rapides à lire que les minuscules, elles accrochent toutefois mieux le regard. Pour des titres d’onglets, il vaut donc mieux les utiliser pour augmenter leur saillance et donc leur impact visuel.

Utilisez des titres courts : là aussi, ce n’est pas facile. Un mot doit suffire à décrire un univers. Au delà, vous commencez à compliquer la lecture. Si ce n’est pas possible, surtout évitez d’écrire vos libellés sur 2 lignes.

Sur ce site, les univers sont inscrits en majuscules et en gras, ce qui les rend plus saillants que les inscriptions en minuscules. Pour la grande majorité, les intitulés sont très courts et les différentes catégories sont bien espacées. Ceci donne un visuel clair et donc agréable pour la navigation.

Sur ce site, les univers sont inscrits en majuscules et en gras, ce qui les rend plus saillants que les inscriptions en minuscules. Pour la grande majorité, les intitulés sont très courts et les différentes catégories sont bien espacées. Ceci donne un visuel clair et donc agréable pour la navigation.

Sur tablette, le choix de police ont été conservés. Aussi, même sur un écran plus réduit, le visuel est clair et aéré.

Sur tablette, le choix de police ont été conservés. Aussi, même sur un écran plus réduit, le visuel est clair et aéré.

 

Choisissez des noms pertinents pour vos catégories

Méfiez-vous des noms trop spécialisés ou trop génériques. Choisissez les termes qui représentent le mieux vos univers et que vos internautes utilisent. Evitez par exemple de reprendre votre nomenclature fournisseur.

Evitez d’utiliser des termes qui se chevauchent ou se recoupent. Si vous le faites, vous risquez de perdre vos utilisateurs qui vont se demander ou chercher.

N’utilisez l’ordre alphabétique que comme un cas particulier. L’ordre alphabétique ne représente pas le moyen de recherche le plus efficace pour une catégorie. Il est possible de l’offrir aux internautes, mais à ce moment là, comme un index et non pas comme un outil de navigation principal.

Le site LDLC propose des catégories claires organisées non pas par ordre alphabétique mais par pertinence ou popularité.

Le site LDLC propose des catégories claires organisées non pas par ordre alphabétique mais par activité, usage ou popularité. L’ordre des sous-catégories est dicté par la popularité des recherches.

Soignez l’accessibilité

Dernier facteur important, soignez l’accessibilité.

Vos libellés doivent constraster suffisamment avec le fond de vos menus.

Les polices de caractères doivent être suffisamment grandes (12 minimum) et comme je le disais, il y a encore moyen de les agrandir en utilisant des lettres capitales, du moins pour les catégories de haut niveau (les univers).

Pour les onglets, rendez les cliquables dans le cas de pages pour PC, mais non cliquables pour les tablettes ou mobiles (ce qui tombe sous le sens, car vous ne pouvez pas faire de rollover).

Rue du commerce présente ses catégories et sous-catégories en bleu sur fond gris. Ce contraste est assez important pour être accessible.

Rue du commerce présente ses catégories et sous-catégories en bleu sur fond gris. Ce contraste rend le site plutôt accessible sur le web …

Créez plusieurs clés d’entrée

Nous avions déjà évoqué la question de l’affichage en ordre alphabétique. Si vous disposez de suffisamment d’espace dans vos layers, vous pouvez tenter de créer plusieurs clés d’entrée. Ainsi, outre une navigation classique par rayon, vous pouvez créer des entrées particulières : les promos, le coin des bonnes affaires, la sélection pour lui ou pour elle, des entrées par gamme de couleurs ou par collection. Cela peut non seulement aider à trouver des produits, mais également sucsciter l’intérêt, éveiller la curiosité ou l’excitation. N’hésitez donc pas à multiplier ce genre d’entrées.

Le site propose une entrée par genre, par âge (pour les enfants) ou encore par style par exemple.

Le site propose une entrée par genre, par âge (pour les enfants) ou encore par style par exemple.

 

D’autres suggestions ?

Je partage cet article sur Tweet about this on TwitterShare on FacebookShare on LinkedInDigg thisPin on PinterestShare on Tumblr

6 commentaires pour l'instant.

  1. […] Les Astuces d’Ergoman : Faites des Menus de Navigation Simples ! […]

  2. Des conseils que l’on pourrait croire n’être que de bon sens, et pourtant trop de sites ont encore une navigation qui va à l’encontre du but recherché : orienter simplement et rapidement le visiteur vers les produits que l’on veut lui vendre.

  3. Daniel dit :

    C’est tout à fait juste. Il n’y rien de plus énervant que de perdre du temps à chercher les bonnes rubriques sur un site. Les conséquences, la perte de l’internaute.

  4. […] Les Astuces d’Ergoman : Faites des Menus de Navigation Simples ! […]

  5. Julien dit :

    En bonne pratique SEO c’est bien de proposer le menu déroulant de toutes les TOP catégories sur la page d’accueil et dans les sous-catégories uniquement la TOP catégorie parente… Jamais testé mais je pense que c’est une bonne idée :)

  6. […]  Il n’y a rien de plus décourageant pour un visiteur que de faire face à un site complexe à utiliser. Pour se repérer parmi vos offres, l’utilisateur a deux moyens principaux : la barre de recherche et le menu de navigation. Ce dernier a pour avantage d’aider l’utilisateur à se repérer dans le site. Il constitue une carte de vos offres. Il doit donc être clairement identifiable par rapport au reste de la page et placé à côté ou sous votre logo (plus rarement sous forme d’un menu latéral). Il est même possible d’envisager un fond de couleur contrastant avec le reste de la page pour le mettre en avant. Attention cependant au contraste entre le fond et le texte. Afin de ne pas être illisibles et décourageants, les articles doivent être catégorisés de manière pertinente, en suivant la logique de vos utilisateurs et en reprenant leurs terminologie. Pour plus de détails, se référer à l’article « Les Astuces d’Ergoman : Faites des menus de navigation simples ! » […]

Rédiger un commentaire


Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.



Sites amis à visiter : Wexperience - Digitaleez

Site hébergé par NBS System, spécialiste de l'hébergement ecommerce

Copyright © 2006 - 2016 Capitaine commerce - Le Blog du Commerce Digital - Ce blog utilise WordPress - Mentions légales

Webmaster : Alexis Sauvage aka Mecano Commerce