Pensez à votre site Web ou à votre application préférés. Qu'est-ce qui en fait votre favori ? Pensez maintenant à 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 dans 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 quantité de sommeil dont il a bénéficié la nuit précédente, de son é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 infinies.
Conception inclusive
Comment pouvons-nous répondre à tous les besoins potentiels des utilisateurs en même temps ? Entrez dans la conception inclusive. La conception inclusive utilise une approche centrée sur l'humain qui associe l'inclusivité, l'usabilité 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 se concentrent sur la conception pour un individu ou un cas d'utilisation spécifique, puis sur l'extension de cette conception à d'autres.
Il existe sept principes de conception inclusive axés sur l'accessibilité :
- Offrez une expérience comparable : assurez-vous que votre interface offre une expérience égale pour tous, afin que les utilisateurs puissent 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 de qualité aux utilisateurs, quelles que soient leurs circonstances.
- Soyez cohérent: utilisez des conventions familières et appliquez-les de manière logique.
- Donnez le contrôle : assurez-vous que les utilisateurs peuvent accéder aux contenus et interagir avec eux de la manière qui leur convient le mieux.
- Proposez un choix: envisagez de proposer aux utilisateurs différentes manières d'effectuer des tâches, en particulier celles qui sont complexes ou non standards.
- Priorisez le contenu : aidez les utilisateurs à se concentrer sur les tâches, fonctionnalités et informations principales en organisant ces éléments dans l'ordre souhaité dans le contenu et la mise en page.
- Ajouter 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 pour différents utilisateurs.
Personas
Lors du développement d'une nouvelle conception ou d'une nouvelle fonctionnalité, de nombreuses équipes s'appuient sur des personas des utilisateurs 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 l'expérience utilisateur.
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 à focaliser les décisions concernant les composants du site en ajoutant une couche de considérations concrètes à la conversation pour aider à aligner la stratégie et à créer des objectifs axés sur des groupes d'utilisateurs spécifiques.
Intégrer les handicaps
"Les gens sont tous différents. Je ne peux parler que de mon expérience. Lorsque vous rencontrez une personne sourde, vous rencontrez une personne sourde, et non tous les sourds."
Meryl Evans, de l'ID24, parle de Deaf Tech: Travel Through Time from Past to Future.
Les personas peuvent être utilisés comme outil de conception inclusive lorsque vous incluez des personnes ayant un handicap dans vos personas. Il existe de nombreuses façons de procéder. Vous pouvez créer des personnages spécifiques aux handicaps, ajouter des handicaps à des personas 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 incorporez des personnes ayant un handicap dans vos personas, ils ne doivent pas être basés sur des personnes réelles ni sur des stéréotypes. Et les personnages ne se substituent jamais aux tests utilisateur.
- Nom: Jane Bennet
- Âge : 57 ans
- Lieu: Essex, Royaume-Uni
- Profession : ingénieur UX
- Handicap: tremblements de la main dus à la maladie de Parkinson à apparition jeune.
- Objectifs: utilisez la saisie vocale pour faciliter l'ajout de suggestions de code et trouvez des équipements de cyclisme en ligne en un clin d'œil.
- Frustrations: sites Web non compatibles avec uniquement le clavier ; 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 que le site de son entreprise reste pertinent. 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 tout le monde est incontournable dans le service en cas de panne inattendue.
La perte de ses capacités motrices fines due aux tremblements l'empêche de plus en plus d'utiliser une souris. Elle utilisait de plus en plus le clavier pour naviguer sur le Web. Jane a toujours été dévouée à sa forme physique. Elle aime le cyclisme sur route et le BMX. L'année dernière, elle a été diagnostiquée souffrant de la maladie de Young Onset l'année dernière, ce qui la rend encore plus difficile.
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 une arme à double tranchant, car ils peuvent susciter la sympathie ou l'empathie. Ils peuvent dépendre de l'individu, 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 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 découvrir leurs expériences de première main.
"Je pense que nous devons être totalement honnêtes et dire que toute activité de simulation n'a pas d'impact sur certains des points les plus importants que nous souhaitons que les personnes voyantes comprennent dans leur cœur et dans leur tête. 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 plusieurs années d'expérience dans le domaine de l'ingénierie de l'usabilité et 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 de 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. C'est un impact énorme 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 à l'aide de 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 utiliser le système.
- Prévention et états des erreurs : les commandes interactives comportent des instructions persistantes et pertinentes pour aider à éviter les erreurs et fournir aux utilisateurs des états d'erreur clairs qui indiquent les problèmes et comment les résoudre chaque fois qu'une erreur est renvoyée.
- Contraste et lisibilité : les utilisateurs peuvent facilement distinguer et lire le texte et d'autres informations pertinentes.
- 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. La relation entre chaque élément et le système dans son ensemble est claire.
- Calendrier et préservation: 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. Ces éléments ne doivent pas distraire ni nuire aux utilisateurs.
- 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 avez une compréhension de base de ces heuristiques d'accessibilité, vous pouvez les appliquer à un 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 rassemblez plusieurs perspectives.
Voici un exemple d'examen 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 pt) | Passes (+1 point) | Échecs (-1 pt) | N/A (0 pt) |
|---|---|---|---|---|
| Un indicateur clair et visible est-il défini sur tous les éléments actifs lorsqu'ils reçoivent l'attention ? | ||||
| La page comporte-t-elle un titre pertinent, avec des informations spécifiques à la page en premier ? | ||||
| L'élément de titre de la page et le H1 sont-ils identiques ou similaires ? | ||||
| Y a-t-il des en-têtes significatifs pour chaque section principale ? | ||||
| Le but des liens est-il défini à partir du texte du lien seul ou de son contexte immédiat ? | ||||
| Un lien de désactivation est-il fourni en haut de la page et est-il visible lorsque l'utilisateur est en mode focus ? | ||||
| L'organisation des éléments de navigation facilite-t-elle la navigation ? |
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 additionnés pour chaque point de contrôle. À ce stade, vous pouvez décider de la manière de remédier aux problèmes détectés ou de corriger les omissions qui sont essentielles pour favoriser 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é.
En général, les annotations servent à expliquer les choix de création 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 maquettes fonctionnelles aux maquettes haute fidélité. Ils peuvent inclure des flux utilisateur, des états conditionnels et des fonctionnalités. Ils utilisent souvent des symboles et des libellés pour simplifier le processus et garder la conception comme objectif principal.
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 devriez avoir le choix entre plusieurs kits de démarrage d'annotation d'accessibilité. Ou, si vous préférez, vous pouvez créer votre propre série. Dans les deux cas, vous devez décider des informations à communiquer à l'équipe de transfert et du format le plus adapté.
Voici quelques éléments à prendre en compte pour les annotations d'accessibilité :
- Couleur : inclut les ratios de contraste de toutes les différentes combinaisons de couleurs de la palette.
- Boutons et liens : identifiez les états par défaut, en survol, actif, sélectionné et désactivé.
- Liens de redirection : mettent en évidence les aspects de conception cachés et visibles, ainsi que les liens vers lesquels ils redirigent sur la page.
- Images et icônes: ajoutez des recommandations de texte alternatifs pour les images et les icônes essentielles.
- Audio et vidéo : mettez en avant les zones et les liens correspondant aux sous-titres, aux transcriptions et aux 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 focus.
- Clavier : identifiez le point de départ du focus (arrêt alpha) et l'ordre des tabulations suivant.
- Formulaires : ajoutez des libellés de champ, du texte d'aide, des messages d'erreur et des messages de réussite.
- Noms accessibles : identifiez la manière dont la technologie d'assistance doit reconnaître l'élément.