On s’interroge sur… les menus illustrés dans les apps

Zoom sur ces apps qui troquent les menus et listes de catégories classiques pour des interfaces en mosaïques illustrées dirigeant vers leurs services/produits. Cette structure de l'information est-elle une bonne pratique ? Les experts de USERADGENTS donnent leur avis et font leurs recommandations. 

L’accueil de Klarna, les rubriques d’Amazon & Shein, les accès rapides de Cdiscount… De nombreux acteurs ont changé leur fusil d’épaule quant à la façon de poser leur menu ou leur liste de catégories dans leur application. Fini l’optimisation de l’espace en liste et bonjour à des structures de navigation en mosaïque représentées par des pictogrammes, des illustrations, des photos ou encore des logos. Même Apple, chantre de l'épuré, semble s'y mettre doucement avec dans son catalogue une grille de ses grandes familles de produits matérialisées chacune par de véritables visuels détourés, sorte de mise en situation au plus proche du réel. 

Si elle a le mérite de nous rappeler nos écrans d'accueil de smartphones, remplis d'icones d’apps diverses avec des styles graphiques multiples que l’on peut organiser selon nos propres habitudes et attentes, cette accumulation d’éléments graphiques peut sembler “gourmande” pour l’interface. Elle peut ajouter de la charge visuelle, et a fortiori mentale, à l’utilisateur et consommer plus d’énergie, soulevant des questions légitimes de responsabilité environnementale. Cette pratique est-elle donc réellement un plus pour les apps et surtout pour les utilisateurs ? À quoi sert-elle exactement ? On vous dit tout. 

Des menus construits selon les besoins de recherche des utilisateurs

Si notre cher ami Miller disait que le cerveau humain ne peut retenir que 5 à 9 informations, ces structures en mosaïques illustrées viennent remettre en question cette loi. Ici, avec des entrées beaucoup plus nombreuses et éparses, on se rapproche plus de la théorie de Page Laubheimer du N/N Group qui affirme qu’une surcharge de possibilités d’action peut être justifiée si l’on souhaite que l’utilisateur passe en revue toutes les options avant de se diriger vers celle qui lui convient. Une théorie a priori assumée par les acteurs présentés. Plutôt logique puisqu’ils sont tous soit multi-services, multi-marques ou tout simplement multi-produits et qu’ils ne cherchent donc pas forcément à pousser un choix plus qu’un autre. 

Ce qui peut s’apparenter à une sorte de “fouillis organisé” a en fait pour but d’exposer à l’utilisateur la richesse des options qui s’offrent à lui. CityMapper, par exemple, se positionne comme un assistant pour aider l’utilisateur à choisir le meilleur mode de transport pour lui, en lui offrant toutes les options sur un pied d’égalité (ou presque… car les transports en commun restent quand même le nerf de la guerre). S’il sait déjà évidemment où il est et potentiellement là où il veut aller, la mosaïque peut l’aider à déterminer comment.

Pour l’e-commerce, cela revient à amener l’utilisateur à se plonger dans les rayons et à découvrir les articles au détour des têtes de gondole et des bonnes affaires virtuelles. Le but ? L’aider dans sa recherche, bien évidemment, mais de façon sporadique, comme s’il était en train de flâner en magasin. La conversion ici est une intention sous-jacente mais elle reste plus secondaire. On cherche à satisfaire les besoins d’utilisateurs peu matures dans leur recherche, qui ne viennent pas avec une idée bien précise de ce qu’ils veulent mais qui ont envie de voir l’étendue des gammes avant de se laisser tenter, ou ceux qui ont une vague idée de ce qu’ils sont venus chercher mais peuvent se laisser séduire par le reste de l’offre du vendeur. Cette volonté de laisser le client “errer” au gré des catégories et produits, sans recherche précise, mais avec une sensibilité particulière aux promos et réductions, fait notamment partie du cœur de l’ADN de Shein et son menu peut donc paraître parfaitement adapté à sa cible et ses objectifs, aussi perturbant soit-il pour l’œil. Reste que Shein va quand même un cran plus loin en utilisant des dark patterns (flash, écrans surchargés…) pour générer une sorte de stress chez l’utilisateur et susciter des achats compulsifs. Une pratique que nous ne recommandons pas forcément…

