Revue de presse UX #11

Pour commencer le mois de mai, voici notre revue de presse UX #11 qui vous propose un peu de lecture en UX Design.

Ce mois-ci, Ludotic vous dévoile 3 articles pour réussir un design centré utilisateur :

1. Affordances dans l’UX design : typologie, conseils et bonnes pratiques
2. Formulaires dans l’UX design : bonnes pratiques et outils en ligne
3. Méthode agile & UX design : comment faire de l’UX design avec la méthode agile ?

Affordances dans l’UX Design

Quand vous manipulez un produit numérique, vous constatez sûrement qu’il est gorgé d’affordances. Donc, l’affordance est la capacité d’un produit à suggérer à l’utilisateur la manière de s’en servir intuitivement.

1. Pourquoi les affordances sont importantes dans l’UX design ?

En effet, dans l’UX design, les affordances réelles et perçues sont inévitables.

• Affordances réelles : quelle est l’utilisation réelle de l’outil ? Cela renvoie à sa fonction principale.
• Affordances perçues : quelle est l’interprétation de l’utilisateur concernant l’usage de l’outil ? Cela renvoie à tout usage que l’utilisateur peut imaginer avec l’outil.

Les signifiants s’associent aux affordances pour permettre à l’utilisateur de savoir quelles actions sont possibles dans une interface. Par exemple, les boutons et des champs à remplir sont des affordances. Les étiquettes des champs et le wording sont des signifiants.

2. Quels sont les types d’affordances et leurs cas d’usages dans l’UX ?

• Affordances explicites : indices clairs pour indiquer aux utilisateurs les actions disponibles dans une interface grâce au wording explicite. Exemple : un bouton avec le wording « Rechercher ».
• Affordances implicites : indices cachés que l’utilisateur découvre par curiosité à force de naviguer dans une interface. Par exemple : menus déroulants et accordéons.
• Fausses affordances : indices qui semblent être des actions dans une interface mais ne le sont pas réellement. Ils peuvent résulter d’un mauvais UX design. Néanmoins, voici les trois cas de figure dans lesquels les fausses affordances s’avèrent utiles :
  • Effet placebo : exemple du bouton « Enregistrer » dans un cloud où l’enregistrement se déroule automatiquement. Cela donne à l’utilisateur l’impression de contrôle et répond à son attente d’effectuer un enregistrement manuel.
  • Recherche utilisateur : faux boutons et faux liens incorporés dans les prototypes pour observer le comportement des utilisateurs.
  • Humour et divertissement : dans le cas des expériences surprenantes ou humoristiques avec des éléments interactifs mais non fonctionnels comme dans les jeux.
• Affordances physiques : caractéristiques physiques telles que couleur, forme d’un bouton.
• Affordances cognitives ou métaphoriques : icônes représentant les symboles de la vie réelle (par exemple : icône avec une enveloppe pour envoyer des mails).
• Affordances sensorielles : retours visuels, signaux sonores ainsi que des réponses tactiles comme vibration. Ces indices peuvent indiquer à l’utilisateur la réussite ou la disponibilité des actions dans une interface.
• Affordances fonctionnelles : boutons qui bougent au clic, curseurs déplaçables, icône de hamburger pour le menu de navigation sur mobile.
• Pattern affordances : affordances basées sur des modèles avec lesquels l’utilisateur est familier pour éviter l’effort de mémorisation. Par exemple : menu de navigation avec le logo en haut à gauche pour accéder à la page d’accueil.
• Affordances négatives : feedbacks sur les erreurs qui servent à guider l’utilisateur dans son parcours lors d’une erreur.

3. Quels conseils pour utiliser les affordances ?

• Indices visuels : par exemple, des boutons avec des différentes formes, couleurs, tailles…
• Indices fonctionnels : par exemple, des champs de recherche avec une loupe suggérant une possibilité de saisir une requête.
• Feedbacks : autrement dit, des notifications suite aux actions ou retours haptiques.
• Mécanismes de prévention des erreurs : options de confirmation ou d’annulation des actions critiques ou irréversibles.
• Guidage progressif : indicateurs de progression dans un formulaire.

4. Quelles bonnes pratiques pour utiliser les affordances ?

• D’abord, utiliser des signifiants pour indiquer ce que les utilisateurs doivent faire.
• Ensuite, respecter des principes du design comme hiérarchie visuelle, contrastes, espaces etc.
• De plus, éviter la charge cognitive de l’utilisateur.
• Ne pas oublier de tester auprès de plusieurs utilisateurs.
• Ne pas réinventer la roue en utilisant les modèles ou patterns que les utilisateurs connaissent déjà.
• Enfin, utiliser la loi de Fitts en particulier pour des smartphones avec des boutons de bonnes tailles et de bons emplacements.

