diseño de interfaces web y usabilidad · diseño de interfaces web y usabilidad esta obra está...

34
Juan Manuel Carraro @carrarojm www.ccomunicacion.com Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons

Upload: others

Post on 12-May-2020

10 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

Juan Manuel [email protected]

Diseño de interfaces Web y Usabilidad

Esta obra está bajo una licencia de Creative Commons

Page 2: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

2

Primera parte: 

Diseñando y programando desde el cubículo

2

Page 3: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,
Page 4: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,
Page 5: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

Pip.com

Page 6: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

Piiiiiiiiiiiiiiiiiiiiiiiiiip.....

Page 7: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

Piiiiiiiiiiiiiiiiiiiiiiiiiip.....

Page 8: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

Mi problema de usabilidad con Havanna

Mi problema de usabilidad con los pocillos de café

8 8888

Page 9: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

¡Salgamos del cubículo!

Diseñamos y programamos para personas reales que necesitan resolver tareas concretas en contextos reales. 

999

Page 10: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

10

Segunda parte: 

¿Qué sucede fuera del cubículo?

10

Page 11: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

11

Breve historia del valor

11

UserExperience

Fuente: B. Joseph Pine II y James H. Gilmore, The Experience Economy (1999)

Page 12: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

Experiencia de Usuario

• Es la capacidad de una interfaz de generar sensaciones y emociones positivas durante el proceso de interacción con quien la utiliza. 

• Sensaciones y emociones positivas:

• Fácil y simple (amigable)

• Intuitivo

• Entretenido

• Divertido

• Adictivo (fidelización)

12

1212

Page 13: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

13

Diseño Centrado en el Usuario+

MetodologíaDisciplinas

.Arquitectura de Información.Diseño de Interacción

.Usabilidad

Experiencia de Usuario (UX)

13

1313

Page 14: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

14

Diseño Centrado en el Usuario+

MetodologíaDisciplinas

.Arquitectura de Información.Diseño de Interacción

.Usabilidad

Experiencia de Usuario (UX)

14

1414

Page 15: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

15

• ISO/IEC 9241:

"Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico"

Definiendo usabilidad

1515

1515

Page 16: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

16

• La usabilidad es un atributo cuali‐cuantitativo relacionado a cuán fácil es usar algo.

• Se refiera a productos y servicios que pertenecen al mundo real y al virtual. 

Definiendo usabilidad

1616

1616

Page 17: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

17

Tercera parte: 

Qué técnicas podemos usar para salir del cubículo

17

Page 18: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

Técnicas de análisis de la usabilidad:

• Análisis de comparables

• Construcción de personas

• Evaluación heurística

• Relevamiento contextual

• Entrevistas cualitativas

• Card Sorting

• Pruebas A/B

• Prototipado iterativo

• Pruebas de usabilidad Profundidad

Superficie

Page 19: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

Técnicas de análisis de la usabilidad:

• Análisis de comparables

• Construcción de personas

• Evaluación heurística

• Relevamiento contextual

• Entrevistas cualitativas

• Card Sorting

• Pruebas A/B

• Prototipado iterativo

• Pruebas de usabilidad Profundidad

Superficie

Page 20: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

Técnicas de análisis de la usabilidad:

• Análisis de comparables

• Construcción de personas

• Evaluación heurística

• Relevamiento contextual

• Entrevistas cualitativas

• Card Sorting

• Pruebas A/B

• Prototipado iterativo

• Pruebas de usabilidad Profundidad

Superficie

Page 21: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

Técnicas de análisis de la usabilidad:

• Análisis de comparables

• Construcción de personas

• Evaluación heurística

• Relevamiento contextual

• Entrevistas cualitativas

• Card Sorting

• Pruebas A/B

• Prototipado iterativo

• Pruebas de usabilidad Profundidad

Superficie

Page 22: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

www.ccomunicacion.com.ar

22

Prototipado iterativo

Page 23: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

www.ccomunicacion.com.ar

23

Prototipado iterativo

Page 24: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

www.ccomunicacion.com.ar

24

Prototipado iterativo

Page 25: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

www.ccomunicacion.com.ar

25

Page 26: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

www.ccomunicacion.com.ar

26

Pruebas de usabilidad

Page 27: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

www.ccomunicacion.com.ar

27

Pruebas de usabilidad

Page 28: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

• Un focus group

• Una encuesta

• Una entrevista

• Una sesión de psicoanálisis

Una prueba de usabilidad NO es:

Page 29: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

• Un usuario

• Una interfaz o producto 

• Tareas concretas para realizar con el producto

• Un contexto

Una prueba de usabilidad requiere de:

Page 30: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

• La interfaz tiene problemas de usabilidad y cómo resolverlos.

• Los usuarios pueden realizar exitosamente las tareas para las que una interfaz fue diseñada (efectividad).

• Un nuevo producto es eficiente.

• Un producto es más usable que el de la competencia.

• El rediseño de un producto generará beneficios (ROI). 

Sirve para saber si:

Page 31: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

• Eficacia: el porcentaje de tareas exitosas realizadas por el usuario sin ayuda externa. 

• Eficiencia: el costo de la realización de las tareas exitosas. Puede ser medido con distintos indicadores (cantidad de errores, tiempo para realizar la tarea, etc.)

• Satisfacción: nivel de satisfacción de los usuarios en el uso de la interfaz, medido con un cuestionario estándar al final de cada prueba.

En las pruebas de usabilidad se mide:

Page 32: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

¿Cuántos usuarios necesitamos?

Fuente: Alert Box : Why You Only Need to Test with 5 Users, Jakob Nielsen

Page 33: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

• Blogs:

• http://olgacarreras.blogspot.com/

• http://www.torresburriel.com/weblog/

• http://www.ccomunicacion.com.ar/es/blog

• Autores:

• Steve Krug, “No me hagas pensar”. http://www.sensible.com/

• Jakob Nielsen, Alertbox. http://www.useit.com/

• Asociaciones:

• IxDA (Interaction Design Association): http://www.ixda.org/

• IxDA‐BA: http://www.ixda.com.ar/

• IxDA‐Córdoba: @IxDACBA

• UPA (Usability Professional Association):  http://www.upassoc.org/

¿Por dónde empezamos?

Page 34: Diseño de interfaces Web y Usabilidad · Diseño de interfaces Web y Usabilidad Esta obra está bajo una licencia de Creative Commons. 2. Primera parte: ... 4. 1 4. 14. 1 5 ... errores,

¡Muchas Gracias!

Juan Manuel CarraroEmail: [email protected]: @carrarojmSlideShare: http://www.slideshare.net/carrarojmWeb: www.ccomunicacion.com