Avec ces menus illustrés, les acteurs cherchent principalement à montrer l’éventail de leurs produits ou services. Une manière d’insister auprès des utilisateurs sur la largeur et la variété de leur catalogue, comme s’il était impossible qu’ils n’y trouvent pas leur bonheur.

- Charlotte Dunet, UX Designer @USERADGENTS

Dans le cas où les utilisateurs sont à un niveau plus avancé et mature de leur recherche, avec une idée assez précise de ce qu’ils souhaitent, ce n’est pas vers ce menu illustré qu’ils iront naturellement mais vers le moteur de recherche. C’est pourquoi l’ensemble des acteurs étudiés gardent en parallèle cet élément de navigation, permettant de répondre aux différents besoins de leur cible. Chez CityMapper à nouveau et ce malgré une moitié supérieure occupée par une carte (l’un des éléments les plus difficilement lisibles d'une interface), la boîte de recherche située au centre de l’écran est bien pensée et permet de guider efficacement les personnes venues, cette fois, chercher une information rapide. 

La hiérarchie de l’information avant tout !

Dans certains cas, cette structure de l’information en mosaïque ultra riche peut toutefois présenter un risque puisqu’elle oblige l'utilisateur à mobiliser le système cognitif qui intervient pour la résolution de problèmes complexes (“système 2” théorisé par Daniel Kanheman) et demande plus de concentration qu'un mécanisme automatique qui favorise l’action ("système 1"). 

C’est notamment le cas dans la home de l’app Klarna. On observe des illustrations réalistes de produits qui défilent au-dessus du moteur de recherche et qui laissent penser qu’elles renverront au clic vers différentes catégories. Or, elles sont purement décoratives. Ce défilement, qui n’est d’ailleurs pas un traitement d’interface accessible vu qu’elle appelle l’œil alors que la zone n’est pas cliquable, ne permet pas à l’utilisateur de stopper le mouvement et représente un effort de lecture pour lui. En dessous : une partie “Sélectionné pour vous” organisée selon une grille de logos en “vrac” où il est assez difficile de trouver une marque du premier coup d'œil et qui implique, là encore, un travail supplémentaire pour le cerveau de l’utilisateur. Même chose sur le moteur de recherche qui est organisé aussi de façon plutôt aléatoire avec une sélection de marques à la Une, sans vraie logique apparente. Une liste bien organisée par catégories, ordre de popularité ou ordre alphabétique aurait finalement pu être une bonne alternative. Certains autres acteurs, comme Apple Santé, ont d’ailleurs fait ce choix.

En effet, ce que l’on attend d'une liste de boutons, d'actions ou de catégories, c’est de pouvoir s'y retrouver facilement, de saisir toutes les informations simplement et rapidement. Si ce n’est pas trié, il va falloir lire chaque item jusqu'à trouver le bon. Si ce n’est pas aligné à gauche, l’œil risque de devoir "recalculer", à chaque item de la liste, sa position de départ de la lecture. Le secret, comme le disaient vos parents, c’est le rangement ! Alors, on classe par ordre logique, on trie ses catégories, quitte à revenir aux bonnes vieilles listes de l’époque lorsque l’on a un nombre restreint d’entrées à afficher.

Attention, si l’on choisit une liste, il est judicieux de conserver des éléments graphiques pour dynamiser l’interface et donner envie de réaliser l’action (par exemple “acheter”). Et pour des raisons d’accessibilité, il faudra toujours associer des labels ou du texte à vos illustrations afin qu’ils puissent être lus par des screens readers.Dans le cas où les labels seraient absents ou tronqués dans l'interface, il faut préciser dans les spécifications quelle sera la restitution audio à faire par les screen readers.

- Noemi Sponga, UX Designer @USERADGENTS

L’universalité dans les choix graphiques 

Car une image vaut 1000 mots (coucou Confucius), ces plateformes misent sur des éléments graphiques tantôt pop, réalistes ou immersifs pour faciliter la compréhension, rendre plus attractives les successions de services, marques ou produits et tenter de refléter plus concrètement la richesse et la diversité de leurs offres. Entre icones, pictogrammes, illustrations et photos, à chacune ses préférences… 

Lorsque l’on penche pour du visuel ou des illustrations, les choix de représentation peuvent s’avérer complexes. D’un côté, il est important d’appliquer la direction artistique de l’app (et de s’y tenir pour garder de la cohérence). De l’autre, il faut être capable de proposer une représentation du produit ou de la catégorie qui parle à tous les utilisateurs. Cela suppose de réaliser en cours de conception des ateliers (brainstorming, méthode OOUX¹) et tests pour déterminer les schémas les plus communs, et donc universels, dans l’intelligence collective. 

Choisir un élément visuel, c’est trouver le meilleur moyen de guider l’utilisateur vers ce qu’il est venu chercher. Des visuels très codifiés, comme le cœur pour signifier le rythme cardiaque, vont être immédiatement compris et accélérer l’action.

- Cyrille Legrand, Head of Mobile @USERADGENTS

Dans l’app Uber, la rubrique “Services” affiche un écran complet de cases illustrées pour symboliser les modes de transport et articles disponibles en livraison. Globalement, les illustrations, contraintes par les codes graphiques de la marque, sont compréhensibles dans la partie “Allez n’importe où”. Dans la section, “faites-vous livrer tout ce que vous voulez”, c’est plus compliqué. Quelques points peuvent perturber l’œil, comme la différence de style ou la présence de cards plutôt saturées. Difficile de distinguer “alcool” et “hygiène” par exemple, sans doute car ce sont des catégories assez génériques avec des représentations universelles pas si évidentes, à l’inverse des modes de transport qui sont très codifiés à travers le monde. Ne dit-on pas d’ailleurs “le code la route” ?

Côté icones, c’est un peu différent. Ce que l’on attend d'un icone, c’est qu'il illustre sans trop attirer l'attention. Un style trop ambitieux va soulever des questions et mobiliser - là encore - le système 2 plutôt que guider vers la fonction recherchée. Une incohérence graphique, c’est aussi un risque de distraction. Même une app bien faite avec des icones discrets et adaptés sera visuellement contestable si les icones ne sont pas uniformes. Il faut bien s'assurer qu'ils proviennent tous de la même bibliothèque (par exemple SF Symbols sur iOS ou les Material Symbols d'Android).

