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.
10 claves, un mandamiento y un par de mentiras para diseñar webs y apps
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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