Skip to main content

Pourquoi la navigation inférieure est si importante?

Steven Hoober, dans ses recherches sur l’utilisation des appareils mobiles, a constaté que 49% des personnes comptent sur un seul pouce pour faire avancer les choses sur leur téléphone. Dans la figure ci-dessous, le diagramme qui apparaît sur les écrans des téléphones mobiles est des tableaux de portée approximative, dans lesquels les couleurs indiquent les zones qu’un utilisateur peut atteindre avec le pouce pour interagir avec l’écran. Le vert indique la zone qu’un utilisateur peut atteindre facilement; jaune, une zone qui nécessite un étirement; et rouge, une zone qui oblige les utilisateurs à changer la façon dont ils tiennent un appareil.

Il est important de placer des actions de haut niveau et fréquemment utilisées au bas de l’écran, car elles sont facilement accessibles avec des interactions avec un seul pouce.

Afficher uniquement les destinations les plus importantes

Utilisez trois à cinq destinations de niveau supérieur dans la navigation inférieure. S’il y a moins de trois destinations, envisagez plutôt d’utiliser des onglets.

Évitez d’utiliser plus de cinq destinations dans la navigation inférieure car les cibles tactiles seront situées trop près les unes des autres. Mettre trop d’onglets dans une barre d’onglets peut rendre physiquement difficile pour les gens de taper sur celui qu’ils veulent. Et avec chaque onglet supplémentaire que vous affichez, vous augmentez la complexité de votre application.

Communiquer sur l’emplacement actuel

Ne pas indiquer l’emplacement actuel est probablement l’erreur la plus courante à voir dans les menus des applications. « Où suis-je? » est l’une des questions fondamentales auxquelles les utilisateurs doivent répondre pour réussir à naviguer. Comment faire alors pour aider l’utilisateur à se repérer dans mon application ?

Via des icônes

Étant donné que les actions de navigation inférieures sont présentées sous forme d’icônes, elles doivent être utilisées pour du contenu pouvant être correctement communiqué avec des icônes. Il existe des icônes universelles que les utilisateurs connaissent bien, principalement celles représentant des fonctionnalités telles que la recherche, le courrier électronique, l’impression, etc. Malheureusement, les icônes «universelles» sont rares. Et les concepteurs d’applications cachent souvent des fonctionnalités derrière des icônes qui sont en fait assez difficiles à reconnaître. Sur la figure ci-dessous, personne n’est en mesure de savoir à quoi corresponde les icônes de cercle ou d’hexagone, cela crée donc de la frustration pour un nouvel utilisateur qui aura plutôt l’impression de se diriger vers le néant…

Par une couleur distinctive

Évitez d’utiliser différentes icônes de couleur et étiquettes de texte dans votre barre d’onglets inférieure. Utilisez plutôt la couleur principale de l’application pour indiquer la vue ou page sur laquelle l’utilisateur se trouve.

Suivez une règle simple: coloriez l’action de navigation inférieure actuelle (y compris l’icône et toute étiquette de texte présente) avec la couleur principale de l’application. Sur la figure ci-dessous, on identifie clairement que l’on se trouve dans l’espace des « messages » et qu’il y a quelque chose qui s’est passé sur les « Timelines ».

Si la barre de navigation inférieure est colorée, rendez l’icône ou le libellé de texte de l’action en cours noir ou blanc. Cela va renforcer la lisibilité de vos icônes et donc de votre menu de navigation.

En ajoutant des labels clairs

Les étiquettes de texte ou labels doivent fournir des définitions courtes et pertinentes aux icônes de navigation. Évitez donc des labels de texte longues, car ces étiquettes ne se tronquent pas ni n’encapsulent dans un menu de navigation. Ci-dessous, des exemples de labels qui sont trop longs et qui viennent en quelque sorte détruire le travail du menu.

Ces éléments du menu doivent être faciles à apprendre. Les utilisateurs doivent pouvoir comprendre ce qui se passe exactement lorsqu’ils cliquent sur un élément.

Rendre la navigation évidente

Une bonne navigation doit ressembler à une main invisible qui guide l’utilisateur tout au long de son voyage. Après tout, même une fonctionnalité aussi pertinente ou cool ou bien le contenu le plus convaincant est tout à fait inutile si les gens ne le trouvent pas. Ce serait dommage que vos utilisateurs passent à côté de quelque chose qui vous tient à cœur.

Comportement

Chaque icône de navigation inférieure doit conduire à une destination cible et ne peut pas ouvrir de menus ou d’autres fenêtres contextuelles. Appuyer sur une icône de navigation inférieure doit guider l’utilisateur directement vers la vue associée ou actualiser la vue actuellement active. Ici, sous le système iOs, et plus particulièrement dans le gestionnaire d’images, on passe d’une vue qui regroupe toutes les photos, à une vue qui permet le partage de vos clichés et une vue qui recense les albums.

N’utilisez pas de barre d’onglets pour donner aux utilisateurs des contrôles qui agissent sur les éléments de l’écran ou du mode d’application en cours. Si vous devez fournir des contrôles, utilisez plutôt une barre d’outils.

Efforcez-vous d »être cohérent

Autant que possible, affichez les mêmes onglets dans chaque orientation. Il est préférable de donner aux utilisateurs un sentiment de stabilité visuelle en fournissant les mêmes onglets dans chaque orientation.

Ne supprimez pas un onglet lorsque sa fonction n’est pas disponible. Si vous supprimez un onglet dans certains cas mais pas dans d’autres, vous rendez l’interface utilisateur de votre application instable et imprévisible. La meilleure solution consiste à s’assurer que tous les onglets sont activés, mais à expliquer pourquoi le contenu d’un onglet n’est pas disponible. Par exemple, si l’utilisateur n’a pas de fichiers hors ligne, l’onglet Hors ligne de l’application Dropbox affiche un écran qui explique comment les avoir. Cette fonctionnalité est appelée état vide.

Un bon exemple de navigation mobile

Ici, on a une très belle navigation mobile avec 4 éléments, les différents choix sont bien labellisés ce qui vient ajouter de la clarté dans le menu et le choix des icones est bien représentatif de la destination vers laquelle l’utilisateur est amené à suivre.

En conclusion, aider les utilisateurs à naviguer devrait être une priorité élevée pour presque tous les sites et applications. L’objectif derrière cela est de créer un système d’interaction qui s’aligne naturellement avec les modèles mentaux de l’utilisateur. Vous concevez pour vos utilisateurs. Pensez toujours à votre personnalité d’utilisateur, réfléchissez aux objectifs qu’ils ont lorsqu’ils utilisent votre application et utilisez votre navigation pour les aider à atteindre ces objectifs. Plus votre produit est facile à utiliser, plus ils sont susceptibles de l’utiliser.