1. La ciencia detrás del
UX Design
Diseño de Interacción y
Factores Humanos
Danilo Cappelli danilocappelli@gmail.com @yoruguayo
Consultor en Diseño de
Experiencia de Usuario

2. http://youtube.com/v/tRJTRwPGprs
Un error
humano que
costó US$
400 millones
???

3. El diseño de la
interfaz de
usuario detrás
del error…

4. http://youtube.com/v/tDZzfdela-Y
La
complejidad
de uso detrás
del error…

5. Mala Experiencia de Usuario
Problemas de Diseño de Interacción

6. UX e IxD en
CONTEXTO
Dan Saffer, 1999

7. Experiencia de Usuario
¿Qué es diseño de UX?
Todo tiene una experiencia de usuario. Nuestro trabajo no es crear la
experiencia del usuario. Nuestro trabajo es lograr que esa experiencia sea
buena.
Pero, ¿cómo se logra una "buena"
experiencia de usuario?

8. ¿Qué es Diseño de Interacción?
Definición de DISEÑO
● Diseño mal interpretado
● Diseño en Publicidad
o Transmitir vs. Comunicar
§ idea + necesidad de
negocio + persuadir
● Diseño en la Web
o Diseñar vs. Crear
o El diseño es todas las
etapas de un proyecto

9. ¿Qué es Diseño de Interacción?
Empatía
● La empatía del griego ἐµπαθής =
empathí̱s ("emocionado") es la
capacidad cognitiva de percibir, en
un contexto común, lo que otro
individuo puede sentir.
● También es descrita como un
sentimiento de participación afectiva
de una persona en la realidad que
afecta a otra.

10. ¿Qué es Diseño de Interacción?
Afinidad
● La sociología define la afinidad como
un "parentesco de espíritu", un cierto
interés y otras relaciones
interpersonales.
● La afinidad es caracterizada por altos
niveles de intimidad e intercambio,
usualmente en grupos cercanos,
también conocidos como grupos de
afinidad.

11. ¿Qué es Diseño de Interacción?
● “Mi trabajo es descubrir, sintetizar y equilibrar todas las
necesidades y limitaciones de los usuarios." Steven Hoober
ejemplo de teoría de “encastre” con modelo de cafe-internet.
● "Esto se trata de la comprensión de los clientes y los objetivos de
negocio." Steven Hoober
● "Ser un profesional en IxD siempre se ha referido al diseño de
ecosistemas. Todo lo que diseñamos es un ecosistema". Steven
Hoober(Un ecosistema es un sistema natural que está formado por un conjunto de organismos vivos y el
medio físico donde se relacionan) Ejemplo JARDIN

12. ¿Qué es Diseño de Interacción?
● "Los usuarios, como parte del sistema, tienen necesidades y
limitaciones cuantificables." Steven Hoober
Necesidades Restricciones
Metas/objetivos de los usuarios Tiempos y Presupuestos en las
organizaciones.
Objetivos de las organizaciones y resultados
claves esperados.
Viabilidad técnica y entornos/contextos.
Términos legales, regulaciones,
requerimientos en cuanto a procesos.
El entorno/contexto en el cual el usuario
opera.

13. ¿Qué es Diseño de Interacción?
"El diseño de interacción es
dar forma a las cosas
para uso de la gente."

14. ¿Qué es Diseño de Interacción?

15. Experiencia de Usuario
El objetivo de un diseñador de UX es
hacer que los usuarios
sean efectivos.

16. ¿Qué define a un Diseño de Interacción exitoso?
Que sea
eficiente.

17. ¿Qué define a un Diseño de Interacción exitoso?
Que sea
eficiente.
“si no funciona,
no sirve”.

18. ¿Qué define a un Diseño de Interacción exitoso?
Que sea
eficiente.
“Nos convierte en
Usuarios Efectivos”.

19. ¿Cómo logra un buen IxD?
"crear" el proceso Técnicas (Usabilidad)
“UX” es ciencia y no arte.

