Este documento presenta 10 claves y un mandamiento para diseñar webs y apps. Las 10 claves son los 10 principios heurísticos de usabilidad propuestos por Jakob Nielsen en 1990 que cubren categorías comunes de errores de usabilidad. El documento explica cada principio con ejemplos. También propone que el diseño debe contar una historia clara para el usuario.

1. 10 claves, un mandamiento
y un par de mentiras
para diseñar webs y apps
Hacemos cosas que funcionan - www.unexpendables.com
Hacemos cosas que funcionan
@unexpendables

2. Índice
I.
II.
III.
IV.
V.
Presentación
Pero ¿Esto qué es?
¿Por qué 10 claves?
10 preguntas que debe responder todo proyecto
1 Mandamiento
2
Hacemos cosas que funcionan
@unexpendables

3. Presentación
Hacemos cosas que funcionan
@unexpendables

4. Hola, soy Sergio de la Casa
@sergiodelacasa,
CEO & UX lead
Unexpendables
Llevo diseñando productos y soluciones desde el siglo
pasado para Panda, Gamesa, Sherpa y otra gente…
Hacemos cosas que funcionan
@unexpendables

5. Hacemos cosas que funcionan
@unexpendables

6. Sorprendentemente la fregona es un
invento de los años 50
Hacemos cosas que funcionan
@unexpendables

7. Era tan fácil como atar el trapo de fregar a
un palo
Hacemos cosas que funcionan
@unexpendables

8. Pensamos, diseñamos y fabricamos los
palos que convierten los trapos en
flamantes fregonas
Hacemos cosas que funcionan
@unexpendables

9. Pero…¿Esto qué es?
Hacemos cosas que funcionan
@unexpendables

10. NO somos una ONG J
Los usuarios felices están bien, pero
sólo porque nos aportan beneficio
Hacemos cosas que funcionan
@unexpendables

11. La experiencia de usuario es un un medio,
no un objetivo en si mismo.
Un producto bien diseñado tiene que ser
usable. Pero no por ser usable es un buen
producto.
Hacemos cosas que funcionan
@unexpendables

12. Razón número 1 : Ignorar a los clientes
Hacemos cosas que funcionan
@unexpendables

13. Según Forrester, un producto debe ser:
Deseable
Usable
Útil
Hacemos cosas que funcionan
@unexpendables

14. ¿Por qué 10 Claves?
Hacemos cosas que funcionan
@unexpendables

15. Jakob Nielsen
Gurú
Hacemos cosas que funcionan
@unexpendables

16. En 1990 Nielsen hizo un estudio sobre los
249 problemas de usabilidad
más comunes.
Observó que se podían agrupar en
10 categorías
Hacemos cosas que funcionan
@unexpendables

17. …estableció entonces
10 principios heurísticos
Uno por cada categoría de error
Hacemos cosas que funcionan
@unexpendables

18. Los heurísticos NO son patrones de diseño
Son más bien Reglas de Oro
Un catálogo de
buenas prácticas
Hacemos cosas que funcionan
@unexpendables

19. Cumplirlos, no garantiza el éxito…
…pero no hacerlo garantiza
un fracaso casi seguro.
Recuerda: Los heurísticos nacen como
respuesta a los problemas más comunes de los
usuarios.
Hacemos cosas que funcionan
@unexpendables

20. Y sobre todo, se apoyan en números
ü 249 problemas de usabilidad.
ü 10 heurísticos.
ü 318 subheurísticos.
Esto significa que…
Hacemos cosas que funcionan
@unexpendables

21. …No son opinables J
¡Palabra de
Jakob!
Hacemos cosas que funcionan
@unexpendables

22. Pero… ¿Sólo 10?
Desde 1990 la usabilidad se ha hecho mayor y se
han identificado nuevas reglas que añadir
a la lista.
No obstante, en la lista original siguen siendo 10.
Hacemos cosas que funcionan
@unexpendables

23. 10 preguntas que
debe responder todo
proyecto
Hacemos cosas que funcionan
@unexpendables

24. Con ustedes, la famosa lista de heurísticos:
1. Visibilidad del estado del sistema
2. Correspondencia 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 más que memoria
7. Flexibilidad y eficiencia de uso
8. Información y diseño minimalista
9. Reconocimiento y recuperación de errores
10. Ayuda y documentación
Hacemos cosas que funcionan
@unexpendables

