La navigation dans les offres B to B dans le domaine des solutions, services et produits technologiques est complexe à concevoir.
Aider par un IA agent et un moteur d’insights, nous avons passé au crible un panel de 50 sites d’entreprises assez large.
Points clés à retenir
- Évaluez bien le niveau de connaissance des produits pour mieux baliser sémantiquement le parcours jusqu’à la prise d’information.
- Evaluez bien l’espace d’affichage disponible pour anticiper certaines décisions ergonomiques.
- Dans l’UX, privilégiez d’abord la facilité d’utilisation puis l’attrait visuel.
- Soyez visuellement clair (taille, contraste et couleurs)
Statistiques
- 50 % des sous menus sont de type « panneau »
- 75 % des sous menus s’ouvrent au clic
- 20 liens maximum par niveaux de sous menu
- Tous les sites utilisent un “burger” en navigation mobile et 80 % sont alignés à droite
Nos principales recommandations
- Préférez une ouverture du sous menu au clic. Plus robuste et plus clair en termes d’accessibilité Utilisabilité .
- Limitez les recours à des sous niveaux de menu au-delà du premier sous menu Utilisabilité .
- Si vous contournez la règle 2, faites en sorte que les interactions soient clairement balisées visuellement et sémantiquement Utilisabilité .
- Préférez le menu burger aligné à droite. Clairement un standard Mobile .
- N’utilisez pas des icônes sans labels Utilisabilité .
- Attention à la lisibilité de l’icône : format, épaisseur du trait, contraste des couleurs doivent être clairs quel que soit le contexte Résolution mobile Design visuel .
- Une micro animation à l’ouverture des menus rend le changement d’état plus perceptible Animation .
- Si vous catégorisez vos produits et qu’il existe une page de description pour chacune, faites en sorte que le lien sur le label soit clairement indiqué visuellement Information .
- Lorsque l’offre est pléthorique, vous avez le choix de ne pas mettre toutes les entrées “produits” dans le sous menu en ne privilégiant que les plus populaires Information .
- Nous recommandons d’avoir un lien “voir tous les produits” dans votre sous menu qui renvoie à une page de référence Information .
- Lorsque les noms de produits ne sont pas explicites, ajoutez une courte description sous le lien vers le produit. Attention de ne pas surcharger le menu en information Information .
- Valoriser du contenu intéressant dans le contexte de navigation du visiteur enrichit son expérience. Attention à la pertinence et à bien distinguer ce contenu de la navigation Information .
- Ajoutez un mode de recherche alternatif quand l’offre est trop grande ou déborde du menu Information .
- Bien faire attention au balisage sémantique dans le cas du full javascript et aux standards de l’accessibilité Développement .
- Mettez en place des tests réguliers de performances avec des outils ad hoc et pratiquez l’A/B testing Performances .
Le benchmark UX
Nous avons choisi des entreprises qui entretiennent un rapport avec la technologie dans leur offre. L’échantillon étudié est constitué de cinquante sites. Cela donne un ensemble assez disparate mais des “best practices” se dégagent pour la construction de navigation de sites web qui, même à l’heure de l’IA, ne semble pas aller de soi.
Nous avons étudié la navigation dans les “produits” d’une cinquantaine de sites. La navigation contenait en moyenne 14 entrées : de 1 produit jusqu’à une centaine.
La nature même de ces offres est complexe. Ce sont des groupes abstraits dont les contours sont délimités par leurs “opérateurs” et leur marché. Les réalités qu’elles recouvrent sont souvent des pratiques et des compétences partagées par les fondateurs, dirigeants et employés de l’entreprise, mais nous y avons mêlé des offres “plateformes” qui reposent également sur l’étendue des ressources techniques (infrastructure cloud ou réseau, par exemple).
Les offres sont adaptées en fonction des attentes du marché (quel est le terme le plus populaire ?), des capacités des dirigeants et employés (qu’est-ce que je suis capable de faire ?) et de leurs aspirations (qu’est-ce que j’aimerais, au fond, faire ?).
De ce triptyque marché/métier/personnalité, on retire un équilibre sémantique et une architecture de contenus souvent unifiée par la marque. Les offres telles qu’elles sont présentées dans les divers outils de communication structurent la perception de la marque.
A ce titre, les opérateurs américains de produits ou d’infrastructures sont souvent impressionnants par l’attraction qu’ils savent exercer en se basant sur leur autorité et leur compétence dans les domaines technologiques. Que ce soient des produits techniques (AWS, Google Cloud) ou des applications plus “fonctionnels” (Dropbox, Zoom) de type Saas.
De quoi parle-t-on quand on parle d’offre technologique ?
On parle d’entreprises dans le secteur des technologies qui sont à la croisée des sociétés de services et de fournisseurs de produits technologiques.
Produits technologiques
Le produit technologique est “empaqueté”, il requiert peu d’interactions clients/opérateurs. Il se reconnaît souvent parce qu’il est en ‘self service’ et que le client a très rapidement une idée des fonctionnalités et de la valeur ajoutée de celles-ci.
Son identité est claire et saute aux yeux de ceux pour lesquels il remplit un besoin.
Services technologiques
Les services technologiques sont souvent opérés par des personnes qui connaissent les outils ou produits et qui servent donc d’intermédiaires avec les clients. Les délimitations entre les services sont souvent le reflet des besoins tels qu’ils sont exprimés par les futurs clients.
La manière dont l’outil technologique étend la portée du service va délimiter l’offre. Par exemple, une fois automatisé, le service change de nature puisqu’il devient purement technique et on peut dire qu’on n’a plus à faire qu’au “livrable” qu’on assimile à un “produit”.
Solutions technologiques
C’est clairement le terme le plus ambigu dans l’équilibre que nous avons évoqué. Les “solutionneurs” sont souvent des opérateurs de services qui s’appuient sur des outils techniques, ce qui revient à peu de choses près aux “services technologiques”, mais la nuance est plus dans l’angle qui est pris: celui du client et dans le fait que l’entreprise possède ses moyens de production.
Citons l’exemple des “plateformes”, qui s’adressent à un besoin généraliste au travers de nombreuses fonctionnalités. On peut voir ici un modèle du type “user story” où les fonctionnalités répondent aux questions “how might we?”.
Par exemple : « En tant qu’utilisateur, je veux enregistrer ma propre webconférence (Zoom), comment est-ce que je peux faire ? »; « Je peux utiliser un enregistreur » ; « Je peux l’héberger sur le cloud pour le partager », etc. C’est ainsi qu’on peut déterminer plus efficacement quelles sont les fonctionnalités indispensables pour votre application.
Comment concevoir la navigation dans l’offre technologique ?
Naviguer dans le site d’une entreprise, c’est comme parcourir un catalogue en ligne. Il y a des attendus dans les entrées et dans la manière de trouver l’information. Cette manière de naviguer peut être différente de la manière d’organiser son offre marketing. L’alignement des deux dépend de la vision de l’entreprise, mais l’alignement le plus important à respecter est celui de l’intention de l’utilisateur avec la navigation dans le site.
La robustesse du design est synonyme de sérieux pour le client, c’est aussi une clé pour le SEO (optimisation pour les moteurs de recherche) quand il facilite la navigation des robots et le balisage sémantique.
Pour identifier les bonnes pratiques, nous avons posé de nombreux points d’analyse.
Les points d’analyse de la navigation d’un site web
Le type de menu
Nous nous sommes concentrés sur une seule entrée de menu pour analyser le sous-menu.
Les valeurs les plus courantes sont :
- les menus déroulants (dropdown),
- les panneaux (panels),
- les menus tiroirs ou coulissants (drawers).
56 % des sites analysés utilisent les sous menus “panneau” qui proposent une plus grande surface d’expression, notamment pour ajouter d’autres contenus riches, et sont adaptables pour mobile.
A noter que seuls deux sites proposent directement un menu “burger” dans la version desktop du site (menu mobile).
Comment est déclenchée l’ouverture du sous-menu ?
Deux options : au survol ou au clic.
75 % des sites ouvrent le sous-menu au clic. On peut trouver l’ouverture au survol plus rapide et donc plus pratique pour exposer rapidement les offres ou les contenus, mais elle génère des inconvénients ergonomiques. L’option “au survol” ne fonctionne pas sur mobile.
L’ouverture au clic est une pratique plus robuste et plus claire en termes d’accessibilité, elle évite les bugs comme “le menu se rétracte parce que j’ai passé ma souris un peu vite” (zone réactive pas assez étendue).
L’ouverture au survol demande à ce que votre intégrateur prévoit une zone réactive en “V” sous le menu principal de manière à ce que lorsque l’utilisateur déplace sa souris vers le sous menu ou un élément latéral du sous menu, celui-ci ne se referme pas.
Les sous menus de niveau 2
Dans certains cas, l’offre est tellement pléthorique que les designers ont ajouté un voire plusieurs niveaux de sous menu (jusqu’à 3).
Moins d’un quart des sites sont dans ce cas. Il s’agit le plus souvent d’entreprises de services technologiques ou de produits matériels. A notre sens cela correspond au découpage compliqué des périmètres de l’offre, à la croisée de plusieurs technologies, ainsi qu’au morcellement des termes employés sur le marché.
Cela pose plusieurs problèmes. Pour accéder à l’offre, le visiteur doit réaliser un ou plusieurs clics supplémentaires. Le lien qui déclenche le sous-menu doit être prévisible, c’est-à-dire, l’utilisateur doit à la fois être sûr qu’il trouvera l’offre qu’il cherche à la lecture du label et doit anticiper l’interaction (ouverture du niveau supplémentaire).
Nous conseillons de limiter le recours à des sous menus en dessous du niveau 2. Dans le cas où vous y êtes contraints, veillez bien à ce que les liens qui les ouvrent soient à la fois clairs, ergonomiquement explicites : on devine qu’il y a un clic et qu’il va ouvrir le sous menu, et le label est clair indique bien ce que le visiteur découvrira sous cette entrée.
Type de sous menu de niveau 2
Parfois, lorsque l’offre ne peut pas tenir dans un sous menu, les concepteurs optent pour l’ajout d’un sous niveau supplémentaire dont l’interaction est différente que celle du niveau principal.
Les quelques entreprises concernées utilisent des navigations “tiroirs”, des onglets ou des colonnes qui contiennent des listes de liens.
Bien que peu utilisé le sous menu “colonne” a pour lui l’avantage d’exposer d’emblée une grande liste de liens par défaut.
Alignement du menu burger
Ici aussi, il y a deux options: droite ou gauche. L’option droite a longtemps été privilégiée parce qu’on considère que les utilisateurs sont le plus souvent droitiers ou tiennent leur téléphone de la main droite et qu’il n’y donc qu’à étendre le pouce pour cliquer sur le menu sans couvrir le contenu de sa main par ce geste. Mais c’est un avantage ténu.
La réalité est beaucoup plus complexe. On sait qu’il existe une grande diversité de cas de figures et que les utilisateurs peuvent par exemple manipuler le téléphone à deux mains.
L’alignement à droite est privilégié dans 82 % des cas. Il est assez standard et permet une navigation simple quand on tient son téléphone de la main droite ou à deux mains.
Type de sous menu dans le burger
Comme pour le menu desktop, le burger peut contenir des sous menus de niveau 2.
A la différence du desktop, la surface d’affichage est plus restreinte et on a souvent besoin d’ouvrir un sous menu puis de revenir en arrière pour trouver la bonne rubrique. La hiérarchie entre les parents et les enfants est plus stricte, ce qui demande un surcroît de précision sémantique dans les choix des termes.
Le type de sous menu “accordéon” plus courant dans les menus mobiles évite cet inconvénient.
Il y a une plus grande variété de situations sur mobile avec parfois plusieurs types de navigations dans une rubrique. Par exemple, un menu tiroir et un menu accordéon.
Utilisation d’icônes
L’utilisation d’icônes dans la navigation sert à ponctuer visuellement et à marquer sémantiquement certaines entrées de la navigation. Les problèmes qu’elles posent sont souvent leur visibilité et leur ambiguïté dû au manque de familiarité de l’utilisateur avec ce qu’elles signifient.
Certaines sont des standards (l’icône IA est de plus en plus répandue par exemple), et d’autres sont uniques, comme une sorte de repère “produit”.
Elles apportent clairement une différence et un repère visuel. Mais plus le domaine est abstrait et lointain pour l’utilisateur, plus il aura du mal à comprendre l’icône.
Dans le cas d’une première découverte des produits, il faut vite insister dans le contenu sur le rapport entre le visuel et le produit. Si dans la communication visuelle de l’offre, de l’iconographie est associée aux produits, il faut rapidement poser la question de leur intégration et de leur lisibilité à toutes les tailles.
Notons que certains comme ServiceNow ont fait le choix d’en utiliser une devant chaque entrée de produits.
32 % des sites analysés utilisent des icônes.
La lisibilité des icônes est primordiale : format, épaisseur du trait, contraste des couleurs.
→ HubSpot
Animations et transitions dans le menu
Un menu ou une interaction qui se déclenche instantanément et sans transition peut être très troublant pour un utilisateur.
Les micros interactions sont rassurantes et pour l’utilisabilité du système, on recommande a minima que l’utilisateur repère facilement le changement d’état d’un élément visuel, notamment grâce à la perception d’une transition entre les deux états.
Un peu plus d’un quart des sites observés n’utilisent pas d’animation à l’ouverture du sous menu. Parmi eux, plus de la moitié compense en ajoutant une transition sur les onglets d’entrée du menu ou en ajoutant une focus sur le menu qui est ouvert (par exemple, en le faisant ressortir sur un fond sombre).
→ Altasian
Les produits sont catégorisés
Dans certains cas, les produits sont regroupés sous un label (cliquable ou non) à l’intérieur même du sous menu. Ce peut être une catégorie de produit ou un produit “parent”.
Il y a plusieurs points auxquels il faut faire attention pour le découpage par catégorie:
- Est-ce que ces catégories sont des labels sans lien (par exemple dans le cas de classement par colonne) ?
- Est-ce que ces catégories sont des entrées vers des produits parents ?
- Est-ce que ces catégories impliquent un sous menu de niveau 2 ?
L’ajout de catégories réduit bien sûr l’espace disponible dans le menu mais c’est un moyen de clarifier et de naviguer dans une offre pléthorique.
Les catégories sont cliquables
Les catégories sont souvent cliquables dans les cas suivants :
- Elles sont également des “produits” parents. Par exemple, “services IA” est le parent de “IA customer experience”.
- Elles renvoient vers une page “hub” qui liste toutes les produits inclus dans la catégorie.
Dans le cas où les catégories ne sont pas cliquables, si le style et le formatage du texte se rapprochent de celui d’un lien, on constate une concentration de “rage clicks” (clics frustrants).
Plus d’un quart des sites étudiés n’utilisent pas de catégories. Bien sûr, les entreprises qui vendent un produit Cloud (Zoom, Dropbox, Mailchimp) n’en ont souvent pas besoin.
Les services peuvent être filtrés par d’autres facettes
Autrement dit, il est possible d’utiliser des filtres dans le sous menu qui ne sont pas des liens de catégories de produits ou de pages produits.
Quand il s’agit d’une navigation classique, les concepteurs font plutôt le choix de faire des entrées supplémentaires dans les menus de niveau 1.
Cette option est très peu utilisée et quand elle l’est, c’est pratiquement toujours pour introduire un filtre par secteurs d’intervention.
Le sous menu contient tous les produits
Selon la largeur de l’offre et la stratégie adoptée, les concepteurs peuvent ou non avoir l’espace pour lister l’ensemble des produits de l’entreprise.
Quand le nombre d’entrées excède la place disponible, il y a plusieurs stratégies de contournement.
- Ajouter un autre niveau de sous menu.
- Afficher uniquement les offres populaires.
L’autre revient à adopter une “folksonomy” (privilégier les offres les plus populaires du moment) ou à mettre en avant ses produits spécifiques. Les autres produits sont trouvables via un autre mode de navigation: accès direct (une url dans une campagne marketing, un lien SEO), moteur de recherche interne ou page ‘hub’.
Liens vers « tous les produits »
Dans le cas des catalogue large, cette alternative à la navigation du sous-menu est toujours la bienvenue dans la mesure où elle renvoie à une page “hub” qui permet de se repérer dans toute l’offre et qui améliore le maillage interne du site.
Cela fournit également une page “parente” à toutes les pages produits et permet de créer un catalogue plus facilement navigable par les robots de moteurs de recherche. Le flux qui les mène de l’url de la page parent (qui se termine par exemple par “/offre-parent”) à ses sous-dossiers (par exemple, /offre-parent/produit-enfant) aide à constituer un graph plus fluide.
Un court descriptif est associé aux entrées des produits ou aux catégorie
En dessous d’un produit ou d’une catégorie, un court descriptif explique au visiteur ce qu’il va trouver en cliquant sur le lien qui le mènera à la page qui décrit le produit.
Ce descriptif est particulièrement bienvenu dans le cas de produit ou de solution technique dont le nom n’est pas explicite.
Du contenu est mis en avant dans le sous menu
Certaines entreprises décident de rendre les menus plus dynamiques en mettant en avant du contenu dans le panneau du sous menu.
L’œil est plus facilement attiré et dans le cas d’une démarche commerciale et cela permet de renforcer une expertise. La fraîcheur du thème abordé et la pertinence du contenu dénotent un dynamisme de la marque. Et si d’un point de vue de la stricte “utilisabilité”, cette option ne paraît pas la plus pertinente, utilisée avec originalité, elle enrichit la mise en page et l’expérience.
Best practice : valoriser du contenu intéressant dans le contexte de consultation (tendance et offre) bien distinguer ce contenu de la navigation
Astuce SEO : le “featured content” est un bon moyen pour améliorer le référencement d’un article hébergé sur votre site internet. Les contenus qui sont difficilement accessibles par les crawlers se voient sanctionnés par un “link score” faible. En le faisant remonter dans la navigation, vous montrez la valeur de ce contenu.
Une recherche alternative est proposée
En construisant cette grille nous avions à l’esprit que certains sous menus, contenant de nombreux liens, offraient une fonctionnalité de type “live search” avec autocompletion dès le sous menu. C’est donc ces sites que nous voulions signaler pour analyser l’apport de cette option, mais nous avons finalement opté pour une approche plus large en partant de l’idée générale qu’une recherche sur un site est un autre mode de navigation.
Un moteur de recherche interne bien configuré aide à trouver ce qu’on veut à tous les coups. Il est parfois privilégié par les utilisateurs (par exemple, dans le ecommerce) dès que le catalogue devient trop profond.
La configuration requiert que le concepteur ait pensé à des situations comme les recherches de synonymes ou d’acronymes. Cette brève étude ne prend pas en compte le fonctionnement complet de ces moteurs, mais à titre d’exemple, voici quelques bonne pratiques qui sont importantes pour une bonne configuration:
- installer un moteur de recherche dont l’algorithme de recherche et le résultat sont personnalisables (Algolia, WPsearch, Solr, etc.),
- vérifier que sur les noms de chaque offre, le bon contenu ressorte,
- associer les synonymes avec les noms de chaque offre,
- faire de même avec les équivalents dans d’autres langues,
- analyser les statistiques de recherche régulièrement.
78 % des sites étudiés proposent une recherche alternative.
Intégration/Technologie
Les sites étudiés proposent deux technologies différentes :
- les sites avec des rendus html/css/javascript classiques,
- les sites en full javascript.
Les sites en full javascript reposent souvent sur un socle technologique “headless”. Ils sont techniquement un peu plus compliqués à mettre en œuvre.
Ils sont moins contraignants d’un point de vue de l’ergonomie mais, attention, s’affranchir des règles du web classiques dans ce domaine, c’est risqué d’aller à rebours des standards auxquels les utilisateurs sont habitués.
Nous reviendrons sur le sujet, mais notre conseil est d’adopter cette technologie quand les process de publication sont bien en place avec une collaboration étroite entre les éditeurs, les designers et les développeurs. Elle est également intéressante quand l’entreprise dispose de contenus publiables sur plusieurs sites ou applications.
Les standards de l’accessibilité et du référencement sont généralement bien respectés par les CMS traditionnels. Dans le cas des sites en full javascript, il faut faire attention au balisage sémantique (mark-up et .
CMS
Un “Content Manager System” est un système de gestion de contenus numériques. Dans les faits, c’est souvent un système qui génère les pages d’un site internet. Comme nous l’avons vu précédemment, les technologies “headless” sont plus proches de la définition du CMS, car elles “découplent” la gestion du contenu de sa mise en page et ne présagent pas de la solution d’interface web qui sera utilisée.
Les solutions choisies par les entreprises ne sont pas toujours détectables, mais on peut remarquer que la plupart utilisent des CMS classiques avec une forte présence d’Adobe Experience qui est le CMS le plus utilisé dans notre échantillon.
WordPress est moins représenté que Drupal, ce qui ne reflète pas les statistiques du web en général, mais correspond probablement à une vision “professionnelle” de l’utilisation des CMS.
Page Speed
Les critères de performances que nous avons utilisés sont ceux de Google Page Speed. Ils ont l’avantage d’être assez larges et d’être construits sur la perception “utilisateur”.
Comparativement à des sites plus petits, les performances sont dans l’ensemble assez médiocres : moins de 50/100 en moyenne pour la version mobile.
Quelques pistes pour expliquer cela :
- c’est une préoccupation faible des concepteurs et des éditeurs,
- les sites utilisent de nombreuses librairies externes (notamment pour le marketing),
- les sites sont rarement pensés “mobile first” et la version “responsive” est construite à partir de la version “desktop” qui contient souvent plus de contenus que nécessaire pour le mobile,
- les concepteurs visent des usages essentiellement “desktop”.
Cela a quelques impacts :
- moins bonne performance SEO (référencement dans les moteurs de recherche),
- moins bonne expérience utilisateur et donc moins bonne perception de la marque,
- baisse des visites (par exemple pour les utilisateurs avec une connexion WIFI ou mobile médiocre).