Este documento describe las 10 heurísticas de usabilidad de Jakob Nielsen para el diseño de interfaces de usuario. Las heurísticas incluyen: 1) visibilidad del estado del sistema, 2) coincidencia entre el sistema y el mundo real, 3) control y libertad del usuario, 4) consistencia y estándares, 5) prevención de errores, 6) reconocimiento en lugar de recuerdo, 7) flexibilidad y eficiencia de uso, 8) diseño estético y minimalista, 9) ayudar a los usuarios a reconocer, diagnosticar y recuperarse de

1. 10 heurísticas de usabilidad
para el diseño de la interfaz
de usuario.
TI VII
EXPERIENCIA DE USUARIO
ELABORÓ: ING. OSWALDO RAFAEL ZAPATA NEVÁREZ

2. Los 10 principios generales de Jakob
Nielsen para el diseño de interacción.
Se llaman "heurísticas" porque son reglas generales y
no pautas de usabilidad específicas.

3. ¿Por qué
necesitamos
conocer los
principios de
usabilidad web de
Jackob Nielsen?
PARA CONSEGUIR QUE EL
USUARIO QUE VISITE NUESTRA
WEB SE QUEDE EN ELLA,
NECESITAMOS QUE SU
EXPERIENCIA CON LA MISMA
SEA POSITIVA.

4. ¿Que conseguimos si mejoramos la
experiencia del usuario?
Aumentar el tráfico recurrente. Es decir, que tenemos más puntos para
que un usuario después de haber visitado nuestra web o blog, vuelva a ella
en un futuro. Aplicando estos consejos podemos aumentar el número de
visitas de nuestras páginas webs.
Disminuir el porcentaje de rebote. El porcentaje de rebote no es otra cosa
que conseguir que el tiempo de estancia del usuario sea alto y conseguir
que navegue por las diferentes partes de nuestro site.
Eso se consigue facilitándole las decisiones a tomar dentro de nuestra página.

5. ¿Quién es Jakob Nielsen?
Jakob Nielsen, es un defensor del usuario y director del Nielsen Norman
Group, que cofundó con el Dr. Donald A. Norman (ex vicepresidente de
investigación de Apple Computer).
El Dr. Nielsen estableció el movimiento de "ingeniería de usabilidad de
descuento" para mejoras rápidas y baratas de las interfaces de usuario y ha
inventado varios métodos de usabilidad, incluida la evaluación heurística.
Nos vamos a centrar en sus 10 principios básicos de usabilidad web que se
usan hoy en día y que él formuló en 1995.

6. 1. Visibilidad del
estado del sistema

7. 1. Visibilidad del estado del sistema
Este principio de usabilidad web nos indica que siempre
tenemos que tener informado al usuario de lo que está pasando
en nuestra web y ofrecerle una respuesta en el menor tiempo
posible.
Ejemplo: al subir un archivo a Google Drive, el sistema nos indica que se está cargando y el
tiempo restante.

8. Comunicar el estado actual permite a los usuarios sentirse en
control del sistema, tomar las medidas adecuadas para alcanzar
su objetivo y, en última instancia, confiar en la marca.

9. Otros ejemplos de este principio:
 Las barras de carga de las imágenes o de los procesos de descarga de
archivos.
 Los Breadcrumbs o migas de pan que nos muestran dónde nos
encontramos dentro de la web.
 Los indicadores de los procesos de compra que suelen indicarnos en qué
fase nos encontramos.
 Las páginas de situación de suscripción con confirmación donde cargas
una página que indica que hemos enviado un mail para que haga click en
el enlace

10. 2. Coincidencia entre el sistema y el
mundo real
El diseño debe hablar el idioma de los usuarios. Use palabras,
frases y conceptos familiares para el usuario, en lugar de jerga
interna. Siga las convenciones del mundo real, haciendo que la
información aparezca en un orden natural y lógico.
El sitio web o aplicación tiene que utilizar el lenguaje del usuario, con expresiones y
palabras que le resulten familiares.
Ejemplo: en la página 404 de Lego, el mensaje es “página no encontrada”. El usuario no
tiene por qué saber qué significa el error 404

11. 2. Coincidencia entre el sistema y el
mundo real
La forma en que debe diseñar depende en gran medida de sus usuarios específicos.
Los términos, conceptos, iconos e imágenes que parecen perfectamente claros para
usted y sus colegas pueden ser desconocidos o confusos para sus usuarios.
Cuando los controles de un diseño siguen las convenciones del mundo real y
corresponden a los resultados deseados (llamado mapeo natural), es más fácil para
los usuarios aprender y recordar cómo funciona la interfaz. Esto ayuda a construir una
experiencia que se siente intuitiva.

12. 2. Coincidencia entre el sistema y el
mundo real
El ejemplo más claro es el uso de la papelera como símbolo de borrar.
Este icono sabemos para qué sirve o por lo menos lo intuimos sólo con verlo.

13. 3. Control y libertad del usuario
Los usuarios a menudo realizan acciones por error. Necesitan una
"salida de emergencia" claramente marcada para dejar la acción no
deseada sin tener que pasar por un proceso prolongado.
Ejemplo: En Gmail cuando envías un correo a la papelera te da la opción de deshacer la acción.

14. 3. Control y libertad del usuario
Cuando es fácil para las personas retirarse de un proceso o deshacer una acción, fomenta
una sensación de libertad y confianza. Las salidas permiten a los usuarios mantener el
control del sistema y evitar quedarse atascados y sentirse frustrados.
Consejos:
 Soporte Deshacer y Rehacer.
 Muestra una forma clara de salir de la interacción actual, como un botón Cancelar.
 Asegúrese de que la salida esté claramente etiquetada y sea reconocible.