20. Experiencia de Usuario
UX Design implica un proceso muy similar a
hacer ciencia:
en los proceso de UX Design aplicamos el método científico: elaboramos
una hipótesis, la testeamos y la validamos (o no) y volvemos a repetir el
ciclo hasta estar alineados con necesidades de usuarios y objetivos de
negocio.

21. IxD en CONTEXTO

22. Ley de Fitt - la piedra angular del diseño de interacción
En ergonomía, la ley de Fitts es un modelo del
movimiento humano, que predice el tiempo
necesario para moverse rápidamente desde una
posición inicial hasta una zona destino final como una
función de la distancia hasta el objetivo y el tamaño
de éste.
La ley de Fitts expresa que el tiempo
para llegar a un objetivo (visual)
depende de la distancia a dicho
objetivo y su tamaño.

23. Ley de Fitt - la piedra angular del diseño de interacción
T = a + b log2 ( D / W + 1 )
T es el tiempo medio necesario para completar el movimiento.
a representa el tiempo de inicio / parada en segundos para un dispositivo
determinado
b mide la velocidad inherente del dispositivo
D es la distancia desde el punto inicial hasta el centro del objetivo.
W es el ancho del objetivo medido sobre el eje del movimiento.

24. Consejos útiles que podemos extraer de
la ley de Fitts (a la hora de diseñar o auditar)
1 - Lo más importante debe ser más grande o estar
más cerca
Las acciones más habituales o más importantes para los usuarios de un site deben estar lo más
cerca posible de la posición previa del cursor y tener una superficie clicable mayor.
Ejemplo común de mala práctica: al completar el último campo en un proceso de registro, nos
encontramos con que el botón “enviar” está más lejos de ese punto que otros botones del
formulario y su tamaño es exactamente el mismo.

25. Consejos útiles que podemos extraer de
la ley de Fitts (a la hora de diseñar o auditar)
2 - El concepto de “ancho” es
más relativo de lo que prece
Si aumentamos el tamaño de los enlaces, debemos tener
en cuenta cuál es la dirección de movimiento del
cursor más probable cuando éstos se usan, ya que lo que
cuenta es el recorrido útil sobre el eje de desplazamiento
del cursor.
Si el movimiento es predominantemente vertical, por
ejemplo, será la altura del botón, y no su ancho, la medida
a potenciar.

26. Consejos útiles que podemos extraer de
la ley de Fitts (a la hora de diseñar o auditar)
3 - Atención al despliegue
de menús jerárquicos
En los menús jerárquicos, asegúrate de que las
opciones que aparecen quedan cerca de la posición
original y que no se cambia la dirección del
desplazamiento.

27. Consejos útiles que podemos extraer de
la ley de Fitts (a la hora de diseñar o auditar)
4 - Pon el diseño al servicio de tus usuarios, y no al
revés
No suele ser una buena idea sacrificar el tamaño y la ubicación de los enlaces por criterios
meramente estéticos o de economía de espacio; quizás tengamos una buena razón para hacerlo
en determinadas ocasiones, pero debemos sopesar antes los pros y los contras con detenimiento.

28. Consejos útiles que podemos extraer de
la ley de Fitts (a la hora de diseñar o auditar)
5 - Si se lo ponemos más fácil al usuario, que se note
Si ampliamos el espacio sobre el que el usuario puede hacer clic en un enlace, sus límites deben ser
claramente perceptibles, ya que de lo contrario esto no servirá de nada; por lo que al usuario
respecta, la superficie clicable es la que él percibe como tal.

29. Consejos útiles que podemos extraer de
la ley de Fitts (a la hora de diseñar o auditar)
6 - No te lo tomes a la tremenda
La fórmula nos dice que cada incremento en el tamaño del objeto conlleva una mejora
progresivamente menor (esto se debe a la naturaleza logarítmica de la función).
La traducción es que hacer enlaces grandes ayuda, pero hacerlos “enormes” no aporta ningún
beneficio adicional.
No olvides la variable “distancia”. Quizás no puedas (o no quieras) hacer más grande un objeto, pero
posiblemente sí puedes ubicarlo más cerca.

