Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)

5,574 views
5,456 views

Published on

El acelerado acceso a la tecnología a través de PCs, notebooks, tablets y smartphones, entre otros dispositivos, ha dado origen a una nueva disciplina de gran importancia y no siempre explorada por los profesionales de la web: el diseño de interacción (IxD, por sus siglas en inglés).

En la charla se presenta un caso hipotético de creación de una aplicación en la que se repiten algunos de los problemas comunes a los que enfrentan diseñadores, programadores y emprendedores.

Se muestra cómo se resolvería el mismo encargo desde el diseño de interacción y tomando en cuenta la experiencia de usuario, exponiendo las diferencias de criterio y proceso, y la aplicación de un modelo cuantificado para comparar los resultados y lograr calidad.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,574
On SlideShare
0
From Embeds
0
Number of Embeds
4,013
Actions
Shares
0
Downloads
63
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)

  1. 1. Diseño de Interacción: usabilidad aplicada Santiago Bustelo Director de diseño, Kambrica IxDA Central and South America Regional Coordinator Tucumán Valley: Diseño de Interfaces 16 de mayo, 2012 Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar @sbustelo M E M B E R
  2. 2. M E M B E R Me presento… • Santiago Bustelo, diseñador de interacción. • Fundador y Director de Diseño, Kambrica. • Fundador y Coordinador IxDA Buenos Aires y Coordinador Regional de IxDA en Latinoamérica. Organizador de los principales eventos de UX en Argentina desde 2010 y de Interaction South America 2014. • Desde 1997 he participado en proyectos de diseño y desarrollo para Microsoft, Staples, Coca-Cola, HP, TetraPak, MetLife, HSBC, Telefónica, Jumbo, Molinos, Banco Santander, Bumeran.com, Guía Óleo y Universidad de Stanford, entre otros. • He dictado presentaciones y talleres sobre Usabilidad, Diseño de Interacción y Experiencia de Usuario (UX) desde el año 2001 en Argentina, Brasil, Colombia, EEUU, Canadá, Irlanda y Holanda.
  3. 3. Evolución en Experiencia de Usuario • M E M B E R IxDA (Interaction Design Association) • Organización abierta, voluntaria y gratuita, con la misión de liberar a la condición humana de las malas experiencias que la desafían, avanzando la disciplina de Diseño de Interacción. • Foro global, más de 76.000 miembros, 160 grupos locales, 36 grupos en América Latina. • En Argentina: • Buenos Aires: ixda.com.ar • Córdoba: ixdaCba.com.ar • Corrientes / Resistencia: facebook/IxdaCorrientesResistencia • La Plata: ixdaLaPlata.com.ar • Mar del Plata: @IxDAMDQ • Mendoza: ixdaMza.com.ar • Rosario: ixdaRosario.com.ar • Tucumán: ixdaTucuman.com.ar 3 ixda.org
  4. 4. Diseño de Interacción •M E M B E R • Diseño de Experiencias (UX) • Diseño de Interacción (IxD) • Define el modelo de operación de productos interactivos para lograr mejores experiencias para más usuarios. • Diseño de Interfaces • Define los elementos concretos empleados en la interacción. • Diseño visual • Define lenguaje, carácter e identidad visual del producto. ABSTRACTO CONCRETO UX y Diseño: definir cómo es, cómo funciona y cómo luce un producto digital 4
  5. 5. Diseño de Interacción •M E M B E R Funciones del diseño Información Presentación Uso 5
  6. 6. Diseño de Interacción •M E M B E R Sitios inspiradores vs. sitios que usamos 6
  7. 7. Diseño de Interacción •M E M B E R Forma versus Función 1 2 3 4 567 891011 12 1314 15 16 17 18 19 20 21 222324 25 262728293031 7
  8. 8. Diseño de Interacción •M E M B E R Forma y Función 9 D L M M J V S 26 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 2 3 4 5 6
  9. 9. Diseño de Interacción •M E M B E R • La usabilidad de una interfaz es una medida de la efectividad, eficiencia y satisfacción con la cual determinados usuarios pueden alcanzar determinados objetivos en un entorno particular con dicha interfaz. (ISO 9241, Requerimientos ergonómicos para trabajo de oficina con terminales visuales, Parte 11 - 1997) Usabilidad 11
  10. 10. Efectividad: Incorporando al usuario
  11. 11. Diseño de Interacción •M E M B E R Eficiencia: análisis y cuantificación 13
  12. 12. Diseño de Interacción •M E M B E R Satisfacción: experiencia óptima Simplificación del modelo de Mihaly Csikszentmihalyi Frustración Fluencia desafío habilidad Aburrimiento 14
  13. 13. Diseño de Interacción •M E M B E R Proceso de diseño y caso de ejemplo 15
  14. 14. Diseño de Interacción •M E M B E R • Producto: Software de administración de un videoclub • Nuestros personajes: Caso de ejemplo 16 Programador cavernario Diseñador cavernario Emprendedor cavernario Iconos: FastIcon
  15. 15. Diseño de Interacción •M E M B E R Programador cavernario • 3 entidades • Películas: Datos • Clientes: Datos • Alquileres: Relaciones • Operaciones • Alta, baja, modificación y consulta para cada entidad Ejemplo desarrollado por Diego González, Fundador Lagash Systems 17
  16. 16. 1234
  17. 17. 1234
  18. 18. 1234 Gonzalez
  19. 19. GonzalezDiego760 Rivadavia 5000 11 B Buenos  Aires 12
  20. 20. 1234 760
  21. 21. No  hay  stock.
  22. 22. 760
  23. 23. 1235 760
  24. 24. Diseño de Interacción •M E M B E R Diseñador cavernario • Metáforas • Películas: DVDs • Clientes: Fichas • Alquileres: Ficha + DVD • Representación • Experiencia inmersiva • Fotorealismo 33
  25. 25. Diseño de Interacción •M E M B E R Emprendedor cavernario • Relevamiento competitivo • Definición del mercado • Especificación • Recursos y plan de trabajo • ???? • Profit! 45
  26. 26. Diseño de Interacción •M E M B E R Relevamiento competitivo 46 freemium
  27. 27. Diseño de Interacción •M E M B E R Relevamiento competitivo 47 screencast
  28. 28. Diseño de Interacción •M E M B E R Relevamiento competitivo 48 amigable touch
  29. 29. Diseño de Interacción •M E M B E R Definición del mercado 49 Foto: Ned Raggett Foto: Andrés Rueda
  30. 30. Diseño de Interacción •M E M B E R “Especificación” para diseño y desarrollo 50 ✓ Más potente y con más funciones que la competencia. ✓ Gestión de uno o múltiples locales. ✓ Informes y estadísticas. ✓ Cálculo automático de recargos. ✓ Módulo avanzado de búsquedas. ✓ Tipos de artículos y formatos configurables. ✓ Módulo de Promociones. ✓ Sistema de premios y puntos de cliente. ✓ Soporte de lectores de códigos de barras. ✓ Módulo de diseño de catálogos. ✓ Módulo de diseño de páginas web. ✓ Control de envíos y retiros a domicilio (delivery) con emisión de ticket de retiro. ✓ Creación de abonos de alquiler con fecha de vencimiento. ✓ Módulo de envío de catálogo por e-mail a socios. ✓ Interfaz amigable y fácil de usar.
  31. 31. Diseño de Interacción •M E M B E R Recursos y “metodología” 51 Ejercerpresión Ejercerpresión
  32. 32. Diseño de Interacción •M E M B E R Expectativa 52 En 3 meses Foto: Wikipedia
  33. 33. Diseño de Interacción •M E M B E R Resultado 53 Después de 1 año Foto: Wikipedia
  34. 34. Diseño de Interacción •M E M B E R ¿Qué tienen estos tres casos en común? 54 • Diseño sin intención / autoreferencial • El usuario final no participa del proceso • Proceso lineal • Falta de metodología • Falta de política de calidad
  35. 35. Diseño de Interacción •M E M B E R Diseño y Usabilidad • Siempre ocurren • A un producto no le “falta” diseño o usabilidad. En todo caso, su diseño o usabilidad son malos. • Son atributos cualitativos intrínsecos al producto • Como la performance, no se pueden “agregar”. • Son definidos por el elemento más débil y afectados por todos los que construyen el producto. 55
  36. 36. Diseño de Interacción •M E M B E R Proceso lineal 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. 56
  37. 37. Diseño de Interacción •M E M B E R Proceso lineal interminable 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. 4. No es lo que el cliente o el usuario querían, retrocede tres casilleros. 5. Se repite hasta el hartazgo de una o ambas partes. 57
  38. 38. Diseño de Interacción •M E M B E R ¿Cuándo está terminado nuestro trabajo? • Cuando nos gusta a nosotros • Cuando funciona como queríamos • Cuando le gusta al cliente • Cuando el usuario logra lo que esperábamos 58
  39. 39. Diseño de Interacción •M E M B E R • Problemas bien definidos • Algoritmos • Resolución lineal • Metodología estructurada • Foco en análisis y documentación • Problemas dinámicos • Heurísticas • Resolución asintótica • Metodología ágil • Foco en entregables Entender el tipo de problema 59 El proceso modela el resultado.
  40. 40. Diseño de Interacción •M E M B E R Proceso convergente 1. Objetivos y análisis inicial. 2. Diseño y desarrollo en iteraciones avanzando y validando progresivamente: • Funcionalidad • Estructura y elementos • Lenguaje visual 3. Entrega y puesta en producción. 4. Iteración de todo el proceso. 60
  41. 41. Diseño de Interacción •M E M B E R Incorporando UX a nuestro ejemplo 61
  42. 42. Diseño de Interacción •M E M B E R Diseño Centrado en el Usuario • Filosofía de diseño: • Creación de productos que resuelvan necesidades concretas de sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo de su parte. • Proceso de diseño: • Conocer a fondo a los usuarios finales reales. • Diseñar un producto que resuelva sus necesidades y se ajuste a sus capacidades, expectativas y motivaciones. • Poner a prueba lo diseñado. 62
  43. 43. Diseño de Interacción •M E M B E R Caso Centrado en el Usuario • Proceso de diseño y desarrollo convergente e iterativo • Evaluación competitiva, identificación de oportunidades • Definición preliminar del modelo • Validación y ajuste del modelo con usuarios • Priorización y estrategia de versiones • Prototipado de la interfaz • Pruebas con usuarios y ajuste de prototipos • Metodología ágil • Pruebas de usabilidad y QA antes de cada lanzamiento 63 Usaurio
  44. 44. Diseño de Interacción •M E M B E R ¿Qué es Calidad? • “La Calidad de un producto es una función del bien que hace al mundo” (Tom DeMarco) • Calidad = Resultados del esfuerzo / Costos totales (W. Edwards Deming) • “Calidad es lo que nuestros usuarios valoran. Todo lo demás es desperdicio” (Lean Software Development) 64
  45. 45. Diseño de Interacción •M E M B E R Calidad y Cuantificación • “Mide lo que sea medible y haz medible lo que no lo sea” (Galileo Galilei) • Cuantificar nos permite: • Comparar alternativas de manera objetiva • Análisis en lugar de opiniones • Identificar áreas de oportunidad 65
  46. 46. Diseño de Interacción •M E M B E R Cuantificación: KLM-GOMS Cada operación del usuario tiene un costo. 66 Key 0,2 seg. Tecla / mouse click & release Hover 0,4 seg. Paso mouse ßà teclado Point 1,1 seg. Apuntar con el mouse Mental 1,35 seg. Preparación mental nueva tarea Response ? Respuesta del sistema Más información: Artículo en Wikipedia sobre KLM-GOMS (en inglés)
  47. 47. Diseño de Interacción •M E M B E R Cuantificación: Buscar cliente (v. programador) 67 Inicio tarea: 1,35 Mover mano al mouse: 0,40 Proxima tarea: 1,35 Apuntar menu Clientes: 1,10 click menu Clientes: 0,20 Apuntar menú Clientes » Modificación: 1,10 click menú Clientes » Modificación: 0,20 Próxima tarea: 1,35 Apuntar campo texto: 1,10 click campo texto: 0,20 Mover mano al teclado: 0,40 Proxima tarea: 1,35 Tipear apellido: 1,60 Mover mano al mouse: 0,40 Proxima tarea: 1,35 point OK: 1,10 click OK: 0,20 Obtuvimos (o no) el dato: 14.75 segundos Recuperación: Mover mano al mouse: 0,40 Proxima tarea: 1,35 point Cancel: 1,10 click Cancel: 0,20 Volvemos a abrir el cuadro, Tipeamos apellido otra vez: 12,32 Mover mano al mouse: 0,40 Proxima tarea: 1,35 apuntarOK: 1,10 click OK: 0,20 Total con recuperación: 32,55 segundos
  48. 48. Diseño de Interacción •M E M B E R Cuantificación: Buscar cliente (v. diseñador) 68 Inicio tarea: 1,35 Apuntar al fichero home: 1,10 Click Fichero home: 0,20 Animación "files, lots of files¨: 4 Proxima tarea: 1,35 Apuntar boton prox serie ficheros: 1,10 Click proxima serie ficheros: 0,20 Animación serie de ficheros: 1 Prox tarea: 1,35 Apuntar fichero "G": 1,10 Click fichero "G": 0,20 Animación fichero G: 2 Proxima tarea: 1,35 Leer etiquetas x 4: 5,40 Proxima tarea: 1,35 Apuntar GON: 1,10 Click GON: 0,20 Animación Cajón GON: 2 Proxima tarea: 1,35 Leer Apellido, Nombre x 5: 6,75 Proxima tarea: 1,35 Apuntar Gonzalez, Diego: 1,10 Click Gonzalez, Diego: 0,20 Obtuvimos la ficha: 28.10 segundos Beneficio eliminar animaciones: 9 segundos Total sin animaciones: 19,1 segundos
  49. 49. Diseño de Interacción •M E M B E R Casos de uso: hipótesis inicial 69 • Modalidad de atención: mostrador, teléfono y buzón • Búsqueda de clientes y títulos • Alta de un cliente • Alta de nueva película • Cliente alquila más de una película • Cliente devuelve películas y alquila otras • Carga de devoluciones de buzón • Copia dañada • Reporte de atrasos
  50. 50. Diseño de Interacción •M E M B E R Resultados del Relevamiento (un videoclub, dos usuarios) • No tomamos requerimientos de los usuarios. Nos enfocamos en lo que los usuarios hacen. • Procesos y problemas reales del negocio • Gestión actual, áreas de mejora • Aprox. 5000 clientes y 5000 películas • Los clientes casi nunca saben el Nro. de Cliente, menos aún cuando no son titulares • Se dan de alta 10 a 20 títulos por día, con datos mínimos • Cargar devoluciones de buzón puede llevar toda la mañana • Muchas copias para una película • No se dan clientes de baja 70
  51. 51. Diseño de Interacción •M E M B E R Priorización y estrategia de versiones 71 v. 1.0 v. 2.0 v. 3.0 v. 4.0 v. 5.0 v. 6.0
  52. 52. Diseño de Interacción •M E M B E R Casos de uso reales y priorizados 72 • Modalidad de atención: mostrador, teléfono • Búsqueda de clientes: por nombre del titular, dirección o teléfono. • Búsqueda de copias: por título o código • Alta o modificación de un cliente • Editar película: ABM copias, “baja” si no hay copias • Cliente alquila hasta 3 películas • Cliente devuelve hasta 3 películas • Cliente devuelve hasta 3 películas y alquila hasta 3 • Alta de 20 nuevos títulos, asignación de copias • Modalidad de atención: buzón • Carga de 40 devoluciones de buzón • Copia dañada • Listado de películas por géneros / estrenos • Reporte de atrasos • ¿Qué temporadas vio el cliente? • Se desordena fila en mostrador
  53. 53. Diseño de Interacción •M E M B E R Idea: Sistema centrado en la Búsqueda • ¿Un campo con dos botones? • ¿Un campo con dos radio buttons y botón “Buscar”? • ¿Dos campos de búsqueda? • Tal vez funcione, empezamos un prototipo… 73
  54. 54. Diseño de Interacción • Sistema con dos campos de búsqueda 74
  55. 55. Diseño de Interacción • Sistema con dos campos de búsqueda 75
  56. 56. Diseño de Interacción • Sistema con dos campos de búsqueda 76
  57. 57. Diseño de Interacción • Sistema con dos campos de búsqueda
  58. 58. Diseño de Interacción •M E M B E R Propuesta: un solo campo de búsqueda 78 • Resultado dependiente del contenido. No hace falta especificar el tipo de dato. • Ventajas del patrón Instant Search • Mínimo input • Corrección sobre la marcha • Podemos usar [enter] para próxima acción: el proceso es predecible en base a los datos • Necesitamos prueba de concepto
  59. 59. Diseño de Interacción •M E M B E R Prueba de concepto 79
  60. 60. Diseño de Interacción •M E M B E R Cuantificación: Búsqueda 2.0 Inicio tarea: 1,35 Mover mano al mouse: 0,40 Proxima tarea: 1,35 apuntar Buscar: 1,10 click Buscar: 0,20 Mover mano al teclado: 0,40 Proxima tarea: 1,35 Tipear 3 caratacteres apellido: 0,60 Proxima tarea: 1,35 Tipar espacio: 0,20 Proxima tarea: 1,35 Tipear 3 caracteres nombre: 0,60 Total: 10,25 segundos Beneficio de mantener foco en búsqueda: 4,80 segundos Total manteniendo foco en búsqueda: 5,45 segundos 80
  61. 61. diseño de interacción •M E M B E R • Evitar uso del mouse • Modelo unificado y consistente • Metáforas / Referencias: Mail, address book • Sujeto + verbo • No intrusivo • Diseño respetando Guías de diseño de interfaz de Windows Vista / Windows 7 Bases del diseño 81
  62. 62. Diseño de Interacción •M E M B E R Esquema 82 Funciones secundarias listado películas alquiler listado clientes detalle película listado copias Seleccionar copia Copias + Cliente = Ficha Cliente Seleccionar película Buscar peliculas o clientes
  63. 63. Diseño de Interacción •M E M B E R Buscar peliculas o clientes Películas Alquiler: 3 películas La Rosa Púrpura del Cairo Woody Allen La Rosa Púrpura del Cairo Woody Allen La Rosa Púrpura del Cairo Woody Allen La Rosa Púrpura del Cairo Woody Allen Santiago Bustelo 32 años 4123-4567 Diego González 32 años 4123-4567 Santiago Bustelo 32 años 4123-4567 Diego González 32 años 4123-4567 Diego González 32 años 4123-4567 Juan de los Palotes 1638 Deuda $67 Clientes Activar Cliente + + Alquilar a Diego González 78079 78079 78079 78079 78079 78079 78079 78079 78079 ReservarRelacionadas 78079 78079 78079 78079 La Rosa Púrpura del Cairo (1985) The Purple Rose of Cairo La Rosa Púrpura del Cairo #78909 Mia Farrow Jeff Daniels Danny Aiello Irving Metzman Stephanie Farrow Actores Woody AllenDirector Sátira, Comedia, Woody AllenGéneros 1 hora 22 minutosDuración La Rosa Púrpura del Cairo #78909 La Rosa Púrpura del Cairo El ciudadano Eterno resplandor de una mente... Yo sé que tu sabes que yo sé reservada Mockup avanzado 83
  64. 64. Diseño de Interacción •M E M B E R 84 Mockup final
  65. 65. Diseño de Interacción •M E M B E R Caso: Cliente devuelve y alquila • Anticipación, no es necesario buscar al cliente • Minimizar input y pasos • Permitir operaciones en cualquier orden 85
  66. 66. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 86
  67. 67. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 87
  68. 68. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 88
  69. 69. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 89
  70. 70. Diseño de Interacción •M E M B E R Caso: Devolución de 40 películas • Soportar un proceso de lotes con el mismo modelo de interacción 90
  71. 71. Diseño de Interacción •M E M B E R Devolución de 40 películas 91
  72. 72. Diseño de Interacción •M E M B E R Devolución de 40 películas 92
  73. 73. Diseño de Interacción •M E M B E R Devolución de 40 películas 93
  74. 74. Diseño de Interacción •M E M B E R Devolución de 40 películas 94
  75. 75. Diseño de Interacción •M E M B E R Resultados Tarea 1.0 2.0 % Búsqueda 15 a 33 seg. 5.45 seg. 175 a 500 % Alta de 20 nuevas películas 1.543 seg. 204 seg. 656% Cliente devuelve y alquila 52 a 87 seg. 7.80 seg. 566% Buzón 40 devoluciones 636 seg. 156 seg. 300% Notificación de 9 atrasos 10 a 15 min.? 7 seg. 8400% 95
  76. 76. Diseño de Interacción •M E M B E R • No hay Experiencia de Usuario sin usuarios • Proceso iterativo de análisis y diseño centrado en la operación del usuario • Bases racionales, cuantificación, calidad • Obtener producto como resultado de un proceso, y satisfaciendo metas Conclusiones 96
  77. 77. Diseño de Interacción •M E M B E R Diseño de Interacción en América Latina Oportunidades • Interés creciente en Usabilidad • Diseño y UX como requerimiento Desafíos • Baja integración del diseñador con Desarrollo y Negocios • Falta de visión y lenguaje común • Falta de percepción de valor • Baja madurez del mercado • Poco apoyo académico deseable usable confiable funcional 97
  78. 78. ¡Muchas gracias! Diseño de Interacción: usabilidad aplicada Tucumán Valley: Diseño de Interfaces 16 de mayo, 2012 M E M B E R
  79. 79. w w w . k a m b r i c a . c o m

×