Hoff NDS: la especificación del design system neurodivergente de Hoff Research

Trabajo en curso (WIP): esta especificación todavía está cambiando.

Este es el Hoff NDS, el design system que uso en los productos de Hoff Research y aplico, a veces en silencio, en todo proyecto nuevo. La evidencia detrás de cada regla está en el post sobre design system para personas neurodivergentes. Aquí queda solo la norma.

Propósito y alcance

El sistema existe para reducir la carga cognitiva, la ansiedad y el error en la interfaz digital, dando prioridad a las personas neurodivergentes y beneficiando a todo el mundo. Cubre tres tipos de limitación:

• Permanente, como baja visión, dislexia y autismo
• Temporal, como lesión, fatiga y efecto de medicación
• Situacional, como un ambiente ruidoso, mala conexión y estrés

La premisa: el aprendizaje y la decisión ocurren en el cerebro, no en la pantalla. Cada esfuerzo gastado en descifrar la interfaz es esfuerzo que se le quita a la tarea real. El papel del diseño es bajar el coste de leer, navegar y decidir.

No es un tema visual. Es un conjunto de reglas con justificación. Cada sección declara la regla, el motivo, los neurotipos a los que sirve y los principios de UX que la sostienen. Cuando la regla tiene número, el número es normativo.

Fundamentos

Carga cognitiva. Las personas con TDAH rinden menos y tienen más variabilidad en el tiempo de reacción bajo carga alta. Por eso solo queda visible lo que sirve al objetivo de la pantalla. Si un elemento no informa la tarea, distrae de ella.

Estrés bueno y estrés malo. Hay un nivel de tensión que ayuda al foco y un nivel que paraliza. La interfaz absorbe el estrés de operar, de buscar y de equivocarse, para que la tensión de la persona vaya al contenido.

Previsibilidad. Un cambio inesperado de layout, posición o nombre rompe el modelo mental y tumba el foco, con un coste mayor para las personas autistas y con TDAH. Las posiciones importantes son estables entre pantallas, el nombre de una acción persiste de principio a fin del flujo, y nada se mueve sin acción de la persona.

Personalización como requisito. La preferencia sensorial varía entre neurotipos y dentro de ellos. El sistema exige como mínimo tres temas de color (oscuro, claro y alto contraste), tres tamaños de texto y un control que apaga la animación. Estos controles están a la vista, no enterrados en la configuración.

Conservación de la complejidad. Hay una complejidad mínima que no se puede quitar sin destruir la función. Simplificar más allá de eso solo lo vuelve todo más confuso. La meta es quitar el exceso, no la función.

El diseñador tiene que entender de color, sí

El contraste guía la elección de color, no la estética. El texto corrido busca 7:1 o más (nivel AAA). El mínimo absoluto para cualquier texto informativo es 4,5:1 (nivel AA).

Regla. Toda la paleta tiene baja saturación: sin neón, sin color vibrante, sin brillo extremo. El color nunca es el único portador de información. Todo estado comunicado por color va acompañado de texto, icono o forma.

Motivo. El color vibrante y el contraste cromático fuerte causan malestar y sobrecarga sensorial en personas autistas, con TDAH y con estrés visual. En el TDAH hay evidencia de menor discriminación del color, sobre todo en el eje azul-amarillo, y el daltonismo rojo-verde es la forma más común en la población. Ambas cosas refuerzan la prohibición del color como señal única. El tema oscuro es el predeterminado porque buena parte del uso es de noche, cuando menos luz en la pantalla molesta menos.

Paleta de referencia:

Tema de alto contraste: fondo negro, texto blanco, acentos aclarados y bordes reforzados. La relación de contraste de cada par se verifica con una herramienta en cada cambio de token. El texto atenuado nunca lleva información, solo jerarquía.

El estado del sistema tiene semántica fija: positivo para éxito, atención para error y alerta, acento para acción y selección. El mismo color nunca significa algo distinto en otra pantalla.

Neurotipos: baja visión, daltonismo, síndrome de Irlen y estrés visual, autismo, TDAH. Principios: conectividad uniforme y efecto estética-usabilidad, con la salvedad de que la belleza no puede esconder un problema.

Tipografía, antes de pasar un día entero buscando fuente

