Paramétrages

mardi 14 avril 2020

Expérience utilisateur :
comment porter la bonne parole ?

En mai 2018, SQLI m’a accompagné dans mon développement professionnel en me permettant de me rendre à Lisbonne pour participer à une conférence sur l’expérience utilisateur. L’UXLX réunit chaque année de nombreux professionnels de l’expérience utilisateur (UX) du monde entier, qui se retrouvent à cette occasion pour quatre jours dédiés à la formation et au réseautage, le tout dans une ambiance de camaraderie

L’une des interventions les plus intéressantes fut celle de Dan Brown, designer et cofondateur de EightShapes. Lors de sa présentation, Dan a dévoilé l’outil pratique « Information Architecture Lenses », utilisable pour concevoir des structures digitales et prenant la forme d’un jeu de 51 cartes. Sur chacune de ces cartes, Dan a inscrit les thèmes et les questions concernant l’intelligence artificielle qu’il a pu collecter au fil des années. Lors de chaque projet sur lequel il a travaillé, Dan s’est systématiquement posé les mêmes questions à propos des décisions structurelles que le projet impliquait. Ces questions représentaient une réflexion critique essentielle qui lui permettait de progresser dans le processus de design. Chacune d’elles faisait figure de prisme par lequel il pouvait examiner la structure de différents composants d’un site Internet, d’une application mobile, de parcours utilisateur spécifiques ou d’un minuscule élément du contenu.

Au sein d'un groupe de Luxe, notre équipe UX/UI a concentré ses efforts sur un produit dédié au service client, dont des versions devraient sortir prochainement. D’autres équipes nous ont toutefois récemment contactés pour nous demander de les éclairer sur les meilleures pratiques à adopter en matière d’expérience utilisateur et de leur fournir des conseils pratiques pour leurs projets. 

Vous serez peut-être surpris d’apprendre que le design de l’expérience utilisateur est un domaine encore négligé par de nombreuses entreprises, et ce quelle que soit leur maturité. Nous avons également découvert que nos collègues savaient, pour la plupart, que « UX » désignait l’expérience utilisateur, mais qu’ils avaient du mal à expliquer en quoi consistait le design de l’expérience utilisateur, ou même le rôle d’un designer UX.

Nous avons dès lors programmé des sessions de formation en groupe ainsi qu’un atelier d’une demi-journée afin de répondre aux nombreuses questions qui se posaient concernant les fonctionnalités et les parcours utilisateur spécifiques à leurs projets. L’objectif était également de familiariser nos interlocuteurs au design de l’expérience utilisateur et de les convertir à ce précepte.

C’est là que nous nous sommes rappelés de la grande utilité d’un outil pratique, tel que le jeu de cartes créé par Dan Brown, pour aider les participants à comprendre comment fonctionne le processus de design. Nous avons ainsi décidé de mettre au point un outil similaire qui aurait la forme d’une check-list reprenant certains des thèmes les plus importants et les plus fréquents liés à l’UX. Cet outil pourrait avoir une visée informative ou bien être utilisé comme un « prisme » pour vérifier l’intérêt des fonctionnalités d’un produit, des composants d’UI communs ou pour faire une première évaluation de l’expérience utilisateur. Notre but était d’aider nos collègues à adopter un état d’esprit centré sur l’utilisateur, et ce en toute autonomie, à travailler de manière indépendante tout en respectant les principes liés à l’UX, à mieux comprendre les utilisateurs et à éviter toute erreur fâcheuse. 

Notre check-list UX continue d’évoluer et sera modifiée et affinée en fonction des besoins. Au fur et à mesure que nous avançons, nous avons le sentiment que notre mission d’assistance et de sensibilisation en matière d’UX ne fait que commencer. Nous espérons que cette étroite coopération sera fructueuse et permettra de réaliser de grandes avancées, et notamment une augmentation de nos effectifs.

CHECK-LIST UX

La prochaine fois que vous démarrez un projet, utilisez cette check-list pour évaluer et améliorer l’UX de vos différents composants et offrir une expérience plus agréable et plus fluide aux utilisateurs. 

1 sur 17

RESPECT DES STANDARDS

Les utilisateurs ne doivent pas se demander si des mots, éléments ou actions différents ont le même sens ou la même fonction.

Ne laissez aucune place au doute. Respectez les conventions établies en matière de design.

Comment identifier un problème potentiel ?
Si un composant est difficile à comprendre ou si un changement au niveau du contenu pousse l’utilisateur à s’interroger sur sa fonction, vous devez rectifier le tir.

2 sur 17

ALLEZ À L’ESSENTIEL

Les dialogues ne doivent pas contenir d’informations qui ne sont pas pertinentes ou qui sont rarement utiles. Chaque unité d’information supplémentaire qui s’affiche à l’écran vient faire concurrence aux unités essentielles et diminue d’autant leur visibilité.

