Embed Size (px)
Citation preview
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
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
@yoruguayo
