actu web

Le design inclusif : bonnes pratiques

AUTEUR /

Yann Guilbot

Yann Guilbot

Designer web @ilabs

Le design inclusif est une méthode de conception qui embrasse la diversité humaine. Son mantra ? “Résoudre pour un, étendre à tous”. En webdesign, il a pour objectif d’inclure le plus grand nombre d’internautes. Il fait en sorte que quelles que soient nos particularités et nos capacités à l’instant T, nous n’avons pas à nous adapter à l’interface et ne nous sentons pas exclus ni restreints.

Le design inclusif, la clef pour une expérience utilisateur réussie

Le design inclusif est souvent associé à l’accessibilité, qui n’est que la face immergée de l’iceberg.

L’accessibilité s’intéresse aux handicaps moteurs et mentaux, tandis que le design inclusif va plus loin. Il considère le genre, l’âge, les capacités motrices, de compréhension ou encore l’équipement numérique de l’utilisateur final, et ce, dès le commencement du projet… Il tend ainsi à réduire (ou mieux, éliminer) les discriminations ou frustrations que peuvent rencontrer les internautes lorsqu’ils visitent un site web.

Le design inclusif anticipe les obstacles, qu’ils soient permanents (être sourd), temporaires (avoir un bras dans le plâtre) ou situationnels (voyager en train). Pour ce faire, il part d’un cas particulier et l’étend à d’autres situations.

Le langage

Pour que le contenu éditorial soit compréhensible, préférez un langage qui va à l’essentiel. Exprimez-vous à l’affirmatif, employez un vocabulaire simple. Sinon, vous perdrez les internautes qui ne maîtrisent pas suffisamment la langue ou qui présentent des déficiences cognitives.

Pour une lecture aisée, le texte doit également être lisible : le contraste (couleur entre le texte et le fond) et la taille de la police sont particulièrement importants. Veillez à ce que la structure soit aérée, que la mise en page suive les conventions (citation en italique, lien surligné, paragraphe aligné à gauche…). Les listes à puces sont idéales pour repérer et mémoriser facilement l’information.

Organisez le texte autour d’une structure linéaire, qui met en évidence les titres et les sous-titres : une hiérarchie nécessaire pour les internautes qui ne font que survoler la page (et ils sont nombreux !).

 

Les couleurs

Veillez à ce que les informations importantes ne soient pas uniquement communiquées par des couleurs, puisque tous les utilisateurs ne les distinguent pas de la même façon : un mal-voyant, un daltonien, ou une personne éblouie par le soleil en ont une perception différente.

Nous pouvons citer ici l’application de suivi alimentaire Fodmap, qui a revu son interface dans ce sens-là. Les informations sont désormais signifiées par des symboles et non plus par des couleurs.

Pour vérifier si votre site est lisible ou non pour les daltoniens, vous pouvez utiliser l’outil gratuit en ligne Colorblind Web Page Filter.

Les visuels

Pour des visuels inclusifs, vous pouvez jouer la carte de l’abstraction, ou celle de la diversification.

De par sa dimension conceptuelle, le visuel abstrait favorise la libre interprétation. L’utilisateur est invité à faire un rapprochement en fonction de son propre vécu. C’est le choix qu’a fait l’assureur Lemonade pour sa page d’inscription.

Concernant la diversification, le visuel est alors une représentation réaliste mettant en scène un large panel d’utilisateurs. AirBnb, dont la clientèle est un parfait exemple de diversité culturelle, a revu ses illustrations pour qu’elles reflètent cette mixité.

Quels que soient les visuels choisis, n’oubliez pas les balises alternatives : elles sont essentielles pour les utilisateurs ayant une déficience visuelle (un lecteur d’écran lit ces balises), ou ayant un bas débit internet. Elles sont aussi bénéfiques pour le référencement naturel, alors pourquoi s’en priver ?

Le multimédia

Texte, vidéo ou podcast Certains utilisateurs préfèrent lire, alors que d’autres sont obligés d’écouter. Adoptez des formats pluriels pour vous adapter à toutes les situations, contraintes comme choisies.

Proposez une transcription audio du contenu éditorial. Les articles de blog s’y prêtent particulièrement, mais rien ne vous empêche de proposer une version audio d’une page “À propos” ou d’un communiqué de presse. Travaillez l’intonation pour éviter un résultat monotone.

À contrario, si vous hébergez des podcasts, proposez une version écrite, complète ou partielle selon la densité de l’émission.

En vidéo, les sous-titres sont devenus indispensables, ils pallient un grand nombre d’exclusions : les handicaps auditifs bien sûr ; mais ils sont aussi utiles aux mobinautes, aux utilisateurs qui ne comprennent pas la langue parlée, ou qui se trouvent dans un lieu qui rend l’écoute impossible (un hall de gare, un stade, un bar…).

Formulaire et la question du genre

En premier lieu, avant d’ajouter une question à un formulaire de contact, demandez-vous si vous avez vraiment besoin de cette donnée. Même si vous partez d’une bonne intention, toute question risque d’exclure un utilisateur, c’est pourquoi il vaut mieux se contenter du strict nécessaire.

La question relative au “Sexe” est de plus en plus appelée “Genre”. C’est un bon début, mais le choix des réponses est souvent binaire : l’utilisateur peut être Féminin ou Masculin, alors qu’il existe une vingtaine de genres.

Certaines organisations prennent le parti de tous les énumérer. Sur Facebook, par exemple, quand l’utilisateur clique sur le champ “Autre”, apparaît une liste déroulante exhaustive.

D’autres services comme Etsy proposent une solution alternative, à savoir ajouter un champ libre. Les réponses écrites demandent un plus long travail de traitement, mais au moins l’utilisateur est libre de répondre ce qu’il veut.

Dans un cas comme dans l’autre, un troisième champ “Je ne souhaite pas répondre” est recommandé.

Navigation

La navigation est au cœur de l’expérience utilisateur. A quoi beau créer un site moderne et esthétique, si seule une minorité d’internautes peut facilement le visiter ?

Voici quelques conseils pour une navigation conviviale et sans effort, afin qu’un maximum d’internautes puisse s’orienter aisément :

  • Veillez à ce que la navigation puisse se faire au clavier (avec les touches Tabulation et Entrée)
  • Privilégiez un menu simple avec des entrées claires, évitez les sous-menus
  • Faites-en sorte qu’un bouton de contact soit toujours visible en utilisant un sticky menu, par exemple
  • Proposez plusieurs moyens de vous contacter : par email, par téléphone, et pourquoi pas via les réseaux sociaux ?
  • Prévoyez des zones cliquables larges et suffisamment espacées

« Résoudre pour un, étendre à tous »

Le design inclusif a pour objectif d’offrir à tous les utilisateurs une expérience identique en termes de contenu, de qualité et d’efficacité. Tenir compte de toute la diversité humaine est un exercice complexe mais passionnant, qui stimule la créativité !
Pour arriver à ces fins, le designer doit faire preuve d’une profonde empathie, adopter des personas consistants et s’entourer d’une équipe aussi variée que les utilisateurs finaux du site.
Il sera ainsi en position de reconnaître l’exclusion, apprendre de la diversité et enfin de résoudre pour un, et étendre à tous.

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Plus d’actus Web & Print.