Comment identifier un problème potentiel ?
Les informations qui apparaissent à l’écran sont-elles toutes essentielles pour la prise de décision de l’utilisateur ? Si ce n’est pas le cas, prenez les mesures nécessaires.

3 sur 17

USAGE RAISONNÉ DE LA COULEUR

Soyez judicieux et utilisez la couleur de manière cohérente, en gardant une palette restreinte (deux couleurs idéalement, mais pas plus de trois). Adoptez des couleurs saturées pour attirer l’attention. Soyez attentifs aux textes et aux éléments graphiques : pour la plupart des lecteurs, les alignements horizontaux sont plus naturels. 

Comment identifier un problème potentiel ?
Utilisez-vous des couleurs pour différencier les boutons (primaires, secondaires) ? Les textes et libellés sont-ils conformes aux critères AA concernant le contraste entre la couleur du texte et la couleur de son arrière-plan ? Procédez-vous à un alignement uniforme dans vos formulaires ? Si ce n’est pas le cas, prenez les mesures nécessaires.

4 sur 17

ORGANISATION INTELLIGENTE DU CONTENU

Une présentation désordonnée peut faire perdre la concentration ou l’intérêt. Seuls les contenus et les fonctionnalités nécessaires doivent être affichés à l’écran. Adoptez le principe de la révélation progressive : masquez ou désactivez les contenus qui ne sont nécessaires que lorsque l’utilisateur « clique » pour obtenir plus d’informations. Éliminez les éléments de distraction : les données n’ont pas toutes la même importance pour les utilisateurs. Vous devez établir des priorités. Synthétisez le contenu lorsqu’il n’est pas nécessaire d’entrer dans les détails.

Comment identifier un problème potentiel ?
Les contenus et fonctionnalités pertinents s’affichent-ils bien une seule et même fois sur une même page ? Masquez-vous bien les informations qui ne sont pas considérées comme prioritaires ? Faites-vous bien en sorte de ne pas demander ce type d’informations à l’utilisateur ? Si ce n’est pas le cas, prenez les mesures nécessaires.

5 sur 17

HIÉRARCHIE VISUELLE

Réfléchissez à l’ordre des éléments qui doivent attirer l’attention de l’utilisateur à chaque nouvelle page. Regroupez ensuite les éléments de même type et alignez-les : le regroupement des informations est un moyen simple d’associer des éléments et de créer une impression d’ordre.

Comment identifier un problème potentiel ?
Regroupez-vous des champs liés les uns aux autres dans votre formulaire ? Si votre formulaire possède plus de six champs, regroupez-vous bien ceux-ci en sections logiques ? Proposez-vous des filtres et des fonctions de tri ? Demandez-vous uniquement des informations obligatoires dans vos formulaires ? Si ce n’est pas le cas, prenez les mesures nécessaires.

6 sur 17

DESIGN INSPIRANT LA FIERTÉ

Le design doit associer expérience utilisateur agréable et interface efficace. L’analyse du design permet d’éviter les éventuels points de friction, de blocage dans le parcours et autres incompréhensions.

Comment identifier un problème potentiel ?
Les éléments les plus importants sont-ils situés en haut de la page ? Tous les éléments présents à l’écran ont-ils un intérêt ? Ceux-ci permettent-ils à l’utilisateur d’atteindre son objectif ? Si ce n’est pas le cas, prenez les mesures nécessaires.

7 sur 17

IMPORTANCE DES ICÔNES

Les éléments graphiques tels que les icônes peuvent aider à créer une harmonie, une clarté et une cohérence visuelles. Utilisez des icônes appartenant au même groupe ou à la même famille. Les utilisateurs ne doivent pas se poser de questions quant à leur signification. Celle-ci doit être évidente. 

Comment identifier un problème potentiel ?
Les différents éléments présents sur la page donnent-ils bien une impression de cohérence, d’appartenance à la même « famille » visuelle ? Si ce n’est pas le cas, prenez les mesures nécessaires. 

8 sur 17

PRÉVENTION DES ERREURS

L’utilisation de messages d’erreur optimaux est une composante essentielle d’un design minutieux et aide à prévenir la survenue des problèmes. Demandez toujours aux utilisateurs une confirmation avant qu’ils ne valident une action.

Comment identifier un problème potentiel ?
Si au cours d’un processus, l’utilisateur doit confirmer une action clé, existe-t-il un composant de validation visant à éviter toute erreur ? Si ce n’est pas le cas, prenez les mesures nécessaires. 

9 sur 17

UTILITÉ DES MESSAGES

Un message d’erreur utile aide les utilisateurs à reconnaître et à diagnostiquer les erreurs, et également à y remédier. Les messages d’erreur doivent être formulés en langage clair, indiquer précisément la nature du problème et suggérer une solution de manière constructive.

