Navigation mobile : faire le bon choix.
En France, les gens accèdent majoritairement à Internet via leur smartphone. Sur ces petits écrans, le manque de place impacte tous les choix de conception et particulièrement la navigation. Par « navigation », j’entends un dispositif interactif permettant de se déplacer d’une information à une autre. Dans une acception plus restrictive, on pourrait également parler de menu.
La navigation mobile idéale est tout à la fois complète, visible, disponible et aussi peu encombrante que possible. Disons-le tout de suite, (SPOILER ALERT) elle n’existe pas ! Un grand nombre de solutions ont toutefois été imaginées par les designers au fil des années. Chacune possède ses avantages et ses inconvénients. La suite de ce billet tente de dresser une liste objective des bénéfices et des défauts des cinq ou six standards actuels, afin de nourrir vos reflexions au moment de choisir le système de navigation mobile adéquat pour votre produit.
1. Le Hamburger Menu
Le Menu Latéral ou Hamburger Menu est le nom que l’on donne au petit pictogramme symbolisant une liste positionné dans un des coins supérieurs de l’interface graphique. Au clic, il révèle des éléments de navigation précédemment dissimulés. Sa très lointaine ressemblance avec un célèbre sandwich carné est à l’origine de son surnom.
Inventé par le designer Norm Cox pour l’interface graphique de l’ordinateur Xerox Star en 1981, il est resté assez confidentiel pendant de nombreuses années, puis sa popularité a littéralement explosé avec l’arrivée du smartphone.
Avantage : Le Menu Latéral peut contenir un grand nombre d’options de navigation pour un minimum d’encombrement.
Quand j’étais enfant, j’avais une méthode infaillible pour ranger ma chambre en quelques minutes. J’entassais tout ce qui trainait par terre et je poussais ensuite cet amas sous mon lit pour le dissimuler à la vue de mes parents. Si le Hamburger Menu est aussi populaire, c’est parce qu’il permet de faire exactement la même chose avec tous les éléments de navigation encombrants ! C’est extrêmement pratique, notamment pour les produits dont l’architecture est riche et complexe.
L’application Amazon aurait par exemple, beaucoup de mal à se passer d’un Menu Latéral. C’est par ailleurs, un modèle de navigation peu intrusif – il n’occupe que quelques pixels en haut de l’écran – et très évolutif puisqu’on peut facilement ajouter de nouvelles entrées à tout moment.
Inconvénient : « Out of sight, out of mind » Les contenus masqués sont moins susceptibles d’être découverts et utilisés.
Loin des yeux, loin de l’esprit ! Une étude du cabinet Nielsen Norman Group montre que les options de navigation cachées sont moins « découvrables » que celles qui sont affichées en permanence à l’écran. Par ailleurs, une tâche identique demande en moyenne plus d’effort et de temps à l’utilisateur s’il doit passer par un Menu Latéral pour l’accomplir.
Ces résultats ne doivent pas nous conduire à proscrire complètement l’utilisation du Hamburger Menu. Dès lors qu’il ne contient que des options secondaires, comme sur l’application Uber par exemple, il constitue une option de navigation tout à fait envisageable.
2. La Tab Bar
La Tab Bar est un menu de navigation composé de plusieurs onglets, positionné en haut ou en bas de l’écran. Chaque entrée est matérialisée par un petit pictogramme cliquable, accompagné (dans le meilleur des cas) d’un court label. Elle a été popularisée par iOS, et c’est aujourd’hui le modèle de navigation le plus utilisé dans les applications pour l’iPhone.
Avantage : La Tab Bar est visible et disponible en permanence.
Un menu devrait toujours indiquer au moins deux choses à l’utilisateur : « sa position actuelle » et « où il peut se rendre ». La Tab Bar fait cela plutôt bien. Cerise sur le cupcake, ces deux informations restent visibles en permanence, ce qui permet de passer d’une page à l’autre en un seul tap.
Inconvénient : La Tab Bar ne peut pas héberger beaucoup d’options de navigations
Une Tab Bar peut difficilement contenir plus de cinq entrées. Ça n’est pas gênant pour les produits simples, qui ont un nombre réduit de fonctionnalités, mais ça pose de véritables problèmes aux apps et aux sites les plus riches. Sur Instagram par exemple, l’accès à certains items de navigation ne se fait qu’au troisième niveau, après avoir cliqué sur un Hamburger Menu. L’utilisateur doit d’abord faire l’effort de découvrir ces fonctionnalités cachées, puis mémoriser les chemins complexes qui permettent d’y accéder. On a vu plus simple.
Par ailleurs, contrairement à ce que l’on a pu lire un peu partout ces dernières années, lorsqu’elle est positionnée en bas de l’écran, l’ensemble de la Tab Bar ne se situe pas forcément dans la zone de tap la plus accessible. Une étude approfondie du chercheur en UX Steven Hoober démontre qu’à moins d’avoir des pouces de 15 cm, les coins inférieurs de l’écran sont parmi les zones les plus compliquées à atteindre.
Enfin, c’est un modèle de navigation peu évolutif. On ne peut ajouter une nouvelle option qu’au détriment d’une autre. Il existe quelques astuces pour remédier à ce problème, nous y reviendrons à la fin de cet article.
3. Snail Trail
Le Snail trail, littéralement « trace d’escargot » est une barre de navigation qui excède la largeur de la page. Les options de navigation principales sont visibles et immédiatement disponibles, les autres apparaissent depuis la droite de l’écran lorsque l’utilisateur les fait glisser dans la partie centrale
Avantage : Le Snail Trail permet de prioriser les options de navigations.
Dans un menu, tous les items n’ont pas la même valeur pour l’utilisateur. Les fonctionnalités principales doivent être immédiatement et facilement accessibles, car elles motivent la plupart des parcours. À l’inverse, les entrées secondaires n’ont pas besoin d’être disponibles en permanence. Tout comme la Tab Bar, le Snail Trail confère une bonne visibilité aux options de navigation principales, mais contrairement à cette dernière, c’est un modèle souple et adaptable, qui peut accueillir un nombre élevé d’entrées.
Inconvénient : Des éléments utiles peuvent être masqués.
Choisir de masquer certaines options de navigation pour en valoriser d’autres est un risque. Nous l’avons vu, les fonctionnalités cachées requièrent un effort plus important pour être découvertes. Or, rien ne dit que les items jugés secondaires par l’équipe de conception ne seront pas recherchés en priorité par certains utilisateurs. Hiérarchiser les contenus est nécessaire, mais il ne faut pas perdre de vue que c’est aussi arbitraire.
4. Le FAB
Le Floating Action Button (FAB) est un élément cliquable, souvent de forme circulaire, qui flotte au dessus de l’interface et reste fixe lorsque l’utilisateur fait défiler la page. Ordinairement, il ne constitue pas un système de navigation principale. On l’utilise plutôt de façon contextuelle, afin de mettre en avant une ou plusieurs fonctionnalités importantes à un moment du parcours utilisateur.
Avantage : il est polymorphe et il valorise efficacement les actions primaires
Au tap, le FAB peut adopter des aspects très différents. Il peut déployer plusieurs options de navigation sous la forme d’une pile d’icônes ou d’une liste de labels. Il peut également s’étendre sur tout ou partie de l’écran pour afficher de nouveaux contenus. Exemple, dans Gmail, lorsque l’utilisateur clique sur le FAB, la page d’édition vient recouvrir l’écran.
L’aspect saillant du FAB est un autre de ses avantages. Nous avons vu qu’il a pour caractéristique de demeurer immobile au scroll, quand tout s’anime autour de lui. Ce comportement atypique le rend difficile à ignorer et en fait un très bon moyen de mettre en avant les actions importantes.
Inconvénient : il est intrusif et peu clair.
L’interface, ou le « chrome » ne devrait jamais rivaliser avec le contenu utile. C’est malheureusement souvent le cas du FAB ! Son aspect « remarquable » peut être une source de distraction et il peut même, à l’occasion, masquer des informations importantes.
Autre inconvénient, et non des moindres, le FAB est parfois très mystérieux. La plupart des boutons flottants ne comportent pas de label. L’utilisateur doit donc se fier au seul pictogramme pour s’orienter. Lorsque ce dernier est explicite, tout va bien – en voyant une loupe, on comprend que l’on peut effectuer une recherche – mais lorsque la symbolique de l’icône est moins évidente, le seul moyen de connaître la destination du FAB est de cliquer dessus. Cette conception déroutante est typique de ce que l’on appelle la « navigation mystère », un problème d’utilisabilité majeur bien décrit par l’auteur Vincent Flanders.
5. Les gestures
Les écrans tactiles permettent des interactions gestuelles riches et variées qui vont du simple tap, au multi-touchs en passant par le swipe, les pinches ou le pull. Désolé pour l’avalanche d’anglicismes.
Des applications comme Snapchat, ou Tinder doivent une partie de leur succès à leurs navigations gestuelles originales et addictives. Ce type d’interaction nécessitant un apprentissage, il vaut mieux les implémenter en relais d’une navigation plus traditionnelle qui convient mieux aux utilisateurs débutants.
Avantage : Les gestures sont naturelles et font gagner du temps.
En design, le fait de créer une relation naturelle entre un contrôleur et son objet s’appelle le « natural mapping ». Plus ce lien est évident, plus l’utilisateur est efficient. Les gestures permettent de reproduire très fidèlement les interactions du monde physique, ce qui est un bon exemple de natural mapping. Sur Google Maps, pour faire pivoter la carte, on effectue le même geste que lorsque l’on fait tourner un objet entre ses doigts.
D’autre part, à l’instar des raccourcis clavier, les gestures permettent à l’utilisateur d’être plus efficace dans les tâches complexes ou répétitives. Sur Youtube, par exemple, pour accélérer une vidéo, on peut déplacer la tête de lecture avec le doigt – ce qui est peu précis et objectivement compliqué – ou effectuer un double tap dans la partie droite de la vidéo pour avancer de 10 secondes.
Inconvénient : Les gestures nécessitent un effort pour être découvertes et mémorisées.
Combien d’utilisateurs de Spotify savent que pour passer d’une chanson à l’autre dans la liste de lecture, il suffit d’effectuer un swippe au dessus du player audio ? Mon petit doigt me dit qu’ils ne sont pas nombreux. Un des gros problèmes de la navigation par geste, c’est qu’elle demande à être découverte. L’utilisateur doit alors faire la démarche par lui même, bénéficier d’un coup de chance ou d’un conseil avisé.
L’autre défaut majeur de ce mode de navigation, c’est qu’il repose sur la mémoire de l’utilisateur. Il n’est donc implémentable que sur les produits à forte récurrence d’usage. Ne comptez pas sur les gens pour se souvenir des principes de navigation gestuelle de votre application s’ils ne l’ouvrent qu’une fois tous les deux mois.
6. Les mix
Les applications ou les sites particulièrement riches en contenus et en fonctionnalités combinent parfois plusieurs systèmes de navigation. L’application Instagram fait par exemple usage de la Tab Bar, du Hamburger Menu et des gestures. Gmail ou Linkedin ont adopté des stratégies similaires.
Avantage : Tirer parti du meilleur de chaque solution
Tous les modèles de navigations ont leurs avantages, mais aucun n’est complètement exempt de défaut. Additionner plusieurs solutions permet de profiter du meilleur de chaque système. Sur l’application Facebook par exemple, la Tab Bar valorise les liens principaux, tandis qu’un Hamburger menu permet d’accéder à une grosse vingtaine d’options secondaires.
Inconvénient : Les utilisateurs doivent mémoriser des chemins complexes
Ces logiques hétérogènes nécessitent plus d’effort de la part de l’utilisateur, qui doit mémoriser des parcours plus longs et complexes. Il faut donc les réserver aux écosystèmes riches et à forte récurrence d’usage.
7. Conclusion
Les alternatives évoquées dans cet article peuvent constituer d’excellents systèmes de navigation ou au contraire, plomber complètement l’expérience utilisateur. Tout est affaire de contexte. Il n’existe malheureusement pas de recette miracle qui fonctionnerait à tous les coups. En définitive, il n’y a qu’un moyen de valider un choix de conception aussi structurant, c’est de le tester auprès des utilisateurs.
Références :
Médiamétrie. Audience Internet Global en France en mars 2019
Kara Pernice, Raluca Budiu. Hamburger Menus and Hidden Navigation Hurt UX Metrics
Steven Hoober. Design for Fingers, Touch, and People, Part 1
Jakob Nielsen. Browser and GUI Chrome
Vincent Flanders. Mystery Meat Navigation’s Archtype
Katie Sherwin. Natural Mappings and Stimulus-Response Compatibility in User Interface Design
