Si le fait d'avoir un site compatible mobile est devenu incontournable pour beaucoup d'entreprises, l'affichage des données peut virer au casse-tête pour les graphistes en charge du visuel.
En effet, la place disponible sur un téléphone étant moindre, il faut souvent trouver des solutions de remplacement aux traditionnels menus textuels, et c'est là qu'entrent en scène les icônes, ces graphismes supposés être compris de tous...
Quand ça ne veut pas rentrer...
L'affichage sur un smartphone est moins simple qu'il n'y paraît, que ce soit pour une application ou un site internet. La flopée d'informations indispensables à la navigation et à l'utilisation d'une interface tel qu'un site e-commerce habituel n'a aucune chance de rentrer de manière lisible sur un téléphone.
Exemple du site rueducommerce.fr
L'interface web classique sur Desktop
Sur cette interface web, on trouve des liens tels que "Guide et tests produit, Toutes nos marques, Besoin d'aide", puis le menu d'accès principal aux rubriques.
En accédant à la version mobile (une vraie version dédiée), on constatera que certains éléments ont été relégués en bas de page, mais surtout que les intitulés des accès aux rubriques ne sont plus les mêmes ! Ils ont aussi été déplacés pour les rendre cliquables avec de gros doigts.
La version mobile
Visiblement, un choix drastique a été fait pour mettre en avant certaines gammes sur la version mobile. Le catalogue (à priori) complet se trouve en cliquant sur le lien "Catalogue". La plupart des icônes conservent une explication textuelle, le meilleur moyen d'être compris.
Une transition réussie vers le mobile, l'interface reste claire et instinctive (enfin c'est mon avis).
Mais ce n'est pas toujours aussi simple le mobile
Exemple du site babystock.fr
La version desktop
Nous accédons là à une boutique dite "responsive". Elle ne possède pas de version mobile dédiée, mais un affichage qui s'adapte au format de l'appareil utilisé (plus d'explications). Le menu d'accès aux rubriques est "standard" dans la version web.
Oui, mais voilà, avec le responsive, ce n'est pas forcément aussi simple à réorganiser.
En accédant à la version affichée sur smartphone, on se rend compte que le menu standard a disparu, c'est une barre orange "Voir tous les rayons" qui a pris sa place, accompagné de la traditionnelle icône "hamburger". Le clic sur celui-ci déroule l'accès aux rubriques.
La version mobile et son menu déroulant.
Les tests effectués
Un hamburger peu compréhensible
Ne pas en abuser...
Initialement, le menu d'accès aux rubriques ne comportait que l'icône "hamburger". Les tests effectués ont montré que près de 50% des utilisateurs ne comprenaient pas sa signification encore en 2015 ! En fait on s'en doutait, car c'est un fait assez connu même s'il est en place sur des milliers d'applications.
Nous lui avons donc adjoint le texte "Menu". Si nous avons noté une certaine amélioration, ce langage restait visiblement abscons pour de nombreux utilisateurs qui utilisaient plutôt le moteur de recherche...
La décision fut donc prise d'intituler ce menu d'accès aux catégories "Voir tous les rayons". Bingo ! Cette nouvelle appellation semble convenir à tout le monde.
L'affinage, c'est pour le fromage
Autre test effectué, celui du sous-menu (qui permet d'accéder aux sous rubriques).
Nous l'avions initialement nommé "Affiner votre recherche". Gros flop !
Nous nous sommes rendu compte que cette explication était limpide pour nous, mais pas pour les clients de la boutique. Nous avons donc changé notre fusil d'épaule puis effectué des tests pour finir par "Voir détails du rayon". Visiblement, cette formulation convient bien mieux aux jeunes mamans qui commandent sur le site.
Une formulation mieux comprise
Il est donc très important de ne pas se focaliser sur sa compréhension personnelle, mais de tester celle des utilisateurs.
Comprendre ou pas
Tous les e-commerçants le savent bien, un client qui ne comprend pas n’achète pas ! Il est donc particulièrement utile de faire tester les interfaces. Sans forcément faire des tests A/B ultras compliqués. À titre d'exemple, chez AxeNet, nous faisons souvent des tests avec des voisins de bureau ou des amis, et c'est riche d'enseignements.
Pour continuer sur le site babystock.fr, nous avons testé les icônes "Mon compte" et "Panier". Pas de souci, ces représentations graphiques sont suffisamment instinctives pour ne pas générer trop d'interrogations. Idem pour la loupe qui accompagne le champ de recherche.
Des icônes plutôt bien comprises.
Les icônes maudites
Quand je vous dis qu'il faut tester, c'est parce que chacun d'entre nous a ses habitudes, et si certaines choses nous paraissent évidentes, elles ne le sont pas pour tout le monde. Le site Miratech a publié les résultats d'une enquête assez dérangeants.
Amis graphistes, les gens pour qui vous travaillez (les utilisateurs des icônes que vous créez) n'en comprennent pas la moitié !
On atteint par exemple des résultats catastrophiques pour :
Késako ?
Je vous invite d'ailleurs à faire leur petit test... (je n'ai eu que 5 sur 9... c'est dire...).
Pour conclure
Loin de moi l'idée d'abandonner les icônes, de toute façon on n'a pas le choix, parce qu'il "faut bien que ça rentre". En revanche, avant de vous lancer dans des trucs artistiques, je vous conseille de bien tester.
Le plus sur est encore de capitaliser sur ce qui se fait déjà pour bénéficier des réflexes conditionnés et habitudes des utilisateurs, mais même là, ce n'est pas toujours convaincant si l'on teste la signification de l'icône "hamburger".
Quand c'est possible, il reste toujours préférable d’accompagner une icône d'un petit texte qui facilitera sa compréhension. Malheureusement parfois, "ça ne rentre pas"... Alors amis graphistes, n'oubliez pas de vérifier auprès des utilisateurs si vos belles icônes sont bien comprises.
Pour aller plus loin :
- Donner le choix des langues sur un site, drapeaux ou textes ?
- Le vide : indispensable au webdesign
- Le design d'un site a-t-il un impact sur le SEO ?
Chiffres intéressants sur la très faible compréhension du menu burger, je comprends mieux pourquoi certains UX designers prône un menu plus diététique...
Super article une nouvelle fois, bravo Sylvain et Axe-Net !
Cela me rappelle mes cours d'ergonomie web durant lesquels nous faisons moult tests de psychologie cognitive pour comprendre les erreurs voire les aberrations que l'on pouvait trouver sur la Toile. Avec l'essor du mobile et du design à outrance, ces phénomènes se sont amplifiés au point que la clarté n'y a pas toujours gagné, contrairement aux idées préconçues.
C'est le genre d'article qu'il fait bon de lire chaque année pour se souvenir que l'erreur est très facile à faire quand on n'y prête plus attention... 😀
Un jour, quand je bossais en agence web, un client nous a demandé pour son site, une icône d'accueil qui n'ait pas la forme d'une maison.
Probable volonté de se démarquer ou d'être original, toujours est-il qu'on a cherché pendant très longtemps... et je crois me souvenir qu'on n'a jamais trouvé quelque-chose qui change et soit compréhensif pour les visiteurs !
@ Anne
Merci de ton retour.
Déjà que la compréhension n'est pas toujours simple en capitalisant sur les habitudes (d'après l'enquête, la maison n'est reconnu que dans 68% des cas hors contexte, sans doute mieux dans le contexte). Vouloir faire autre chose s'apparente à du suicide numérique 🙂
Sujet très intéressant et en effet c'est un vrai casse tête d'optimiser la compréhension du site / l'ergonomie / l'expérience utilisateur.
En ce moment je rame pour choisir "le logo qui va bien" pour faire apparaître le menu d'une visite virtuelle : -http://www.vue360.fr/visite-virtuelle-domaine-saint-bacchi-jouques" (en bas à droite dans la visite). Je pensais mettre un icone hamburger mais vu les tests de Miratech :/ ou alors ajouter "NAVIGATION" à côté...
@ Alvyn
Pour commencer, j'éviterais le hamburger dans la version ordinateur, ça n'a aucun intérêt.
Et dans ton cas en mobile comme en desktop, je mettrais un texte de menu explicite du genre "Votre visite virtuelle" parce que là c'est un peu perturbant, on pourrait croire que "Contact" dans le sous-menu est destiné au domaine saint-Bacchi.
Et du coup, en version mobile tu places ce texte de menu sous le logo.
@Sylvain : merci pour tes pistes d'amélioration ; en effet le menu hamburger général du site apparaît aussi en dekstop et on est d'accord, c'est inutile.
2eme point à corriger et je te rejoint : dans le thème je peux choisir un menu personnalisé pour les pages dédiées aux visites (je laisse que "Visite virtuelle à 360°" sous le logo du site) et si ça marche bien en dekstop, par contre en mobile c'est toujours le menu de base qui s'affiche (via l'icone hamburger). Et du coup le "contact" prête à confusion.
Mais perso je parlais du menu DANS la visite virtuelle, l'icone rond en bas à droite. Je pense que les 3/4 des visiteurs vont même pas le voir ou se dire que c'est un bouton d'action.
Tu dis "en version mobile tu places ce texte de menu sous le logo"
J'ai peut-être mal compris, mais en version mobile l'icone hamburger à droite du logo principal permet de pas perdre en hauteur non ?
@ Alvyn
Tu as raison, je n'avais absolument pas vu ce menu dans la visite, tu as intérêt à le repenser.
Sinon, oui, l’icône permet de gagner en hauteur, mais mieux vaux un menu explicite qui prend un poil plus de place qu'un truc que personne ne comprend et n'ira jamais cliquer, qu'en penses tu ?
"mieux vaux un menu explicite qui prend un poil plus de place qu'un truc que personne ne comprend et n'ira jamais cliquer"
imparable ! 🙂 à la limite laisser le menu à droite du logo, mais remplacer le hamburger par "MENU", à tester
Si vous utilisez des icons allez faire un tour sur Font Awesome
-https://fortawesome.github.io/Font-Awesome/icons/
J'espère qu'un jour tout le monde utilisera une police, devenu un standard, pour les icons !
@ Julien
Tu as raison, de notre côté on utilise -http://glyphicons.com/ dans tous les cas c'est surtout une assurance d'alléger les interfaces.
J'aime bien ta réflexion. Cela rejoint une autre que je lisais ailleurs sur le même sujet et qui concluait simplement en disant que la meilleure icône est toujours en mode texte.
Un petit point de plus au test que toi, mais c'est assez déroutant de sortir une icône du contexte. Allez sur le site d'Apple et regardez comment est fabriqué l'icône du panier d'achat. Sortie de son contexte, il paraît difficile de pouvoir analyser sa signification.
Pourtant, au sein de la page, cette icône est parfaitement reconnaissable.
C'est pareil pour la quasi totalité des exemples du test.
@ Laurent
Oui, je me suis fait la même réflexion que toi au départ. En même temps, certaines icônes restent compréhensibles hors contexte, ou plutôt elles sont comprises quel que soit le contexte, la corbeille par exemple (poubelle). Idem pour certains panneaux routiers. Le smiley classique ( 🙂 ) évoque aussi toujours la joie ou le rire. Je pense que l'icône parfaite doit tendre vers cela.
Maintenant, je te rejoins, à partir du moment ou elle est comprise dans le contexte, tout va bien.
Mais comme tu le dis, le plus efficace est encore le texte !
Bonjour,
Effectivement , la sémantique visuelle est importante surtout lors du développement de sites ou refonte pour les smartphone ou autres.
Il faut savoir que dans l'imaginaire collectif, cela est "intuitif" lorsque l'interface totale est visible... mais les surcouches liées aux mégas menus sont difficilement évitable pour de gros sites.
Savoir optimiser pour conserver la fluidité du surf, tout en faisant plaisir aux robots n'est pas chose aisée.
De beaux défis en vue.
PS : j'ai eu 6/9 au test 😉
Merci pour cette étude ! C’est tellement indéniable car le visuel constitue le pilier d’un bon site, surtout pour nous, publicitaires. Il faut que l’icône soit en même temps lisible, très informatif et attractif. Il faut aussi éviter les images trop « classiques » qui pourraient induire le visiteur en erreur.