UX/UI Designer: remettez en question les bonnes pratiques

Vous conviendrez peut être que s’inspirer d’interface utilisateurs existantes ne s’apparente pas à de la copie ou du vol mais plutôt à de la recherche des meilleurs pratiques. Trouver un modèle de conception afin de vous assurer d’utiliser des interfaces familières, les rendant de ce fait plus facilement utilisable pour vos utilisateurs, ne semble pas à première vu être une mauvaise approche.

Le respect des consignes, tendances ou best practice pourraient paraître pour certain comme un frein à leurs créativités et que in-fine toutes les applications se retrouveront avec le même look and feel. Du point de vue de l’expérience utilisateur, si vous vous habituez à copier les interfaces proposées par les géants du web (Facebook, Instagram, Amazon…), ces dernières remplissant à priori les même objectifs design que les vôtres, vous passerez à côté d’opportunités vous permettant de rendre votre interface plus performante. Remettez en question les “bonnes pratiques” et voyez si elles remplissent vos objectifs.

Voici quelques exemples qui sont ou étaient considérés comme les meilleures pratiques mais qui à première vue pourraient ne pas être aussi efficaces que vous ne le pensiez.

• La navigation cachée
• Les navigations alternatives
• La navigation scrollable:
• Le menu déroulant:
• Le menu burger (et oui!) :
• L'utilisation d'icônes
• La navigation gestuelle

Je ne vais pas parler d’un sujet polémique chez les concepteurs qu’est l’icône des menus burgers. Au vu des millions d’articles de blog existant sur le sujet, je vous laisse les consulter. A mon sens le problème ne vient pas tant de la compréhension de l'icône en elle même mais plutôt du fait de cacher la navigation derrière elle.

On ne va pas se le cacher, la solution de cacher la navigation est plutôt tentante et pratique car elle évite au concepteur de se soucier des différents états des écrans (desktop/mobile). Tout mettre dans un menu masquée par défaut qui au simple tap de l’utilisateur se déploie ça évite d’avoir à trop se poser de questions lorsque vous avez un nombre de catégories et de sous catégories important.

Toutefois des expériences ont montré qu’afficher les options de menu de manière plus visible augmente l'engagement, la satisfaction utilisateur et même les revenus. C’est pourquoi nous assistons aujourd’hui à un rollback des géants du web en faveur d’une mise en avant des options de navigations les plus pertinentes. Si votre navigation est complexe, la cacher ne la rend pas plus mobile friendly.

Alors quelles sont les alternatives possibles à la navigation cachée ?

La tab bar ou encore appelé la navigation par onglet:

Navigation particulièrement adaptée si votre application comporte un nombre limité de sections. Elle doit permettre aux utilisateurs de basculer rapidement entre chaque section de votre application. Même si ce système d’onglet semble être le modèle le plus simple et le plus répandu il faut tout même tenir compte de certains points lors de sa conception. Elle ne devrait pas avoir plus de 5 sections à afficher sachant que le premier onglet est réservé à la page d’accueil. L’ordre des autres onglets doit répondre à un ordre logique dans le parcours utilisateur. Concernant leurs positionnement sur l’écran, ils peuvent être en haut ou en bas cela dépend vraiment du contexte et de la plateforme (iOS ou Android). Si vous avez plus de 5 sections, mettez en avant les 4 sections prioritaires et ajoutez une 5ème section intitulé par exemple “Plus” fonctionnant comme un menu burger avec les sections restantes.

S’il n’existe pas de priorité entre les sections et que l’ajout d’une section de type “Plus” constituerait un mauvais compromis, la navigation scrollable vous permet de répertorier toutes les sections dans une vue à défilement horizontale. Même s’il s’agit d’une solution pratique et acceptable pour explorer du contenu, seuls quelques une des sections les plus importantes sont visibles sans défilement. Assurez-vous donc de fournir suffisamment d’éléments graphiques pour suggérer qu’il existe davantage d’éléments disponibles.

C’est un type de menu peu commun mais surtout utilisé lorsque la visibilité et l’accessibilité des sections n’est pas indispensable. Il sert principalement de titre de page avec une icône type “flèche vers le bas” suggérant qu’il est possible de switcher rapidement à des sections similaires.

Le menu burger (et oui!) :

Lors de la conception des options de navigation secondaires, le menu de type burger peut constituer une solution appropriée. Si les options principales de navigation sont disponibles sous forme de call to action de manière très visibles à l'écran, le menu hamburger peut être un bon endroit pour y loger la navigation secondaire. L’application Uber est un parfait exemple. La navigation principale est construite autour d’une unique action qu’est la commande ou la planification d’une course. Les options secondaires telles que les paramètres ou l’historique des courses n’ont aucun besoin d’apparaître de manière visible autre que dans un menu burger.

L'utilisation d'icônes

En raison du nombre limité d’espace sur un écran, il semble également judicieux de gagner de la place en remplaçant les labels de texte par des pictogrammes. Les icônes ont également l’avantage de ne nécessiter aucune traduction et d’être reconnu par la majorité des utilisateurs. Encore faut-il utiliser des icônes facilement reconnaissables. Si vous avez réalisé une icône et que vous pensez qu’un label texte qui s’affiche au over est nécessaire pour la rendre compréhensible, c’est que ce n’est pas la bonne façon de l'utiliser.

C’est une erreur courante chez les designers de supposer que vos utilisateurs connaissent bien les pictogrammes abstraits ou qu’ils seront prêts à passer plus de temps à les explorer et à les comprendre. Attention je ne dis pas qu’il ne faut pas du tout utiliser d'icônes mais plutôt d’utiliser des icônes représentant des fonctionnalités communes telles que la loupe de recherche, l'icône enveloppe pour la messagerie, etc… Vous seriez surpris encore du nombre de personne ne sachant pas quelle fonctionnalité se cache derrière une icône coeur.

Néanmoins si vous le souhaitez vous pouvez accompagner les icônes complexes d’un titre approprié car on ne va pas se le cacher on aime ajouter une touche de personnalité à son application. Dans tous les cas si vous utilisez des icônes, faites-les toujours tester !

La navigation gestuelle est devenu populaire parmi les concepteurs et de nombreuses applications ont été conçues pour expérimenter des contrôles gestuels. Au même titre que le menu burger ou les icônes la navigation gestuelle semble tentants pour ne pas surcharger les écrans d’actions. Un swipe gauche pour supprimer un message au lieu d’ajouter un bouton supprimer par exemple. Le gros inconvénient de ce type de navigation est qu’elle est toujours cachée et qu’il faut donc supposer que vos utilisateurs s’en souviendront. Or comme dans les cas cités avant, si une action est masquée il y a de fortes chances que peu de personne l’utilise. Bien qu’il existe des actions que la plupart des utilisateurs ont acquis au fil du temps tels que zoomer, toucher ou faire défiler, la majorité des gestes ne sont pas standard d’une application à l’autre et d’un OS à l’autre. La navigation gestuelle étant une navigation cachée, elle doit par nature être mémorisée ce qui nécessite des efforts considérables pour vos utilisateurs et donc non souhaitable.

En conclusion, il faut garder à l’esprit que chaque application et chaque utilisateur est différent. Une interface peut fonctionner correctement dans un cas mais échouer dans le vôtre. Je ne dis pas que les bonnes pratiques ne sont pas à suivre mais qu’il est préférable de faire ses recherches et d’avoir son propre mode de pensée afin d’aboutir à une UI qui aille dans le sens de l’expérience utilisateur que vous souhaitez donner. Mesurez, testez, validez vos hypothèses et n’ayez plus peur de ne pas suivre les directives si cela vous semble plus logique.