Regla. Fuente sin serifa, humanista, con letras bien diferenciadas. Cuerpo de 1rem a 1,25rem sobre base de 16px, es decir, de 16 a 20px. Interlineado de 150% a 170%. Espaciado entre letras ligeramente aumentado: de 0,005em a 0,02em en el cuerpo y unos 0,03em en texto pequeño, como etiquetas y leyendas. Títulos al menos un 20% mayores que el cuerpo, diferenciados por peso, nunca por cambio de familia. Líneas de como máximo 66 caracteres.

Motivo. Las fuentes humanistas tienen aberturas más amplias y formas de letra más distintas, lo que sostiene la lectura en pantallas comunes y en tamaños variados. Más espaciado reduce el crowding, que perjudica mucho a quien tiene dislexia, y es el cambio tipográfico con más evidencia a favor. Las fuentes vendidas como "para dislexia" no mostraron beneficio en estudios controlados.

Caracteres sin dobles. La fuente distingue sin ambigüedad la I mayúscula, la l minúscula y el 1; las letras espejadas b, d, p y q; el cero y la O. Las secuencias alfanuméricas, como contraseñas, códigos e identificadores, aparecen en una fuente que garantiza estas distinciones, con espacio extra.

La serifa queda restringida a contextos editoriales opcionales, nunca en texto funcional, porque parte de las personas usa pantallas de baja densidad, donde la serifa se degrada.

Neurotipos: dislexia, discalculia, baja visión, función ejecutiva, síndrome de Irlen. Principio: pregnancia.

Los números son universales

Regla. Las secuencias numéricas largas se segmentan como en el mundo real: teléfono en bloques, documento en bloques, tarjeta en grupos de cuatro. El campo numérico corrige en el momento los errores previsibles, como la letra o en lugar del cero. Toda cantidad o tiempo en dígitos va con apoyo visual: barra de progreso con el porcentaje escrito, contador de pasos con el actual destacado, o una representación gráfica de la proporción.

Motivo. La discalculia es una dificultad persistente con los números, independiente de la edad y la escolaridad. El tiempo restante dicho solo como número no significa nada para algunos perfiles. Una barra a la mitad con el texto "50%, 3 de 6" transmite el mismo dato por tres canales. Pero hay un límite: cambiar el número entero por una animación abstracta se pasa de la raya y confunde. El número se queda, lo visual acompaña.

Neurotipos: discalculia, dislexia, función ejecutiva, baja visión. Principios: pregnancia, ley de Tesler, navaja de Ockham.

Espaciado, aire (por favor) y layout

Regla. Escala de espaciado en ritmo de 4: 4, 8, 12, 16, 24, 32, 48, 64 y 96 píxeles. Espacio en blanco generoso entre grupos. Lo relacionado queda cerca, lo no relacionado queda visiblemente separado. Una columna principal de lectura; el contenido nunca compite en columnas paralelas de la misma jerarquía. Navegación, contenido y acción quedan en la misma región en toda pantalla y en todo tamaño de viewport.

Motivo. El espacio en blanco es información: comunica agrupación y jerarquía antes de la lectura. Un layout denso eleva el coste de exploración, con una penalización mayor para el TDAH. La escala fija elimina decisiones arbitrarias y mantiene el ritmo previsible.

Neurotipos: TDAH, dislexia, autismo, función ejecutiva. Principios: pregnancia, conectividad uniforme, ley de Jakob.

Objetivos de toque y clic

Regla. Objetivo mínimo de 48 por 48 píxeles en cualquier elemento interactivo. Acción primaria de 60 por 60. Las interfaces para niños usan 60 como mínimo y de 80 a 100 píxeles en acciones críticas, sobre todo por debajo de los 8 años. Al menos 8 píxeles entre objetivos vecinos, 16 cuando sea posible. El área activa puede ser mayor que el dibujo del elemento, tolerando un toque un poco fuera.

Motivo. Un objetivo mayor y más cercano reduce el tiempo de selección y el error. Para quien tiene dispraxia y para niños con la motricidad fina en desarrollo, un área grande reduce el esfuerzo físico. Arrastrar con precisión es difícil para los niños pequeños y siempre tiene una alternativa por toque.

Neurotipos: dispraxia, TDAH, baja visión, niños en desarrollo motor. Principio: ley de Fitts.

