01 · Concepto
Confianza: saber qué ocurrirá
Una interfaz predecible permite aprender un patrón una vez y reutilizarlo en todo el recorrido.
La consistencia no exige que todas las pantallas sean idénticas. Exige que elementos con la misma función mantengan nombre, ubicación y comportamiento; y que una acción nueva se anuncie antes de ejecutarse.
Principio esencial
La interfaz no debe sorprender negativamente: el foco permite explorar, la activación produce acciones y los avisos informan sin secuestrar la atención.
Patrones estables
La navegación, los iconos y los nombres conservan su función entre páginas.
Cambios controlados
La persona inicia los cambios importantes y recibe confirmación sin perder su posición.
02 · Fundamentos
Cuatro acuerdos que generan confianza
La checklist de la presentación conecta estabilidad visual, semántica y gestión del foco.
Navegación consistente
Los mecanismos repetidos aparecen en el mismo orden relativo en todas las páginas, salvo que la persona solicite un cambio.
Acciones y destinos
Los botones ejecutan acciones; los enlaces conducen a páginas, secciones o recursos.
Foco sin sorpresas
Llegar a un campo o control no abre ventanas, envía formularios ni cambia de página automáticamente.
Estados no intrusivos
Los mensajes dinámicos se anuncian sin mover bruscamente el foco ni interrumpir la tarea.
03 · Personas y contextos
¿A quién beneficia?
La previsibilidad reduce memoria, esfuerzo de orientación y riesgo de error.
- Personas con discapacidad cognitiva: pueden apoyarse en patrones ya aprendidos y anticipar resultados.
- Personas con baja visión: no tienen que volver a localizar menús o controles que cambian de lugar.
- Personas que navegan con teclado: conservan el foco y el contexto durante actualizaciones.
- Personas que usan lectores de pantalla: reciben mensajes de estado sin ser trasladadas inesperadamente.
- Cualquier persona en una tarea sensible: reduce errores cuando las acciones destructivas o externas son claras.
04 · Barreras frecuentes
Cuando la interfaz rompe las expectativas
05 · Criterios de diseño
Qué debe comprobarse
Revisa el patrón completo: ubicación, nombre, semántica, activación y comunicación del resultado.
Orden de navegación estable
Los mecanismos repetidos conservan el mismo orden relativo en el conjunto de páginas.
Relacionado: WCAG 3.2.3 · Nivel AA
Componentes identificados igual
Elementos con la misma función mantienen nombres, iconos y descripciones consistentes.
Relacionado: WCAG 3.2.4 · Nivel AA
Sin cambios al recibir foco
El foco por sí solo no abre contenido, envía datos ni cambia la página.
Relacionado: WCAG 3.2.1 · Nivel A
Cambios por entrada explicados
Si modificar un campo provoca un cambio de contexto, la persona lo sabe antes o lo confirma explícitamente.
Relacionado: WCAG 3.2.2 · Nivel A
Propósito acorde con el control
Usa botones para acciones y enlaces para destinos; el texto anticipa con precisión el resultado.
Relacionado: semántica HTML y expectativas de interacción
Mensajes de estado anunciados
Una actualización importante se comunica a tecnologías de apoyo sin recibir el foco.
Relacionado: WCAG 4.1.3 · Nivel AA
06 · Ejemplo aplicado
Elegir antes de cambiar de contexto
Problema
Navegación automática
Al recorrer un selector de sedes con teclado, cada opción carga una página nueva inmediatamente.
- El foco activa el cambio.
- No existe oportunidad de revisar.
- Volver al punto anterior resulta difícil.
Solución
Selección y confirmación
La persona elige una sede y activa el botón “Ver información de la sede”.
- Explorar no cambia el contexto.
- El botón describe el resultado.
- La decisión permanece bajo control.
Decisión clave: recibir foco permite examinar; activar confirma la intención.
07 · Práctica
Comprueba lo aprendido
Detecta una inconsistencia, asigna el control adecuado y observa un aviso que conserva el foco.
Actividad 1: encuentra el menú diferente
Compara las tres páginas y selecciona la que rompe el orden de navegación.
Selecciona la página cuyo menú cambia de orden.
Actividad 2: asigna acciones y destinos
Indica qué intención necesita un botón y cuál necesita un enlace.
Guardar preferencias
Consultar la normativa
Mostrar detalles
Actividad 3: guarda sin perder el foco
Activa el botón. La confirmación aparecerá y se anunciará, pero el foco permanecerá donde realizaste la acción.
Aún no se han guardado cambios.
El resultado de la comprobación aparecerá aquí.
08 · Ficha rápida
Predictibilidad en seis preguntas
- ¿El menú conserva su orden?
- Compara los mecanismos repetidos entre páginas.
- ¿La misma función tiene el mismo nombre?
- Revisa etiquetas, iconos y textos accesibles.
- ¿El control anticipa el resultado?
- Usa botones para acciones y enlaces para destinos.
- ¿El foco solo permite explorar?
- No abras ventanas ni envíes información al recibir foco.
- ¿La persona confirma el cambio?
- Evita navegación automática al elegir una opción.
- ¿El aviso conserva la posición?
- Anuncia el estado sin trasladar el foco.
Resultado
Progreso de las actividades
Completa las tres actividades para terminar el tutorial.