![Page 1: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/1.jpg)
La ciencia detrás del
UX Design Diseño de Interacción y Factores Humanos
Danilo Cappelli [email protected] @yoruguayo Consultor en Diseño de Experiencia de Usuario
![Page 2: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/2.jpg)
http://youtube.com/v/tRJTRwPGprs
Un error humano que costó US$ 400 millones ???
![Page 3: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/3.jpg)
El diseño de la interfaz de usuario detrás del error…
![Page 4: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/4.jpg)
http://youtube.com/v/tDZzfdela-Y
La complejidad de uso detrás del error…
![Page 5: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/5.jpg)
Mala Experiencia de Usuario
Problemas de Diseño de Interacción
![Page 6: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/6.jpg)
UX e IxD en CONTEXTO
Dan Saffer, 1999
![Page 7: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/7.jpg)
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?
![Page 8: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/8.jpg)
¿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
![Page 9: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/9.jpg)
¿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.
![Page 10: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/10.jpg)
¿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.
![Page 11: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/11.jpg)
¿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
![Page 12: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/12.jpg)
¿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.
![Page 13: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/13.jpg)
¿Qué es Diseño de Interacción?
"El diseño de interacción es
dar forma a las cosas para uso de la gente."
![Page 14: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/14.jpg)
¿Qué es Diseño de Interacción?
![Page 15: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/15.jpg)
Experiencia de Usuario
El objetivo de un diseñador de UX es
hacer que los usuarios
sean efectivos.
![Page 16: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/16.jpg)
¿Qué define a un Diseño de Interacción exitoso?
Que sea
eficiente.
![Page 17: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/17.jpg)
¿Qué define a un Diseño de Interacción exitoso?
Que sea
eficiente. “si no funciona, no sirve”.
![Page 18: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/18.jpg)
¿Qué define a un Diseño de Interacción exitoso?
Que sea
eficiente. “Nos convierte en Usuarios Efectivos”.
![Page 19: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/19.jpg)
¿Cómo logra un buen IxD?
"crear" el proceso Técnicas (Usabilidad)
“UX” es ciencia y no arte.
![Page 20: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/20.jpg)
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.
![Page 21: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/21.jpg)
IxD en CONTEXTO
![Page 22: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/22.jpg)
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.
![Page 23: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/23.jpg)
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.
![Page 24: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/24.jpg)
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.
![Page 25: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/25.jpg)
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.
![Page 26: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/26.jpg)
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.
![Page 27: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/27.jpg)
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.
![Page 28: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/28.jpg)
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.
![Page 29: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/29.jpg)
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.
![Page 30: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/30.jpg)
FACTORES HUMANOS
![Page 31: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/31.jpg)
COGNICIÓN
![Page 32: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/32.jpg)
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.
![Page 33: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/33.jpg)
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.
![Page 34: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/34.jpg)
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
![Page 35: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/35.jpg)
COGNICIÓN - Cómo Memorizamos
● Memoria a Largo Plazo
§ recuerdos § capacidad
ilimitada
![Page 36: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/36.jpg)
COGNICIÓN - Cómo Memorizamos
● Memoria Operativa (corto plazo)
§ Nuevas adquisiciones (persepciones)
§ Recuperados de memoria a largo plazo
![Page 37: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/37.jpg)
COGNICIÓN - CANTIDAD
1er. LIMITANTE
Para DISEÑO
5±2
![Page 38: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/38.jpg)
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
![Page 39: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/39.jpg)
COGNICIÓN - ESFUERZO
2da. LIMITANTE
Para DISEÑO
![Page 40: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/40.jpg)
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
![Page 41: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/41.jpg)
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)
![Page 42: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/42.jpg)
COGNICIÓN
![Page 43: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/43.jpg)
COGNICIÓN
![Page 44: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/44.jpg)
COGNICIÓN
![Page 45: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/45.jpg)
COGNICIÓN
![Page 46: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/46.jpg)
COGNICIÓN
PELIGRO PRECAUCIÓN SEGURO
![Page 47: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/47.jpg)
COGNICIÓN
![Page 48: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/48.jpg)
COGNICIÓN
NEGATIVO NEUTRO POSITIVO
![Page 49: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/49.jpg)
COGNICIÓN
![Page 50: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/50.jpg)
COGNICIÓN
![Page 51: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/51.jpg)
COGNICIÓN
![Page 52: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/52.jpg)
COGNICIÓN
![Page 53: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/53.jpg)
COGNICIÓN
![Page 54: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/54.jpg)
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.
![Page 55: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/55.jpg)
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
![Page 56: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/56.jpg)
COGNICIÓN - Orden Alfabético
![Page 57: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/57.jpg)
COGNICIÓN - Orden Alfabético
![Page 58: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/58.jpg)
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)
![Page 59: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/59.jpg)
COGNICIÓN – Categorías - Exacto
![Page 60: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/60.jpg)
COGNICIÓN – Categorías - Exacto
![Page 61: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/61.jpg)
COGNICIÓN – Categorías - Ambiguo
![Page 62: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/62.jpg)
COGNICIÓN – Categorías - Ambiguo
![Page 63: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/63.jpg)
COGNICIÓN – Categorías - Ambiguo
![Page 64: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/64.jpg)
PERCEPCIÓN VISUAL
![Page 65: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/65.jpg)
PERCEPCIÓN VISUAL
● Cómo Vemos, cómo percibimos visualmente
![Page 66: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/66.jpg)
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.
![Page 67: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/67.jpg)
PERCEPCIÓN VISUAL
● Como parte del conocimiento que debemos tener de los usuarios. o debemos conocer cómo percibimos visualmente,
cómo vemos.
![Page 68: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/68.jpg)
PERCEPCIÓN VISUAL
● Vemos menos (tiempo) de lo que creemos ver, pero más (cantidad) de lo que somos conscientes de estar viendo
![Page 69: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/69.jpg)
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.
![Page 70: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/70.jpg)
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
![Page 71: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/71.jpg)
PERCEPCIÓN VISUAL
![Page 72: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/72.jpg)
PERCEPCIÓN VISUAL
![Page 73: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/73.jpg)
PERCEPCIÓN VISUAL
![Page 74: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/74.jpg)
PERCEPCIÓN VISUAL
![Page 75: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/75.jpg)
PERCEPCIÓN VISUAL
● durante los movimientos “sacádicos” -30 a 120ms-,
la visión queda prácticamente suprimida
![Page 76: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/76.jpg)
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.
![Page 77: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/77.jpg)
http://youtube.com/v/lTVEDPmKOY8
![Page 78: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/78.jpg)
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
![Page 79: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/79.jpg)
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.
![Page 80: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/80.jpg)
PERCEPCIÓN VISUAL
![Page 81: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/81.jpg)
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
![Page 82: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/82.jpg)
![Page 83: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/83.jpg)
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.
![Page 84: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/84.jpg)
![Page 85: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/85.jpg)
![Page 86: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/86.jpg)
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.
![Page 87: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/87.jpg)
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.
![Page 88: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/88.jpg)
PERCEPCIÓN VISUAL
![Page 89: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/89.jpg)
PERCEPCIÓN VISUAL
![Page 90: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/90.jpg)
PERCEPCIÓN VISUAL
![Page 91: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/91.jpg)
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é?
![Page 92: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/92.jpg)
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.
![Page 93: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/93.jpg)
PERCEPCIÓN VISUAL
● Ver no es lo mismo que reconocer ● No miramos del mismo modo una
interfaz web que un atardecer
![Page 94: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/94.jpg)
PERCEPCIÓN VISUAL
● contraste
Fuente: thehipperelement.com
![Page 95: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/95.jpg)
● profundidad y tamaño
Fuente: thehipperelement.com
![Page 96: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/96.jpg)
PERCEPCIÓN VISUAL
● repetición
Fuente: thehipperelement.com
![Page 97: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/97.jpg)
PERCEPCIÓN VISUAL
● romper patrones
Fuente: thehipperelement.com
![Page 98: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/98.jpg)
PERCEPCIÓN VISUAL
● proximidad
Fuente: thehipperelement.com
![Page 99: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/99.jpg)
PERCEPCIÓN VISUAL
● alineación
Fuente: thehipperelement.com
![Page 100: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/100.jpg)
PERCEPCIÓN VISUAL
tensión de línea
Fuente: thehipperelement.com
![Page 101: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/101.jpg)
PERCEPCIÓN VISUAL tensión de bordes
Fuente: thehipperelement.com
![Page 102: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/102.jpg)
PERCEPCIÓN VISUAL
● color
Fuente: thehipperelement.com
![Page 103: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/103.jpg)
PERCEPCIÓN VISUAL
● color
Fuente: thehipperelement.com
![Page 104: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/104.jpg)
PERCEPCIÓN VISUAL
● Principios fundamentales de diseño visual
![Page 105: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/105.jpg)
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.
![Page 106: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/106.jpg)
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.
![Page 107: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/107.jpg)
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.
![Page 108: BarCamp Costa Rica 2014 - La ciencia detras del ux design 02](https://reader034.vdocuments.co/reader034/viewer/2022042614/55a50a831a28abb93e8b45eb/html5/thumbnails/108.jpg)
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
@yoruguayo