25. Pero vayamos por partes…
Hacemos cosas que funcionan
@unexpendables

26. 1.- Visibilidad del estado del sistema
El sistema siempre debe mantener
informado al usuario acerca de lo que
está pasando, e informarle de cualquier
cambio en un tiempo razonable
Hacemos cosas que funcionan
@unexpendables

27. Siempre informado del estado de su sistema…
Ejem, ¿Te ocurre
algo sistema?...
Hacemos cosas que funcionan
@unexpendables

28. “¡Tú sabrás lo que
has hecho!”
¡MAL!
Hacemos cosas que funcionan
@unexpendables

29. “Todavía no te has dado cuenta de que
¡Los platos no se
lavan solos!”
¡Mucho mejor!
Hacemos cosas que funcionan
@unexpendables

30. Y no olvidarse de informar de
cualquier cambio…
…en un
tiempo
razonable
Hacemos cosas que funcionan
@unexpendables

31. Algunos ejemplos reales…
Al pulsar, el botón se
sustituye por una barra
de progreso hasta que
finaliza el proceso
Se muestra un mensaje al
finalizar una tarea
La fortaleza de la
contraseña se muestra
en tiempo real
Hacemos cosas que funcionan
@unexpendables

32. 2.- Correspondencia entre el sistema y el
mundo real
El diseño está adaptado al mundo real
de los usuarios, su lenguaje,
conocimientos, etc
Hacemos cosas que funcionan
@unexpendables

33. Es necesario manejar
conceptos y metáforas
familiares al usuario
Una web…
¡Es como un
toro!
Hacemos cosas que funcionan
@unexpendables

34. Todos los días:
Archivos
Los guardamos en… Carpetas
Manejamos…
Tiramos cosas a la…
Hacemos cosas que funcionan
Papelera
@unexpendables

35. En iTunes
La metáfora de una
biblioteca encaja con el
modelo mental de los
usuarios.
Contiene música, películas,
audiolibros…
Hacemos cosas que funcionan
@unexpendables

36. Skeuomorfismo
Hacemos cosas que funcionan
@unexpendables

37. 3.- Control y libertad del usuario
Los usuarios a menudo eligen opciones
por error. Hay que facilitarles una
salida de emergencia.
Permitir deshacer y rehacer.
Hacemos cosas que funcionan
@unexpendables

38. En la siguiente rotonda
continúe
recto,
segunda salida
Hacemos cosas que funcionan
@unexpendables

39. a la
…
izquierda
ha dicho, no?
Hacemos cosas que funcionan
@unexpendables

40. recalculando
ruta…
…
por tercera vez
Hacemos cosas que funcionan
@unexpendables

41. A esta opción de búsqueda
es fácil acceder, introducir
información, realizar una
búsqueda y cancelarla
Está marcado
claramente dónde está
el usuario y hacia dónde
puede ir
Hacemos cosas que funcionan
@unexpendables

42. Y los famosos
Deshacer y Rehacer
Hacemos cosas que funcionan
@unexpendables

43. 4.- Consistencia y estándares
El diseño es consistente internamente
y con los estándares externos
Hacemos cosas que funcionan
@unexpendables

44. ¡Mi
pueblo!
Hacemos cosas que funcionan
@unexpendables

45. ¡Mi
abuela!
Hacemos cosas que funcionan
@unexpendables

46. De mi abuela he aprendido muchas cosas…
“Antena 3
en el tres”
Es así de simple
Hacemos cosas que funcionan
@unexpendables

47. Gmail:
Adopta el mismo estándar que otros
clientes de email existentes
Office 12:
Idéntico estilo en las toolbars e
iguales opciones en los menús de
todos los productos
Hacemos cosas que funcionan
@unexpendables

48. 5.- Prevención de errores
El diseño debe prevenir los errores de
los usuarios antes de que los cometan
Hacemos cosas que funcionan
@unexpendables

49. =
+
¡Falso!
Hacemos cosas que funcionan
@unexpendables

50. +
Hacemos cosas que funcionan
=
@unexpendables

51. Siempre que diseñes una
escalera…
…ponle una barandilla
(La gente intentará bajar corriendo)
Hacemos cosas que funcionan
@unexpendables

