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

http://youtube.com/v/tRJTRwPGprs

Un error humano que costó US$ 400 millones ???

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

http://youtube.com/v/tDZzfdela-Y

La complejidad de uso detrás del error…

Mala Experiencia de Usuario

Problemas de Diseño de Interacción

UX e IxD en CONTEXTO

Dan Saffer, 1999

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?

¿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

¿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.

¿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.

¿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

¿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.

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

"El diseño de interacción es

dar forma a las cosas para uso de la gente."

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

Experiencia de Usuario

El objetivo de un diseñador de UX es

hacer que los usuarios

sean efectivos.

¿Qué define a un Diseño de Interacción exitoso?

Que sea

eficiente.

¿Qué define a un Diseño de Interacción exitoso?

Que sea

eficiente. “si no funciona, no sirve”.

¿Qué define a un Diseño de Interacción exitoso?

Que sea

eficiente. “Nos convierte en Usuarios Efectivos”.

¿Cómo logra un buen IxD?

"crear" el proceso Técnicas (Usabilidad)

“UX” es ciencia y no arte.

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.

IxD en CONTEXTO

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.

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.

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.

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.

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.

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.

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.

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.

FACTORES HUMANOS

COGNICIÓN

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.

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.

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

COGNICIÓN - Cómo Memorizamos

●  Memoria a Largo Plazo

§  recuerdos §  capacidad

ilimitada

COGNICIÓN - Cómo Memorizamos

●  Memoria Operativa (corto plazo)

§  Nuevas adquisiciones (persepciones)

§  Recuperados de memoria a largo plazo

COGNICIÓN - CANTIDAD

1er. LIMITANTE

Para DISEÑO

5±2

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

COGNICIÓN - ESFUERZO

2da. LIMITANTE

Para DISEÑO

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

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)

COGNICIÓN

COGNICIÓN

COGNICIÓN

COGNICIÓN

COGNICIÓN

PELIGRO PRECAUCIÓN SEGURO

COGNICIÓN

COGNICIÓN

NEGATIVO NEUTRO POSITIVO

COGNICIÓN

COGNICIÓN

COGNICIÓN

COGNICIÓN

COGNICIÓN

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.

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

COGNICIÓN - Orden Alfabético

COGNICIÓN - Orden Alfabético

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)

COGNICIÓN – Categorías - Exacto

COGNICIÓN – Categorías - Exacto

COGNICIÓN – Categorías - Ambiguo

COGNICIÓN – Categorías - Ambiguo

COGNICIÓN – Categorías - Ambiguo

PERCEPCIÓN VISUAL

PERCEPCIÓN VISUAL

● Cómo Vemos, cómo percibimos visualmente

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.

PERCEPCIÓN VISUAL

●  Como parte del conocimiento que debemos tener de los usuarios. o  debemos conocer cómo percibimos visualmente,

cómo vemos.

PERCEPCIÓN VISUAL

● Vemos menos (tiempo) de lo que creemos ver, pero más (cantidad) de lo que somos conscientes de estar viendo

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.

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

PERCEPCIÓN VISUAL

PERCEPCIÓN VISUAL

PERCEPCIÓN VISUAL

PERCEPCIÓN VISUAL

PERCEPCIÓN VISUAL

●  durante los movimientos “sacádicos” -30 a 120ms-,

la visión queda prácticamente suprimida

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.

http://youtube.com/v/lTVEDPmKOY8

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

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.

PERCEPCIÓN VISUAL

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

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.

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.

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.

PERCEPCIÓN VISUAL

PERCEPCIÓN VISUAL

PERCEPCIÓN VISUAL

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é?

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.

PERCEPCIÓN VISUAL

●  Ver no es lo mismo que reconocer ●  No miramos del mismo modo una

interfaz web que un atardecer

PERCEPCIÓN VISUAL

●  contraste

Fuente: thehipperelement.com

●  profundidad y tamaño

Fuente: thehipperelement.com

PERCEPCIÓN VISUAL

●  repetición

Fuente: thehipperelement.com

PERCEPCIÓN VISUAL

●  romper patrones

Fuente: thehipperelement.com

PERCEPCIÓN VISUAL

●  proximidad

Fuente: thehipperelement.com

PERCEPCIÓN VISUAL

●  alineación

Fuente: thehipperelement.com

PERCEPCIÓN VISUAL

tensión de línea

Fuente: thehipperelement.com

PERCEPCIÓN VISUAL tensión de bordes

Fuente: thehipperelement.com

PERCEPCIÓN VISUAL

●  color

Fuente: thehipperelement.com

PERCEPCIÓN VISUAL

●  color

Fuente: thehipperelement.com

PERCEPCIÓN VISUAL

●  Principios fundamentales de diseño visual

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.

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.

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.

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