Comment identifier un problème potentiel ?
Des messages d’erreur aident-ils à identifier la cause du problème ? Si ce n’est pas le cas, prenez les mesures nécessaires. 

10 sur 17

FAVORISER LE « FACILEMENT IDENTIFIABLE »

Évitez de faire appel à la mémoire de l’utilisateur et rendez les éléments graphiques et les fonctionnalités visibles et identifiables.

L’utilisateur ne doit pas avoir à se souvenir d’une information d’une séquence de dialogue à une autre. Les instructions pour utiliser le système doivent être visibles ou facilement accessibles, le cas échéant. 

Comment identifier un problème potentiel ?
Les invites, repères visuels et messages sont-ils placés là où le regard est le plus susceptible de se poser ? Si ce n’est pas le cas, prenez les mesures nécessaires.

11 sur 17

GAIN DE TEMPS GRÂCE AUX RACCOURCIS

L’utilisation de raccourcis pour les tâches les plus récurrentes permet aux utilisateurs expérimentés de gagner du temps et d’accélérer les opérations. Différenciez les raccourcis des autres éléments « communs ».

Comment identifier un problème potentiel ?
Proposez-vous des raccourcis pour les tâches les plus fréquentes ? Si ce n’est pas le cas, prenez les mesures nécessaires. 

12 sur 17

VISIBILITÉ DE L’ÉTAT DU SYSTÈME

Le système doit toujours tenir informé l’utilisateur de ce qui se passe grâce à un feedback approprié et immédiat. 

Comment identifier un problème potentiel ?
Chacun des écrans commence-t-il par un titre ou un en-tête décrivant son contenu ? Si le parcours se compose de plusieurs étapes, les utilisateurs savent-ils exactement où ils en sont ? Les utilisateurs reçoivent-ils un feedback lorsqu’un processus s’achève sans encombre ? Si ce n’est pas le cas, prenez les mesures nécessaires.

13 sur 17

ACCESSIBILITÉ

Tenez compte des problématiques liées à l’accessibilité, comme par exemple le daltonisme, et assurez-vous que votre système est convivial et solide (pour permettre des erreurs lors de l’utilisation tout en empêchant les actions irréversibles). 

Comment identifier un problème potentiel ?
La plateforme supporte-t-elle les raccourcis clavier ou les textes alternatifs en cas de connexion bas débit ? Si ce n’est pas le cas, prenez les mesures nécessaires. 

14 sur 17

ÉTATS VIDES

À quoi ressemblera un écran lorsque l’utilisateur l’ouvre pour la première fois ? Que se passe-t-il s’il n’y a aucune donnée à afficher dans une liste ? Les états vides ne doivent pas être des écrans passifs, mais être considérés comme une opportunité d’inviter les utilisateurs à débuter une action. 

Comment identifier un problème potentiel ?
Prévoyez-vous des « états vides » pour chaque composant à l’écran ? Si ce n’est pas le cas, prenez les mesures nécessaires.

15 sur 17

CHARGEMENT...

Nous sommes convaincus qu’un système sera rapide en l’absence de contraintes liées au réseau. Assurez-vous de toujours signaler aux utilisateurs qu’un nouveau contenu est en train de charger ou qu’un processus de validation est en cours. Si cette opération prend du temps, utilisez une barre de progression.

Comment identifier un problème potentiel ?
Prévoyez-vous une aide visuelle pour indiquer à vos utilisateurs que votre processus prend plus de temps que prévu ? Si ce n’est pas le cas, prenez les mesures nécessaires.

16 sur 17

CORRESPONDANCE AVEC LE MONDE RÉEL

Le copywriting fait également partie intégrante du design de l’interface. Il est préférable d’éviter les termes propres à l’industrie et de faire preuve de précision et de concision. Essayez de toujours utiliser un langage que votre mère pourrait comprendre.

Comment identifier un problème potentiel ?
Quels sont les éléments dont l’utilisateur doit prendre connaissance sur cet écran ? Parlez-vous la même langue que vos utilisateurs ? Si ce n’est pas le cas, prenez les mesures nécessaires.

17 sur 17

IMPORTANCE DE L’AFFORDANCE

L’affordance est la capacité inhérente d’un objet ou d’un système à suggérer son utilisation et sa fonction.

L’affordance aide à comprendre quelles sont les actions spécifiques qui peuvent être réalisées par un objet. La couleur, la forme, la taille et la position sont des propriétés qui peuvent accroître ou réduire l’affordance d’un élément. 

Comment identifier un problème potentiel ?
La nature de ce bouton est-elle évidente ? S’agit-il d’un bouton ? Est-ce un logo ? Peut-on cliquer dessus ? Si la réponse n’est pas évidente, prenez les mesures nécessaires.

  • Partagez
  • Facebook
  • Twitter
  • Linkedin