Boostez votre expérience utilisateur grâce à une navigation mobile optimisée !

Développeur chez PALO IT, j’ai eu l’occasion d’assister au Devoxx France le vendredi 22 avril dernier. Après lecture du programme, j’ai rapidement été attiré par la conférence sur l’UX Mobile proposée par Amélie Boucher, experte reconnue de l’expérience utilisateur Web & Mobile. En effet, là où il y a encore quelques années, on se posait encore la question de comment adapter une navigation Web classique vers une navigation mobile, on s’interroge aujourd’hui sur comment concevoir de A à Z la meilleure navigation mobile possible. En me basant sur sa conférence et des recherches complémentaires, je propose à travers cet article un état de l’art de la navigation mobile.

Introduction

Lors de la création d’une application ou d’un site Web mobile, il y a différentes façons d’aborder les approches de conception mobile. Pour toutes ces approches, la navigation est l’une des plus importantes considérations dans l’UX et la construction de l’interface utilisateur. Pour un Développeur ou un Designer, deux cas se présentent :
Le premier cas se résume par la question suivante : comment puis-je adapter une navigation Web classique vers une navigation mobile d’un site habituellement consulté depuis un ordinateur par l’utilisateur sans le frustrer à cause d’une spécificité de l’environnement mobile ? Le deuxième cas présente deux situations qui n’ont aucune exigence liée à un site Web classique existant comme dans le premier cas : comment construire de A à Z une navigation mobile fonctionnellement exhaustive ? Ou comment construire une application dont la navigation se distingue d’une dizaine (voire une centaine) d’applications équivalentes et séduire ainsi plus d’utilisateurs ? Dans les deux cas, seules la navigation mobile et l’UX sont capables d’influencer le succès ou l’échec du produit mobile (site, application, widget, etc.). En résumé, cela dépend entièrement de l’UX que vous voulez donner et souvent de l’aisance ou parfois de l’originalité de la navigation.

Avant de rechercher l’originalité, rappelons d’abord la liste des approches et des éléments graphiques les plus connus et utilisés en navigation mobile. Au début de mes recherches, je pensais qu’il y avait au maximum une dizaine d’éléments mais en fait, il y en a moins une trentaine, principalement en variantes que nous utilisons chaque jour inconsciemment et que les Designers essaient de croiser afin d’en faire des entités hybrides pour satisfaire notre envie de navigation simple et efficace.

S’il y a autant d’éléments, c’est qu’aucun d’entre eux n’est adapté à toutes les conceptions et qu’il existe des avantages et des inconvénients pour chaque type de navigation. Ce qui nous amène à la question existentielle : « Quelle est la meilleure approche de navigation mobile ? » À laquelle j’ai fini par donner la réponse éternelle : « Cela dépend ! ». Heureusement que les bonnes pratiques sont toujours là pour vous guider lorsque vous “Programmez”. Les bonnes pratiques sont notre seul garant de l’équilibre fragile de la navigation mobile sur un écran de quelques centimètres manipulé souvent avec un seul doigt. Elles sont notre ultime arme contre une anarchie palpable, qui nous guette à chaque action inattendue (clic futile, écran inutile, bouton mal placé, menu trop long, etc.).

L’UX Mobile : entre évolution et révolution

La navigation mobile est une question de temps et d’espace : vous avez quelques secondes pour séduire l’utilisateur et lui faire oublier de réfléchir où cliquer (de l’hypnose en quelque sorte !). Faire adopter un mécanisme de navigation à une personne est un processus qui passe par le choix du type de navigation, des éléments, de l’anticipation des actions et parfois d’astuces d’apprentissage intelligent.
Le cerveau humain est parfaitement intra-connecté : il récupère l’information nécessaire pour réaliser subtilement l’action adéquate subtilement, mais il décroche rapidement dès que l’outil n’est pas à la hauteur. Le monde entier et en particulier notre patrimoine Internet et Web se projette dans le mobile. Imaginez toutes les barrières qui sautent entre Internet et les personnes ne manipulant pas d’ordinateur qui, du jour au lendemain, ont le monde au bout du doigt. Les services, les APIs et le Cloud ont besoin que ce nouvel environnement réussisse à donner de nouvelles capacités à chaque individu.
L’enjeu n’a jamais été aussi important économiquement, politiquement et socialement. L’UX est au cœur de la deuxième plus grande expérience humaine dans le secteur de l’info-communication. Il est attaché à la fois à une évolution (d’Internet et du Web) et à une révolution (dans le comportement humain). Et ce basculement du Web classique au mobile s’annonce déjà autant compliqué que passionnant.