30. FACTORES
HUMANOS

31. COGNICIÓN

32. COGNICIÓN
Definición de Cognición
● La cognición (del latín: cognoscere, ‘conocer’) se define como la
facultad de un ser vivo para procesar información a partir de
la percepción, el conocimiento adquirido (experiencia) y
características subjetivas que permiten valorar la información.
Consiste en procesos tales como el aprendizaje, razonamiento, atención,
memoria, resolución de problemas, toma de decisiones y procesamiento
del lenguaje.

33. COGNICIÓN
● Diseño de productos interactivos
condicionado por:
o Complejidad de los Usuarios
o añade un alto grado de incertidumbre al proceso de diseño de los
productos y/o servicios.

34. COGNICIÓN - Cómo Memorizamos
● 2 sistemas que funcionan diferente
o Memoria Operativa = Conciencia (corto plazo)
§ razonamiento, comprensión
§ capacidad limitada y temporal
o Memoria a Largo Plazo
§ Recuerdos, experiencias previas
§ capacidad ilimitada

35. COGNICIÓN - Cómo Memorizamos
● Memoria a
Largo Plazo
§ recuerdos
§ capacidad
ilimitada

36. COGNICIÓN - Cómo Memorizamos
● Memoria Operativa
(corto plazo)
§ Nuevas adquisiciones
(persepciones)
§ Recuperados de
memoria a largo plazo

37. COGNICIÓN - CANTIDAD
1er.
LIMITANTE
Para DISEÑO
5±2

38. COGNICIÓN - CANTIDAD
● Memoria Operativa = Conciencia
(corto plazo)
§ límite de la memoria operativa es de unos
7±2 ítems
§ Se puede reducir este número a entre 3 y 5
§ En IxD usamos 5±2 ítems

39. COGNICIÓN - ESFUERZO
2da.
LIMITANTE
Para DISEÑO

40. COGNICIÓN - ESFUERZO
● Memoria a Largo Plazo
§ Registrar o Recuperar información
de requiere esfuerzo.
§ Creamos REGLAS para resumir,
sintetizar, codificar y de-codificar la
información

41. COGNICIÓN - ESFUERZO
● Estrategias para reducir Esfuerzo
Cognitivo
§ Número reducido de ítems (5+-2)
§ Asociaciones mentales (colores, íconos)
§ Orden, Agrupaciones (alfabético, categorías)

42. COGNICIÓN

43. COGNICIÓN

44. COGNICIÓN

45. COGNICIÓN

46. COGNICIÓN
PELIGRO
PRECAUCIÓN
SEGURO

47. COGNICIÓN

48. COGNICIÓN
NEGATIVO
NEUTRO
POSITIVO

49. COGNICIÓN

50. COGNICIÓN

51. COGNICIÓN

52. COGNICIÓN

53. COGNICIÓN

54. COGNICIÓN
Orden Alfabético
• el usuario puede subdividir progresivamente la lista
de ítems, reduciendo el tiempo necesario para
completar la tarea.
• Por ejemplo, si busco un ítem que empieza por ‘g’, cuando analice uno que
empiece por ‘n’ me indicará que no deberé seguir explorando los
siguientes, sino sólo los anteriores.

55. COGNICIÓN
Orden Alfabético
• Bueno para: ítems textuales
• Problema:
• Existen elementos que no se pueden representar textualmente
• Diferentes términos para definir una misma cosa
• Taxonomías vs. folksonomías

56. COGNICIÓN - Orden Alfabético

57. COGNICIÓN - Orden Alfabético

