Au sein d'un site ou d'une application, vous avez certainement déjà connu des désagréments similaires :

"Où sont les coordonnées ? Je ne trouve pas la page de contact."
"Le clic a-t-il fonctionné ? Rien ne semble se passer.

Cela semble évident : une interface^[1] doit être intuitive et facile à utiliser. Mais une plateforme efficace n'est pas le fruit du hasard. Elle est le résultat d'une approche centrée sur l'utilisateur: UX design (UX pour User Experience).

Le design d'expérience utilisateur est un ensemble d'éléments qui doivent être satisfaits afin d'obtenir une interface rapide, fluide, agréable,.... Le domaine est vaste et l'UX design regroupe des dizaines de disciplines. Néanmoins, Peter Morville expose les principaux facteurs influençant l'expérience utilisateur :

L'expérience de l'utilisateur : La structure en nid d'abeille de Peter Morville.

Chaque facette du diagramme correspond à un attribut UX fondamental. Cette structure nous incite à nous poser les questions suivantes :

• Utile : Le produit/service répond-il à un besoin ? Sans besoin, l'utilisateur n'a aucune raison de l'utiliser.
• Utilisable : Le produit est-il simple, facile à comprendre et à manipuler ?
• Désirable : D'un point de vue esthétique, est-il agréable à utiliser ?
• La facilité de recherche : Est-il facile de naviguer dans l'interface ? Pour que l'utilisateur puisse trouver immédiatement ce dont il a besoin.
• Accessible : Est-il accessible aux personnes handicapées ?
• Crédible : Le produit/service inspire-t-il confiance à l'utilisateur ?
• Précieux : A-t-il de la valeur ? Cette valeur est la somme de tous les autres facteurs.

C'est là qu'intervient le designer UX/UI : il réunit les conditions pour créer la meilleure expérience utilisateur possible. Chez B12, le designer entre en scène au tout début d'un projet. Cette première étape consiste à discuter avec le client de la manière dont il (ou ses utilisateurs finaux) travaille et à découvrir les difficultés qu'il rencontre.

À ce stade, l'objectif est de comprendre qui sont les utilisateurs, quels sont leurs problèmes et ce dont ils ont besoin.

Une fois ces éléments définis, la phase de prototypage peut commencer. Après avoir analysé les informations recueillies, le concepteur fait des propositions et les présente sous forme de wireframes et de mockups. Les prototypes constituent un moyen de communication concret entre les utilisateurs et les concepteurs.

Les différents types de wireframes (de gauche à droite) : wireframe basse fidélité, wireframe moyenne fidélité, wireframe haute fidélité (ou maquette).

Les wireframes sont le squelette de l'application. Elles permettent de se concentrer sur la structure de l'application et de constituer le parcours de l'utilisateur. Elles peuvent être dessinées à la main ou à l'aide d'un logiciel spécialisé. L'un de leurs nombreux avantages est de permettre de recueillir rapidement des commentaires et de les ajuster en conséquence.

Quant aux maquettes (ou wireframes haute fidélité), elles reflètent une vision très fidèle du futur projet. Et pour cause, la charte graphique leur est désormais appliquée : les couleurs, la typographie, l'iconographie, le logo, les photos, les textes, etc.

Chez B12, nous testons les prototypes avec les utilisateurs finaux (généralement le client). Cela permet de s'assurer que la future application répond à leurs attentes et d'éviter des développements inutiles.

L'un des défis consistait à concevoir la navigation d'une interface entière dans une seule maquette. L'utilisateur accède à une grande quantité de contenu et à une série impressionnante d'actions. Une structure bien organisée lui permettra alors de savoir exactement où il se trouve dans l'interface malgré la multitude de filtres et d'onglets disponibles. La disposition des informations permet également à l'utilisateur de visualiser les détails d'une liste en même temps que d'autres listes de contenu, ce qui est très pertinent pour ses tâches quotidiennes.

Ensuite, lorsque les maquettes visuelles sont validées par le client (après un cycle de retours, de brainstorming et de modifications), le développement commence.

Dès qu'une nouvelle fonctionnalité est formulée, le concepteur et le développeur en discutent. Ils vérifient que les adaptations peuvent être réalisées avec succès et qu'elles s'intègrent dans le reste du système.

Le résultat ? Si l'utilisateur est en mesure d'effectuer une tâche rapidement et sans problème, il est satisfait!

Bien entendu, l'expérience de l'utilisateur ne se limite pas au temps passé exclusivement sur l'application. Elle englobe toutes les interactions qui ont lieu avant, pendant et après le temps passé sur la plateforme.

Par exemple, lorsqu'une personne crée un nouveau compte sur une plateforme, elle doit généralement valider l'inscription via un lien reçu par email. La qualité de l'email influence déjà l'expérience de l'utilisateur : un message clair, l'utilisation de la charte graphique, un bouton d'action bien visible, etc. Le visiteur a déjà une première impression du produit avant même de s'être connecté à la plateforme.

Il convient également de ne pas confondre l'UX et la conception de l'interface utilisateur. La conception de l'interface utilisateur (UI pour User Interface) est une composante de l'UX. L'UI s'intéresse à l'aspect esthétique d'un projet. C'est l'une des caractéristiques du diagramme de Peter Morville : "Désirable". L'UI veille à ce qu'une mise en page suscite des émotions positives et donne envie de s'y attarder.

Conclusion

Dans toute mission de site web ou d'application, l'impact de l'UX design est évident. Il contribue au succès du produit. Si les utilisateurs aiment interagir avec un produit, ils l'adopteront. Mieux encore, ils en parleront et deviendront des fans du produit.

B12 accorde une grande importance à l'UX design et intègre des designers de l'équipe dans nombre de ses projets. Plus l'interface est claire et conviviale, plus la satisfaction de l'utilisateur est grande.

‍

HARTSON R., PYLA P., The UX Book 2 : Agile UX Design for a Quality User Experience, Morgan Kaufmann, 2019, p. 405 à 411.

‍

[Une interface peut être une application web, une application mobile, un site web, etc. ︎