“The Internet is the first thing that humanity has built that humanity doesn’t understand, the largest experiment in anarchy that we have ever had.”— Eric Schmidt.

” Internet est la première chose que l’homme a créée sans la comprendre, c’est la plus grande expérience en matière d’anarchie jamais réalisée”— Eric Schmidt.

Menus, pagination et défilement : les approches de navigation

  • Les menus
  • La pagination
  • Le défilement (Scrolling)

Ces principes utilisent une liste d’éléments et de concepts d’interaction afin d’exposer leur mécanisme de navigation et d’étaler les différentes étapes d’actions, de recherche, de sélection, de transitions et/ou d’affichage de contenu. Voici une liste plus ou moins exhaustive (certains termes sont en français, d’autres en anglais) que nous détaillerons plus bas :

« List, tap bar, tiroir caché, pop over, mur d’icônes, navigation bar, hamburger menu, menu à gauche, menu déroulant, menu en accordéon, off canvas, pas de sous-menu, fil d’ariane, top navigation, menu en footer, spinner wheel ».

Les applications (et les Designers derrière) ne cessent de proposer aux utilisateurs de nouvelles astuces de navigation grâce aux combinaisons réalisées avec subtilité en se basant sur cette liste. Il faut toujours être inventif et garder à l’esprit que certains éléments peuvent être utiles pour un ou plusieurs types de navigation dès qu’ils répondent à leur principe :

  • La navigation par les menus peut être construite à base de tout élément ou suite d’éléments adjacents et / ou imbriqués et / ou hiérarchiques qui peuvent tous être sélectionnables ou présentant un élément sélectionnable (cliquable). La hiérarchisation des menus reste la technique la plus subtile afin de passer d’une architecture d’information plate (cf. fig.1) à une architecture profonde (cf. fig.2). Elle doit être intuitive afin que l’utilisateur puisse deviner la branche à déplier. Cette architecture en profondeur est plus fréquente en mobile.
  • La pagination permet une navigation à base d’éléments visuellement plus discrets (ou avec moins d’interactions) que les éléments de la navigation en menus, le but étant toujours de récupérer la suite (ou l’avant) de l’écran (la page) en cours. Les éléments de navigation doivent permettre d’afficher un contenu de même type (image, texte, etc.), contrairement à une navigation par menu offrant différentes actions pour afficher un contenu différent. C’est pour cette raison que souvent, les glissements de doigts, les boutons-flèches et autres éléments compatibles sont utilisés.
  • La navigation par défilement utilise des éléments assurant un déroulement du contenu avec un chargement de contenu plus ou moins intelligent et automatique. Cette approche emprunte souvent aux deux autres quelques éléments afin de casser la monotonie et remédier aux effets parfois désagréables pour la vision humaine. Certaines personnes sont sensibles au défilement continu suite à la vérification furtive du contenu déroulé avant qu’il ne disparaisse. Pour éviter que leurs yeux ne se fatiguent, on peut utiliser les menus ou une pagination perpendiculaire au défilement pour équilibrer la navigation et de faire de petites pauses.
Fig.1 Architecture plate

Fig.1 Architecture plate

Fig.2 Architecture profonde

Fig.2 Architecture profonde

