Las 10 heurísticas de Nielsen aplicadas a webs reales

Cada vez que hacemos una auditoría de una web en el estudio, antes de mirar analítica o de proponer cambios visuales, la recorremos con una hoja a la izquierda. En esa hoja hay diez líneas que Jakob Nielsen escribió en los años noventa. Es una costumbre que parece de otra época y, sin embargo, ninguna otra herramienta nos da tantos hallazgos en tan poco tiempo.

Las heurísticas no son reglas estrictas. Son principios generales, «reglas de oro» de usabilidad, que describen cómo procesamos la información las personas: lo que necesitamos para sentir que controlamos una situación, lo que olvidamos con facilidad, lo que nos confunde. Por eso funcionan igual en el software de oficina para el que se formularon que en la web de un restaurante en Marbella o en una app de reservas.

En esta guía las repasamos una por una, con la forma en que se ven en webs reales y lo que solemos revisar. Al final tienes un método para hacer tu propia evaluación.

01De dónde salen y por qué siguen funcionando

Jakob Nielsen y Rolf Molich publicaron una primera lista de principios en 1990. En 1994, Nielsen la refinó analizando 249 problemas de usabilidad reales y quedándose con los diez principios que mejor los explicaban. Esa es la lista que conocemos hoy. En 2020, Nielsen Norman Group revisó su redacción para hacerla más clara y añadió ejemplos actuales, sin cambiar el fondo.

Siguen vigentes porque no hablan de botones ni de pantallas, sino de personas: de cómo funciona nuestra memoria de trabajo, de la necesidad de sentir control, de lo que esperamos por experiencia previa. Esas cosas evolucionan muy despacio.

Clave: una heurística no te dice cómo diseñar; te ayuda a ver dónde y por qué un diseño hace pensar más de la cuenta a quien lo usa.

021. Visibilidad del estado del sistema

La web debe informar siempre de lo que está pasando, con una respuesta rápida y clara.

En webs reales: el botón de enviar un formulario que no cambia al pulsarlo, y el cliente lo pulsa tres veces. El carrito que no muestra ningún aviso al añadir un producto. La página que tarda en cargar sin ninguna señal de progreso.

Lo que funciona:

• →Cambiar el estado del botón al pulsarlo («Enviando…») y confirmar el resultado con un mensaje visible.
• →Mostrar el número de productos del carrito y una confirmación breve al añadir.
• →Indicar el progreso en procesos de varios pasos: «Paso 2 de 3».
• →Usar indicadores de carga o esqueletos (siluetas grises del contenido que está por llegar) cuando algo tarda más de un segundo.

032. Relación entre el sistema y el mundo real

La web debe hablar el idioma del usuario, con palabras y conceptos que le resulten familiares, y seguir convenciones del mundo real.

En webs reales: un despacho de abogados con un menú que dice «Áreas de práctica», «Verticales» y «Expertise». Una clínica que habla de «unidades asistenciales». Un ecommerce que llama «SKU» a lo que el cliente llama referencia.

Lo que funciona: usar las palabras que usan los clientes cuando buscan en Google o cuando llaman por teléfono. Las consultas de Search Console y las entrevistas son la mejor fuente. «Qué hacemos», «Precios», «Cómo llegar» se entienden sin pensar. Iconos y metáforas, como la papelera o el carrito, solo cuando son universales.

043. Control y libertad del usuario

Las personas se equivocan y necesitan una «salida de emergencia» claramente marcada para deshacer una acción sin tener que pasar por un proceso largo.

En webs reales: un pop-up que no se puede cerrar o con una «X» diminuta. Un proceso de compra en el que volver atrás vacía el carrito. Un filtro aplicado que no se puede quitar sin recargar la página.

Lo que funciona:

• →Botón de cerrar visible en cualquier modal, y que también funcione la tecla Escape y tocar fuera.
• →Deshacer en lugar de pedir confirmación en acciones reversibles: «Producto eliminado. Deshacer».
• →Filtros activos visibles como etiquetas que se quitan con un toque.
• →Botón atrás del navegador que funcione como el usuario espera, también en webs que cargan contenido dinámicamente.

054. Consistencia y estándares

El usuario no debería preguntarse si palabras, situaciones o acciones distintas significan lo mismo. Y conviene seguir las convenciones de la web, porque, como formuló el propio Nielsen en la llamada ley de Jakob, la gente pasa la mayor parte de su tiempo en otras webs.

En webs reales: un botón principal verde en una página y azul en otra. «Pedir cita», «Reservar» y «Solicitar consulta» para la misma acción. Un logo que no lleva a la home. Enlaces que no parecen enlaces.

Lo que funciona: un único estilo para cada tipo de botón, un único nombre para cada acción, el logo arriba a la izquierda enlazando a inicio, el carrito arriba a la derecha. La consistencia interna se consigue con un sistema de diseño; la externa, respetando lo que la gente ya conoce.

065. Prevención de errores

Mejor que un buen mensaje de error es un diseño que evita el error.

En webs reales: un formulario de reserva que deja elegir un día que el restaurante está cerrado. Un campo de teléfono que rechaza los espacios. Un calendario que permite seleccionar fechas pasadas.

Lo que funciona:

• →Desactivar o esconder las opciones que no son posibles (días cerrados, tallas agotadas).
• →Aceptar los datos en cualquier formato razonable y normalizarlos por detrás.
• →Valores por defecto sensatos: la fecha de hoy, el país más habitual.
• →Confirmación solo en acciones graves e irreversibles, como cancelar una reserva pagada.

076. Reconocer antes que recordar

Reducir la carga de memoria del usuario haciendo visibles los elementos, acciones y opciones. La gente no debería tener que recordar información de una pantalla a otra.

