Voici un petit panorama des principales méthodes de navigation actuelles dans les applications pour smartphones Android. On va brièvement évaluer les avantages et les inconvénients de chacune de ces méthodes, allant du FAB au hamburger, sans oublier le tiroir.
- Utilité des éléments de navigation dans une application mobile
- Bouton sandwich / hamburger et tiroir / drawer
- Barre de navigation en haut
- Floating Action Button aka « FAB »
- Barre de navigation en bas
- Card-based navigation
Le smartphone a posé un nouveau problème humain. Comment permettre à l’utilisateur d’interagir avec ses très nombreuses fonctionnalités via un écran de la taille d’un pain Wasa ? Le smartphone a deux gros atouts pour y arriver, sa qualité d’affichage et son interface tactile multi-touch.
Cette présentation cible le monde Android. Plus particulièrement les devices de type smartphones, à l’exclusion des tablettes, des wearables, et des kits autos.
Le système Android, indépendemment de toute application, présente bien sûr une « navbar » système. Celle qui permet d’accéder aux contrôles « Back », « Home », et « Overview ». Historiquement, cette navbar apparaît en bas de l’écran.
La « navigation» désigne ici les éléments graphiques qui permettent à l’utilisateur de passer d’une zone de l’application à l’autre.
A quoi servent les éléments de navigation (Android ou autre) ?
Que permet l’application ?
Au premier lancement de l’application, l’utilisateur a peut-être une idée abstraite de ce que fait l’application. Il veut comprendre ce qu’elle propose exactement, et comment trouver des rubriques ou des outils particuliers. Si l’application présente ces éléments clairement dès le premier écran, l’utilisateur est susceptible de les trouver et d’interagir avec l’application. Inversement, l’utilisateur peut tout simplement ne pas savoir quelles fonctionalités existent dans l’application. Par exemple, s’il doit dérouler une longue page, ou aller sur un autre écran pour la découvrir. Plus il y a de fonctionalités, plus il devient important de bien organiser la navigation. Comprendre quelles fonctions ont le plus de valeur pour l’utilisateur permettra de les mettre en avant.
Comment accéder à une fonctionalité particulière ?
En plus d’indiquer ce qui existe, les éléments de navigation permettent d’accéder à ces fonctionalités. Si possible, elle le fait avec le moins de frustration possible. Idéalement, les fonctionalités les plus intéressantes pour l’utilisateur sont identifiables et facilement accessibles. Pour mesurer l’accessibilité, on peut tout simplement compter le nombre d’actions nécessaires pour arriver à une fonctionalité.
Où est-on dans l’application ?
Quand une application a de nombreux écrans, les icônes de navigation peuvent aider l’utilisateur à comprendre où il est. Ils peuvent aussi lui indiquer comment revenir à une section ou à un embranchement connus. Les éléments de navigation visibles peuvent réduire la charge mentale, ce qui rend l’utilisation de l’application plus agréable.
Pour qui ?
Le type d’utilisateurs ciblés par l’application devrait fortement influencer le choix des éléments de navigation. Par exemple, sont-ils des personnes déjà imprégnées de l’UX mobile ? Ou ,au contraire, plus habitués à un PC, à des médias pré-informatiques (journaux, télévision), ou des contrôleurs de jeux ?
Les 5 types principaux d’éléments de navigation
Bouton sandwich qui ouvre un tiroir…
En cliquant sur le discret menu en forme de sandwich (aka « menu hamburger »), on voit se déployer le « tiroir » qui révèle les rubriques.
Ce type de menu peut se combiner avec d’autres éléments plus visibles sur la page. Dans cet exemple, c’est le cas avec un menu de type « card-layout ».
Barre de navigation Android en bas
L‘élément de navigation le plus fréquemment utilisé sur Android semble actuellement être la barre de navigation en bas.
Texte ou icônes pour matérialiser les éléments de navigation ?
Les icônes ont l’avantage de prendre moins de place à afficher qu’un libellé. En théorie, elles ne nécessitent pas de traduction dans le cadre de l’internationalisation d’une application. Mais il peut être difficile de concevoir des icônes réellement faciles à comprendre et esthétiques.
Avec des éléments de navigation figurés par ou agrémentés de texte, le sens peut être plus clair. Mais il faut faire en sorte que les libellés ne soient pas trop longs, et jamais abrégés.
Indication « vous êtes ici »
Avec la barre de navigation, une indication graphique (changement de couleur de l’icône) peut indiquer à l’utilisateur où il est.
FAB dans la navigation Android
Selon que l’application permet d’accéder à du contenu, ou à en produire, la navigation ne sera pas la même.
Le Floating Action Button est plus indiqué pour une fonctionalité où l’utilisateur produit du contenu dans l’application. Par exemple, ici le FAB sert pour ajouter un vêtement dans un application de gestion de garde-robe.
Certains lui reprochent son aspect flottant, qui peut nuire à l’esthétique et à l’accessibilité de l’écran en-dessous.
Barre de navigation en haut
Dans cet exemple, ce menu permet également de filtrer et d’actualiser le contenu affiché. On mélange donc des élements de navigation pure (passer à un autre écran), et de configuration de l’affichage en cours.
Certaines applications font en sorte d’escamoter la barre de menu du haut quand l’utilisateur scrolle vers le bas. Ainsi, on gagne plus de surface d’écran dédié au contenu principal. Cependant le changement d’apparence de l’affichage peut être perturbant pour l’utilisateur.
Card-based navigation (en anglais, désolée)
Ce dernier exemple illustre le cas où il a potentiellement beaucoup de destinations de navigation au même niveau. Dans certains cas, c’est une page déroulante qui peut être quasi infinie. Ce modèle sert pour toutes les galeries de contenus, où l’application invite l’utilisateur à scroll-scroll-scroller, tel que Instagram ou Reddit.
Refresh
Dans le cas d’un card-layout pour beaucoup de contenus souvent renouvelé, un mécanisme pour actualiser la page est conseillé. Il évite à l’utilisateur de re-parcourir beaucoup de cartes déjà vues quand il revient à l’application.
En conclusion
La navigation Android fait partie des sujets d’ergonomie. Ainsi, des tests avec des utilisateurs candides et représentatifs permettent de vérifier la qualité du modèle de navigation choisi. Les éléments de navigation ont aussi pour but d’aider l’utilisateur à se construire une représentation mentale de l’application. Plus cette représentation se rapproche de la réalité, plus elle aide l’utilisateur a facilement découvrir la valeur de l’application.
