Carga cognitiva: diseñar interfaces que se entienden sin esfuerzo

Hace poco, revisando la web de una empresa de reformas, pedí a una clienta suya que solicitara un presupuesto mientras yo miraba. Era una mujer resolutiva, acostumbrada a gestionar obras. A los cuatro minutos dejó el móvil en la mesa y dijo: «Esto lo hago luego». El formulario tenía catorce campos, tres desplegables con términos técnicos («tipo de actuación», «alcance de intervención») y una pregunta sobre los metros cuadrados que ella no sabía de memoria. Nada era difícil por separado. Todo junto, en una pantalla de móvil, era demasiado.

Ese «esto lo hago luego» es la expresión más honesta de la carga cognitiva. No es que la persona no pueda; es que el esfuerzo que le pide la interfaz supera las ganas que tiene en ese momento. Y «luego», en internet, casi siempre significa nunca.

En el estudio pensamos mucho en esto, porque es una de las causas más comunes y menos visibles de que una web bonita no funcione. Esta guía explica qué es la carga cognitiva, de dónde sale y las técnicas concretas que usamos para reducirla.

01Qué es la carga cognitiva

La carga cognitiva es la cantidad de esfuerzo mental que exige una tarea a la memoria de trabajo, el pequeño espacio mental donde mantenemos y manipulamos la información mientras hacemos algo. Alan Baddeley y Graham Hitch propusieron en 1974 el modelo de memoria de trabajo que sigue siendo la referencia, y la investigación posterior, como la revisión de Nelson Cowan en 2001, coincide en que su capacidad es muy limitada: unos pocos elementos a la vez, en torno a cuatro bloques de información.

El concepto de «carga cognitiva» lo formalizó el psicólogo educativo John Sweller a finales de los años ochenta, en su teoría de la carga cognitiva (Cognitive Load Theory, 1988). Nació para diseñar materiales de aprendizaje, pero se aplica de maravilla a las interfaces, porque usar una web también es aprender, aunque sea durante unos segundos.

Clave: la atención es un presupuesto. Cada elemento de la interfaz cobra una parte; diseñar bien es gastarlo en lo que ayuda a la persona y no en descifrar la propia interfaz.

02Los tres tipos de carga y cuál puedes reducir

Sweller distinguió tres tipos de carga. Entenderlos ayuda a saber dónde actuar.

La conclusión práctica es directa: la carga intrínseca se gestiona, la extrínseca se elimina y la pertinente se cuida. La mayor parte del trabajo de diseño está en la segunda columna, la que añadimos nosotros sin darnos cuenta.

03Señales de que tu web pide demasiado

Antes de aplicar técnicas, conviene saber detectarlo. Estas son las señales que buscamos en analítica, grabaciones de sesión y tests:

• →Abandono alto en formularios, especialmente en un campo concreto.
• →Retrocesos frecuentes: la gente va y vuelve entre páginas para comparar.
• →Llamadas o mensajes que preguntan cosas que la web ya explica.
• →Tiempo en página alto con pocas acciones, en páginas que deberían ser de paso.
• →En tests, frases como «a ver…», «espera», «¿esto qué era?» o silencios largos.
• →Errores repetidos en el mismo campo o en el mismo paso.

04Once técnicas para reducir la carga cognitiva

En la página

1. 01Una acción principal por pantalla. Si todo es importante, nada lo es. Un botón destacado y el resto en un nivel visual inferior.
2. 02Jerarquía visual clara. Tamaño, peso y espacio indican el orden de lectura sin que haya que pensarlo. Cuando la jerarquía es buena, el ojo sabe por dónde empezar.
3. 03Bloques cortos con títulos que informan. «Precios desde 45 € al mes» trabaja más que «Nuestras tarifas». La gente escanea antes de leer, y los títulos son lo que escanea.
4. 04Lenguaje del usuario. Cada término técnico que hay que descifrar es carga extrínseca pura. Las técnicas de escritura clara son, en el fondo, técnicas de diseño cognitivo.
5. 05Patrones conocidos. Un menú, un carrito o un calendario que funcionan como en otras webs no hay que aprenderlos. Es la ley de Jakob, una de las leyes de UX que más ayudan aquí.
6. 06Quitar lo que compite. Carruseles automáticos, vídeos que arrancan solos, ventanas emergentes al entrar y animaciones decorativas mientras se lee reclaman atención que la persona necesita para otra cosa.

En formularios y procesos

