Créer une bonne expérience utilisateur (UX) avec un beau design (UI) semble parfois naître par un procédé magique pour les non-initiés. Pourtant, même si nous apparaissons comme des apprentis magiciens jouant aléatoirement avec des couleurs et des formes, les UX respectent toujours certains principes bien précis concernant la composition de leurs écrans.

Vous trouverez ici nos autres articles sur les principes UX de base :

• Les 7 pièges à éviter lorsque l'on fait du lean & agile UX
• Les 5 commandements de l'UX design

Lorsque l'on sait que les Français passent 2h25 par jour en moyenne sur des applications mobiles (Etude Sociomantic, avril 2016), on comprend rapidement l'importance que les applications ont pris dans notre quotidien. Mais vous et moi ne sommes pas les seuls à avoir compris le filon. En juin 2016, il y avait déjà plus de 2 millions d'applications dans le monde disponibles sur l'App Store (Statista) soit plus que le nombre de girafes dans le monde (Le guichet du savoir).

Mais que signifie réellement  ce nombre faramineusement croissant d'applications mobiles pour un UX ? Que seules celles qui se distinguent parviennent à rester plus d'une semaine sur nos portables. Voilà pourquoi l'expérience utilisateur ainsi que le design sont les deux atouts de toute application mobile qui souhaite se faire respecter.

Néanmoins, on ne construit pas de grandes choses sans poser de bonnes bases. Ainsi, comme nous l'avons vu dans le premier article extrait du Guide de Survie, tout UX doit respecter certains principes de composition pour que son application soit lisible et agréable. De même, l'organisation de l'application répond à ce besoin de fluidité et d'expérience utilisateur positive. Ainsi l'arborescence et la navigation de votre application sont les deux éléments qui, rondement menés, permettront à vos utilisateurs de naviguer librement (et non pas de se perdre dans un dédale de pages et de clics) et aux apprenti UX d'avoir une vision globale de l'application.

1. Cohérence de l'Arbre de navigation

Si l'on définit l'arborescence appliquée à de l'UX, on pourrait se la représenter comme ceci: l'arborescence donne un organigramme de navigation décrivant le lien entre les différentes pages du projet. En d'autres termes, c'est le chemin d'un utilisateur lorsqu'il parcourt une application. Soit quelque chose comme ceci :

La visualisation de la navigation sous forme d'arborescence est essentielle afin de détecter les éventuelles erreurs de navigation et de permettre à l'utilisateur de se visualiser facilement et logiquement le parcours de l'application. Pour vous faciliter la tâche et rendre les choses simples, voici la TO DO Liste des éléments à ne pas oublier lorsque vous imaginez l'architecture de votre application mobile :

• Principes clés n°1: les pages sont organisées de façon logique facilement compréhensible par l'utilisateur.
• Principes clés n°2: tous les contenus de l'application sont agencés de manière logique et accessible.
• Les pages de niveau 1 (première ligne de l'arborescence) doivent mettre en avant le contenu principal de l'application.
• Il n'est pas recommandé de faire plus de 4 pages de niveau 1.
• Les pages de niveau 2 ou plus ne donnent pas accès à d'autres pages de même niveau qu'elles.
• Les pages de niveau x renvoient aux pages de niveau x-1.
• Les pages de niveau x sont liées au thème de leur page x-1.
• Il n'est pas recommandé de faire plus de 4 niveaux dans une application mobile.
• L'application doit être la plus simple possible : si vous n'avez pas besoin d'une page, éliminez-là.

2. Cohérence de la navigation

Lors du choix de navigation, l'UX doit toujours avoir en tête quels éléments sont prioritaires pour l'utilisateur. Les menus de navigation permettent d'offrir l'accès à un regroupement de fonctionnalités et ressemblent la plupart du temps à des barres de navigation ou des menus hamburgers (les menus en haut à gauche avec des petits traits). Bien que toutes applications mobiles contiennent des menus, ce n'est pas pour autant qu'elles réussissent toutes à être parfaitement compréhensibles pour l'utilisateur.

Voici donc une deuxième TO DO liste qui permettra d'éviter les erreurs de développement et de choisir efficacement son menu.

Eléments généraux :

• L'utilisateur doit savoir immédiatement où il se situe dans l'application.
• Ses choix de navigation doivent le mener au résultat souhaité rapidement.
• Les noms des items du menu sont explicites au vu du contexte du projet.
• L'utilisateur doit pouvoir accéder à n'importe quel élément important en 3 clics.

Éléments permettant la visibilité :

• Ne pas prévoir des menus trop petits.
• Incorporer le menu là où l'utilisateur l'attend.
• Montrer que le menu est cliquable et non pas un élément décoratif.
• Dans le cas d'un scroll infini, proposer un menu permanent permettant de revenir facilement en haut de page.
• Respecter le contraste afin que le menu ressorte comme cela peut être vu sur cet écran :

Éléments permettant d'indiquer où se trouve l'utilisateur dans l'application :

• Afin que la navigation soit la plus simple possible, l'UX doit indiquer où se situe l'écran actuel dans l'arborescence de l'application. Dans l'exemple ci-dessous, l'utilisateur n'a aucun moyen de savoir où les éléments du menu mènent :

Eléments permettant d'augmenter la lisibilité de l'application :

• Utiliser des catégories pertinentes ayant des terminologies décrivant clairement le contenus et les fonctionnalités de l'application comme dans l'exemple ci-dessous :

• Proposer des menus accessibles pour les contenus similaires : il est possible que les utilisateurs souhaitent passer d'un écran à l'autre si les contenus sont similaires. Il faut donc que ce changement de pages soient accessibles rapidement. Par exemple sur un site d'e-commerce, les utilisateurs achetant des chaussures peuvent aussi être intéressés par des chaussettes (ce n'est qu'un exemple).
• Utiliser des visuels augmentant la communication et dont les utilisateurs ont l'habitude.

Eléments augmentant la navigabilité de l'application :

• Faciliter l'accès aux éléments du menu en les mettant à portée de doigt.
• Le menu doit être standardisé aux normes des guidelines des téléphones (Android, iOs, ?)

BONUS Spécial Navigation : Menu Burger ou menu Tab Bar ?

De nombreux débats ont été soulevés parmi les partisans du menu hamburger ou du menu tap bar. Pour synthétiser ce qui a déjà été dit, nous vous proposons un petit récap rapide qui vous permettra de choisir entre les deux types de menu :

Le menu burger (aussi appelé split screen) :

• Pour qui ? Pour des éléments n'étant pas indispensables à l'utilisateur.
• Et dans les faits ? Pour une app comprenant de nombreuses pages de premier niveau (concrètement plus de 4/5 )
• Inconvénients ? Loin des yeux, loin du coeur, Nécessite un clic en plus
• Avantages ? Prend peu de place sur l'écran

Le menu Tab Bar

• Pour qui ? Pour les fonctionnalités essentielles de l'application.
• Et dans les faits ? Pour une app comprenant moins de 4 / 5 pages de premier niveau.
• Inconvénients ? Différent selon IOS ou Android, Prend de la place sur l'écran
• Avantages ? Près des yeux, près du coeur, ce menu incite à l'interaction, La tab bar peut disparaître lorsqu'elle n'est pas nécessaire

Les deux ?

Si votre application contient de nombreux éléments de 1er niveau et un nombre limité de sous-menus.

Sur ce nous espérons que vous avez compris les bases de la navigation ! N'hésitez pas à revenir pour le prochain article du Guide de Survie !