Avant d’étudier les avantages et les inconvénients de chaque composant de navigations, rappelons que la valeur ajoutée d’un élément ou d’un concept dans un processus de navigation ainsi que son rôle dépendent de plusieurs paramètres. Les choix et les valeurs assignées à ces paramètres font qu’un double-clic sera adapté dans tel contexte de tel type de navigation ou qu’une transition sera utile sur tel écran dans un autre type de navigation. Certains éléments sont beaucoup plus flexibles que d’autres sur les marges des valeurs et les choix qu’ils peuvent offrir. Ces paramètres évoluent selon les 3 axes de l’interaction mobile, à savoir l’espace tactile, la vision et le son. Voici la liste des paramètres les plus influents à prendre en compte tout au long de la conception de votre navigation mobile :

  • La taille
  • La position (sur un des quatre bords de l’écran / flottant / au coin)
  • Le moment d’apparition / une action nécessaire ou pas pour l’affichage
  • Le moment de disparition / une action nécessaire ou pas pour le masquage
  • La couleur / la transparence
  • Le sens de défilement
  • La notification (modale ou flottante / furtive, dynamique ou statique)
  • Avec animation ou pas, si oui sa durée, serait-elle accompagnée d’un son ou pas
  • Le taux de réutilisation de l’écran, zones statiques inchangées ou avec un contenu dynamique

Les avantages et les inconvénients des composants de navigation

1

23

56

789

Comment choisir son approche ?

Au début, la navigation mobile sur les sites Web était plus ou moins une version allégée de leur navigation bureau. L’espace ne permettait pas d’offrir la même expérience utilisateur. Conserver la même navigation sur les plates-formes mobiles et bureau est très difficile. L’approche de calquer la version bureau n’était pas la meilleure option. Heureusement, avec le temps, les plates-formes mobiles ont vu leurs approches de navigation évoluer rapidement, soit parce qu’on ne retrouve plus de version bureau comme point de départ (par exemple, lors de la création de nouvelles applications et jeux mobiles), soit parce qu’on souhaite exploiter autrement le mobile pour explorer et naviguer de façon plus innovante que sur un ordinateur. Finalement, la contrainte de l’espace semble plutôt alimenter une créativité dans les approches de navigation plus qu’un manque d’options. Bousculer les habitudes des utilisateurs présente un risque qu’on ne peut éviter qu’avec des approches intuitives et facilement adoptables.

Malgré la dizaine d’année d’efforts et d’approches diverses et variées, la route est encore longue. En réalité, chaque approche est en quête d’une navigation offrant une découverte du contenu facile, accessible et qui prend peu de place à l’écran. Etaler la navigation sur l’écran ou la cacher dans une icône/menu, chaque approche a des avantages et des inconvénients. Mais la première clé de la réussite du choix reste principalement liée au contenu. Chaque type de contenu a une solution appropriée. Une navigation ne peut être construite indépendamment du contenu qu’elle expose. Disons alors que le contenu est notre premier paramètre de choix d’approche.

Si on réfléchit à l’instant à partir duquel l’utilisateur commence à naviguer et exploiter le contenu, un second paramètre entre en compte : le temps. On pense souvent au temps d’interaction avant que l’utilisateur obtienne ce qu’il souhaite, y compris le nombre de clics ou de transitions, la durée d’une animation ou d’un chargement, mais on pense moins à un autre facteur temps extrêmement important dans la mise en place d’une approche : le temps d’apprentissage de navigation. Plus une navigation est rapidement acquise, plus elle est vite oubliée et fera partie intégrante des réflexes d’utilisateurs, qui fera d’elle une approche innée au fil du temps, familière et facilement reconnaissable ce qui « miraculeusement » fera d’elle « LA » approche adéquate à tel ou tel type d’application.