58. COGNICIÓN
Categorías
• Esquemas de ordenación exactos
• ítems conocidos, cuando el vínculo entre ítem y representación mental
es consistente (nombre de personas, países)
• Esquemas ambiguos
• cuando la representación mental de la necesidad informativa y su
representación en la interfaz no tienen un vínculo libre de subjetividad.
• (Clasificar, Agrupar, Ordenar)

59. COGNICIÓN – Categorías - Exacto

60. COGNICIÓN – Categorías - Exacto

61. COGNICIÓN – Categorías - Ambiguo

62. COGNICIÓN – Categorías - Ambiguo

63. COGNICIÓN – Categorías - Ambiguo

64. PERCEPCIÓN VISUAL

65. PERCEPCIÓN VISUAL
● Cómo Vemos,
cómo
percibimos
visualmente

66. PERCEPCIÓN VISUAL
● El canal visual: es el sentido más
importante.
● interfaz: es la superficie de
encuentro entre usuarios y
aplicación.
● diseño gráfico será el que
condicione, desde el primer
contacto, la fluidez interactiva
entre ambos.

67. PERCEPCIÓN VISUAL
● Como parte del conocimiento que
debemos tener de los usuarios.
o debemos conocer cómo percibimos visualmente,
cómo vemos.

68. PERCEPCIÓN VISUAL
● Vemos menos (tiempo) de lo
que creemos ver, pero más
(cantidad) de lo que somos
conscientes de estar viendo

69. PERCEPCIÓN VISUAL
● Vemos menos de lo que creemos ver
o Hacemos miles de búsquedas visuales, la
percepción visual nunca se detiene.
§ Movimiento ocular mediante saltos rápidos -
llamados “sacadas”.
§ Momentos de relativa quietud del ojo que nos
permiten enfocar.

70. PERCEPCIÓN VISUAL
● Vemos como una
máquina fotográfica
de instantáneas.
o una zona enfocada, gran
resolución o nitidez
o
una zona desenfocada o
visión periférica

71. PERCEPCIÓN VISUAL

72. PERCEPCIÓN VISUAL

73. PERCEPCIÓN VISUAL

74. PERCEPCIÓN VISUAL

75. PERCEPCIÓN VISUAL
● durante los movimientos
“sacádicos” -30 a 120ms-,
la visión queda
prácticamente
suprimida

76. PERCEPCIÓN VISUAL
● estas interrupciones no son percibidas, lo que
indica que lo que vemos es una
construcción mental a partir de las
instantáneas percibidas.
● Es decir, vemos menos de lo que creemos ver.

77. http://youtube.com/v/lTVEDPmKOY8

78. PERCEPCIÓN VISUAL
● Vemos más de lo que somos
conscientes de estar viendo
o la información visual que adquirimos con las
fijaciones es procesada masiva y paralelamente.
o Colapso cognitivo

79. PERCEPCIÓN VISUAL
● Mecanismos perceptuales automáticos, en
forma de filtros, que sólo permiten llegar
una parte de la información percibida a
nuestra consciencia.
● En otras palabras, vemos más de lo que
somos conscientes de estar viendo.

80. PERCEPCIÓN VISUAL

81. PERCEPCIÓN VISUAL
● ATENCIÓN VISUAL
Un mecanismo doblemente guiado
o la información fluye masivamente en
forma básica: color, movimiento,
orientación, tamaño
o nuestro interés

83. PERCEPCIÓN VISUAL
● “que nos encontremos en el desierto buscando una
cantimplora, no significa que nuestra atención no se
vaya a ver atraída, involuntariamente, hacia un
escorpión en movimiento.”
o Es decir, decidimos qué queremos atender visualmente, pero al
mismo tiempo nuestra atención se ve interferida
involuntariamente y de forma automática por determinadas
características visuales, aún cuando hagan presencia en zonas de
visión periférica.

86. PERCEPCIÓN VISUAL
● mecanismos para atraer la atención del
usuario
o la capacidad que tiene un elemento visual de atraer
la atención del usuario se encuentra en directa
relación con sus diferencias gráficas respecto a los
elementos colindantes.
o Es decir, visualmente nos vemos
involuntariamente atraídos por lo inusual.

