Principios diseño de interacción

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 Interface Aquellos elementos con los que interactuará el usuario

Hablamos de…


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…


CLI

Hablamos de…


CLI GUI

Hablamos de…


CLI GUI TS & ZI

Hablamos de…


CLI GUI TS & ZI NI

Hablamos de…


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


caso Apple

Hablamos de…



caso Apple

BurgerIcon

Hablamos de…



caso Apple

BurgerIcon

Aprendizaje

Hablamos de…


Caso “BurgerIcon”

Xeroc Star, años 80






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?





Taco Menu


Taco Menu

Suchi Menu




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.


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


¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” Test A/B


¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala” Test A/B


¿Quieres mantener el icono? “Empieza por una hipótesis y pruébala”

MENÚ

Test A/B



MENÚ

MENÚ

Test A/B



MENÚ

MENÚ MENÚ

Test A/B



MENÚ

MENÚ MENÚ

Test A/B


Creo que puedo convencer a mi jefe… ¿Qué puedo hacer?



SAL A LA CALLETEST DE GUERRILLA



SAL A LA CALLETEST DE GUERRILLA DEMUESTRA QUE HAY SOLUCIONES MEJORES

• Icon Pizza (pestañas superiores)



SAL A LA CALLETEST DE GUERRILLA

• “ContentFirst”

DEMUESTRA QUE HAY SOLUCIONES MEJORES

• Icon Pizza (pestañas superiores)



• No copies pero inspírate











si has luchado pero sigue sin querer cambiar…


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…

https://www.youtube.com/watch?v=q0KiA1AMtz4












































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


PRINCIPIOS

Hablaremos de…


PRINCIPIOSREGLAS

Hablaremos de…


PRINCIPIOSREGLASESTÁNDARES

Hablaremos de…



DIRECTRICES

Hablaremos de…



DIRECTRICES

GUÍAS ESTILO

Hablaremos de…



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


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”



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


2 Look & Feel común


3 No cambies algo si funciona, simplemente añade

(si hace falta)


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



J. J. Gibson



J. J. Gibson



J. J. Gibson


Objetos físicos

Peso FormaTamaño


Web, Mobile, wearable…

Diseño visual


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


Existen diferentes tipos de “affordance”


1 - Explicit affordanceA partir del lenguaje o forma del objeto







• Nuevos usuarios• Producto “novedoso”

¿Cuando?



• Nuevos usuarios• Producto “novedoso”

¿Cuando?

¿Contra? Repetitivo para algunos usuarios


2 - Pattern affordanceEs un sistema ya establecido (patrón)





¿Cuando?• Depende mucho de quién

lo utiliza



¿Cuando?• Depende mucho de quién

lo utiliza

¿Contra? Se basa en algo que ya debe conocer.


3 - Hidden affordance







¿Cuando?• Interfaces complejas



¿Cuando?• Interfaces complejas

¿Contra? Puede que nunca se encuentre


4 - Metaphorical affordanceComunica una acción a partir de elementos del mundo real





¿Contra? Puede significar diferentes cosas


5 - Negative Affordance

Señalar que un elemento de la interfaz de usuario no proporciona ninguna capacidad en el momento.








False Affordance

Algo que parece ser pero que no és


False Affordance



False Affordance


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


En un mundo feliz… no tenemos curva de aprendizaje




En un mundo real… “siempre” existe una curva de aprendizaje






Comprehensibility





Comprehensibility

Learnability





Comprehensibility

Learnability



¿Esto es usable?



Aprendizaje


Aprendizaje Usabilidad


Aprendizaje Usabilidad

¿Qué priorizamos?

Principio 3: Un buen diseño es fácil de aprender¿Como medimos?


Eficiendia


Eficiendia Eficacia


Eficiendia Eficacia Satisfacción


Eficiendia Eficacia Satisfacción Errores


Eficiendia Eficacia Satisfacción Errores



Empresa Learnability



Empresa más de 400.000 usuarios activos al mes



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€




Coste medio para resolver la duda es de 24€Al mes: 76.800€




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.


"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



Estoy pensando… demasiado



no estoy pensando

Principio 4: Todo diseño debe ser predecible¿Evidencia o confusión?


I’m a button, believe you me


Evidencia Confusión



INFORMACIÓN



INFORMACIÓN INFORMACIÓN



INFORMACIÓN INFORMACIÓN INFORMACIÓN



INFORMACIÓN INFORMACIÓN INFORMACIÓN

Eliminación de interrogantes

¿Donde estoy?

¿Pagaré ahora?

¿Donde está…? ¿Por qué se

llama asi?


https://www.youtube.com/watch?v=VP_WHckrAX0












































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.



Antes

Finalizar compra



Antes

Finalizar compra

Durante

Realizando transacción



Antes

Finalizar compra

Durante

Realizando transacción

Después

Su pago se realizó correctamente



Toda interacción debe saber responder…



1 - Ubicación actual



1 - Ubicación actual2 - Estado actual




3 - Estado en el futuro




3 - Estado en el futuro

4 - Resultados


1 Toda acción tiene una reacción

Toda interacción debe ser visible, comprensible y se debe mostrar con un tiempo razonable


2 Ofrece un buen feedback

No interrumpas una acción con otra, si se ha equivocado ofrécele soluciones


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?


1 Testea… Testea… Testea…



2 Mapping Process




3 Simplifica al máximo, informa el mínimo



4 Revisa los momentos clave



5 Piensa y plásmalo en un papel


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

@[email protected]

Xavi

Byte