*Traté de hacerla lo más explicativo en los slides, pero hay mucho contenido que se pierde porque lo dije en el evento y no en las diapositivas. Hablemos de cómo las personas realmente van a usar la interfaz: Percepción, cognición, estructura, visión periférica, lectura en la web y otros temas son de los que estaré hablando en esta charla.

1. Diseñando Interfaces para Humanos
José Gutiérrez
@josernitos

2. Canción: Stairway to Heaven (Normal y al revés)
https://youtu.be/zGsUcPdPWBg?t=28s
// Escuche el video de Led Zeppelin, pero no lo vea, dura 1
minuto. Luego de escuchar el video, vea la próxima diapositiva.

3. • So here’s to my sweet Satan
• The one little path
• Would make me sad whose power is satan
• He’ll give those with him 666
• And all those fools who made us suffer, sad satan
¿Escuchó esto?

4. Canción: Stairway to Heaven (Normal y al revés)
https://youtu.be/zGsUcPdPWBg?t=28s
// Vea el video, especialmente cuando suena la canción al revés,
para comprobar si pudo o no escuchar la letra anterior.

5. ¿Cómo es que antes no entendíamos el audio y luego con
las letras si entendemos claramente lo que decía?
Nuestro cerebro está diseñado a buscar patrones y llenar
huecos informativos si no los encuentra, todo para poder
entender el mundo que nos rodea.

6. Diseño debería ser la representación de la intención
@josernitos
Limitaciones del ser humano

7. @josernitos
Limitaciones del ser humano

8. @josernitos
Percibimos lo que esperamos

10. Psycho: Escena de la ducha
https://youtu.be/8VP5jEAP3K4?t=1m12s
// Ver escena de Psycho

11. Los cineastas toda la vida han utilizado esta característica de
nuestras mentes para generar suspenso.
Esto lo podemos ver cuando como espectadores tenemos mayor
cantidad de información que el personaje, lo que nos hace
preguntarnos qué es lo que el personaje va hacer o cómo va
reaccionar ante la situación.

12. Percibimos lo que esperamos
• Contexto
• Experiencia
• Metas
• Expectativas

13. Percibimos lo que esperamos

14. Percibimos lo que esperamos

15. Percibimos lo que esperamos
• ¿Cuántas notificaciones tengo?

16. Percibimos lo que esperamos

17. Percibimos lo que esperamos
• ¿Cuántas notificaciones tengo?
• ¿Qué hora era?

18. Percibimos lo que esperamos

19. @josernitos
Nuestros sentidos se “agudizan” cuando
tenemos una meta.
• Cuando buscamos a una persona en un lugar lleno de
gente, nuestro cerebro se pone en modo “búsqueda".

20. @josernitos
Percibimos lo que esperamos
• Debemos alejarnos de la ambigüedad
• Ser consistentes
• Entender las metas de nuestros usuarios
• Diseñar teniendo en cuenta cuáles son las aspiraciones y
expectativas del usuario para completar su objetivo/meta.
Implicaciones en Diseño

21. @josernitos
Visión está optimizada para ver estructura

22. Gestalt:
• Nuestro sistema visual primero ve objetos como un todo, antes que
sus partes individuales.
• Nuestra mente simplifica el mundo visual para tratar de clarificar y
entenderlo con mayor facilidad.
• Rellenamos la información visual con el objetivo de completar
objetos.
Visión está optimizada para ver estructura

23. • Similaridad github.com

24. • Proximidad amazon.com

25. • Continuidad
amazon.com
ArtfulDodger.com

26. • Simetría MatteoZanga.it

27. • Figura / Fondo basecamp.com

28. Visión está optimizada para ver estructura

29. Visión está optimizada para ver estructura

30. Visión está optimizada para ver estructura

31. Visión está optimizada para ver estructura

32. Visión está optimizada para ver estructura
• Fácil:
8123 - 4567
• Difícil:
81234567
• Fácil:
1234 - 5678 - 9012 - 3456
• Difícil:
1234567890123456

33. Visión está optimizada para ver estructura
• Fácil:
8123 - 4567
• Difícil:
81234567
• Fácil:
1234 - 5678 - 9012 - 3456
• Difícil:
1234567890123456

34. Visión está optimizada para ver estructura
• FÁCIL:
8123 - 4567
• DIFÍCIL:
81234567
• FÁCIL:
1234 - 5678 - 9012 - 3456
• DIFÍCIL:
1234567890123456

35. Visión está optimizada para ver estructura
• FÁCIL: 8123 - 4567
• DIFÍCIL: 81234567
• FÁCIL:1234 - 5678 - 9012 - 3456
• DIFÍCIL:1234567890123456

36. Visión está optimizada para ver estructura
FÁCIL: 8123 - 4567
DIFÍCIL: 81234567
FÁCIL:1234 - 5678 - 9012 - 3456
DIFÍCIL:1234567890123456

37. Visión está optimizada para ver estructura
FÁCIL: 8123 - 4567
DIFÍCIL: 81234567
FÁCIL:1234 - 5678 - 9012 - 3456
DIFÍCIL:1234567890123456