87. PERCEPCIÓN VISUAL
● Interfaces web
o escaneo visual
o exploración de elementos con propiedades gráficas
propias de los intereses del momento.
o “Puntos de entrada” facilitan la exploración visual si
se usan con una correcta jerarquía en al interfaz.

88. PERCEPCIÓN VISUAL

89. PERCEPCIÓN VISUAL

90. PERCEPCIÓN VISUAL

91. PERCEPCIÓN VISUAL
● Organización perceptual
● Una vez superados los filtros visuales, comenzamos
a interpretar semántica y significado de lo que vemos.
o buscamos asociaciones de orden:
§ ¿Qué forma parte de qué?
§ ¿Qué está relacionado con qué?
§ ¿Qué sigue un orden lógico de qué?

92. PERCEPCIÓN VISUAL
● Leyes de Gestalt
● percibimos los componentes visuales, como patrones
organizados en conjuntos.
● Existen seis factores principales que determinan cómo los elementos de
los patrones son agrupados por el sistema visual, también llamadas leyes
o "Principios de la gestalt":
o proximidad, semejanza, cierre, simetría, movimiento, y
continuidad.

93. PERCEPCIÓN VISUAL
● Ver no es lo mismo que reconocer
● No miramos del mismo modo una
interfaz web que un atardecer

94. PERCEPCIÓN VISUAL
● contraste
Fuente: thehipperelement.com

95. ● profundidad y tamaño
Fuente: thehipperelement.com

96. PERCEPCIÓN VISUAL
● repetición
Fuente: thehipperelement.com

97. PERCEPCIÓN VISUAL
● romper patrones
Fuente: thehipperelement.com

98. PERCEPCIÓN VISUAL
● proximidad
Fuente: thehipperelement.com

99. PERCEPCIÓN VISUAL
● alineación
Fuente: thehipperelement.com

100. PERCEPCIÓN VISUAL
tensión de línea
Fuente: thehipperelement.com

101. PERCEPCIÓN VISUAL
tensión de bordes
Fuente: thehipperelement.com

102. PERCEPCIÓN VISUAL
● color
Fuente: thehipperelement.com

103. PERCEPCIÓN VISUAL
● color
Fuente: thehipperelement.com

104. PERCEPCIÓN VISUAL
● Principios
fundamentales
de diseño
visual

105. PERCEPCIÓN VISUAL
Enfatizar
implica hacer visible lo relevante, establecer
una clara jerarquía visual entre elementos y
zonas de la interfaz, de modo que la atención del usuario se
vea guiada de forma lógica y secuencial de lo más relevante hacia lo
secundario.

106. PERCEPCIÓN VISUAL
Organizar
establecer relaciones visuales lógicas, que
faciliten al usuario relacionar o diferenciar
elementos automáticamente. La correcta aplicación de
las leyes de la Gestalt impregnará al diseño de un aspecto visual organizado,
claro e intuitivo, lo que repercutirá positivamente tanto en su usabilidad objetiva
como subjetiva.

107. PERCEPCIÓN VISUAL
"Hacer reconocible"
considerar el uso de iconos, etiquetas, encabezados,
enlaces… de tal forma que se requiera del usuario el
menor de los esfuerzos para comprender y predecir el
funcionamiento interactivo de la interfaz, permitiéndole
dedicar toda su capacidad de atención y concentración a lo que realmente le
interesa, el contenido.

108. Gracias!
y feliz interacción
Danilo Cappelli
Consultor en Diseño de
Experiencia de Usuario
Sitio web: flavors.me/danilocappelli
Feeds: paper.li/yoruguayo
Trabajos: behance.net/danilocappelli
Perfil profesional: linkedin.com/in/danilocappelli
danilocappelli@gmail.com
@yoruguayo