Simulic
Español

Pruebas de usabilidad y accesibilidad – usuarios simulados y WCAG

InformáticaAplicaciones digitalesEdades 17–18

Cargando…

Usar con mi clase ✨ Personalizar con IA Informar de un problema

Usuarios simulados con necesidades distintas (un usuario típico, una persona mayor con baja visión, una persona con temblor en la mano, una persona ciega que usa lector de pantalla, alguien que solo usa el teclado, una persona sorda y una persona daltónica) hacen la misma tarea en dos diseños de interfaz, A y B. La simulación mide el tiempo, los errores, las acciones y la tasa de éxito y dibuja cada toque sobre los botones. Cambia el tamaño de los botones, el espaciado, el tamaño de letra, los colores, las etiquetas, la profundidad del menú, el texto alternativo, el orden de los encabezados, el orden de lectura y los subtítulos y vuelve a probar; el verificador de accesibilidad calcula el contraste y revisa criterios de WCAG 2.2.

Lección: Diseño de interfaces centrado en el usuario: pruebas de usabilidad, accesibilidad y criterios WCAG

Qué muestra

La usabilidad es la rapidez y la seguridad con que las personas completan tareas con una interfaz; la accesibilidad significa que también pueden usarla las personas con discapacidad. Los diseñadores prueban con usuarios de necesidades distintas y miden tiempo, errores y éxito. El tiempo de toque sigue la ley de Fitts: los objetivos pequeños y lejanos cuestan más y se fallan más. Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.2) fijan criterios comprobables: contraste de texto de al menos 4,5:1, texto alternativo en imágenes y botones de icono, encabezados en orden, orden de lectura lógico, subtítulos en los vídeos, objetivos de al menos 24 px y ninguna información transmitida solo con color.

Cómo usarla

Elige una Tarea y un Grupo de usuarios y decide qué diseño editar con A o B. Cambia Tamaño del botón, Espaciado, Tamaño de letra, Profundidad del menú, los colores, Etiquetas de botón, Encabezados y Orden de lectura, y marca Texto alternativo, Subtítulos del vídeo o Estado solo con color. La tabla y el gráfico se actualizan al instante; pulsa Ejecutar prueba para animar una nueva muestra de usuarios. Compara ambos diseños en el Verificador de accesibilidad y lee la lista del lector de pantalla.

Parámetros que puedes cambiar

  • Tarea Renovar un libro vencido, Buscar el horario de hoy, Ver el vídeo de ayuda
  • Usuarios simulados Todos los grupos, Usuario típico, Persona mayor con baja visión, Persona con temblor en la mano, Persona ciega (lector de pantalla), Solo teclado, Persona sorda, Daltonismo rojo-verde
  • Usuarios por grupo 5–40 usuarios
  • Diseños iniciales A malo, B mejorado, A y B iguales (mejora B tú)
  • Diseño en edición Diseño A, Diseño B
  • Mostrar el verificador de accesibilidad

Preguntas para explorar

  1. ¿Por qué agrandar los botones ayuda más a la persona con temblor que al usuario típico?
  2. ¿El texto gris #9e9e9e sobre blanco cumple el nivel AA de WCAG y cómo lo corregirías?
  3. ¿Por qué los botones solo con icono y sin texto alternativo hacen que se rinda quien usa lector de pantalla?

Simulaciones relacionadas