Download - Principios diseño de interacción
![Page 1: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/1.jpg)
Día 2
Principios del diseño de interacción e interfaces
![Page 2: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/2.jpg)
Hablamos de…
![Page 3: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/3.jpg)
User Experience Como piensan y sienten los usuarios
Hablamos de…
![Page 4: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/4.jpg)
User Experience Como piensan y sienten los usuarios
User Interface Aquellos elementos con los que interactuará el usuario
Hablamos de…
![Page 5: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/5.jpg)
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…
![Page 6: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/6.jpg)
Interfaces ABSTRACCIÓN / CONTROL
Hablamos de…
![Page 7: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/7.jpg)
Interfaces ABSTRACCIÓN / CONTROL
CLI
Hablamos de…
![Page 8: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/8.jpg)
Interfaces ABSTRACCIÓN / CONTROL
CLI GUI
Hablamos de…
![Page 9: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/9.jpg)
Interfaces ABSTRACCIÓN / CONTROL
CLI GUI TS & ZI
Hablamos de…
![Page 10: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/10.jpg)
Interfaces ABSTRACCIÓN / CONTROL
CLI GUI TS & ZI NI
Hablamos de…
![Page 11: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/11.jpg)
Interfaces ABSTRACCIÓN / CONTROL
CLI GUI TS & ZI NI HI
Hablamos de…
![Page 12: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/12.jpg)
Interfaces Principios del diseño de interfaces
Hablamos de…
http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name
![Page 13: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/13.jpg)
Interfaces Principios del diseño de interfaces
caso Apple
Hablamos de…
http://www.fastcodesign.com/3053406/how-apple-is-giving-design-a-bad-name
![Page 14: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/14.jpg)
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
![Page 15: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/15.jpg)
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
![Page 16: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/16.jpg)
Caso “BurgerIcon”
Xeroc Star, años 80
![Page 17: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/17.jpg)
Caso “BurgerIcon”
Xeroc Star, años 80
![Page 18: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/18.jpg)
Caso “BurgerIcon”
Xeroc Star, años 80
![Page 19: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/19.jpg)
Caso “BurgerIcon”
Director de Marketing de Diseño
![Page 20: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/20.jpg)
Caso “BurgerIcon”
Director de Marketing de Diseño
![Page 21: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/21.jpg)
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”
![Page 22: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/22.jpg)
Caso “BurgerIcon”¿La cosa va de comida?
![Page 23: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/23.jpg)
Caso “BurgerIcon”¿La cosa va de comida?
![Page 24: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/24.jpg)
Caso “BurgerIcon”¿La cosa va de comida?
![Page 25: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/25.jpg)
Caso “BurgerIcon”¿La cosa va de comida?
![Page 26: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/26.jpg)
Caso “BurgerIcon”¿La cosa va de comida?
![Page 27: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/27.jpg)
Taco Menu
Caso “BurgerIcon”¿La cosa va de comida?
![Page 28: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/28.jpg)
Taco Menu
Suchi Menu
Caso “BurgerIcon”¿La cosa va de comida?
![Page 29: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/29.jpg)
Caso “BurgerIcon”¿La cosa va de comida?
![Page 30: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/30.jpg)
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.
![Page 31: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/31.jpg)
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
![Page 32: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/32.jpg)
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” Test A/B
![Page 33: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/33.jpg)
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” Test A/B
![Page 34: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/34.jpg)
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
Test A/B
![Page 35: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/35.jpg)
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
MENÚ
Test A/B
![Page 36: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/36.jpg)
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
MENÚ MENÚ
Test A/B
![Page 37: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/37.jpg)
Caso “BurgerIcon”
¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”
MENÚ
MENÚ MENÚ
Test A/B
![Page 38: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/38.jpg)
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
![Page 39: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/39.jpg)
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
SAL A LA CALLETEST DE GUERRILLA
![Page 40: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/40.jpg)
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)
![Page 41: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/41.jpg)
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)
![Page 42: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/42.jpg)
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate
![Page 43: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/43.jpg)
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate
![Page 44: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/44.jpg)
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate
![Page 45: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/45.jpg)
Caso “BurgerIcon”
Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?
• No copies pero inspírate
![Page 46: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/46.jpg)
Caso “BurgerIcon”
si has luchado pero sigue sin querer cambiar…
![Page 47: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/47.jpg)
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
![Page 48: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/48.jpg)
¿Qué debe conseguir una buena interacción?
Hablaremos de…
![Page 49: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/49.jpg)
¿Qué debe conseguir una buena interacción?
Hablaremos de…
Toda interacción con una interfaz debe responder a unas preguntas…
![Page 50: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/50.jpg)
¿Qué debe conseguir una buena interfaz?
Hablaremos de…
![Page 51: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/51.jpg)
¿Qué debe conseguir una buena interfaz?
• Objetivos del usuario • Aprendizaje • Minimizar errores • Velocidad de uso • “estética adecuada” • …
Hablaremos de…
![Page 52: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/52.jpg)
¿Cómo logramos una buena interacción usuario - interfaz?
Hablaremos de…
![Page 53: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/53.jpg)
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOS
Hablaremos de…
![Page 54: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/54.jpg)
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOSREGLAS
Hablaremos de…
![Page 55: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/55.jpg)
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOSREGLASESTÁNDARES
Hablaremos de…
![Page 56: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/56.jpg)
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOSREGLASESTÁNDARES
DIRECTRICES
Hablaremos de…
![Page 57: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/57.jpg)
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOSREGLASESTÁNDARES
DIRECTRICES
GUÍAS ESTILO
Hablaremos de…
![Page 58: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/58.jpg)
¿Cómo logramos una buena interacción usuario - interfaz?
PRINCIPIOSREGLASESTÁNDARES
DIRECTRICES
GUÍAS ESTILO
Hablaremos de…
![Page 59: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/59.jpg)
![Page 60: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/60.jpg)
Principio 1:
![Page 61: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/61.jpg)
Principio 1:
Los usuarios quieren consistencia
![Page 62: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/62.jpg)
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
![Page 63: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/63.jpg)
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”
![Page 64: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/64.jpg)
Principio 1: Los usuarios quieren consistencia
![Page 65: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/65.jpg)
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
![Page 66: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/66.jpg)
1 Sigue las guías de estilo
Principio 1: Los usuarios quieren consistencia
![Page 67: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/67.jpg)
2 Look & Feel común
Principio 1: Los usuarios quieren consistencia
![Page 68: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/68.jpg)
3 No cambies algo si funciona, simplemente añade
(si hace falta)
Principio 1: Los usuarios quieren consistencia
![Page 69: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/69.jpg)
Principio 2:
![Page 70: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/70.jpg)
Principio 2:
Tu diseño debe invitar a interactuar
“affordance”
![Page 71: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/71.jpg)
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
![Page 72: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/72.jpg)
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
![Page 73: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/73.jpg)
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
![Page 74: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/74.jpg)
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
![Page 75: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/75.jpg)
Principio 2: Tu diseño debe invitar a interactuar
Objetos físicos
Peso FormaTamaño
![Page 76: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/76.jpg)
Principio 2: Tu diseño debe invitar a interactuar
Web, Mobile, wearable…
Diseño visual
![Page 77: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/77.jpg)
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
![Page 78: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/78.jpg)
Principio 2: Tu diseño debe invitar a interactuar
Existen diferentes tipos de “affordance”
![Page 79: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/79.jpg)
Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordanceA partir del lenguaje o forma del objeto
![Page 80: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/80.jpg)
Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordanceA partir del lenguaje o forma del objeto
![Page 81: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/81.jpg)
Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordanceA partir del lenguaje o forma del objeto
![Page 82: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/82.jpg)
Principio 2: Tu diseño debe invitar a interactuar
1 - Explicit affordanceA partir del lenguaje o forma del objeto
• Nuevos usuarios• Producto “novedoso”
¿Cuando?
![Page 83: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/83.jpg)
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
![Page 84: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/84.jpg)
Principio 2: Tu diseño debe invitar a interactuar
2 - Pattern affordanceEs un sistema ya establecido (patrón)
![Page 85: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/85.jpg)
Principio 2: Tu diseño debe invitar a interactuar
2 - Pattern affordanceEs un sistema ya establecido (patrón)
![Page 86: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/86.jpg)
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
![Page 87: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/87.jpg)
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.
![Page 88: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/88.jpg)
Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
![Page 89: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/89.jpg)
Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
![Page 90: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/90.jpg)
Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
![Page 91: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/91.jpg)
Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
¿Cuando?• Interfaces complejas
![Page 92: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/92.jpg)
Principio 2: Tu diseño debe invitar a interactuar
3 - Hidden affordance
¿Cuando?• Interfaces complejas
¿Contra? Puede que nunca se encuentre
![Page 93: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/93.jpg)
Principio 2: Tu diseño debe invitar a interactuar
4 - Metaphorical affordanceComunica una acción a partir de elementos del mundo real
![Page 94: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/94.jpg)
Principio 2: Tu diseño debe invitar a interactuar
4 - Metaphorical affordanceComunica una acción a partir de elementos del mundo real
![Page 95: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/95.jpg)
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
![Page 96: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/96.jpg)
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.
![Page 97: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/97.jpg)
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.
![Page 98: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/98.jpg)
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.
![Page 99: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/99.jpg)
Principio 2: Tu diseño debe invitar a interactuar
False Affordance
Algo que parece ser pero que no és
![Page 100: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/100.jpg)
Principio 2: Tu diseño debe invitar a interactuar
False Affordance
Algo que parece ser pero que no és
![Page 101: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/101.jpg)
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
![Page 102: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/102.jpg)
Principio 3:
![Page 103: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/103.jpg)
Principio 3:
Un buen diseño es fácil de aprender
“learnability”
![Page 104: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/104.jpg)
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"
![Page 105: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/105.jpg)
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"
![Page 106: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/106.jpg)
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"
![Page 107: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/107.jpg)
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
![Page 108: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/108.jpg)
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
![Page 109: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/109.jpg)
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
![Page 110: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/110.jpg)
Principio 3: Un buen diseño es fácil de aprender
![Page 111: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/111.jpg)
Principio 3: Un buen diseño es fácil de aprender
¿Esto es usable?
![Page 112: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/112.jpg)
Principio 3: Un buen diseño es fácil de aprender
![Page 113: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/113.jpg)
Principio 3: Un buen diseño es fácil de aprender
Aprendizaje
![Page 114: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/114.jpg)
Principio 3: Un buen diseño es fácil de aprender
Aprendizaje Usabilidad
![Page 115: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/115.jpg)
Principio 3: Un buen diseño es fácil de aprender
Aprendizaje Usabilidad
¿Qué priorizamos?
![Page 116: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/116.jpg)
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
![Page 117: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/117.jpg)
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
Eficiendia
![Page 118: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/118.jpg)
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
Eficiendia Eficacia
![Page 119: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/119.jpg)
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
Eficiendia Eficacia Satisfacción
![Page 120: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/120.jpg)
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
Eficiendia Eficacia Satisfacción Errores
![Page 121: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/121.jpg)
Principio 3: Un buen diseño es fácil de aprender¿Como medimos?
Eficiendia Eficacia Satisfacción Errores
![Page 122: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/122.jpg)
Principio 3: Un buen diseño es fácil de aprender
![Page 123: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/123.jpg)
Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
![Page 124: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/124.jpg)
Principio 3: Un buen diseño es fácil de aprender
Empresa Learnability
Empresa más de 400.000 usuarios activos al mes
![Page 125: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/125.jpg)
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)
![Page 126: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/126.jpg)
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€
![Page 127: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/127.jpg)
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€
![Page 128: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/128.jpg)
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€
![Page 129: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/129.jpg)
Principio 4:
![Page 130: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/130.jpg)
Principio 4:
Todo diseño debe ser predecible
![Page 131: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/131.jpg)
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.
![Page 132: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/132.jpg)
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
![Page 133: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/133.jpg)
Principio 4: Todo diseño debe ser predecible
![Page 134: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/134.jpg)
Principio 4: Todo diseño debe ser predecible
Estoy pensando… demasiado
![Page 135: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/135.jpg)
Principio 4: Todo diseño debe ser predecible
![Page 136: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/136.jpg)
Principio 4: Todo diseño debe ser predecible
no estoy pensando
![Page 137: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/137.jpg)
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
![Page 138: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/138.jpg)
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
I’m a button, believe you me
![Page 139: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/139.jpg)
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
Evidencia Confusión
![Page 140: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/140.jpg)
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
Evidencia Confusión
INFORMACIÓN
![Page 141: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/141.jpg)
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
Evidencia Confusión
INFORMACIÓN INFORMACIÓN
![Page 142: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/142.jpg)
Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?
Evidencia Confusión
INFORMACIÓN INFORMACIÓN INFORMACIÓN
![Page 143: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/143.jpg)
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?
![Page 144: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/144.jpg)
Principio 4: Todo diseño debe ser predecible
![Page 145: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/145.jpg)
Principio 5:
![Page 146: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/146.jpg)
Principio 5:
Feedback, necesitamos saberlo todo
![Page 147: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/147.jpg)
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.
![Page 148: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/148.jpg)
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
![Page 149: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/149.jpg)
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
![Page 150: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/150.jpg)
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
![Page 151: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/151.jpg)
Principio 5: Feedback, necesitamos saberlo todo
![Page 152: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/152.jpg)
Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
![Page 153: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/153.jpg)
Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
1 - Ubicación actual
![Page 154: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/154.jpg)
Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
1 - Ubicación actual2 - Estado actual
![Page 155: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/155.jpg)
Principio 5: Feedback, necesitamos saberlo todo
Toda interacción debe saber responder…
1 - Ubicación actual2 - Estado actual
3 - Estado en el futuro
![Page 156: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/156.jpg)
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
![Page 157: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/157.jpg)
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
![Page 158: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/158.jpg)
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
![Page 159: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/159.jpg)
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
![Page 160: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/160.jpg)
Los 5 principios
![Page 161: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/161.jpg)
¿Cómo mejoramos la interacción?
![Page 162: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/162.jpg)
¿Cómo mejoramos la interacción?
1 Testea… Testea… Testea…
![Page 163: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/163.jpg)
¿Cómo mejoramos la interacción?
![Page 164: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/164.jpg)
¿Cómo mejoramos la interacción?
2 Mapping Process
![Page 165: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/165.jpg)
¿Cómo mejoramos la interacción?
![Page 166: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/166.jpg)
¿Cómo mejoramos la interacción?
![Page 167: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/167.jpg)
¿Cómo mejoramos la interacción?
3 Simplifica al máximo, informa el mínimo
![Page 168: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/168.jpg)
¿Cómo mejoramos la interacción?
![Page 169: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/169.jpg)
¿Cómo mejoramos la interacción?
4 Revisa los momentos clave
![Page 170: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/170.jpg)
¿Cómo mejoramos la interacción?
![Page 171: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/171.jpg)
¿Cómo mejoramos la interacción?
5 Piensa y plásmalo en un papel
![Page 172: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/172.jpg)
¿Cómo mejoramos la interacción?
5 Piensa y plásmalo en un papel
![Page 173: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/173.jpg)
![Page 174: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/174.jpg)
Lo importante no es como se comporta tu interfaz, sinocomo se comportan tus usuarios
![Page 175: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/175.jpg)
aboutme
![Page 176: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/176.jpg)
aboutme
![Page 177: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/177.jpg)
aboutme
Xavi
![Page 178: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/178.jpg)
aboutme
Xavi
Byte
![Page 179: Principios diseño de interacción](https://reader037.vdocuments.net/reader037/viewer/2022103010/58ed7d681a28ab0b088b46d1/html5/thumbnails/179.jpg)
aboutme
@uxavic
Xavi
Byte