Pensez à votre site Web ou votre application préférés. Qu'est-ce qui en fait votre application préférée ? Maintenant, pensez à un site web ou à une application que vous n'aimez pas ? La façon dont les utilisateurs interagissent avec votre conception et leur expérience sur votre site Web et dans votre application peut varier.
Cette expérience peut changer en fonction de l'heure, du type d'appareil utilisé, du nombre d'heures qu'il a dormi la nuit précédente, des problèmes de santé, de l'utilisation d'une technologie d'assistance, etc. Avec près de huit milliards de personnes dans le monde, les possibilités de la façon dont les personnes utilisent et expérimentent vos conceptions sont illimitées.
Conception inclusive
Comment pouvons-nous répondre à tous les besoins potentiels des utilisateurs à la fois ? Entrez dans une conception inclusive. La conception inclusive utilise une approche centrée sur l’humain qui associe l’inclusion, la facilité d’utilisation et l’accessibilité en un seul élément.
Contrairement à la conception universelle, qui se concentre sur une conception unique que le plus grand nombre de personnes peut utiliser, les principes de conception inclusive sont axés sur la conception pour un individu ou un cas d'utilisation spécifique, puis sur l'extension de cette conception à d'autres personnes.
Il existe sept principes de conception inclusive axés sur l'accessibilité:
- Proposez une expérience comparable: assurez-vous que votre interface offre une expérience identique à tous les utilisateurs, afin que les utilisateurs puissent effectuer les tâches d'une manière qui répond à leurs besoins sans nuire à la qualité du contenu.
- Réfléchissez à la situation: assurez-vous que votre interface offre une expérience utilisateur de qualité aux internautes, quelle que soit leur situation.
- Soyez cohérent: utilisez des conventions connues et appliquez-les de manière logique.
- Donner 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 le mieux.
- Offrez un choix: envisagez de proposer aux utilisateurs différentes méthodes pour effectuer 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 les organisant dans l'ordre de leur choix dans le contenu et la mise en page.
- Offrir une valeur ajoutée: 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
Lors du développement d'une nouvelle conception ou d'une nouvelle fonctionnalité, de nombreuses équipes s'appuient sur des personnages 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 recherches quantitatives et qualitatives sur les 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 aident à cibler les décisions concernant les composants du site en ajoutant une couche de considération du monde réel à la conversation pour aider à aligner la stratégie et à créer des objectifs axés sur des groupes d'utilisateurs spécifiques.
Intégrer des handicaps
"Les gens sont tous différents. Je ne peux parler que de mon expérience. Lorsque vous rencontrez une personne sourde, vous rencontrez donc une personne sourde, 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 un outil de conception inclusive lorsque vous intégrez des personnes handicapées à vos personnages. Il existe de nombreuses façons de le faire. Vous pouvez créer des personas spécifiques au handicap, ajouter des handicaps à des personnages existants ou même créer un spectre de personnages pour refléter la réalité dynamique des handicaps liés à la situation, temporaires et permanents.
Quelle que soit la façon dont vous intégrez des personnes handicapées à vos personnages, elles ne doivent pas être basées sur des personnes réelles ou des stéréotypes. Et les personas ne remplacent jamais les tests utilisateur.
- Nom: Jane Bennet
- Âge: 57 ans
- Lieu: Essex, Royaume-Uni
- Profession: ingénieur UX
- Handicap: tremblement de la main dû à la maladie de Parkinson
- Objectifs: utiliser la saisie vocale pour ajouter plus facilement des suggestions de code ; trouver du matériel de cyclisme en ligne en un minimum d'efforts.
- Frustrations: sites Web ne prenant pas en charge uniquement le clavier ; applications de conception comportant de petites zones pour l'interaction tactile.
En tant qu'ingénieure UX, Jane conçoit et crée des pages essentielles à la pertinence du site de son entreprise. Elle soutient de nombreux membres de l’équipe tout au long de la journée. Elle est la reine de l'extinction des incendies techniques, et elle est la référence de tous les membres du service en cas de panne inattendue.
Lorsqu'elle perd ses capacités motrices fines à cause de tremblements, elle a de plus en plus de mal à utiliser la souris. Elle s'appuie de plus en plus sur le clavier pour naviguer sur le Web. Jane a toujours été dédiée à la forme physique. Elle adore la course sur route et le BMX. Cela a été d'autant plus grave lorsqu'on lui a diagnostiqué une maladie de Parkinson précoce l'année dernière.
Simulateurs d'invalidité
Soyez extrêmement prudent lorsque vous utilisez des simulateurs de handicap pour émuler ou compléter vos personas.
Les simulateurs de handicap sont une épée à double tranchant, dans la mesure où ils peuvent susciter la sympathie ou l'empathie. Ils peuvent dépendre 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é n'utilisent pas les outils de simulation de handicap et recommandent de rechercher des films, des démonstrations, des tutoriels et d'autres contenus créés par des personnes ayant un handicap, et de se renseigner directement sur leurs expériences.
"Je pense que nous devons être tout à fait honnêtes : toute activité de simulation n'a pas d'impact sur certaines des compréhensions les plus importantes que les personnes voyantes doivent connaître dans leur cœur et dans leur tête. La cécité n'est pas la caractéristique qui nous définit, que les malentendus et les attentes faibles en la matière sont notre plus grand obstacle.
Ces malentendus créent des obstacles artificiels qui nous empêchent de participer pleinement, et ces fausses limites s'intègrent à quelque chose qui nous retient."
Mark Riccobono, président de la Fédération nationale des aveugles
Heuristique d'accessibilité
Envisagez d'ajouter des heuristics à votre workflow lorsque vous créez vos personas et vos conceptions. L'heuristique est une règle simple de conception d'interaction, introduite en 1990 par Jakob Nielsen et Rolf Molich. Ces dix principes ont été développés sur la base d'années d'expérience dans le domaine de l'ingénierie de la facilité d'utilisation. Depuis, ils sont utilisés dans des programmes de conception et d'interaction homme-machine.
En 2019, l'équipe de conception de Deque a créé et partagé un nouvel ensemble d'heuristiques axées sur l'accessibilité numérique. D'après 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. L'impact est considérable avant même qu'une seule ligne de code ne soit écrite.
À l'instar de l'ensemble initial d'heuristiques, il existe dix heuristiques d'accessibilité à prendre en compte lors de la planification de votre conception.
- Méthodes et méthodes d'interaction: les utilisateurs peuvent interagir efficacement avec le système à l'aide du mode de saisie de leur choix (souris, clavier, commandes tactiles, etc.).
- Navigation et orientation: les utilisateurs peuvent facilement 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 comprendre le fonctionnement du système.
- Prévention et états des erreurs: les commandes interactives comportent des instructions persistantes et pertinentes pour vous aider à éviter les erreurs. Elles indiquent clairement aux utilisateurs quels sont les problèmes et comment les résoudre.
- Contraste et lisibilité: les utilisateurs peuvent facilement distinguer et lire le texte et d'autres informations importantes.
- Langue et lisibilité: les utilisateurs peuvent facilement lire et comprendre le contenu.
- Prévisibilité et cohérence: les utilisateurs peuvent prédire l'objectif de chaque élément. Il est clair comment chaque élément est lié au système dans son ensemble.
- Durée et conservation: les utilisateurs disposent de suffisamment de temps pour effectuer leurs tâches et ne perdent pas d'informations s'ils ont terminé leur session (par exemple, au cours d'une session).
- Mouvement et clignotement: les utilisateurs peuvent bloquer les éléments de la page qui se déplacent, clignotent ou sont animés. Les utilisateurs ne doivent pas être distraits ni blessés d’une quelconque autre manière par ces éléments.
- Alternatives visuelles et auditives: les utilisateurs peuvent accéder à des alternatives textuelles pour tout contenu visuel ou auditif qui véhicule des informations.
Une fois que vous avez compris les bases de ces heuristiques d'accessibilité, vous pouvez les appliquer à un persona ou à une conception à l'aide de la feuille de calcul sur l'heuristique d'accessibilité et en suivant les instructions fournies. Cet exercice est plus éclairant lorsque vous recueillez plusieurs perspectives.
Voici un exemple d'examen heuristique d'accessibilité pour le point de contrôle de navigation et d'orientation:
Une fois que tous les membres de l'équipe ont examiné la page ou le composant et effectué leur examen heuristique d'accessibilité, les totaux sont additionnés pour chaque point de contrôle. À ce stade, vous pouvez décider comment résoudre les problèmes détectés ou corriger des omissions essentielles pour assurer l'accessibilité numérique.
Annotations d'accessibilité
Avant de transmettre votre conception à l'équipe de développement, vous devez envisager d'ajouter des annotations d'accessibilité. Les annotations, en général, sont utilisées pour 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 l'aide 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 maquettes fonctionnelles aux maquettes haute-fidélité. Elles peuvent inclure des parcours utilisateur, des états conditionnels et des fonctionnalités. Ils utilisent souvent des symboles et des étiquettes pour rationaliser le processus et garder la conception au centre de l'attention.
Les exemples d'illustrations de conception suivants proviennent du kit d'annotations d'accessibilité d'Indeed.com pour Figma.
Selon votre programme de conception, vous devez faire votre choix parmi plusieurs kits de démarrage pour les annotations d'accessibilité. Vous pouvez également créer votre propre ensemble, si vous le souhaitez. Dans les deux cas, vous devez décider quelles informations doivent être communiquées à l'équipe de transfert et quel format fonctionne le mieux.
Voici quelques points à prendre en compte pour les annotations d'accessibilité:
- Couleur: incluez les rapports de contraste de toutes les différentes combinaisons de couleurs de la palette.
- Boutons et liens: identifiez les états par défaut, pointer, actifs, sélectionnés et désactivés.
- Ignorer les liens: mettez en évidence les aspects graphiques masqués/visibles ainsi que les liens vers lesquels ils renvoient sur la page.
- Images et icônes: ajoutez des recommandations de texte alternatives pour les images/icônes essentielles.
- Audio et vidéo: mettez en surbrillance les zones/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 à l'aide du langage HTML ou ARIA.
- Composants interactifs: identifiez les éléments cliquables, les effets de pointage et la zone de mise au point.
- Clavier: identifiez l'endroit où le curseur doit commencer (arrêt alpha) et l'ordre de tabulation suivant.
- Forms: ajoutez des libellés de champ, un texte d'aide, des messages d'erreur et des messages de réussite.
- Noms accessibles: indiquez comment la technologie d'assistance doit reconnaître l'élément.