52. Algunos ejemplos reales…
Mostrar la acción
primaria de forma más
relevante (Ley de Fitts)
El auto-recomendar evita
errores tipográficos
El foco se coloca
automáticamente en el
cajetín de búsqueda
Hacemos cosas que funcionan
@unexpendables

53. 6.- Reconocimiento más que memoria
El diseño se basa en reconocer más que
en recordar para permitir al usuario
interactuar de manera fácil y productiva.
Hacemos cosas que funcionan
@unexpendables

54. Y tú
¿De quién
eres?
Soy el nieto de
Angelines
Hacemos cosas que funcionan
@unexpendables

55. No te recuerda, ni te recordará nunca…
…pero es capaz de
reconocerte
si le das la información adecuada
Hacemos cosas que funcionan
@unexpendables

56. Vista previa de las fuentes en
lugar de solo el nombre
Recomendaciones al escribir
código en un entorno de
desarrollo
Hacemos cosas que funcionan
@unexpendables

57. 7.- Flexibilidad y eficiencia de uso
Se facilita y optimiza la interacción con
los usuarios cualesquiera que sean sus
características
Hacemos cosas que funcionan
@unexpendables

58. ¿Qué prefieres?
O
Dos herramientas diferentes
para un mismo fin
Hacemos cosas que funcionan
@unexpendables

59. El usuario elige
una opción
u otra
según el contexto y la necesidad
Hacemos cosas que funcionan
@unexpendables

60. una opción
u otra
Hacemos cosas que funcionan
@unexpendables

61. ¡Cuidado con los escenarios
improbables!
Nadie come con palillos y tenedor a la vez
Hacemos cosas que funcionan
@unexpendables

62. ¿Un ejemplo de esto?
O
Hacemos cosas que funcionan
Ctrl+V
@unexpendables

63. 8.- Información y diseño minimalista
El diseño evita toda información o
elemento gráfico irrelevante y sólo
incluye la información necesaria
Hacemos cosas que funcionan
@unexpendables

64. es ruido
Lo que no es información
Hacemos cosas que funcionan
@unexpendables

65. Menos es
Hacemos cosas que funcionan
Más
@unexpendables

66. Lo que no suma
resta
Hacemos cosas que funcionan
@unexpendables

67. Si lo que quieres decir es “Árbol”
¡Quítale los
adornos!
Por favor J
Hacemos cosas que funcionan
@unexpendables

68. Los cuatro principios del
diseño visual para
diferenciar información:
• Contraste
• Color
• Alineamiento
• Proximidad
Hacemos cosas que funcionan
@unexpendables

69. ¿Primera mentira?
Hacemos cosas que funcionan
@unexpendables

70. Existe el concepto de
Complejidad Explícita
Hacemos cosas que funcionan
@unexpendables

71. Simple no es escaso, ni de baja
calidad.
Hacemos cosas que funcionan
@unexpendables

72. Pequeños detalles pueden marcar la
diferencia y la percepción de calidad.
Hacemos cosas que funcionan
@unexpendables

73. 9.- Reconocimiento y recuperación de
errores
Los mensajes de error ayudan a
solucionar el problema
Hacemos cosas que funcionan
@unexpendables

74. ¿Os acordáis de él?
¡Ay!
Hacemos cosas que funcionan
@unexpendables

75. A veces no tenemos dinero para pagar barandillas…
Si no podemos evitar que se caiga…
ayudémosle por lo menos
…
a levantarse
Hacemos cosas que funcionan
@unexpendables

76. O puedes encontrarte de pronto con…
Hacemos cosas que funcionan
@unexpendables

77. v
Estiven
O puedes encontrarte de pronto con…
Sigal
Hacemos cosas que funcionan
@unexpendables

78. Feedback inmediato
con instrucciones
precisas
No siempre que ocurre
un error es una tragedia.
Lo importante es
recuperarse.
Hacemos cosas que funcionan
@unexpendables

79. 10.- Ayuda y documentación
La documentación de ayuda está
adaptada a las necesidades de los
usuarios
Hacemos cosas que funcionan
@unexpendables

80. Y si todo lo demás falla…
…sólo entonces
reconocerá
que necesita
ayuda .
Hacemos cosas que funcionan
@unexpendables

