UX · Heurísticas completas

Heurísticas de usabilidad

Las 10 heurísticas de Nielsen explicadas con ejemplos buenos y malos, heurísticas específicas para mobile, antipatrones y una checklist final para evaluar interfaces.

Por qué usar heurísticas

Son reglas que ayudan a detectar problemas de usabilidad sin necesidad de investigación compleja. Funcionan para auditorías rápidas, revisiones antes de publicar y ejercicios docentes.

Las heurísticas no son leyes rígidas, sino criterios para evaluar la experiencia. Esta página reúne:

  • Las 10 heurísticas clásicas de Nielsen.
  • Heurísticas específicas para mobile y apps.
  • Antipatrones frecuentes que rompen la experiencia.
  • Ejemplos buenos y malos que puedes reutilizar en clase.
  • Una checklist final para pasar por encima una interfaz en pocos minutos.

1. Visibilidad del estado del sistema

La interfaz debe informar siempre de qué está pasando, cuánto falta y qué acción está en marcha.

Buenos ejemplos
• Barra de progreso durante un envío o carga. • Mensajes tipo: “Guardando…”, “Casi listo…”. • Indicadores de pasos completados (1/3, 2/3, 3/3).
Malos ejemplos
• Pantalla que se queda congelada sin feedback. • Botón que no cambia tras pulsarlo. • Cargas invisibles sin indicador (spinners ocultos).

Cómo detectar fallos

  • ¿La persona sabe en qué punto del proceso está?
  • ¿Hay feedback inmediato al hacer clic?
  • ¿Los tiempos largos muestran progreso o se siente que “se ha roto”?

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

El producto debe hablar el lenguaje de la persona usuaria, no del sistema.

Buenos ejemplos
• “Carrito” en vez de “contenedor de items seleccionados”. • “Guardar borrador” en vez de “persistir estado intermedio”. • Iconos reconocibles: papelera, lupa, sobre.
Malos ejemplos
• Jerga técnica: “Error 504 gateway”. • Etiquetas abstractas: “Gestión avanzada”. • Iconos incomprensibles sin texto.

Cómo detectar fallos

  • ¿Una persona sin conocimientos técnicos lo entiende?
  • ¿Los iconos necesitan explicación para ser útiles?
  • ¿El texto usa palabras reales o jerga interna de la empresa?

3. Control y libertad del usuario

Permite deshacer, cancelar y volver atrás sin penalizar a la persona usuaria.

Buenos ejemplos
• Botón “Deshacer” después de borrar algo. • “Cancelar” visible en pasos largos. • Diálogos de confirmación para acciones irreversibles.
Malos ejemplos
• No poder volver atrás en un formulario largo. • Acciones irreversibles sin aviso. • Guardado automático sin opción de revertir.

Cómo detectar fallos

  • ¿Puedes volver atrás sin perderlo todo?
  • ¿Hay confirmaciones cuando tiene sentido que las haya?
  • ¿Puedes corregir antes de enviar o se cierra el flujo sin remedio?

4. Consistencia y estándares

Si una misma acción aparece con distintos nombres, estilos o iconos, la experiencia se rompe.

Buenos ejemplos
• Mismo estilo de botones en toda la web. • “Iniciar sesión” siempre igual, no mezclado con “Entrar”. • Iconos coherentes en estilo y significado.
Malos ejemplos
• Botones diferentes en cada página. • Mezcla de “Cuenta”, “Perfil”, “Panel”, “Mi zona”. • Cambios de tono radicales entre secciones.

Cómo detectar fallos

  • ¿Los elementos iguales se comportan igual siempre?
  • ¿El naming se mantiene entre todas las secciones?
  • ¿Los patrones se repiten o cada página parece de una web distinta?

5. Prevención de errores

Mejor evitar que la persona cometa un error que mostrar un mensaje después.

Buenos ejemplos
• Validación en tiempo real de campos. • Deshabilitar botones cuando falta información. • Sugerencias automáticas para evitar errores de escritura.
Malos ejemplos
• Formularios que muestran 10 errores al enviar. • Botones activos aunque falten pasos obligatorios. • Avisos que llegan tarde (“tu sesión ha expirado” al final).

