Revisar y validar el diseño antes de entregarlo: pruebas de estrés y personas usuarias

Hasta ahora has aprendido a tomar buenas decisiones de diseño. Esta lección trata de algo distinto: comprobar que esas decisiones resisten antes de entregarlas. Un diseño puede verse impecable a 1440 píxeles, con textos cortos y sin errores, y desmoronarse con zoom, con un nombre largo o sin color. La mayoría de esas pruebas se hacen en Figma o en un prototipo en pocos minutos, y detectan los problemas cuando corregirlos solo cuesta mover unas capas. En la lección siguiente verás cómo dejar por escrito el resultado en las anotaciones para desarrollo.

Qué se puede comprobar en diseño y qué no

Revisar en diseño no sustituye a la auditoría del producto construido (que se estudia en el nivel 4), pero filtra una gran parte de las barreras. Conviene saber dónde están los límites:

Se puede comprobar en el diseño	Necesita el producto construido o un prototipo en código
Contraste de texto y de componentes; información que depende solo del color	Lo que anuncia realmente el lector de pantalla
Tamaño y separación de los objetivos	Que todo funcione con teclado y sin trampas de foco
Adaptación a 320 px y con texto ampliado	El comportamiento real del zoom del navegador
Orden de lectura y de foco previsto	El orden del código y adónde va el foco al abrir y cerrar
Existencia de todos los estados, etiquetas visibles, nombres decididos	Mensajes de estado anunciados y tiempos reales
Coherencia de menús, nombres e iconos entre pantallas	Compatibilidad con las tecnologías de apoyo concretas

Seis pruebas de estrés para cualquier pantalla

1. La prueba de los 320 píxeles

Duplica cada pantalla clave en un marco de 320 px de ancho. Es lo que verá en un ordenador de 1280 px quien aplica un zoom del 400 %, el escenario de 1.4.10 Reajuste de los elementos. Comprueba que no hay desplazamiento horizontal (salvo tablas, mapas o similares), que están todas las funciones de la versión de escritorio y que la suma de cabecera fija, banner de cookies y botón de chat no ocupa media pantalla, porque entonces también taparía el foco (2.4.11).

2. La prueba del texto que crece

Como viste en el curso N2-C3, la persona puede ampliar el texto al 200 % (1.4.4) o aumentar el espaciado (1.4.12: interlineado de 1,5 veces el tamaño de letra, espacio tras párrafo de 2 veces, entre letras de 0,12 y entre palabras de 0,16). Simúlalo: aumenta los estilos de texto de un marco duplicado y usa contenido real y largo. Nombres como «María de los Ángeles Fernández-Villaverde», trámites como «Solicitud de ayudas para la rehabilitación energética de edificios residenciales» y las traducciones al catalán, euskera, gallego o inglés, que suelen ocupar más que el castellano. Si usas auto layout (el sistema de Figma que ajusta los contenedores a su contenido) y evitas alturas fijas, el diseño crecerá en lugar de recortar texto.

3. La prueba sin color

Pasa el diseño a escala de grises: en Figma con un plugin de simulación de visión o, en el ordenador, con los filtros de color del sistema (en Windows, Configuración, Accesibilidad, Filtros de color). ¿Se distinguen los enlaces del texto, la pestaña seleccionada, los campos con error, las series de un gráfico y los estados de un interruptor? Repasa también las instrucciones: «pulsa el botón verde de la derecha» depende del color y de la posición, y 1.3.3 Características sensoriales pide no basar la comprensión solo en ellos.

4. El recorrido de teclado sobre papel

Numera, en el orden en que deberían recibir el foco, todos los elementos interactivos de la pantalla. Empieza por el enlace de salto. Pregúntate en cada número: ¿se ve el estado de foco diseñado?, ¿queda tapado por algo fijo?, ¿qué pasa al pulsarlo y adónde va el foco después? Si la secuencia salta de un lado a otro de la pantalla, el problema es la composición, no la numeración.

5. La lectura lineal

Lee la pantalla de arriba abajo como lo haría un lector de pantalla: solo texto, en orden, sin ver la composición. Haz después una segunda lectura solo con los encabezados. ¿Se entiende qué es cada bloque? ¿Hay botones de icono sin nombre decidido, imágenes sin decidir si son decorativas o informativas, enlaces «Ver más» repetidos?

6. La prueba de los estados olvidados

Para cada pantalla, dibuja o al menos enumera: vacío (sin resultados, carrito vacío), cargando, error de envío, éxito, lista muy larga, sesión a punto de caducar y sin conexión. Son las pantallas que más se olvidan y las que más barreras acumulan, porque se improvisan durante el desarrollo.