Movimiento

Esta sección es de salud, no de estética. Nada destella más de tres veces por segundo, sin excepción, por riesgo de convulsión fotosensible.

Regla. Transiciones de 200 a 500 milisegundos, lentas, previsibles y del mismo tipo en todo el producto; prefiere opacidad y color, evita desplazamientos grandes. La animación ocupa menos de un tercio de la pantalla. Ninguna animación se reproduce sola en bucle. La preferencia de movimiento reducido del sistema se respeta siempre, cambiando la animación por una transición simple de opacidad, y la interfaz tiene además un control propio para apagar todo movimiento. Prohibidos: rotación continua, paralaje, carrusel automático, elementos que entran volando, confeti y cualquier movimiento no pedido.

Motivo. El movimiento en pantalla causa náuseas, mareo y desorientación en quien tiene un trastorno vestibular. La animación irrelevante perjudica más a las personas autistas que a la media. Para el TDAH, el movimiento constante es una distracción permanente, incluso en la visión periférica, porque el ojo va detrás.

Neurotipos: epilepsia fotosensible, trastorno vestibular, autismo, TDAH, persona altamente sensible. Principio: umbral de Doherty.

Botones, enlaces y campos

Regla. Lo que se puede pulsar parece pulsable, visualmente distinto de cualquier elemento decorativo. Todo elemento interactivo tiene cuatro estados visibles: reposo, hover, foco y activo. El foco es un anillo de 3 píxeles con una separación de 2 a 3 píxeles, en un color de alto contraste, visible en cualquier tema, y nunca se elimina. Una única acción primaria por pantalla, con jerarquía clara entre primaria, secundaria y discreta. El icono refuerza la intención, pero no sustituye al texto en acciones importantes.

Campos de formulario: etiqueta siempre visible encima del campo, nunca solo placeholder, porque el placeholder desaparece justo cuando la memoria de trabajo más lo necesita. Texto de ayuda antes del campo cuando el formato no es obvio. Altura mínima igual a la del objetivo táctil. Validación en el momento justo: ni en cada tecla, ni solo al enviar.

Motivo. Botones y enlaces son los elementos más críticos de la página. La accesibilidad va más allá del HTML semántico y de la etiqueta para lectores de pantalla: el diseño decide si la persona duda o actúa. La duda es carga, y la ambigüedad es un error aplazado.

Neurotipos: dispraxia, dislexia, TDAH, función ejecutiva, quien usa teclado y lector de pantalla. Principios: ley de Fitts, efecto von Restorff, navaja de Ockham.

Formularios y prevención de errores

Regla. Los procesos pesados, como registro, pago y configuración inicial, se dividen en pasos cortos, un tema por paso, con la posición clara: paso actual, total y lo que viene después. El sistema es liberal en lo que acepta y riguroso en lo que devuelve: acepta espacios, guiones, puntos y mayúsculas cambiadas, y normaliza solo. El progreso se guarda, porque la interrupción es la regla, no la excepción, para el público prioritario.

El mensaje de error no pide perdón, no culpa y no es vago. Dice qué pasó y cómo resolverlo, en una frase. Por ejemplo: "Faltan dos dígitos. Un móvil tiene 11 números con el prefijo."

Motivo. Ante un flujo largo y opaco, quien tiene TDAH o dificultades de función ejecutiva tiende a abandonar o a tomar el camino más barato, aunque sea erróneo. Un paso corto con posición visible cambia un coste grande por varios pequeños, con sensación de avance.

Neurotipos: TDAH, función ejecutiva, discalculia, ansiedad. Principios: ley de Miller, ley de Postel, ley de Parkinson, regla del pico y final.

Comunicación del sistema

Regla. Avisos, validaciones, notificaciones y mensajes siguen un único patrón visual por tipo en todo el producto. El éxito es cálido y directo. El error es educado y orientado a la solución. El nombre de una acción persiste en todo el flujo: el botón "publicar" genera la confirmación "publicado", nunca un sinónimo. La notificación existe para servir a la persona, no para hacerla volver: nada de reenganche, urgencia fabricada o escasez artificial. La persona controla lo que recibe, y lo predeterminado es el mínimo.