Cómo detectar fallos

  • ¿Se puede cometer un error crítico con un solo clic?
  • ¿El sistema anticipa errores frecuentes (email, contraseña, formato, etc.)?
  • ¿La validación es anticipada o espera al final del proceso?

6. Reconocimiento mejor que recuerdo

Es más fácil reconocer opciones visibles que recordar comandos o rutas de memoria.

Buenos ejemplos
• Menús visibles con opciones claras. • Historial reciente y sugerencias basadas en uso. • Campos con autocompletado y ejemplos.
Malos ejemplos
• Funciones que solo se activan con atajos de teclado no documentados. • Iconos sin texto en funciones críticas. • Rutas ocultas dentro de submenús con nombres ambiguos.

Cómo detectar fallos

  • ¿La persona tiene que memorizar pasos para repetir una acción?
  • ¿Las funciones principales están a la vista sin tener que “saber dónde mirar”?
  • ¿Se ofrecen ejemplos, sugerencias o historial para ayudar a recordar?

7. Flexibilidad y eficiencia de uso

La interfaz debe funcionar tanto para personas nuevas como para expertas.

Buenos ejemplos
• Atajos de teclado para personas expertas. • Acciones rápidas (“Duplicar”, “Repetir pedido”). • Preferencias configurables (vista lista / vista grid).
Malos ejemplos
• Flujos largos que obligan a repetir siempre los mismos pasos. • No guardar valores por defecto útiles. • No permitir personalizar vistas en paneles complejos.

Cómo detectar fallos

  • ¿Alguien que usa el sistema cada día puede ir más rápido?
  • ¿Hay acciones rápidas para tareas repetitivas?
  • ¿Se recuerda el estado o hay que configurarlo en cada visita?

8. Diseño estético y minimalista

Mostrar solo la información relevante para la tarea, en el momento adecuado.

Buenos ejemplos
• Forms con campos justos para empezar, y opciones avanzadas colapsadas. • Pantallas de dashboard con 4–6 métricas clave, no 20. • Textos cortos, jerarquía clara, mucho aire.
Malos ejemplos
• Interfaces llenas de banners, pop-ups y elementos que compiten. • Formularios con campos irrelevantes para la tarea principal. • Textos densos sin jerarquía ni respiros.

Cómo detectar fallos

  • ¿La pantalla parece un panel de avión cuando solo necesitas un interruptor?
  • ¿Hay elementos que podrías ocultar sin afectar a la tarea?
  • ¿La vista principal se entiende en 3–4 segundos?

9. Ayuda a reconocer, diagnosticar y recuperarse de errores

Los errores deben explicarse en lenguaje claro y ofrecer una salida concreta.

Buenos ejemplos
• “No hemos podido procesar el pago. Revisa los datos de tu tarjeta o prueba con otro método.” • “Este archivo es demasiado grande. El límite es de 10 MB.” • “No tienes permisos para editar este documento. Pide acceso al administrador.”
Malos ejemplos
• “Error desconocido.” • “Operación fallida (código 0x00021).” • Mensajes de error que no indican qué hacer a continuación.

Cómo detectar fallos

  • ¿El error se entiende sin buscar en Google?
  • ¿La persona sabe cuál es el siguiente paso?
  • ¿El tono es respetuoso y no culpabiliza al usuario?

10. Ayuda y documentación

Aunque lo ideal es que no haga falta, la ayuda debe estar cerca de la tarea, no escondida.

Buenos ejemplos
• Tooltips o textos de ayuda junto a campos complejos. • FAQ integradas en el flujo (“¿Qué es esto?”). • Centro de ayuda buscable, enlazado desde los puntos clave.
Malos ejemplos
• Manual PDF de 80 páginas sin buscador. • Ayuda escondida en el footer sin relación con la tarea. • Textos de ayuda que repiten lo obvio.

Cómo detectar fallos

  • ¿La ayuda está a uno o dos clics de la tarea que la necesita?
  • ¿La documentación es concreta, o un bloque genérico que no resuelve nada?
  • ¿El lenguaje de la ayuda es el mismo que el de la interfaz?