Infografía · Proceso

Seis pruebas de estrés antes de entregar un diseño

Se hacen en Figma o en un prototipo, pantalla a pantalla, en menos de una hora

1. 1Paso 1: 320 píxelesSin scroll horizontal, con todas las funciones y sin elementos fijos que tapen
2. 2Paso 2: Texto que creceTexto al 200 %, espaciado de 1.4.12 y contenido real largo o traducido
3. 3Paso 3: Sin colorEn escala de grises, enlaces, estados, errores y gráficos siguen claros
4. 4Paso 4: Recorrido de tecladoNumera el orden de foco: cada elemento con foco visible y sin tapar
5. 5Paso 5: Lectura linealLee solo el texto en orden y después solo los encabezados
6. 6Paso 6: Estados olvidadosVacío, cargando, error, éxito, sesión que caduca y sin conexión

Leer la infografía como texto

Proceso de seis pasos para revisar cada pantalla clave antes de entregarla a desarrollo. Paso 1, 320 píxeles: duplicar el marco a 320 px y comprobar que no hay desplazamiento horizontal, que están todas las funciones y que nada fijo tapa el contenido. Paso 2, texto que crece: texto al 200 %, espaciado de 1.4.12 y contenido real largo o traducido. Paso 3, sin color: en escala de grises, enlaces, estados, errores y gráficos siguen siendo claros. Paso 4, recorrido de teclado: numerar el orden de foco y comprobar que cada elemento tiene foco visible y no queda tapado. Paso 5, lectura lineal: leer solo el texto en orden y después solo los encabezados. Paso 6, estados olvidados: vacío, cargando, error, éxito, sesión que caduca y sin conexión.

Herramientas: útiles, pero no deciden por ti

Los plugins de Figma que verás en la lección siguiente (comprobadores de contraste, simuladores de visión, marcadores de orden de foco) automatizan las comprobaciones mecánicas. Úsalos, pero recuerda lo que no pueden saber: si el texto alternativo tiene sentido, si un encabezado describe su bloque, si el orden tiene lógica o si un mensaje de error ayuda. Un informe sin avisos del plugin significa que no hay fallos de contraste detectables, no que el diseño sea accesible.

Probar con personas, también en diseño

Las pruebas de estrés detectan problemas, pero no sustituyen a ver a personas con discapacidad usando la interfaz. Ten en cuenta:

• Los prototipos de Figma no son fiables con lector de pantalla: no generan la semántica real del producto. Para probar con personas ciegas o que usan teclado, hace falta un prototipo en HTML o una versión temprana del producto. Con baja visión, discapacidad cognitiva o personas mayores sí se puede probar un prototipo navegable, ampliado si hace falta.
• Las simulaciones no son experiencia: taparse los ojos o usar unas gafas que emborronan sirve para sensibilizar, no para validar un diseño, porque no reproduce la pericia de quien usa a diario su tecnología de apoyo.
• Contacta a través de asociaciones de personas con discapacidad y compensa su tiempo. Cinco sesiones bien preparadas con tareas reales («pide cita para renovar el DNI de tu hija») revelan más que un mes de debate interno. El curso N7-C4 trata a fondo la investigación con personas usuarias; la guía del W3C sobre implicar a las personas usuarias en la evaluación es un buen punto de partida.

Convertirlo en rutina

• Incluye la accesibilidad en la revisión de diseño de cada pantalla, no en una revisión aparte al final.
• Define cuándo un diseño está terminado: contraste validado, estados dibujados, foco y objetivos comprobados, las seis pruebas superadas y anotaciones hechas.
• Revisa la implementación: cuando desarrollo entrega, compara el resultado con el diseño y sus anotaciones, con el teclado y con zoom, igual que revisas márgenes y colores. Los consejos del W3C para diseñar con accesibilidad sirven como guion rápido.

Resumen

• En diseño se puede comprobar contraste, color, objetivos, reflow, orden previsto, estados y coherencia; el comportamiento real con tecnologías de apoyo necesita código.
• Seis pruebas de estrés: 320 px, texto que crece con contenido real, sin color, recorrido de teclado, lectura lineal y estados olvidados.
• Los plugins automatizan lo mecánico; un informe sin avisos no significa diseño accesible.
• Prueba con personas con discapacidad: prototipo en HTML para lector de pantalla y teclado, contacto a través de asociaciones y tareas reales.
• Haz de la revisión una rutina: definición de terminado y revisión de la implementación.