Pensez à votre site Web ou application préférés. Qu'est-ce qui vous plaît le plus ? Maintenant, pensez à un site Web ou à une application que vous n'aimez pas. Qu'est-ce qui ne vous plaît pas ? La façon dont les utilisateurs interagissent avec votre conception et leur expérience sur votre site Web et votre application peuvent varier.
Cette expérience peut varier en fonction de l'heure de la journée, du type d'appareil utilisé, de la qualité du sommeil de la nuit précédente, de l'état de santé, de l'utilisation d'une technologie d'assistance, et bien plus encore. Avec près de huit milliards de personnes dans le monde, les possibilités d'utilisation et d'expérience de vos conceptions sont illimitées.
Conception inclusive
Comment répondre à tous les besoins potentiels des utilisateurs à la fois ? Entrez dans le monde de la conception inclusive. La conception inclusive utilise une approche centrée sur l'humain qui combine l'inclusivité, la facilité d'utilisation et l'accessibilité.
Contrairement à la conception universelle, qui se concentre sur une conception unique que le plus grand nombre de personnes possible peut utiliser, les principes de conception inclusive sont axés sur la conception pour une personne ou un cas d'utilisation spécifiques, puis sur l'extension de cette conception à d'autres.
Voici sept principes de conception inclusive axés sur l'accessibilité :
- Offrez une expérience comparable : assurez-vous que votre interface offre une expérience équitable à tous les utilisateurs. Ils pourront ainsi accomplir des tâches de manière adaptée à leurs besoins, sans compromettre la qualité du contenu.
- Tenez compte de la situation : assurez-vous que votre interface offre une expérience intéressante aux utilisateurs, quelles que soient leurs circonstances.
- Soyez cohérent : utilisez des conventions connues et appliquez-les de manière logique.
- Donnez le contrôle : assurez-vous que les utilisateurs peuvent accéder au contenu et interagir avec celui-ci de la manière qui leur convient.
- Offrez le choix : envisagez de proposer différentes façons d'accomplir des tâches, en particulier celles qui sont complexes ou non standards.
- Hiérarchisez le contenu : aidez les utilisateurs à se concentrer sur les tâches, les fonctionnalités et les informations essentielles en organisant ces éléments dans l'ordre de votre choix dans le contenu et la mise en page.
- Ajoutez de la valeur : réfléchissez à l'objectif et à l'importance des fonctionnalités, et à la façon dont elles améliorent l'expérience des différents utilisateurs.
Personas
Lorsqu'elles développent une nouvelle conception ou fonctionnalité, de nombreuses équipes s'appuient sur des personas utilisateur pour les guider tout au long du processus. Les personas sont des personnages fictifs qui utilisent vos produits numériques, souvent basés sur des études quantitatives et qualitatives des utilisateurs.
Les personas offrent également un moyen rapide et peu coûteux de tester et de hiérarchiser ces fonctionnalités tout au long du processus de conception et de développement. Ils permettent de concentrer les décisions concernant les composants du site en ajoutant une couche de réflexion concrète à la conversation pour aider à aligner la stratégie et à créer des objectifs axés sur des groupes d'utilisateurs spécifiques.
Intégrer le handicap
"Chaque personne est différente. Je ne peux parler que de ma propre expérience. Lorsque vous rencontrez une personne sourde, vous en avez rencontré une, mais pas toutes."
Meryl Evans, de la conférence ID24 Deaf Tech: Travel Through Time from Past to Future.
Les personas peuvent être utilisés comme outil de conception inclusive lorsque vous intégrez des personnes handicapées dans vos personas. Il existe de nombreuses façons de procéder. Vous pouvez créer des personas spécifiques au handicap, ajouter des handicaps à des personas d'utilisateur existants ou même créer un spectre de personas pour refléter la réalité dynamique des handicaps situationnels, temporaires et permanents.
Quelle que soit la manière dont vous intégrez les personnes handicapées dans vos personas, ils ne doivent pas être basés sur des personnes réelles ni sur des stéréotypes. Les personas ne remplacent jamais les tests utilisateur.
- Nom : Jane Bennet
- Âge : 57 ans
- Lieu : Essex, Royaume-Uni
- Profession : ingénieur UX
- Handicap : tremblements des mains dus à la maladie de Parkinson précoce
- Objectifs : utiliser la saisie vocale pour ajouter plus facilement des suggestions de code ; trouver des équipements de vélo en ligne avec un minimum de frappes au clavier.
- Points de friction : sites Web non compatibles avec la navigation au clavier uniquement ; applications de conception avec de petites zones d'interaction tactile.
En tant qu'ingénieure UX, Jane conçoit et crée des pages essentielles pour maintenir la pertinence du site de son entreprise. Elle aide de nombreux membres de l'équipe tout au long de la journée. Elle est la reine de la résolution des problèmes techniques et la personne vers laquelle tout le monde se tourne en cas d'imprévu.
Elle perd sa motricité fine à cause des tremblements, ce qui lui rend de plus en plus difficile l'utilisation d'une souris. Elle s'appuie de plus en plus sur le clavier pour naviguer sur le Web. Jane a toujours été très attachée à sa forme physique. Elle adore les courses sur route et le BMX. C'est donc un coup dur pour elle d'avoir été diagnostiquée l'année dernière avec la maladie de Parkinson précoce.
Simulateurs de handicap
Soyez extrêmement prudent lorsque vous utilisez des simulateurs de handicap pour émuler ou compléter vos personas.
Les simulateurs de handicap sont à double tranchant, car ils peuvent susciter la sympathie ou l'empathie. Cela dépend de la personne, du contexte dans lequel le simulateur est utilisé et de nombreux autres facteurs incontrôlables. De nombreux défenseurs de l'accessibilité s'opposent à l'utilisation d'outils de simulation de handicap. Ils recommandent de rechercher des films, des démonstrations, des tutoriels et d'autres contenus créés par des personnes en situation de handicap, et de découvrir leurs expériences de première main.
"Je pense que nous devons être tout à fait honnêtes : les activités de simulation n'ont pas d'impact sur certaines des connaissances les plus importantes que nous voulons que les personnes voyantes intègrent. La cécité n'est pas la caractéristique qui nous définit. Les malentendus et les faibles attentes concernant la cécité sont notre plus grand obstacle.
Ces malentendus créent des barrières artificielles qui nous empêchent de participer pleinement, et ces fausses limites se transforment en quelque chose qui nous freine."
Mark Riccobono, Président de la Fédération nationale des aveugles.
Heuristiques d'accessibilité
Envisagez d'ajouter des heuristiques à votre workflow lorsque vous créez vos personas et vos conceptions. Les heuristiques sont des règles de conception d'interaction, introduites en 1990 par Jakob Nielsen et Rolf Molich. Ces dix principes ont été développés sur la base de nombreuses années d'expérience dans le domaine de l'ingénierie de l'usabilité. Ils sont utilisés dans les programmes de conception et d'interaction homme-machine depuis.
En 2019, l'équipe de conception de Deque a créé et partagé un nouvel ensemble d'heuristiques axées sur l'accessibilité numérique. Selon leurs recherches, jusqu'à 67 % de tous les bugs d'accessibilité d'un site Web ou d'une application peuvent être évités lorsque l'accessibilité fait partie du processus de conception. Il s'agit d'un impact considérable qui peut être obtenu avant même d'écrire une seule ligne de code.
Comme pour l'ensemble d'heuristiques d'origine, il existe dix heuristiques d'accessibilité à prendre en compte lors de la planification de votre conception.
- Méthodes et modalités d'interaction : les utilisateurs peuvent interagir efficacement avec le système en utilisant la méthode de saisie de leur choix (souris, clavier, écran tactile, etc.).
- Navigation et orientation : les utilisateurs peuvent naviguer, trouver du contenu et déterminer où ils se trouvent à tout moment dans le système.
- Structure et sémantique : les utilisateurs peuvent comprendre la structure du contenu de chaque page et savoir comment interagir avec le système.
- Prévention des erreurs et états : les commandes interactives comportent des instructions persistantes et pertinentes pour éviter les erreurs. Elles fournissent également aux utilisateurs des états d'erreur clairs qui indiquent les problèmes et comment les résoudre chaque fois que des erreurs sont renvoyées.
- Contraste et lisibilité : les utilisateurs peuvent facilement distinguer et lire le texte et d'autres informations importantes.
- Langue et lisibilité : les utilisateurs peuvent lire et comprendre facilement le contenu.
- Prévisibilité et cohérence : les utilisateurs peuvent prédire l'objectif de chaque élément. La relation entre chaque élément et le système dans son ensemble est claire.
- Timing et conservation : les utilisateurs disposent de suffisamment de temps pour accomplir leurs tâches et ne perdent pas d'informations si leur temps (c'est-à-dire une session) est écoulé.
- Mouvement et clignotement : les utilisateurs peuvent arrêter les éléments de la page qui bougent, clignotent ou sont animés. Les utilisateurs ne doivent pas être distraits ni subir d'autres préjudices à cause de ces éléments.
- Alternatives visuelles et auditives : les utilisateurs peuvent accéder à des alternatives textuelles pour tout contenu visuel ou auditif qui transmet des informations.
Une fois que vous aurez compris les bases de ces heuristiques d'accessibilité, vous pourrez les appliquer à une persona ou à une conception à l'aide de la feuille de calcul des heuristiques d'accessibilité et en suivant les instructions fournies. Cet exercice est plus instructif lorsque vous recueillez plusieurs points de vue.
Voici un exemple d'évaluation heuristique de l'accessibilité pour le point de contrôle de la navigation et de l'orientation :
| Points de contrôle pour la navigation et l'orientation | Excellent (+2 pts) | Passes (+1 pt) | Échecs (-1 pt) | N/A (0 pt) |
|---|---|---|---|---|
| Un indicateur clair et visible est-il défini sur tous les éléments actifs lorsqu'ils sont sélectionnés ? | ||||
| Le titre de la page est-il pertinent et les informations spécifiques à la page sont-elles placées en premier ? | ||||
| L'élément de titre de la page et la balise H1 sont-ils identiques ou similaires ? | ||||
| Chaque section principale comporte-t-elle des titres pertinents ? | ||||
| L'objectif des liens est-il défini par le texte du lien seul ou par son contexte immédiat ? | ||||
| Un lien d'accès rapide est-il fourni tout en haut de la page et est-il visible lorsque l'utilisateur le sélectionne ? | ||||
| L'organisation des éléments de navigation facilite-t-elle l'orientation ? |
Une fois que tous les membres de l'équipe ont examiné la page ou le composant et effectué leur examen heuristique de l'accessibilité, les totaux sont calculés pour chaque point de contrôle. À ce stade, vous pouvez décider de corriger les problèmes détectés ou les omissions qui sont essentielles pour l'accessibilité numérique.
Annotations d'accessibilité
Avant de transmettre votre conception à l'équipe de développement, pensez à ajouter des annotations d'accessibilité.
Les annotations servent généralement à expliquer les choix créatifs et à décrire différents aspects de la conception. Les annotations d'accessibilité se concentrent sur les domaines dans lesquels les développeurs peuvent faire des choix programmatiques plus accessibles avec les conseils de l'équipe de conception ou d'un spécialiste de l'accessibilité.
Les annotations d'accessibilité peuvent être appliquées à n'importe quelle étape du processus de conception, des wireframes aux maquettes haute fidélité. Ils peuvent inclure des parcours utilisateur, des états conditionnels et des fonctionnalités. Ils utilisent souvent des symboles et des libellés pour simplifier le processus et se concentrer sur la conception.
Les exemples d'illustrations de conception suivants proviennent du kit d'annotations d'accessibilité Indeed.com pour Figma.
Selon votre programme de conception, vous devriez avoir le choix entre plusieurs kits de démarrage pour les annotations d'accessibilité. Si vous le souhaitez, vous pouvez également créer votre propre ensemble. Dans les deux cas, vous devez décider quelles informations doivent être communiquées à l'équipe de transfert et quel format convient le mieux.
Voici quelques domaines à prendre en compte pour les annotations d'accessibilité :
- Couleur : incluez les rapports de contraste de toutes les combinaisons de couleurs de la palette.
- Boutons et liens : identifiez les états par défaut, au survol, actif, sélectionné et désactivé.
- Liens d'accès rapide : mettez en évidence les aspects de conception cachés et visibles, et les liens vers lesquels ils renvoient sur la page.
- Images et icônes : ajoutez des recommandations de texte alternatif pour les images et icônes essentielles.
- Audio et vidéo : mettez en avant les zones et les liens pour les sous-titres, les transcriptions et les descriptions audio.
- Titres : ajoutez des niveaux programmatiques et incluez tout ce qui ressemble à un titre.
- Points de repère : mettez en évidence les différentes sections de la conception avec HTML ou ARIA.
- Composants interactifs : identifiez les éléments cliquables, les effets de survol et la zone de sélection.
- Clavier : identifiez où la sélection doit commencer (arrêt alpha) et l'ordre de tabulation suivant.
- Formulaires : ajoutez des libellés de champ, du texte d'aide, des messages d'erreur et des messages de réussite.
- Noms accessibles : ils indiquent comment la technologie d'assistance doit reconnaître l'élément.