En webs reales: un comparador de seguros que obliga a apuntar los precios de cada plan porque no se pueden ver juntos. Un formulario que en el paso 3 pregunta algo que dependía de lo elegido en el paso 1, sin mostrarlo. Iconos sin texto que hay que adivinar.

Lo que funciona: tablas comparativas, resúmenes visibles en procesos largos («Tu reserva: 2 personas, sábado 14, 21:00»), búsquedas recientes, productos vistos recientemente y etiquetas de texto junto a los iconos. Este principio está muy ligado a la carga cognitiva, que tratamos en su propia guía.

087. Flexibilidad y eficiencia de uso

Atajos que aceleran el uso a quien ya conoce la web, sin complicársela a quien llega por primera vez.

En webs reales: un cliente habitual de una tienda online que tiene que buscar cada mes el mismo producto. Un formulario sin autocompletado. Una web de recetas sin buscador.

Lo que funciona: «Repetir pedido», autocompletado del navegador bien configurado (atributos autocomplete correctos en los campos), búsqueda interna con sugerencias, enlaces directos a lo más usado y la posibilidad de guardar favoritos.

098. Diseño estético y minimalista

Cada elemento extra en una pantalla compite con los importantes y reduce su visibilidad. No se trata de un estilo visual concreto, sino de que lo que hay en pantalla sea relevante.

En webs reales: una home con seis llamadas a la acción del mismo tamaño. Un carrusel de cinco diapositivas en la cabecera. Un texto de bienvenida de tres párrafos antes de saber qué ofrece el negocio.

Lo que funciona: una acción principal por pantalla, jerarquía clara entre lo importante y lo secundario, y quitar todo lo que no ayude a la tarea. Lo que queda, se ordena con tamaño, contraste y espacio para que el ojo sepa por dónde empezar.

109. Ayudar a reconocer, diagnosticar y recuperarse de los errores

Cuando un error ocurre, el mensaje debe explicar el problema en lenguaje sencillo y proponer una solución.

En webs reales: «Error 422». «Datos no válidos», sin decir qué dato. Un formulario que, al fallar, borra todo lo escrito.

Lo que funciona: decir qué ha pasado y cómo arreglarlo, junto al campo afectado, conservando lo que la persona ya escribió. «Falta la @ en el correo» es un buen mensaje. Le dedicamos una guía completa a los mensajes de error que ayudan.

1110. Ayuda y documentación

Lo ideal es que la web no necesite explicación, pero a veces hace falta ayuda, y debe ser fácil de encontrar, centrada en tareas y breve.

En webs reales: unas preguntas frecuentes escondidas en el pie, en un PDF. Una explicación de cómo funciona el servicio que solo existe en la cabeza del comercial.

Lo que funciona: preguntas frecuentes junto al punto de decisión (bajo el precio, en el checkout), ayudas contextuales breves en los campos de formulario que lo necesitan, y un contacto visible para cuando todo lo demás no basta.

12Cómo hacer tu propia evaluación heurística

Preparación

1. 01Define el alcance. No evalúes toda la web a la vez. Elige dos o tres recorridos clave: encontrar un servicio y pedir presupuesto, comprar un producto, reservar.
2. 02Elige a los evaluadores. Entre tres y cinco personas, cada una por separado, es la recomendación de Nielsen. Si es tu web, incluye a alguien que no la conozca.
3. 03Prepara la plantilla. Una hoja de cálculo con estas columnas basta.

ID | Pantalla o paso | Problema observado | Heurística | Gravedad (0-4) | Captura | Propuesta
01 | Ficha de producto | El botón Añadir no da ninguna respuesta visible | 1 Visibilidad | 3 | img01.png | Mensaje de confirmación y contador del carrito animado
02 | Formulario reserva | Permite elegir lunes, día de cierre | 5 Prevención | 3 | img02.png | Desactivar días cerrados en el calendario
03 | Menú principal | «Expertise» no se entiende | 2 Mundo real | 2 | img03.png | Renombrar a «Qué hacemos»

Ejecución

1. 01Recorre cada flujo dos veces: la primera para entenderlo, la segunda para buscar problemas.
2. 02Hazlo en móvil y en ordenador, porque los problemas no son los mismos.
3. 03Anota cada problema por separado, aunque se repita en varias pantallas.
4. 04Asigna la heurística principal que incumple. Si no encaja en ninguna, anótalo igualmente.
5. 05Puntúa la gravedad de 0 (no es un problema) a 4 (impide completar la tarea).

Consolidación

Junta las listas de todos los evaluadores, une los problemas duplicados y ordena por gravedad. Los de gravedad 3 y 4 van a la lista de cambios inmediatos. Después, conviene comprobar con personas reales que los arreglos funcionan: el test de usabilidad es el siguiente paso natural.

Lo interesante de este tipo de ejemplo es la proporción: casi la mitad de lo anotado eran detalles de gravedad 1 o 2, y la mayor parte del beneficio estaba en tres cambios muy concretos. Esa es la forma habitual de una evaluación bien priorizada.

13Una lista que entrena la mirada

Lo mejor de las heurísticas no es la lista en sí, sino lo que hacen con tu forma de mirar. Al cabo de un tiempo, entras en una web y notas sin querer el botón que no responde o la palabra que nadie entiende. Esa sensibilidad es la que hace que los diseños salgan mejores desde el primer boceto.

En SIMA la evaluación heurística es el punto de partida de cualquier auditoría o rediseño dentro de nuestros proyectos de diseño web y experiencia digital. Si quieres que revisemos tu web con esta mirada y te entreguemos una lista priorizada de mejoras, escríbenos y lo vemos juntos.