38. @josernitos
Si vemos estructuras, primero
diseñemos estructuras.
• Bocetos -> Wireframes -> Prototipo -> Diseño

39. @josernitos
Visión está optimizada para ver estructura
• Las personas no leen, escanean.
• Jerarquía visual ayuda a las personas a enfocarse en la
información relevante para lo que ocupan.
• Diseñe estructuras que podamos escanear información.
Implicaciones en Diseño

40. @josernitos
El lenguaje es innato, la lectura no

42. El lenguaje es innato, la lectura no
• Sin ningún sistema o forma de aprender a los:
• 7 - 12 meses ya podemos decir algunas palabras
• 12 - 24 meses ya podemos decir frases
• Estamos programados para hablar y entender lenguaje hablado

43. ¿Qué tiene que ver esto?

44. • Sea conciso
• Escriba lo necesario
• Nadie quiere leer relleno
"Get rid of half the words on each page,
then get rid of half of what’s left."
—krug’s third law of usability

46. El lenguaje es innato, la lectura no
Su sesión ha expirado. Por
favor re-autentíquese.
Su sesión ha expirado. Por
favor vuelva iniciar sesión.vs

47. @josernitos
La lectura ya implica un esfuerzo
cognitivo, disminuyamos esa carga.
• Lenguaje común, texto conciso.

48. @josernitos
El lenguaje es innato, la lectura no
• Mal diseño de información puede afectar la lectura.
• Lenguaje inusual, jerga, etc.
• Tipografías difíciles de leer
• Uso de mayúsculas
• Letra pequeña
• Texto en fondo difícil de leer
• Texto centrado
• Leemos poco, escaneamos mucho.
Implicaciones en Diseño

49. @josernitos
Nuestra visión periférica es imperfecta

50. Nuestra visión periférica es imperfecta
baccredomatic.com

51. Nuestra visión periférica es imperfecta
www.bncr.fi.cr/BNCR/Default.aspx

52. Nuestra visión periférica es imperfecta
www.bncr.fi.cr/BNCR/Default.aspx

53. @josernitos
Hagamos obvios los errores, los pasos
a seguir, etc.
• Comuniquemos donde el usuario lo espera o está viendo.

54. @josernitos
Nuestra visión periférica es imperfecta
• Señale los errores
• Use símbolos de error
• Use el rojo
Implicaciones en Diseño

55. @josernitos
Nuestra atención es limitada

56. Nuestra atención es limitada
• Ir a la cocina, abrir la refri, olvidar qué iba hacer.
• Tomar una llamada y olvidar que era lo que estaba haciendo.
• Ir al cajero, sacar plata, olvidar la tarjeta.
Nos enfocamos en nuestras metas y le ponemos poca
atención a nuestras herramientas.

57. Nuestra atención es limitada

58. Nuestra atención es limitada

59. Nuestra atención es limitada
• Seguimos el “olor” a nuestra meta
Nos enfocamos en nuestras metas y le ponemos poca
atención a nuestras herramientas.

60. Nuestra atención es limitada

61. Nuestra atención es limitada

62. Nuestra atención es limitada
Meta: Pagar a Iván 20.000 colones

63. Nuestra atención es limitada
Meta: Pagar a Iván 20.000 colones

64. Nuestra atención es limitada
Meta: Pagar a Iván 20.000 colones

65. ¿Cuál es la diferencia?
Supongo que, local.

66. Es de otro banco,
pero ¿porqué cheque?
¿qué es SINPE?

67. @josernitos
Las metas gobiernan nuestra atención,
diseñemos en función a estas metas.

68. @josernitos
Nuestra atención es limitada
• Recuérdele al usuario qué ha hecho, qué ha cambiado
• Piense cuál es la meta del usuario, diseñe en función a eso.
• Piense los posibles modelos mentales del usuario.
• Cree consistencia
• Atomic Design
• Style Guides
Implicaciones en Diseño

69. @josernitos
Diseño es la representación
de la intención

70. @jmspool
Design is the Rendering of Intent

71. Diseño es la representación de la intención
• Diseño = Solución
• Representación = Manifestación
• Intención = Objetivo

72. Diseño es la representación de la intención

73. ¿Cuál es mejor solución (diseño)?

74. Diseño es la representación de la intención
Ninguna

75. 300 dpiBordes

76. @josernitos
El mejor diseño debe tomar en cuenta el
Usuario, el Negocio y sus Recursos.

77. @josernitos
Diseño es la representación de la intención
• Debemos entender el contexto del Negocio, presupuesto
disponible, tiempo, tecnología, equipo.
• Diseñar manteniendo un equilibrio entre las necesidades
del negocio + las necesidades de los usuarios.
• Entender los objetivos de lo que vamos a crear,
cuestionar esos objetivos hasta entenderlos al 100%.
Implicaciones en Diseño

78. @josernitos
Comprendiendo cómo el ser humano
procesa información, es el primer paso
para diseñar soluciones acertadas,
entendibles y usables.

79. @josernitos
Diseñar comprendiendo las limitaciones
del ser humano, fortalece nuestro
negocio y lo puede llevar a otro nivel.

80. Referencias:

81. @josernitos
facebook: UX Costa Rica
josernitos.com