15. 3. Control y libertad del usuario
También forma parte de este principio la funcionalidad que integra Twitter, Facebook
y otras redes de preguntarte si efectivamente quieres borrar esa publicación o quieres
dejarla como está.

16. 4. Consistencia y estándares
Los usuarios no deberían tener que preguntarse si diferentes
palabras, situaciones o acciones significan lo mismo. Siga las
tratados de la plataforma y de la industria.
Ejemplo: un estándar de un sitio web es la situación del logo en la cabecera, en la parte superior izquierda de la
página. El icono de menú en móvil (llamado menú hamburguesa) también se ha convertido en un estándar y el
usuario lo identifica fácilmente.

17. 4. Consistencia y estándares
El usuario no debe estar preguntándose siempre si ese botón enviará el correo, o si es
un botón o un enlace, o si ese elemento es clicable o no.
Lo mismo con el significado que ya hay asociado a determinados iconos: ¿qué te
sugiere una mano cerrada con el pulgar hacia arriba? Un like. ¿Y una estrella?
Favoritos.

18. 5. Prevención de errores
Los buenos mensajes de error son importantes, pero los mejores diseños evitan
cuidadosamente que ocurran problemas en primer lugar. Elimine las condiciones
propensas a errores o compruébelos y presente a los usuarios una opción de
confirmación antes de que se comprometan con la acción.
Ejemplo: Los buscadores proporcionan asistencia a los usuarios para que encuentren lo que
están buscando, con la función autocompletar o con la alternativa de resultados.

19. 5. Prevención de errores
Otro ejemplo… ¿cuántas veces has enviado un correo diciendo que adjuntarías algo
pero se te olvida? (y obviamente te das cuenta solo cuando ya le has dado al botón
de “Enviar”).
GMail implementó una funcionalidad para poder prever este error, que es lanzarte un
aviso cuando has escrito “adjunto” (o similares) y no has añadido nada en el correo.

20. 6. Reconocimiento en lugar de recuerdo
Minimice la carga de memoria del usuario haciendo visibles los elementos,
las acciones y las opciones. El usuario no debería tener que recordar
información de una parte de la interfaz a otra. La información requerida para
usar el diseño (por ejemplo, etiquetas de campo o elementos de menú) debe
ser visible o fácilmente recuperable cuando sea necesario.
Ejemplo: los enlaces auxiliares de una home que incluyen texto más icono para reforzar el
mensaje.

21. 6. Reconocimiento en lugar de recuerdo
En el afán de diseñar pantallas “lo más limpias posibles” muchas veces caemos en ocultar
opciones detrás de menús hamburguesa, hovers o ventanas modales.
Haciendo esto lo que hacemos es incrementar la carga mental en el usuario: le hacemos
recordar dónde está qué y de qué pantalla viene y hacia dónde va.
El ejemplo más fácil de entender es con un editor de textos.
Cuando vas a seleccionar una fuente de las tropecientas que has instalado, ¿qué es más
fácil? acordarnos del nombre de cada una de ellas y de cómo era; o por el contrario, que
nos hagamos una idea de cómo es si nos muestra una previsualización de la fuente

22. 7. Flexibilidad y eficiencia de uso
Los accesos directos, ocultos a los usuarios novatos, pueden acelerar la
interacción para el usuario experto, de modo que el diseño pueda atender tanto
a usuarios inexpertos como experimentados. Permita a los usuarios adaptar las
acciones frecuentes.
Ejemplo: MS Exchange ofrece al usuario una configuración avanzada.

23. 7. Flexibilidad y eficiencia de uso
Aceleradores, atajos (visuales o no) y recomendaciones que faciliten la navegación,
tanto para los usuarios sin experiencia como con experiencia. Es importante que el
sistema permita personalizar acciones frecuentes.

24. 8. Diseño estético y minimalista
Las interfaces no deben contener información que sea irrelevante o que rara vez
se necesite. Cada unidad adicional de información en una interfaz compite con
las unidades de información relevantes y disminuye su visibilidad relativa.
Ejemplo: la tendencia del diseño actual en la web. Apple, el adalid del minimalismo.

25. 9. Ayudar a los usuarios a reconocer,
diagnosticar y recuperarse de errores
Los mensajes de error deben expresarse en un lenguaje sencillo
(sin códigos de error), indicar con precisión el problema y
sugerir constructivamente una solución.
Ejemplo: Este formulario te avisa en tiempo real de los errores que cometes al rellenarlo.

26. 9. Ayudar a los usuarios a reconocer,
diagnosticar y recuperarse de errores
Ejemplo en Sytex: Se informa al usuario con un tono amigable, indicando el
problema con precisión para evitar intentar calmar la frustración del usuario
(Tareas de mantenimiento o actualización en el sistema).

27. 10. Ayuda y documentación
Es mejor si el sistema no necesita ninguna explicación adicional. Sin
embargo, puede ser necesario proporcionar documentación para ayudar a
los usuarios a comprender cómo completar sus tareas.
Ejemplo: la web de Iberia reserva un espacio importante y fácilmente localizable para la opción
de ayuda.

28. 10. Ayuda y documentación
Existen numerosos ejemplos de este principio general de usabilidad web:
 FAQs, Frequently Asked Questions, preguntas frecuentes
 El icono de la interrogación cerca de algunas opciones
 Minitours nada más abrir una aplicación donde se muestra lo esencial