Si le sujet vous intéresse, n’hésitez pas à découvrir l’article What are affordances in UX design en anglais et en entier.

Formulaires dans l’UX design

Des formulaires d’inscription, nous les avons tous remplis en ligne. Il vous est déjà probablement arrivé d’être bloqué à une des étapes de l’inscription et par conséquent d’abandonner la démarche. L’UX design défaillant est à l’origine de ces abandons.    

1. Quel rôle de l’UX design dans la conception des formulaires ?

Tout d’abord, l’UX design est fondamental pour concevoir des formulaires fonctionnels. Le formulaire en ligne a un impact direct sur la manière dont les utilisateurs interagissent avec l’outil. En effet, il peut réduire le taux d’abandon, améliorer le taux de conversion, la saisie des données et l’accessibilité.

Enfin, il doit contenir 4 éléments clés :

• Feedbacks : par exemple, messages d’erreur, messages de confirmation en temps réel, messages de réussite, indicateurs de progression.
• Champs de saisie : champs de texte, menus déroulant, boutons radio, cases à cocher.
• Descripteurs : titres de formulaire, étiquettes, info bulles, textes explicatifs supplémentaires, textes dans les champs de saisie.
• Boutons d’action : boutons « Connexion”, “Inscription”, “Suivant” ou “Précédent ».

2. Quels sont les types de formulaires ?

1. Formulaire simple : formulaires courts afin de permettre aux utilisateurs de saisir leurs données en une seule étape.
2. Formulaire d’assistant : dans les démarches de paiement en ligne et celles d’envoi de candidature, ce type de formulaire permet de décomposer une démarche complexe en étapes plus simples.
3. Formulaire navigable : similaire à celui d’assistant mais permet la saisie à plusieurs étapes dans la même page.

3. Quelles sont les 10 bonnes pratiques pour les formulaires centrés utilisateurs ?

• Tout d’abord, rester simple.
• Utiliser les étiquettes claires.
• Bien choisir les textes dans les champs de saisie.
• Regrouper les champs de saisie.
• Privilégier l’affichage des champs à saisir à colonne unique.
• Proposer des messages d’erreurs efficaces.
• Aider à prévenir les erreurs.
• Activer la validation en ligne.
• Rendre les formulaires accessibles.
• Enfin, ne pas oublier d’optimiser les formulaires pour le mobile.

Pour aller plus loin, (re)découvrez l’article que Ludotic a écrit un article proposant 10 conseils pour la conception des formulaires en 2021 .

3.1. Rester simple grâce à l’intelligence artificielle (IA)

• Remplissage automatique et suggestion de saisie : par exemple, Amazon avec le remplissage automatique des champs d’adresse en fonction de la localisation de l’utilisateur.
• Saisie vocale : plus précisément, utile aux utilisateurs en mobilité réduite dans une démarche d’accessibilité numérique.
• Détection et correction des erreurs : par exemple, des formats de téléphone incorrects et des fautes de frappe.
• Personnalisation des formulaires par l’IA : masquer des champs non pertinents, réorganiser des questions en fonction des réponses apportées par l’utilisateur.

3.2. Proposer des messages d’erreurs efficaces

• Premièrement, indiquer à l’utilisateur ce qui est erroné dans la saisie.
• Ensuite, faire comprendre à l’utilisateur l’origine de l’erreur de saisie.
• Finalement, proposer une solution pour corriger l’erreur de saisie.

3.3 Aider à prévenir des erreurs

• Indiquer à l’utilisateur des champs obligatoires à saisir.
• Bien choisir les textes dans les champs de saisie qui guident l’utilisateur.
• En plus, fournir un texte explicatif supplémentaire pour clarifier les attentes.
• Désactiver les boutons d’action avant que l’utilisateur ne remplisse tous les champs obligatoires du formulaire.

3.4 Rendre les formulaires accessibles 

1. Assurer un contraste de couleur et une lisibilité suffisante : un rapport de contraste texte/arrière-plan visé est au moins 4,5 :1 pour le texte de taille standard et 3 :1 pour un texte moins grand en graisse plus fine. Par ailleurs, il est nécessaire d’utiliser plusieurs moyens associés pour communiquer le message : texte, couleur etc.
2. Proposer plusieurs options de saisie : automatiquement, manuellement, par la voix etc.
3. Proposer la navigation au clavier : formulaire bien structuré permet de parcourir les champs à saisir dans le bon ordre en utilisant la touche Tabulation.
4. Proposer de remplir le formulaire au rythme de l’utilisateur : délais d’expiration à éviter, possibilité de prolonger la session, avertissements clairs. Ceci est particulièrement utile pour les utilisateurs avec un trouble cognitif pour respecter le temps de saisie de chacun.