7. 07Divulgación progresiva. Mostrar solo lo necesario en cada momento y revelar el resto cuando hace falta. Un formulario en tres pasos de tres o cuatro campos se siente más ligero que uno de doce en una sola pantalla, siempre que los pasos tengan sentido para el usuario.
8. 08Valores por defecto inteligentes. Preseleccionar la opción más habitual, autocompletar la ciudad a partir del código postal, recordar los datos de una visita anterior.
9. 09Mostrar en lugar de pedir que se recuerde. Resúmenes visibles a lo largo del proceso, requisitos de la contraseña visibles mientras se escribe, el producto elegido siempre a la vista en el checkout.
10. 10Pedir solo lo imprescindible. Cada campo es una pregunta, y cada pregunta, una pequeña decisión. Si un dato se puede pedir después, o deducir, mejor. En la guía de formularios que convierten desarrollamos este criterio campo a campo.
11. 11Ayuda en el punto exacto. Una línea de ayuda bajo el campo que la necesita («Lo encontrarás en tu factura de la luz») evita que la persona salga a buscarla.

05Carga cognitiva y accesibilidad

Diseñar para reducir la carga cognitiva es también diseñar para la accesibilidad. Hay personas con TDAH, dislexia, daño cerebral, deterioro cognitivo leve o simplemente con mucho estrés para quienes una interfaz exigente es una barrera real.

El W3C publicó en 2021 la guía Making Content Usable for People with Cognitive and Learning Disabilities, con patrones de diseño muy concretos, y WCAG 2.2 incorporó criterios directamente relacionados:

• →3.3.7 Entrada redundante (nivel A): no pedir al usuario que vuelva a introducir información que ya dio en el mismo proceso; o rellenarla automáticamente o permitir seleccionarla.
• →3.3.8 Autenticación accesible (mínimo, nivel AA): no exigir pruebas cognitivas para iniciar sesión, como recordar una contraseña sin permitir pegarla o resolver un rompecabezas, salvo que haya una alternativa.
• →3.2.6 Ayuda consistente (nivel A): si hay mecanismos de ayuda (contacto, chat, preguntas frecuentes), que estén en el mismo lugar relativo en todas las páginas.

Puedes consultar todos los criterios en la especificación de WCAG 2.2. Y si quieres una visión más amplia de por qué la accesibilidad mejora la experiencia de todo el mundo, la tienes en qué es la accesibilidad web.

06Cómo comprobar si has aligerado la carga

La carga cognitiva no se ve, pero sus efectos sí se miden. Para comparar una versión antes y después de un cambio, combinamos tres fuentes:

1. 01Test con usuarios. Las mismas tareas con cinco o seis personas en cada versión. Mira la tasa de éxito, el tiempo y, tras cada tarea, una pregunta de facilidad percibida en escala del 1 al 7. Si quieres algo más formal, el cuestionario NASA-TLX, desarrollado por Sandra Hart y Lowell Staveland en 1988 para la NASA, mide la carga percibida en seis dimensiones, entre ellas la exigencia mental y la frustración.
2. 02Analítica. Tasa de finalización del formulario o del proceso, abandono por paso y tiempo hasta completar.
3. 03Grabaciones de sesión. Menos retrocesos, menos pausas largas sobre un mismo campo y menos clics repetidos son señales de que la interfaz ya no hace pensar de más.

Un apunte que repetimos a menudo en el estudio: el tiempo en página no siempre es bueno ni malo. En una guía larga, más tiempo suele indicar interés; en un formulario, suele indicar dudas. Interpreta cada métrica según lo que la página tiene que conseguir.

07Ejemplo resuelto: el formulario de presupuesto

Ese último detalle es la idea central de todo el enfoque: la complejidad intrínseca de una reforma sigue ahí, pero el diseño decide quién la asume y cuándo.

08Checklist para revisar tu web

Repasa la tabla en tus tres páginas más importantes, en móvil. Con eso ya tendrás una lista de mejoras concretas, y la mayoría serán cambios pequeños. Si puedes, pide a alguien ajeno al negocio que haga la misma revisión en paralelo: lo que a ti te parece evidente porque lo ves cada día suele ser justo lo que a un recién llegado le cuesta más. Después, comparad las dos listas y empezad por los puntos en los que coincidís.

09Diseñar para mentes ocupadas

Me gusta recordar que nadie llega a una web con la cabeza vacía. Llega con prisa, con preocupaciones, con tres pestañas abiertas y un mensaje sin contestar. Diseñar teniendo en cuenta la carga cognitiva es diseñar para esa persona real, y por eso las webs que lo hacen bien se sienten amables, casi invisibles.

En SIMA este criterio guía cada pantalla de nuestros proyectos de diseño web y experiencia digital. Si sospechas que tu web pide a tus clientes más esfuerzo del necesario, escríbenos y la revisamos juntos.