En matière environnementale, bien qu’il y ait forcément des requêtes à faire, les pictogrammes ont un impact limité car ils se mettent bien en cache. D’autant plus si l’on choisit ceux fournis dans les bibliothèques systèmes embarquées en dur dans les apps.

- Cyrille Legrand, Head of Mobile @USERADGENTS

Au-delà des questions d’éco-conception, et comme nous l’avons déjà évoqué, il est nécessaire de prendre aussi en compte l’accessibilité à l’ensemble de la population de ces menus illustrés. Contrastes suffisants, taille de texte assez grosse pour être lisible… Plusieurs traitements graphiques sont nécessaires pour ne pas perdre des utilisateurs en cours de parcours pour cause d’interface non adaptée à leur situation. 

Il faut faire attention à ce que les entrées qui ne sont pas sélectionnées soient toujours bien visibles pour montrer qu'elles sont cliquables. Le tout en ayant un traitement graphique différent de la page qui est sélectionnée, pour bien faire comprendre à l'utilisateur où il se situe.

- Noemi Sponga, UX Designer @USERADGENTS

L’app Swile est un très bon exemple d’usage des icones. Ils sont uniformes, clairs, fins, contrastés et accompagnés de labels (donc accessibles). La couleur sert d'indicateur d'état (vert = activé), il y a des chevrons pour les sous-écrans... Bref, tout est respecté. 

Vous l’aurez compris, comme le disait sur d’autres sujets Edouard Baer avant nous, tout ça, c’est une question de dosage ! Car si chacun des exemples soulevés peut sembler contestable à un certain niveau, il est important de le remettre dans son contexte. Quelle est la cible de l’application (âge, habitudes, familiarité avec le mobile…) ? Quels sont ses besoins (faire une recherche rapide, flâner, s’inspirer…) ? Dans quel environnement social et culturel évolue-t-elle (un public d’application japonais ne recevra pas un pictogramme de la même manière qu’un public français par exemple) ? Quels sont les objectifs business de l’app (fidéliser, faire découvrir l’offre, susciter des achats rapides…) ? Autant de questions à se poser avant de penser vos interfaces, leurs menus et les assets graphiques qui favoriseront le guidage de vos utilisateurs vers l’action souhaitée. 

Besoin d’accompagnement pour concevoir, designer et développer des expériences mobiles structurées, cohérentes et efficaces ? Contactez les experts USERADGENTS ou consulter leurs offres.

^{1 - Object-Oriented UX}