3.5 Optimiser pour le mobile

• Essentiellement, respecter le design responsive.
• Par ailleurs, bien concevoir des zones tactiles : zones tactiles d’au moins 48×48 px pour permettre de les atteindre confortablement avec les doigts et un espacement correct entre les éléments pour éviter des clics accidentiels.

4. Quels outils pour concevoir des formulaires ?

1. Typeforme : plateforme en ligne pour concevoir des formulaires interactifs avec des fonctionnalités IA.
2. Zoho Forms : outil de création de formulaires personnalisables pour concevoir des formulaires à personnaliser.
3. JotFform : outil de création de formulaires avec des modèles avec une large palette de fonctionnalités IA.

Pour voir plus en détail, n’hésitez pas à découvrir l’article Better form design : UX tips, tools and tutorial en anglais et en entier.

3. Méthode agile & UX Design : comment faire de l’UX avec la méthode agile ?

Vous connaissez probablement la méthode agile qui permet d’améliorer votre produit de manière itérative en réunissant les différentes équipes autour des mêmes objectifs.

1. Pourquoi le mode agile profite plus aux équipes produit qu’aux équipes de conception ?

Pour commencer, l’auteur explique que la méthode agile a été introduite aux équipes pour travailler sur le produit de manière auto-organisée et réactive aux changements. Les UX designers faisaient partie de ces équipes.

Néanmoins, en 2011 Dean Leffingwell et Drew Jemilo proposent  Scaled Agile Framework (SAFe) qui remplace les designers UX par les product owners. Cette nouvelle organisation est à l’origine de l’incompatibilité entre l’UX et la méthode agile :

• Temps insuffisant consacré à la recherche utilisateur dans les sprints.
• Manque du recul pour les UX designers et manque d’une vision holistique dans un cycle agile.
• Les UX designers et les développeurs travaillent de manière isolée lors des sprints.

2. Quels challenges pour l’UX design dans un mode agile ?

• Tout d’abord, concilier les objectifs UX à long terme avec une livraison issue de chaque sprint : éviter l’écart entre les livrables à court terme et les objectifs UX.
• Anticiper la charge UX et la cohérence dans les cycles de sprint : éviter un effet domino qui perturbe le flux du travail et la cohésion du produit.
• Combler également le manque de communication entre les UX designers et les développeurs : éviter les failles de communication qui sont à l’origine des langages techniques différents et des objectifs différents.
• Pour finir, prévoir une documentation commune : éviter de négliger la création d’une documentation exhaustive de peur de ralentir le rythme de travail.

3. Comment faire de l’UX design avec la méthode agile ?

1. Articuler correctement la phase de discovery avec celle de livraison finale : commencer par la phase de discovery où les équipes UX interviennent quelques sprints avant les développeurs. Cette méthode agile à double voie proposée en 2012 par Marty Cagan et Jeff Patton, garantit l’intégration de l’UX au workflow agile de manière itérative.
2. Mettre en place des guerilla tests : quand le temps est limité, ce type de test permet d’identifier les problèmes critiques auprès d’un petit échantillon d’utilisateurs avant de se lancer dans une démarche à grande échelle.
3. Aligner les équipes de conception dès le démarrage des sprints : réunir les designers UX, les développeurs et d’autres acteurs de sprints autour des ateliers avec des activités et des objectifs concrets.
4. Définir les indicateurs de performance pour chaque sprint : les indicateurs doivent être mesurables, atteignables, précis et limités dans le temps. Exemple : augmenter des commandes de 25% dans un an.
5. Challenger le design à travers les wireframes pour récolter le feedback : les parties prenantes ont du mal à se projeter à travers les maquettes de basse et moyenne fidélité. Or, ce type de maquettage accélère le processus de conception en permettant de recueillir des retours et remettre en question le statu quo.

N’hésitez pas à découvrir l’article Dealing with the challenges of the agile methodology in UX design en anglais et en entier.

Le mot de la fin

Pour conclure, si vous avez besoin de l’aide dans la conception de vos formulaires ou dans l’accompagnement UX en mode agile, n’hésitez pas à découvrir toutes les offres UX de Ludotic.

En attendant notre prochaine revue de presse, vous pouvez revenir vers notre blog pour continuer votre lecture au sujet de l’UX design.