Motivo. Una convención rota y un estilo inconsistente generan desconfianza y tumban el foco. El onboarding no sustituye a la claridad: la pantalla tiene que entenderse antes de la primera interacción. Un tutorial es un parche de una interfaz que falló.

Neurotipos: TDAH, dislexia, función ejecutiva, autismo. Principios: ley de Jakob, ley de Miller, regla del pico y final.

Subtítulos, audio y medios

Regla. Todo medio hablado tiene subtítulos sincronizados, en texto claro sobre fondo oscuro sólido, en bloques de hasta dos líneas. El audio nunca empieza solo. Todo reproductor tiene pausa, retroceso y control de velocidad. El contenido esencial nunca existe solo en audio o solo en vídeo: siempre hay una alternativa en texto.

Motivo. Los subtítulos sirven a quien es sordo o oye poco, a quien procesa mejor leyendo, a quien está en un lugar ruidoso y a quien necesita refuerzo por los dos canales. Un sonido inesperado es una agresión sensorial para perfiles autistas y altamente sensibles.

Neurotipos: sordera y baja audición, autismo, TDAH, persona altamente sensible, procesamiento auditivo. Principios: redundancia de canal y pregnancia.

Contenido y tono de escritura

Regla. Voz activa, frases cortas, una idea por frase, un tema por párrafo. El nombre describe lo que la persona controla y reconoce, nunca cómo se construyó el sistema. El botón dice exactamente lo que pasa: "guardar cambios", no "enviar". Lenguaje sencillo sin infantilizar. Jerga solo cuando es el término que la persona necesita aprender, y entonces explicada la primera vez. Cada palabra en pantalla tiene función; lo que no ayuda a entender sale.

Motivo. Para quien tiene dislexia, y para cualquier persona bajo carga, el coste de descodificar el texto compite con su contenido. La concisión es accesibilidad.

Neurotipos: dislexia, TDAH, función ejecutiva, hablantes no nativos. Principios: navaja de Ockham, ley de Tesler.

Patrones de interfaz

Regla. Contenido primero: cada pantalla parte del objetivo de la persona, y lo que no sirve al objetivo sale. Navegación consistente, con los mismos elementos en los mismos lugares. Nada de pop-ups que interrumpan la tarea, salvo riesgo real e inmediato. Nada de cambios de layout sin acción de la persona. Densidad controlada: mostrar más bajo demanda en vez de volcarlo todo. Modo de foco disponible en los flujos largos, escondiendo lo que no es la tarea actual.

Motivo. Ante muchas opciones que compiten, quien tiene TDAH tiende a bloquearse o a elegir la tarea más barata. Conservar la complejidad significa gastarla donde genera valor: en el contenido, no en la operación.

Neurotipos: TDAH, autismo, función ejecutiva, ansiedad. Principios: paradoja de la complejidad, ley de Hick, ley de Jakob, efecto estética-usabilidad.

Tokens

Neurotipos considerados

Principios de UX

Checklist de conformidad

Antes de publicar cualquier pantalla:

• Contraste de todo texto informativo de 4,5:1 como mínimo y 7:1 en el cuerpo
• Fuente sin serifa humanista, con I, l y 1, b, d, p y q, 0 y O distintos
• Interlineado de 150% o más y líneas de hasta 66 caracteres
• Todo objetivo interactivo de 48 píxeles o más con 8 píxeles de aire
• Foco visible por teclado en todo elemento interactivo
• Ningún destello por encima de tres por segundo
• Movimiento reducido respetado y control local de movimiento presente
• Tres temas y tres tamaños de texto funcionando
• Etiqueta visible en todo campo y error orientado a la solución
• Número largo segmentado y cantidad con apoyo visual
• Medios hablados con subtítulos y sin reproducción automática
• Una acción primaria por pantalla
• El nombre de cada acción igual de principio a fin del flujo
• Ninguna mecánica de enganche compulsivo

Proceso

El sistema es un documento vivo. Toda regla nueva entra con justificación y con los neurotipos a los que sirve, y toda regla existente puede discutirse con mejor evidencia. Probar con personas neurodivergentes reales forma parte del ciclo de diseño, con metodología participativa, y no es una etapa final de validación. Cuando la prueba contradice la regla, la regla cambia, y el cambio se registra con fecha y motivo.

Hoff Research. Make it simple, but significant.