quentin berthommier

Opinions en interfaces digitales.

Soyons clairs d'entrée de jeu : J'aime le principe du chatbot Messenger, je n'aime pas le fait de devoir dépendre exclusivement d'une plateforme.

Ce qui m'intéresse surtout, c'est l'idée même de guider l'utilisateur à travers une expérience composée de questions à réponses binaires (oui / non) afin de l'emmener exactement où il veut. Bien entendu, il ne faut absolument pas imaginer qu'un chatbot se contente de réponses textuelles et surtout, jamais l'utilisateur n'a à écrire. Juste un tap ou clic.

Ce sont les contenus sous webview que je trouve absolument formidables :

Screen webview

Ceci, mes amis, est ma définition de l'expérience Web du futur. Imaginons une interface simplissime dont voici le wireframe :

Preview interface

Menu hamburger

Dès 2014, Josh Constine écrivait un formidable article sur le sujet dont la phrase principale est aussi simple que pertinente :

Ce qui est hors de la vue est hors de l'esprit

Qu'il s'agisse d'affichage mobile ou desktop, d'une application ou d'un site internet, le bouton “hamburger” est bien trop souvent une facilité de designer : Cacher le menu et l'interface semble plus claire. Mais peut-on parler de clarté si des informations importantes sont invisibles pour l'utilisateur ? Mal utilisé, la friction utilisateur générée par ce petit bouton faussement pratique peut avoir des conséquences catastrophiques :

Dans le cadre d'un simple bouton hamburger en guise de menu, seuls 27% des utilisateurs desktop ont utilisé la navigation du site, 57% sur mobile

Trois utilisateurs sur quatre n'ont pas utilisé le menu sur affichage desktop 😱 ! Un sur deux sur téléphone. Ces chiffres sont aussi importants qu'ils sont gravissimes. Concrètement, si votre interface utilise le bouton hamburger comme menu de navigation principal, il y a de fortes chances pour que celle-ci soit impactée négativement.

Envie de prolonger la discussion ? Ajoutez-moi sur LinkedIn 🙂 !

Toute décision ergonomique doit répondre à un besoin utilisateur. A quel besoin utilisateur un bouton hamburger correspond ? Aucun. Ne cherchez pas, il n'y en a pas. Le gain de place obtenu facilite la lecture ? C'est que votre interface nécessite plus de réflexion en amont sur sa disposition.

La solution

C'est Google, dans sa case study sur Material.io, qui illustre parfaitement la solution :

Image d'illustration Google

Nous sommes ici sur mobile, mais l'idée est concrètement la même sur tous les supports : Montrer les liens en hiérarchisant la navigation en plusieurs menus. Et s'il n'y a pas assez de place, ajoutez là un hamburger invitant l'utilisateur a en voir plus. Et pourquoi pas un ➕ d'ailleurs ?

La navigation se réfléchit dans un contexte global.

Cette solution proposée ne s'adapte évidemment pas à tous les sites ou toutes les applications. L'important est de prendre le temps d'observer l'utilisateur : Que cherche-t-il ? Comment faciliter sa prise d'informations ? N'oubliez pas : User first.

N'oubliez pas : Certains Call to action (vous savez ces gros boutons qui vous disent “cliquez ici !”) sont des éléments de navigation puisqu'ils peuvent permettre d'envoyer votre visiteur sur une autre section de votre produit.

Impossible de faire autrement ?

Rendre la navigation discrète est une volonté de votre client ? Et bien, une solution existe aussi :

Le simple fait d'ajouter le mot “menu” est une information précieuse pour l'utilisateur. Mais passez-vous de cette méthode autant que faire se peut.

Combinez !

Un mélange de CTA et d'un menu bouton “menu” peut être intéressant pour les petites tailles d'écran :

Menu NNG

Guider l'utilisateur, c'est lui permettre de comprendre immédiatement où vous souhaitez en venir. Les 3 CTA ont aussi la fonction de montrer le rayon d'action du groupe. C'est un formidable moyen de combiner navigation et informations utiles.

Do / Don't

  • Do

    • Faire de la recherche utilisateur en concevant différents prototypes de navigation.
    • Faire de l'A/B testing pour savoir quel ordre de liens est optimal en fonction des objectifs.
    • Faire économiser du temps à l'utilisateur en utilisant des boutons CTA pour les pages que vous souhaitez mettre en valeur
    • Faire une veille sur les meilleures pratiques UX en terme de navigation
  • Don't

    • Concevoir une belle interface au détriment du parcours utilisateur
    • Décider arbitrairement de la disposition du menu
    • Penser que l'utilisateur est heureux de devoir supporter des fioritures qui vous auront pris des journées à développer, notamment dans les animations du menu

Petites lectures supplémentaires