Heurísticas extra para mobile

Las 10 heurísticas siguen valiendo, pero en móvil hay retos específicos: dedos grandes, pantallas pequeñas y uso en movimiento.

1. Tamaño y separación de objetivos táctiles

  • Botones y links cómodos de pulsar (mínimo ~44px de alto).
  • Suficiente espacio entre elementos interactivos para evitar toques accidentales.
  • Botones importantes lejos de los bordes donde pueda haber toques involuntarios.

2. Gestos visibles o descubribles

  • No ocultar funciones esenciales solo detrás de gestos (swipe, long press) sin pistas.
  • Usar animaciones sutiles o pistas visuales para sugerir que se puede deslizar.
  • Evitar gestos en conflicto con los del sistema operativo.

3. Contexto y continuidad

  • Permitir retomar una tarea si la app se cierra o se pierde conexión.
  • Recordar el estado entre sesiones (formularios, filtros, vistas).
  • Adaptar mensajes a situaciones típicas: poca batería, mala cobertura, etc.

4. Rendimiento y percepción de velocidad

  • Reducir cargas iniciales y priorizar contenido útil.
  • Feedback inmediato al tocar, incluso si el resultado tarda.
  • Evitar pantallas de “cargando” eternas con spinners sin contexto.

Antipatrones y malas prácticas frecuentes

Cosas que suelen aparecer en proyectos reales y que chocan frontalmente con las heurísticas.

Dark patterns de consentimiento

  • Botón de “Aceptar todo” enorme y “Configurar” diminuto.
  • Textos confusos que dificultan rechazar o limitar cookies.
  • Opciones escondidas en varios niveles para desactivar seguimiento.

Pop-ups y modales agresivos

  • Modales que aparecen antes de leer nada (“suscríbete ya”).
  • Difícil cerrar el modal en móvil (icono de cierre minúsculo).
  • Bloquear la tarea principal hasta responder a algo secundario.

Scroll infinito mal gestionado

  • No poder volver fácilmente al punto donde estabas.
  • Perder el contexto al recargar o cambiar de vista.
  • No mostrar hitos (“has llegado al contenido de la semana pasada”).

Microcopy culpabilizador

  • Mensajes que culpan a la persona: “Has hecho algo mal”.
  • Errores que no explican cómo solucionarlo.
  • Usar un tono gracioso en errores graves (pagos, borrados, etc.).

Checklist rápida

Pasar una interfaz por heurísticas en 10 minutos

Puedes usar esta checklist como guion de clase o como paso previo antes de presentar un proyecto. Marca cada punto como OK / duda / problema.

  • ¿La interfaz muestra siempre en qué paso estás y qué está haciendo el sistema? (H1)
  • ¿El lenguaje es comprensible para alguien no experto? (H2)
  • ¿Puedes deshacer, cancelar y volver atrás sin perderlo todo? (H3)
  • ¿Los elementos iguales se ven y se comportan igual? (H4)
  • ¿La interfaz evita errores antes de que ocurran? (H5)
  • ¿Reconoces fácilmente funciones sin tener que recordar rutas? (H6)
  • ¿Alguien experto puede ir más rápido sin romper la experiencia de quien empieza? (H7)
  • ¿Sobra algo en la pantalla o todo responde a una intención clara? (H8)
  • ¿Los errores se entienden y proponen soluciones concretas? (H9)
  • ¿La ayuda está cerca de la tarea y es accionable? (H10)
  • En móvil, ¿son cómodos de pulsar los objetivos táctiles? (Mobile 1)
  • ¿Hay gestos ocultos sin pistas visibles? (Mobile 2)
  • ¿El producto recuerda el contexto entre sesiones y cortes? (Mobile 3)
  • ¿Rinde bien en conexiones normales y ofrece feedback en cargas largas? (Mobile 4)

Como en el resto de KIT UX UI: entra, copia, adapta y, si te sirve para docencia o para tus proyectos, siempre puedes mencionarlo en tus materiales o documentación.