Post on 12-Apr-2017
Día 2
Principios del diseño de interacción e interfaces
Hablamos de…
User Experience Como piensan y sienten los usuarios
Hablamos de…
User Experience Como piensan y sienten los usuarios
User Interface Aquellos elementos con los que interactuará el usuario
Hablamos de…
User Experience Como piensan y sienten los usuarios
User Interface Aquellos elementos con los que interactuará el usuario
Interaction Design Como interactuan los usuarios y la interfaz
Hablamos de…
Interfaces ABSTRACCIÓN / CONTROL
Hablamos de…
Interfaces ABSTRACCIÓN / CONTROL
CLI
Hablamos de…
Interfaces ABSTRACCIÓN / CONTROL
CLI GUI
Hablamos de…
Interfaces ABSTRACCIÓN / CONTROL
CLI GUI TS & ZI
Hablamos de…
Interfaces ABSTRACCIÓN / CONTROL
CLI GUI TS & ZI NI
Hablamos de…
Interfaces ABSTRACCIÓN / CONTROL
CLI GUI TS & ZI NI HI
Hablamos de…
Interfaces Principios del diseño de interfaces
Hablamos de…
http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name
Interfaces Principios del diseño de interfaces
caso Apple
Hablamos de…
http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name
Interfaces Principios del diseño de interfaces
caso Apple
BurgerIcon
Hablamos de…
http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name
Interfaces Principios del diseño de interfaces
caso Apple
BurgerIcon
Aprendizaje
Hablamos de…
http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name
Caso “BurgerIcon”
Xeroc Star, años 80
Caso “BurgerIcon”
Xeroc Star, años 80
Caso “BurgerIcon”
Xeroc Star, años 80
Caso “BurgerIcon”
Director de Marketing de Diseño
Caso “BurgerIcon”
Director de Marketing de Diseño
Caso “BurgerIcon”
Director de Marketing de Diseño
• la web ya se ve bien en mi iPhone• por fin tenemos una web responsive• “abrazamos al cambio”
Caso “BurgerIcon”¿La cosa va de comida?
Caso “BurgerIcon”¿La cosa va de comida?
Caso “BurgerIcon”¿La cosa va de comida?
Caso “BurgerIcon”¿La cosa va de comida?
Caso “BurgerIcon”¿La cosa va de comida?
Taco Menu
Caso “BurgerIcon”¿La cosa va de comida?
Taco Menu
Suchi Menu
Caso “BurgerIcon”¿La cosa va de comida?
Caso “BurgerIcon”¿La cosa va de comida?
Caso “BurgerIcon”¿La cosa va de comida?
Ventajas• Implementación rapidísima • Los usuarios han aprendido a reconocer. • departamentos de marketing y/o diseño conocen y
que comprarán sin rechistar.
Caso “BurgerIcon”¿La cosa va de comida?
Ventajas• Implementación rapidísima • Los usuarios han aprendido a reconocer. • departamentos de marketing y/o diseño conocen y
que comprarán sin rechistar.
Inconvenientes
• Hay usuarios que siguen sin identificarlo• Lo que está fuera de la vista está fuera de la mente• Otro click• ¿JavaScript?• Mal uso del mismo recurso • Patrones de navegación entre plataformas• No es llamativo
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” Test A/B
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” Test A/B
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
Test A/B
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
MENÚ
Test A/B
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
MENÚ MENÚ
Test A/B
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
MENÚ MENÚ
Test A/B
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
SAL A LA CALLETEST DE GUERRILLA
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
SAL A LA CALLETEST DE GUERRILLA DEMUESTRA QUE HAY SOLUCIONES MEJORES
• Icon Pizza (pestañas superiores)
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
SAL A LA CALLETEST DE GUERRILLA
• “ContentFirst”
DEMUESTRA QUE HAY SOLUCIONES MEJORES
• Icon Pizza (pestañas superiores)
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate
Caso “BurgerIcon”
si has luchado pero sigue sin querer cambiar…
Caso “BurgerIcon”
si has luchado pero sigue sin querer cambiar…
• Sigue intentándolo… • Haz que tu icono realmente resalte • No pongas CTA principales • Evita utilizar JavaScript • Revisa las opciones de menú • Revisa tu IA
¿Qué debe conseguir una buena interacción?
Hablaremos de…
¿Qué debe conseguir una buena interacción?
Hablaremos de…
Toda interacción con una interfaz debe responder a unas preguntas…
¿Qué debe conseguir una buena interfaz?
Hablaremos de…
¿Qué debe conseguir una buena interfaz?
• Objetivos del usuario • Aprendizaje • Minimizar errores • Velocidad de uso • “estética adecuada” • …
Hablaremos de…
¿Cómo logramos una buena interacción usuario - interfaz?
Hablaremos de…
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOS
Hablaremos de…
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOSREGLAS
Hablaremos de…
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOSREGLASESTÁNDARES
Hablaremos de…
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOSREGLASESTÁNDARES
DIRECTRICES
Hablaremos de…
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOSREGLASESTÁNDARES
DIRECTRICES
GUÍAS ESTILO
Hablaremos de…
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOSREGLASESTÁNDARES
DIRECTRICES
GUÍAS ESTILO
Hablaremos de…
Principio 1:
Principio 1:
Los usuarios quieren consistencia
Principio 1: Los usuarios quieren consistencia
Todos los mecanismos que se utilizan son siempre usados de la misma manera, sea cual sea el momento en el que se haga
Principio 1: Los usuarios quieren consistencia
Todos los mecanismos que se utilizan son siempre usados de la misma manera, sea cual sea el momento en el que se haga
“Al ser consistente en diseño, se crean unas expectativas y si se cumplen es cuando se sienten en control”
Principio 1: Los usuarios quieren consistencia
Principio 1: Los usuarios quieren consistencia
No debes ser diferente simplemente por ser diferente, ser diferente tiene que ofrecer algo mejor
El problema de la consistencia
1 Sigue las guías de estilo
Principio 1: Los usuarios quieren consistencia
2 Look & Feel común
Principio 1: Los usuarios quieren consistencia
3 No cambies algo si funciona, simplemente añade
(si hace falta)
Principio 1: Los usuarios quieren consistencia
Principio 2:
Principio 2:
Tu diseño debe invitar a interactuar
“affordance”
Principio 2: Tu diseño debe invitar a interactuar
La señal o indicio de que un objeto se pueden utilizar para llevar a cabo una acción particular
J. J. Gibson
Principio 2: Tu diseño debe invitar a interactuar
La señal o indicio de que un objeto se pueden utilizar para llevar a cabo una acción particular
J. J. Gibson
Principio 2: Tu diseño debe invitar a interactuar
La señal o indicio de que un objeto se pueden utilizar para llevar a cabo una acción particular
J. J. Gibson
Principio 2: Tu diseño debe invitar a interactuar
La señal o indicio de que un objeto se pueden utilizar para llevar a cabo una acción particular
J. J. Gibson
Principio 2: Tu diseño debe invitar a interactuar
Objetos físicos
Peso FormaTamaño
Principio 2: Tu diseño debe invitar a interactuar
Web, Mobile, wearable…
Diseño visual
Principio 2: Tu diseño debe invitar a interactuar
Web, Mobile, wearable…
Diseño visual
La capacidad de un objeto para invitarnos a utilizarlo. "Affordance percibida" es un elemento de interacción que habla por sí mismo para darnos una idea de la acción que genera
Norman
Principio 2: Tu diseño debe invitar a interactuar
Existen diferentes tipos de “affordance”
Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordanceA partir del lenguaje o forma del objeto
Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordanceA partir del lenguaje o forma del objeto
Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordanceA partir del lenguaje o forma del objeto
Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordanceA partir del lenguaje o forma del objeto
• Nuevos usuarios• Producto “novedoso”
¿Cuando?
Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordanceA partir del lenguaje o forma del objeto
• Nuevos usuarios• Producto “novedoso”
¿Cuando?
¿Contra? Repetitivo para algunos usuarios
Principio 2: Tu diseño debe invitar a interactuar
2 - Pattern affordanceEs un sistema ya establecido (patrón)
Principio 2: Tu diseño debe invitar a interactuar
2 - Pattern affordanceEs un sistema ya establecido (patrón)
Principio 2: Tu diseño debe invitar a interactuar
2 - Pattern affordanceEs un sistema ya establecido (patrón)
¿Cuando?• Depende mucho de quién
lo utiliza
Principio 2: Tu diseño debe invitar a interactuar
2 - Pattern affordanceEs un sistema ya establecido (patrón)
¿Cuando?• Depende mucho de quién
lo utiliza
¿Contra? Se basa en algo que ya debe conocer.
Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
¿Cuando?• Interfaces complejas
Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
¿Cuando?• Interfaces complejas
¿Contra? Puede que nunca se encuentre
Principio 2: Tu diseño debe invitar a interactuar
4 - Metaphorical affordanceComunica una acción a partir de elementos del mundo real
Principio 2: Tu diseño debe invitar a interactuar
4 - Metaphorical affordanceComunica una acción a partir de elementos del mundo real
Principio 2: Tu diseño debe invitar a interactuar
4 - Metaphorical affordanceComunica una acción a partir de elementos del mundo real
¿Contra? Puede significar diferentes cosas
Principio 2: Tu diseño debe invitar a interactuar
5 - Negative Affordance
Señalar que un elemento de la interfaz de usuario no proporciona ninguna capacidad en el momento.
Principio 2: Tu diseño debe invitar a interactuar
5 - Negative Affordance
Señalar que un elemento de la interfaz de usuario no proporciona ninguna capacidad en el momento.
Principio 2: Tu diseño debe invitar a interactuar
5 - Negative Affordance
Señalar que un elemento de la interfaz de usuario no proporciona ninguna capacidad en el momento.
Principio 2: Tu diseño debe invitar a interactuar
False Affordance
Algo que parece ser pero que no és
Principio 2: Tu diseño debe invitar a interactuar
False Affordance
Algo que parece ser pero que no és
Principio 2: Tu diseño debe invitar a interactuar
False Affordance
Algo que parece ser pero que no és
¿Contra? Puede que ofrezcas algo que no existe… frustración
Principio 3:
Principio 3:
Un buen diseño es fácil de aprender
“learnability”
Principio 3: Un buen diseño es fácil de aprender
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos con ella"
Principio 3: Un buen diseño es fácil de aprender
En un mundo feliz… no tenemos curva de aprendizaje
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos con ella"
Principio 3: Un buen diseño es fácil de aprender
En un mundo feliz… no tenemos curva de aprendizaje
En un mundo real… “siempre” existe una curva de aprendizaje
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos con ella"
Principio 3: Un buen diseño es fácil de aprender
En un mundo feliz… no tenemos curva de aprendizaje
En un mundo real… “siempre” existe una curva de aprendizaje
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos con ella"
Comprehensibility
Principio 3: Un buen diseño es fácil de aprender
En un mundo feliz… no tenemos curva de aprendizaje
En un mundo real… “siempre” existe una curva de aprendizaje
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos con ella"
Comprehensibility
Learnability
Principio 3: Un buen diseño es fácil de aprender
En un mundo feliz… no tenemos curva de aprendizaje
En un mundo real… “siempre” existe una curva de aprendizaje
“Facilidad de aprendizaje para utilizar una aplicación la primera vez que nos enfrentamos con ella"
Comprehensibility
Learnability
Principio 3: Un buen diseño es fácil de aprender
Principio 3: Un buen diseño es fácil de aprender
¿Esto es usable?
Principio 3: Un buen diseño es fácil de aprender
Principio 3: Un buen diseño es fácil de aprender
Aprendizaje
Principio 3: Un buen diseño es fácil de aprender
Aprendizaje Usabilidad
Principio 3: Un buen diseño es fácil de aprender
Aprendizaje Usabilidad
¿Qué priorizamos?
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
Eficiendia
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
Eficiendia Eficacia
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
Eficiendia Eficacia Satisfacción
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
Eficiendia Eficacia Satisfacción Errores
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
Eficiendia Eficacia Satisfacción Errores
Principio 3: Un buen diseño es fácil de aprender
Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Empresa más de 400.000 usuarios activos al mes
Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Empresa más de 400.000 usuarios activos al mes0,8% envía un email para resolver dudas (3.200)
Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Empresa más de 400.000 usuarios activos al mes0,8% envía un email para resolver dudas (3.200)
Coste medio para resolver la duda es de 24€
Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Empresa más de 400.000 usuarios activos al mes0,8% envía un email para resolver dudas (3.200)
Coste medio para resolver la duda es de 24€Al mes: 76.800€
Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Empresa más de 400.000 usuarios activos al mes0,8% envía un email para resolver dudas (3.200)
Coste medio para resolver la duda es de 24€Al mes: 76.800€
921.600€
Principio 4:
Principio 4:
Todo diseño debe ser predecible
Principio 4: Todo diseño debe ser predecible
"Si se puede predecir lo que va a suceder antes de hacer algo, es porque la acción que se está tomando comprensible, clara, lógica, y hace que te sientas seguro."
Robert Hoekman, Jr.
Principio 4: Todo diseño debe ser predecible
"Si se puede predecir lo que va a suceder antes de hacer algo, es porque la acción que se está tomando comprensible, clara, lógica, y hace que te sientas seguro."
Robert Hoekman, Jr.
Si no se sabe de que va a simple vista vuelve a empezar
Principio 4: Todo diseño debe ser predecible
Principio 4: Todo diseño debe ser predecible
Estoy pensando… demasiado
Principio 4: Todo diseño debe ser predecible
Principio 4: Todo diseño debe ser predecible
no estoy pensando
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
I’m a button, believe you me
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
Evidencia Confusión
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
Evidencia Confusión
INFORMACIÓN
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
Evidencia Confusión
INFORMACIÓN INFORMACIÓN
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
Evidencia Confusión
INFORMACIÓN INFORMACIÓN INFORMACIÓN
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
Evidencia Confusión
INFORMACIÓN INFORMACIÓN INFORMACIÓN
Eliminación de interrogantes
¿Donde estoy?
¿Pagaré ahora?
¿Donde está…? ¿Por qué se
llama asi?
Principio 4: Todo diseño debe ser predecible
Principio 5:
Principio 5:
Feedback, necesitamos saberlo todo
Principio 5: Feedback, necesitamos saberlo todo
Es el corazón de la interacción, el final de una acción. Cada interacción es una conversación entre el usuario y el producto.
Principio 5: Feedback, necesitamos saberlo todo
Es el corazón de la interacción, el final de una acción. Cada interacción es una conversación entre el usuario y el producto.
Antes
Finalizar compra
Principio 5: Feedback, necesitamos saberlo todo
Es el corazón de la interacción, el final de una acción. Cada interacción es una conversación entre el usuario y el producto.
Antes
Finalizar compra
Durante
Realizando transacción
Principio 5: Feedback, necesitamos saberlo todo
Es el corazón de la interacción, el final de una acción. Cada interacción es una conversación entre el usuario y el producto.
Antes
Finalizar compra
Durante
Realizando transacción
Después
Su pago se realizó correctamente
Principio 5: Feedback, necesitamos saberlo todo
Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
1 - Ubicación actual
Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
1 - Ubicación actual2 - Estado actual
Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
1 - Ubicación actual2 - Estado actual
3 - Estado en el futuro
Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
1 - Ubicación actual2 - Estado actual
3 - Estado en el futuro
4 - Resultados
Principio 5: Feedback, necesitamos saberlo todo
1 Toda acción tiene una reacción
Toda interacción debe ser visible, comprensible y se debe mostrar con un tiempo razonable
Principio 5: Feedback, necesitamos saberlo todo
2 Ofrece un buen feedback
No interrumpas una acción con otra, si se ha equivocado ofrécele soluciones
Principio 5: Feedback, necesitamos saberlo todo
3 Cuida tus mensajes de error
Dile que ha pasado, por que ha pasado, ofrece una solución… y no le hagas sentir estúpido
Los 5 principios
¿Cómo mejoramos la interacción?
¿Cómo mejoramos la interacción?
1 Testea… Testea… Testea…
¿Cómo mejoramos la interacción?
¿Cómo mejoramos la interacción?
2 Mapping Process
¿Cómo mejoramos la interacción?
¿Cómo mejoramos la interacción?
¿Cómo mejoramos la interacción?
3 Simplifica al máximo, informa el mínimo
¿Cómo mejoramos la interacción?
¿Cómo mejoramos la interacción?
4 Revisa los momentos clave
¿Cómo mejoramos la interacción?
¿Cómo mejoramos la interacción?
5 Piensa y plásmalo en un papel
¿Cómo mejoramos la interacción?
5 Piensa y plásmalo en un papel
Lo importante no es como se comporta tu interfaz, sinocomo se comportan tus usuarios
aboutme
aboutme
aboutme
Xavi
aboutme
Xavi
Byte
aboutme
@uxavic
Xavi
Byte
aboutme
@uxavicxcardet@gmail.com
Xavi
Byte