Simulic
Français

Tests d’utilisabilité et d’accessibilité – utilisateurs simulés et WCAG

InformatiqueApplications numériques17–18 ans

Chargement…

Utiliser avec ma classe ✨ Personnaliser avec l'IA Signaler un problème

Des utilisateurs simulés aux besoins différents (un utilisateur ordinaire, une personne âgée malvoyante, une personne qui a un tremblement de la main, une personne aveugle avec lecteur d’écran, une personne qui n’utilise que le clavier, une personne sourde et une personne daltonienne) font la même tâche sur deux interfaces, A et B. La simulation mesure le temps, les erreurs, les actions et le taux de réussite et dessine chaque appui sur les boutons. Modifiez la taille des boutons, l’espacement, la taille du texte, les couleurs, les libellés, la profondeur du menu, le texte alternatif, l’ordre des titres, l’ordre de lecture et les sous-titres, puis testez de nouveau ; le vérificateur d’accessibilité calcule le contraste et contrôle des critères WCAG 2.2.

Leçon : Conception d’interfaces centrée sur l’utilisateur : tests d’utilisabilité, accessibilité et critères WCAG

Ce qu’elle montre

L’utilisabilité mesure la rapidité et la fiabilité avec lesquelles on réalise une tâche avec une interface ; l’accessibilité signifie que les personnes handicapées peuvent aussi l’utiliser. Les concepteurs testent avec des utilisateurs aux besoins variés et mesurent le temps, les erreurs et la réussite. Le temps d’appui suit la loi de Fitts : les cibles petites et lointaines prennent plus de temps et sont plus souvent manquées. Les règles WCAG 2.2 fixent des critères vérifiables : contraste du texte d’au moins 4,5:1, texte alternatif pour les images et les boutons icônes, titres dans l’ordre, ordre de lecture logique, sous-titres des vidéos, cibles d’au moins 24 px et aucune information donnée par la seule couleur.

Mode d’emploi

Choisissez une Tâche et un Groupe d’utilisateurs, puis le design à modifier avec A ou B. Changez Taille des boutons, Espacement, Taille du texte, Profondeur du menu, les couleurs, Libellés des boutons, Titres et Ordre de lecture, et cochez Texte alternatif, Sous-titres vidéo ou État signalé par la couleur seule. Le tableau et le graphique se mettent à jour aussitôt ; cliquez sur Lancer le test pour animer un nouvel échantillon d’utilisateurs. Comparez les deux designs dans le Vérificateur d’accessibilité et lisez la liste du lecteur d’écran.

Paramètres modifiables

  • Tâche Prolonger un livre en retard, Trouver les horaires du jour, Regarder la vidéo d’aide
  • Utilisateurs simulés Tous les groupes, Utilisateur ordinaire, Personne âgée malvoyante, Tremblement de la main, Personne aveugle (lecteur d’écran), Clavier seulement, Personne sourde, Daltonisme rouge-vert
  • Utilisateurs par groupe 5–40 utilisateurs
  • Designs de départ A mauvais, B amélioré, A et B identiques (à vous d’améliorer B)
  • Design modifié Design A, Design B
  • Afficher le vérificateur d’accessibilité

Questions à explorer

  1. Pourquoi des boutons plus grands aident-ils davantage la personne au tremblement que l’utilisateur ordinaire ?
  2. Le texte gris #9e9e9e sur fond blanc atteint-il le niveau AA, et comment le corriger ?
  3. Pourquoi des boutons icônes sans texte alternatif font-ils abandonner les utilisateurs de lecteur d’écran ?

Simulations associées