Les 5 icônes universellement reconnues (et pourquoi tout le reste a besoin d'un libellé)

Demandez à une salle de designers de nommer les icônes qu’ils utiliseraient sans libellés textuels, et vous en obtiendrez vingt listes différentes. Demandez aux utilisateurs ce que ces mêmes icônes signifient, et vous en obtiendrez deux cents interprétations différentes. L’écart entre ce que les designers supposent être universel et ce que les utilisateurs comprennent réellement est l’une des erreurs les plus coûteuses en navigation ecommerce.

La vérité, soutenue par des années de recherche du Nielsen Norman Group, d’Apple, de Google et de grandes entreprises de tests A/B, est bien plus étroite que la plupart des gens le pensent. Seule une petite poignée d’icônes peut être utilisée seule sans créer de confusion. Tout le reste a besoin d’un libellé.

Les cinq universelles

Les icônes qui fonctionnent réellement sans texte sont celles qui ont été standardisées entre plateformes depuis des décennies et qui ont des implémentations quasi identiques dans pratiquement chaque application majeure que les utilisateurs rencontrent. La liste est courte.

1. Accueil (icône de maison)

L’icône de maison a signifié « aller à la page d’accueil » depuis tellement longtemps que sa signification est ancrée dans les attentes des utilisateurs. Chaque navigateur, chaque système d’exploitation mobile et pratiquement chaque application utilise la même métaphore visuelle. Les taux de reconnaissance de l’icône d’accueil dépassent 95 % dans la plupart des tests utilisateurs.

Cela dit, l’icône d’accueil est quelque peu redondante en ecommerce. La plupart des thèmes Shopify utilisent déjà le logo de la boutique comme lien d’accueil, ce qui remplit la même fonction et renforce l’identité de marque. Si vous avez à la fois un logo et une icône d’accueil, vous consacrez deux emplacements de navigation réelle à la même action.

2. Recherche (loupe)

La loupe est l’une des icônes les plus testées sur le web. Son taux de reconnaissance dépasse constamment 90 %, et les utilisateurs la cliquent sans hésitation. Cette icône a l’avantage d’être visuellement descriptive—une loupe ressemble à un outil pour trouver des choses—et elle a été utilisée dans les systèmes d’exploitation de bureau depuis les années 1980.

En ecommerce, la recherche est critique. L’icône de loupe peut être utilisée seule en toute sécurité dans un en-tête mobile ou une barre d’onglets, bien qu’ajouter le mot « Recherche » sous elle produit toujours une petite augmentation mesurable de l’engagement. Même les icônes universelles reçoivent plus de clics lorsqu’elles sont étiquetées.

3. Panier ou sac à provisions

Des décennies d’achat en ligne ont rendu l’icône de panier incontournable. Qu’il s’agisse d’un chariot de supermarché ou d’un sac de magasin de détail, les utilisateurs savent qu’elle signifie « afficher les articles que je veux acheter ». L’icône inclut généralement un badge affichant le nombre d’articles, ce qui ajoute une clarté fonctionnelle.

Les tests du Baymard Institute montrent que la reconnaissance de l’icône de panier dans les contextes ecommerce dépasse 95 %. Contrairement à certaines autres icônes, l’icône de panier n’est pas surchargée de significations alternatives—elle signifie une seule chose, et cette signification est stable entre les plateformes.

4. Menu (icône hamburger)

L’icône à trois lignes du hamburger est devenue le symbole par défaut pour « ouvrir le menu » sur les appareils mobiles. Sa reconnaissance a considérablement augmenté au cours de la dernière décennie à mesure que la conception mobile-first est devenue standard. Les premières critiques de l’icône hamburger—en particulier un test célèbre de 2014 montrant que le mot « MENU » surpassait l’icône—ont largement été résolues à mesure que les utilisateurs se sont adaptés au motif.

Cela dit, combiner l’icône hamburger avec le mot « Menu » surpasse toujours l’icône seule. Les tests du Nielsen Norman Group sur des centaines de milliers de sessions ont trouvé une augmentation de 20 % de l’engagement du menu lorsque l’icône était associée à du texte. L’icône est comprise, mais le libellé supprime le dernier soupçon d’hésitation.

5. Fermeture (icône X)

L’icône X pour fermer les fenêtres, dialogues et superpositions est universellement comprise. C’est un élément standard des interfaces graphiques depuis les premiers systèmes d’exploitation de bureau. La reconnaissance est quasi 100 %, et les utilisateurs n’hésitent pas en la voyant.

L’icône X est l’un des rares cas où un libellé nuirait réellement à l’utilisabilité. Ajouter le mot « Fermer » à côté d’un X crée une redondance sans ajouter de clarté, et cela prend de la place qui est souvent très limitée dans un en-tête modal.

Pourquoi tout le reste échoue sans libellé

Une fois que vous sortez de ces cinq icônes, les taux de reconnaissance chutent considérablement. La raison en est l’inconsistance entre plateformes. Le même symbole visuel signifie des choses différentes dans différents contextes, et les utilisateurs n’ont aucun moyen de savoir quel sens s’applique à votre boutique à moins que vous le leur disiez.

L’icône cœur est un parfait exemple. Sur Instagram, elle signifie « j’aime ». Sur Pinterest, elle signifie « enregistrer ». Sur de nombreux sites ecommerce, elle signifie « ajouter à la liste de souhaits ». Sur les applications de santé, elle représente les données de santé ou les favoris. Lorsqu’un utilisateur rencontre une icône cœur dans votre boutique pour la première fois, il devine. La recherche du Nielsen Norman Group a découvert que les icônes cœur non étiquetées ont été mal interprétées par plus de 40 % des utilisateurs dans les contextes ecommerce.

L’icône étoile a le même problème. Elle peut signifier les évaluations, les favoris, les fonctionnalités premium ou les articles en vedette, selon l’application. Sans libellé, les utilisateurs doivent le décoder à partir du contexte, ce qui introduit de la friction.

L’icône personne ou utilisateur pourrait sembler évidente—elle représente « compte » ou « profil », non ? Sauf que sur certains sites elle signifie « se connecter », sur d’autres elle signifie « service client », et sur d’autres encore elle ouvre une liste déroulante avec plusieurs actions liées au compte. Les études de reconnaissance montrent que seulement environ 60 % des utilisateurs identifient correctement l’icône de personne comme « compte » à la première rencontre.

Les icônes grille, étiquette, filtre et signet souffrent toutes d’une ambiguïté grave. Une grille pourrait signifier « afficher sous forme de grille », « catégories », « collections » ou « tous les produits ». Une étiquette pourrait signifier « articles en solde », « libellés » ou « organiser ». Une icône de filtre est quelque peu meilleure, mais toujours seulement reconnue par environ 70 % des utilisateurs sans libellé.

Le motif est clair : les icônes qui ont une signification stable entre toutes les plateformes majeures peuvent fonctionner seules. Les icônes qui signifient des choses différentes sur différentes applications ne peuvent pas.

Les données de reconnaissance

Le Nielsen Norman Group a mené plusieurs séries de tests d’utilisabilité des icônes au cours de la dernière décennie. Leurs conclusions sont constantes. Dans une étude largement citée, ils ont testé 75 icônes différentes utilisées sur des sites ecommerce et de contenu. Seules six icônes avaient des taux de reconnaissance supérieurs à 80 %. Le reste se situait dans une gamme où 40 % à 70 % des utilisateurs soit mal identifiaient l’icône, soit la sautaient entièrement parce qu’ils n’en étaient pas sûrs.

La recherche interne d’Apple, qui informe ses Directives d’interface humaine, les a menés à recommander explicitement des libellés textuels sur tous les éléments de la barre d’onglets. Leur directive déclare : « Si vous supprimez les libellés de votre barre d’onglets, assurez-vous que les icônes sont claires et faciles à comprendre. » Mais elle va plus loin : « Il est généralement préférable d’inclure des libellés car ils aident les utilisateurs à comprendre l’objectif de chaque onglet en un coup d’œil. »

Les directives Material Design de Google sont encore plus directes. La directive pour la navigation inférieure spécifie : « Des libellés textuels doivent être utilisés pour toutes les destinations. Les destinations sans libellés textuels ne communiquent pas assez clairement par elles-mêmes. » Ils ont testé les barres de navigation inférieure sans icônes et ont constaté qu’ajouter des libellés textuels améliorait les taux de réussite de la navigation de 18 %.

Ce n’est pas théorique. Quand les grandes plateformes avec des milliards d’utilisateurs et des ressources quasi infinies pour les tests vous disent que les libellés textuels sont obligatoires, c’est parce que leurs données ont montré que les icônes non étiquetées nuisent à l’utilisabilité.

Quand les icônes universelles bénéficient toujours des libellés

Même les cinq icônes universelles fonctionnent mieux avec des libellés dans de nombreux contextes. La différence est plus petite qu’avec les icônes ambiguës, mais elle est mesurable.

Les tests de Blend Commerce sur les boutiques Shopify ont montré qu’une barre d’onglets mobile avec des icônes et des libellés textuels produisait des taux de conversion 10 % plus élevés que la même barre d’onglets avec des icônes seules—même si les icônes utilisées provenaient de l’ensemble universel (accueil, recherche, collections représentées par une grille, panier, compte).

Pourquoi ajouter un libellé à une icône de loupe augmenterait-il l’engagement ? Deux raisons. Premièrement, le libellé fournit une confirmation. Un utilisateur voit l’icône, la reconnaît, et le libellé confirme qu’il a raison avant de cliquer. Cet instant de confiance supprime la micro-friction. Deuxièmement, le libellé crée une cible de clic plus grande et plus indulgente, ce qui améliore l’utilisabilité sur les petits écrans.

Le point à retenir pratique : les icônes universelles peuvent être utilisées seules quand l’espace est réellement limité, mais ajouter de courts libellés est la meilleure pratique par défaut.

Où cela laisse votre navigation

Si vous construisez ou auditez la navigation d’une boutique Shopify, voici le cadre décisionnel :

Icônes sûres à utiliser seules :

• Recherche (loupe)
• Panier ou sac
• Fermeture (X)
• Accueil (si pas redondant avec le logo)
• Menu (hamburger)

Icônes qui ont besoin de libellés :

• Tout le reste. Collections, compte, liste de souhaits, favoris, filtre, tri, partage, paramètres, notifications, chat et toute icône spécifique à une catégorie que vous envisagez.

Meilleure pratique : Même les icônes universelles doivent avoir des libellés dans la navigation persistante comme une barre d’onglets mobile. Le coût en espace est minimal—un ou deux mots sous chaque icône—et le gain d’utilisabilité est réel.

Si votre navigation utilise actuellement des boutons sans icônes pour quelque chose d’autre que la recherche, le panier ou la fermeture, faites un test simple. Ajoutez des libellés textuels et mesurez l’engagement. Des outils comme Navi+ facilitent l’activation et la désactivation des libellés, afin que vous puissiez tester les deux versions sans reconstruire votre thème. Les données favoriseront presque toujours la version étiquetée.

Cet article fait partie du guide plus large sur Icônes vs texte dans la navigation : quand utiliser lequel (et quand utiliser les deux).