Le temps d’apprentissage est tellement important qu’on ne peut guère l’exclure. C’est pour cette raison que de plus en plus d’applications mobiles ajouter une surcouche sur l’écran comme guide de navigation avec des instructions et des astuces pour rappeler ou enrichir l’expérience utilisateur tout au long de sa navigation. Bien évidemment derrière, le temps d’interaction et de réactions des écrans doit être à la hauteur, sinon la navigation serait un véritable calvaire et l’utilisateur n’adhèrerait plus à l’application. Ainsi, comme pour tout processus d’exploitation d’un outil technologique, le temps est un paramètre primordial, et la navigation mobile est loin d’être une exception vu qu’elle prétend nous faciliter notre quotidien si rythmé.
En résumé, il existe deux paramètres principaux : d’abord, le contenu et les métaphores visuelles que le Designer utilise afin que l’utilisateur comprenne ce qu’il voit (icônes, images, couleurs, symboles, etc.), et ce parfois en se basant sur sa mémoire profonde et l’inconscient (par exemple, une maison signifie Home ce qui signifie la page principale). Ensuite, le temps de navigation que le Designer essaie d’optimiser afin que l’utilisateur vive une belle expérience à chaque lancement de l’application.

En conclusion

Il n’existe pas une approche universelle mais plutôt une démarche de construction de navigation en fonction des paramètres qui dépendent du contenu et du facteur temps tout en respectant certaines bonnes pratiques. La liste des bonnes pratiques ne pouvant être exhaustive, j’ai choisi de retenir les suivantes :

  • Envisager des pages / écrans de taille raisonnable pages (ne pas intégrer trop de contenus sur une seule page) ;
  • Prévoir des éléments cliquables de taille assez large (surtout pour les applications dédiées aux hommes) ;
  • Intégrer un espace suffisant entre les éléments cliquables ;
  • Fournir à l’utilisateur un élément qui lui permet de se retrouver dans la navigation globale (numéro de page, fil d’ariane, etc.) ;
  • Faciliter la navigation horizontale pour permettre à l’utilisateur d’accéder aux catégories principales en cas d’architecture d’information profonde ;
  • Permettre à l’utilisateur de naviguer en un seul clic / swipe (glisssement de doigt) entre deux écrans ;
  • Prévoir l’ajustement de l’affichage en cas de zoom (et donc ajouter / masquer des options de navigation) ;
  • Privilégier les déroulements de menus verticaux plutôt qu’horizontaux ;
  • Privilégier les accordéons aux longs menus verticaux sans fin ;
  • Eviter la redondance d’informations d’un écran à l’autre ;
  • Lister les pages principales en premier ;
  • Limiter les éléments de navigation à 8 par écran ;
  • Rester intuitif : le signe + dans un menu engendre l’action « déplier » et vice versa ;
  • Orienter la navigation vers l’action et la découverte (pas d’interaction inutile) ;
  • Rendre tous les éléments de navigation accessibles (de préférence avec une seule main), compréhensibles (un utilisateur ne doit pas hésiter entre plusieurs boutons) et ergonomiques ;
  • Prévoir une recherche ultra réactive et adaptée (textes, icônes) s’il y a beaucoup de contenus à découvrir.

Pour aller plus loin

Découvrez l’intervention de PALO IT chez Carrefour sur la conception d’une solution innovante et différenciante de géolocalisation indoor sur smartphone. Comme Carrefour, vous souhaitez être accompagnés par PALO IT dans vos projets mobiles ? N’hésitez pas à contacter notre équipe commerciale pour échanger sur nos références et les challenges techniques relevés par nos équipes.

spe

 

Sources

Présentation Devoxx France 2016 d’Amélie Boucher :

http://fr.slideshare.net/amelieboucher/concevoir-la-navigation-sur-mobile

Modèles et patterns de navigation mobile :

http://www.loriskumo.com/modeles-de-navigation-mobile/

Basic patterns for mobile navigation :

https://www.nngroup.com/articles/mobile-navigation-patterns/

Choisir la bonne navigation sur son site mobile :

http://www.adviso.ca/blog/2013/04/05/choisir-la-bonne-navigation-pour-son-site-mobile-2/

Les différents types de navigation sur mobile :

http://www.ergognome.com/conception-mobile/les-differents-types-de-navigation-mobile/

5 creative mobile UI patterns :

https://studio.uxpin.com/blog/5-creative-mobile-ui-patterns-navigation

Share
Yassin CHABEB
Yassin CHABEB

1653

Leave a Reply

Your email address will not be published. Required fields are marked *