81. Hay muchas maneras de hacerlo
Ayuda contextual.
Muestra un contenido u
otro en función de
dónde estemos.
Vídeos incrustados. Son
muy útiles para mejorar
los ratios de conversión.
Hacemos cosas que funcionan
@unexpendables

82. Tooltips.
Para mostrar consejos
sobre un elemento en
concreto.
Y la ayuda de toda la
vida. En ventana nueva
con toda la información.
Hacemos cosas que funcionan
@unexpendables

83. Y hasta aquí con las 10 claves
Hacemos cosas que funcionan
@unexpendables

84. Un
mandamiento
Hacemos cosas que funcionan
@unexpendables

85. Eduard Khil
Hacemos cosas que funcionan
@unexpendables

86. En 1976 Eduard Khil hizo un aporte impagable a la
humanidad…
http://trololololololololololo.com/
Hacemos cosas que funcionan
@unexpendables

87. • Puesta en escena
perfecta
• Estética cuidada
• Ejecución es
técnicamente muy
profesional
• Pero…
Hacemos cosas que funcionan
@unexpendables

88. ¡No dice nada!
Hacemos cosas que funcionan
@unexpendables

89. debe ser
como una narración.
La interacción con una web
Cuando el usuario se vaya, tiene que ser capaz de
contar lo que le hemos
querido transmitir.
Hacemos cosas que funcionan
@unexpendables

90. ¿Qué vamos a contar?
¿TROLOLO?
Hacemos cosas que funcionan
@unexpendables

91. Un mandamiento nuevo nos dio el Señor:
Una página,
Un Objetivo
Hacemos cosas que funcionan
@unexpendables

92. Si el objetivo principal es vender…
…vamos a vender
Si el objetivo principal es regalar…
… pues todos los esfuerzos a decir
que es
Gratis y Bueno
Hacemos cosas que funcionan
@unexpendables

93. Pero orientados a UN Objetivo.
Y si hay varios…
…Priorizad
El % de espacio en pantalla que dedicamos a cada
objetivo, es una métrica válida
Hacemos cosas que funcionan
@unexpendables

94. Por qué decir Trololo, si podemos decir…
Hacemos cosas que funcionan
@unexpendables

95. ¿Segunda mentira?
Hacemos cosas que funcionan
@unexpendables

96. Done is better than perfect
Hacemos cosas que funcionan
@unexpendables

97. Pero…
¿Podrías definirme “done”?
Hacemos cosas que funcionan
@unexpendables

98. Done ≠ Perfect
Done ≠ Chapuza
Hacemos cosas que funcionan
@unexpendables

99. Mejor
Good enough & done
Is better than
perfect but undone
Hacemos cosas que funcionan
@unexpendables

100. ¿Y para una App?
Recurramos de nuevo a Nielsen
Hacemos cosas que funcionan
@unexpendables

101. Leslie
Nielsen
A nadie le importaba un comino.
Pero era nuestro comino.
Hacemos cosas que funcionan
@unexpendables

102. En resumen
Hacemos cosas que funcionan
@unexpendables

103. Veamos de nuevo la lista de heurísticos:
1. Muestrale cómo estás y dile porqué.
2. Háblale en su idioma, con metáforas que entienda
3. Si se equivoca en un cruce, dale una ruta alternativa.
4. Pon Antena 3 en el 3. (Cada cosa en su sitio).
5. Pon barandillas en las escaleras.
6. Que reconozca lo que muestras. No te recordará.
7. Dale tenedor o palillos si le hacen falta. No a la vez.
8. Si quieres decir “Árbol”, no lo pongas con adornos
9. Si no puedes evitar que se caiga, ayúdale a levantar
10. Y si todo falla, que pueda acceder a la ayuda
Hacemos cosas que funcionan
@unexpendables

104. Pero, por encima de todo…
Hacemos cosas que funcionan
@unexpendables

105. Sed siempre fieles al
Objetivo
Hacemos cosas que funcionan
@unexpendables

106. Que nadie pueda decir que
no nos dio la mandanga
por que todo le sonaba a trololó.
Hacemos cosas que funcionan
@unexpendables

107. ¡Muchas gracias!
Para cualquier duda o cuestión
sergio@unexpendables.com
@sergiodelacasa
www.unexpendables.com
Hacemos cosas que funcionan
@unexpendables