Vous avez décidé d’utiliser des icônes avec des libellés textuels dans votre navigation. Bonne décision—les données la soutiennent. Mais la question suivante est moins évidente et tout aussi importante : comment disposez-vous l’icône et le libellé l’un par rapport à l’autre ? Empilés verticalement ? Côte à côte ? Libellé uniquement au survol ? Chaque motif produit des résultats mesurément différents selon le contexte, et choisir la mauvaise mise en page peut annuler les avantages d’ajouter des libellés en premier lieu.
La mise en page d’une paire icône-libellé affecte trois choses simultanément : la scannabilité (la rapidité avec laquelle les utilisateurs trouvent ce qu’ils cherchent), la précision tactile (la fréquence à laquelle ils touchent la bonne cible) et la densité visuelle (la quantité de navigation que vous pouvez adapter dans un espace donné). Trouver le bon équilibre pour la navigation spécifique de votre magasin nécessite de comprendre ce que chaque motif fait bien et où il s’effondre.
- L'empilement vertical (icône au-dessus du libellé) est la norme pour les barres d'onglets mobiles—utilisé par Apple, Google et toutes les grandes applications.
- L'appairage horizontal (icône à gauche du libellé) fonctionne mieux pour les menus coulissants et la navigation desktop où l'espace vertical est limité.
- Le libellé au survol échoue complètement sur mobile et réduit l'engagement desktop de 22 % par rapport aux libellés toujours visibles.
- L'empilement vertical crée une cible tactile effective 30–40 % plus grande que la navigation par icônes seules.
Motif 1 : empilement vertical (icône au-dessus, libellé en dessous)
L’empilement vertical est le motif icône-libellé le plus courant dans les interfaces mobiles. L’icône se trouve en haut, le libellé texte se trouve directement en dessous, et les deux forment une seule unité visuelle. C’est le motif utilisé dans chaque barre d’onglets iOS, chaque barre de navigation inférieure Android et pratiquement toutes les grandes applications mobiles.
Les directives d’interface humaine d’Apple spécifient explicitement cette mise en page pour les barres d’onglets : icônes à 25x25 points avec un libellé texte directement en dessous dans la police système. Les directives Material Design de Google reflètent cela, en spécifiant des icônes à 24x24 dp avec un libellé de 12 sp en dessous. Les deux plateformes ont convergé vers la même mise en page indépendamment parce que l’empilement vertical résout le problème fondamental du mobile : l’espace horizontal limité.
Pourquoi cela fonctionne sur mobile :
Un écran de téléphone en mode portrait fait généralement 375–430 points de large. Une barre d’onglets mobile doit adapter 4–5 éléments de navigation sur cette largeur. L’empilement de l’icône au-dessus du libellé vous permet d’adapter plus d’éléments parce que chaque élément occupe environ 70–80 points de largeur plutôt que les 120–150 points nécessaires pour un arrangement horizontal.
L’empilement vertical crée également une cible tactile naturelle qui est plus grande que l’icône ou le libellé seuls. Lorsque les utilisateurs visent la zone générale d’une paire icône-libellé, ils ont une cible qui mesure environ 48–56 points de large et 44–52 points de haut—confortablement au-dessus du minimum 44x44 d’Apple et du minimum 48x48 de Google. C’est environ 30–40 % plus tolérant qu’un bouton icône seul à 24–28 points.
Les tests A/B sur les sites de commerce électronique mobiles soutiennent cela. Le test de Blend Commerce sur les magasins Shopify a utilisé la mise en page d’empilement vertical (correspondant à la convention iOS) et a mesuré une augmentation de conversion de 10,37 % comparée à la navigation par icônes seules. L’empilement vertical n’est pas seulement le motif le plus courant—c’est celui qui est le mieux testé.
Quand l’utiliser :
- Barres d’onglets mobiles ou barres de navigation inférieure (3–5 éléments)
- Navigation de style application où vous voulez correspondre aux conventions iOS et Android
- Toute navigation mobile persistante qui reste à l’écran sur les changements de page
Quand cela s’effondre :
L’empilement vertical est moins idéal pour les menus coulissants ou les tiroirs de navigation, où les éléments sont listés verticalement. Dans ce contexte, empiler une icône au-dessus de son libellé pour chaque élément de menu gaspille l’espace vertical et crée un rythme visuel inhabituel. Les menus coulissants utilisent le motif horizontal à la place.
Motif 2 : appairage horizontal (icône à gauche, libellé à droite)
L’appairage horizontal place l’icône à gauche du libellé texte sur la même ligne. C’est le motif standard pour les menus coulissants, la navigation latérale, les barres de navigation desktop et les listes de navigation.
Pourquoi cela fonctionne pour les menus et les listes :
Lorsque les éléments de navigation sont listés verticalement—comme dans un menu hamburger, une barre latérale ou une liste déroulante—l’icône sert de point d’ancrage visuel qui aide les utilisateurs à scanner la liste plus rapidement. La recherche du MIT AgeLab sur les motifs de balayage visuel a découvert que les icônes alignées à gauche créent des « repères » de balayage naturels qui réduisent le temps nécessaire pour localiser un élément spécifique de 18–25 % par rapport aux listes texte seul.
L’appairage horizontal s’ajoute également aux motifs de lecture naturels. Dans les langues de gauche à droite, les utilisateurs scannent d’abord l’icône (reconnaissance instantanée), puis le libellé (confirmation). Le mouvement des yeux est fluide et linéaire. Dans un empilement vertical, l’œil doit se déplacer de haut en bas de l’icône au libellé, ce qui est plus lent lors du balayage d’une liste de nombreux éléments.
Taille et espacement qui fonctionnent :
Material Design fournit des directives spécifiques pour les paires icône-libellé horizontales dans les tiroirs de navigation : icône à 24x24 dp, 16 dp d’espace entre l’icône et le libellé, libellé en police médium 14 sp. La hauteur totale de chaque ligne est 56 dp, ce qui fournit une cible tactile confortable.
Les directives d’Apple pour la navigation de style liste sont similaires : icônes à 22–29 points (selon la complexité de l’icône), avec le libellé à droite dans la police système. La hauteur minimale des lignes est 44 points.
Quand l’utiliser :
- Menus coulissants ou hamburger
- Navigation latérale sur desktop
- Menus déroulants
- Écrans de paramètres
- Toute navigation listée verticalement où les éléments sont empilés de haut en bas
Quand cela s’effondre :
L’appairage horizontal ne fonctionne pas bien dans les espaces horizontaux contraints comme les barres d’onglets mobiles. Cinq éléments, chacun avec une icône et un libellé côte à côte, ne rentrent simplement pas dans 375 points de largeur sans tronquer les libellés ou rendre le texte illisible.
Motif 3 : libellé au survol (icône seule, texte apparaît au survol)
Le libellé au survol est un motif de plus en plus courant sur desktop, en particulier dans la navigation latérale comme celle utilisée dans Gmail, Slack et diverses applications de tableau de bord. La navigation affiche l’icône seule dans une colonne étroite, et survoler une icône révèle une bulle d’aide avec le libellé texte.
Pourquoi c’est tentant :
L’attrait est évident. Vous obtenez une navigation compacte qui occupe peu d’espace écran, plus la capacité pour les utilisateurs de découvrir les libellés quand ils en ont besoin. Cela ressemble à ce qu’il y a de mieux des deux mondes.
Pourquoi les données racontent une histoire différente :
Le libellé au survol a un problème fondamental : il oblige les utilisateurs à interagir avant de pouvoir identifier les éléments de navigation. C’est un pas en arrière par rapport aux libellés toujours visibles, où l’identification se produit en un coup d’œil.
Les tests du Nielsen Norman Group sur les bulles d’aide basées sur le survol ont trouvé que seulement 15 % des utilisateurs survolent intentionnellement les éléments de navigation pour révéler les libellés. Le reste soit connaît déjà où se trouvent les choses (utilisateurs avancés), soit abandonne et cherche ailleurs. Cela crée une courbe d’apprentissage abrupte pour les nouveaux visiteurs, ce qui est exactement le contraire de ce que vous voulez pour un magasin de commerce électronique où la plupart des visiteurs sont des first-timers.
La recherche du Baymard Institute sur les motifs de navigation du commerce électronique a découvert que la navigation dépendante des bulles d’aide produisait 22 % de complétions de navigation réussies en moins par rapport aux libellés toujours visibles. Les utilisateurs étaient plus lents, plus susceptibles de faire des erreurs de navigation et plus susceptibles d’utiliser le bouton de retour du navigateur (un signal indiquant qu’ils se sont trompés de place).
Et puis il y a le problème évident : le survol n’existe pas sur mobile. Les écrans tactiles n’ont pas d’état de survol. Toucher une navigation par icône seule déclenche soit l’action immédiatement, soit ouvre une bulle d’aide qui nécessite un second appui—ajoutant une étape supplémentaire que les utilisateurs mobiles n’attendent pas et ne toléreront pas.
Quand c’est peut-être acceptable :
- Outils de tableau de bord interne ou d’administration où les utilisateurs sont formés et utilisent l’interface quotidiennement
- Applications de bureau uniquement où l’espace écran est extrêmement contraint
- Barres d’outils secondaires (comme les barres d’outils de formatage) où les icônes sont hautement standardisées
Quand l’éviter :
- Toute navigation de commerce électronique orientée client
- Navigation mobile de quelque sorte que ce soit
- Navigation principale où les visiteurs pour la première fois doivent trouver leur chemin
Motif 4 : libellé en dessous à l’état actif
Une variation qui a gagné du terrain est l’affichage des libellés uniquement sur l’élément de navigation actuellement actif. C’est courant dans les implémentations Material Design où la barre inférieure montre des icônes pour tous les éléments mais affiche seulement le libellé texte sur l’onglet sélectionné.
Le compromis :
Ce motif économise l’espace horizontal tout en fournissant le contexte de l’emplacement actuel. Les directives Material Design de Google l’ont proposé comme option pour la navigation inférieure avec plus de trois éléments.
Cependant, les tests ont montré que cette approche est inférieure à l’affichage des libellés sur tous les éléments. Une étude menée par l’équipe UX de Booking.com (partagée lors d’une conférence NNG en 2019) a découvert que l’affichage permanent des libellés réduisait les erreurs de navigation de 15 % par rapport au motif de libellé actif seul. Les utilisateurs avaient besoin de voir toutes les options, pas seulement celle qu’ils avaient déjà choisie.
Material Design a depuis mis à jour ses directives pour recommander la navigation étiquetée pour toutes les destinations, pas seulement la destination active.
Choisir le bon motif pour votre magasin
La décision dépend de deux facteurs : le contexte de navigation et l’appareil.
| Contexte | Meilleur motif | Pourquoi |
|---|---|---|
| Barre d’onglets mobile (3–5 éléments) | Empilement vertical | Correspond aux conventions de plateforme, grandes cibles tactiles, adapte la largeur |
| Barre d’onglets mobile (5+ éléments) | Empilement vertical avec barre déroulable | Toujours empilement vertical, mais permet le défilement horizontal |
| Menu coulissant | Appairage horizontal | Balayage naturel dans les listes verticales |
| En-tête desktop | Appairage horizontal ou texte seul | Espace horizontal abondant |
| Barre latérale desktop | Appairage horizontal (libellés toujours visibles) | Les utilisateurs ont besoin de scanner les options rapidement |
| Navigation de pied de page | Texte seul | Les icônes n’ajoutent aucune valeur ici |
| Bouton d’action flottant | Icône seule (avec bulle d’aide) | Action unique, l’icône suffit |
Test rapideOuvrez votre magasin sur un téléphone et essayez d'identifier chaque élément de navigation sans lire un libellé. Si vous hésitez sur ne serait-ce qu'un élément, c'est là qu'un libellé devrait aller. Si votre barre d'onglets mobile utilise des appairages horizontaux et les éléments semblent serrés, passez aux empilement verticaux. Navi+ vous permet de basculer entre les motifs de mise en page dans le générateur de menus, de sorte que tester différentes combinaisons prend des secondes plutôt que des heures d'édition de thème.
La valeur par défaut la plus sûre pour la plupart des magasins Shopify est l’empilement vertical pour les barres d’onglets mobiles et l’appairage horizontal pour les menus coulissants. Ces motifs correspondent à ce que les utilisateurs attendent déjà des applications qu’ils utilisent tous les jours, et ils ont les données de test les plus solides derrière eux. Commencez par là et itérez en fonction des analyses de votre propre magasin.
Cet article fait partie du guide plus large sur Icônes vs texte dans la navigation : quand utiliser lequel (et quand utiliser les deux).