Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)

  • 1,106 views
Uploaded on

Diseño de Interacción: Usabilidad aplicada - Presentación en el Día de la Usabilidad en Bogotá, Colombia, el 11 de noviembre de 2011 (www.diadelausabilidad.com.com) …

Diseño de Interacción: Usabilidad aplicada - Presentación en el Día de la Usabilidad en Bogotá, Colombia, el 11 de noviembre de 2011 (www.diadelausabilidad.com.com)

Video: https://www.youtube.com/watch?v=KK-TnDPlx4o


El Diseño de Interacción es una nueva disciplina de diseño, relacionado con la Usabilidad y la Ingeniería de Software.

En la charla se presentan diferencias y puntos en común del Diseño de Interacción con el Diseño Gráfico y Diseño Industrial, qué nuevas habilidades requieren los profesionales del diseño para desempeñarse dentro de estas disciplinas, y técnicas y metodologías de trabajo específicas.

Se muestra cómo un programador, un diseñador visual y un diseñador de interacción tomarían el mismo encargo, exponiendo las diferencias de criterio y proceso, y la aplicación de un modelo cuantificado para comparar los resultados y lograr calidad.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,106
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
42
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Diseño de Interacción: Usabilidad aplicada Santiago Bustelo Director de diseño, Kambrica IxDA Latin America Regional Coordinator Día de la Usabilidad • Bogotá, Colombia 11 de noviembre, 2011 MEMBER Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar @sbustelo
  • 2. IxDA (Interaction Design Association) • Red global dedicada a la práctica Diseño de Interacción • profesional del Diseño de Interacción • Comunidad • Educación • Evangelismo • Profesionalismo • Innovación • Foro global, 28.000 miembros • 20 grupos en América Latina y creciendo! • ixda.org/local/ixda-bogota MEMBER 2 ixda.org
  • 3. Diseño de Interacción • Diseño de Experiencias (UX) • Diseño de Interacción (IxD) • Define el modelo de operación de productos Diseño de Interacción • MEMBER interactivos para lograr mejores experiencias para la mayor cantidad de usuarios • Diseño de Interfaces • Define los elementos concretos empleados en la interacción ABSTRACTO CONCRETO 3
  • 4. UX DISEÑO DE EXPERIENCIAS Señalética Entornos Interactivos IxD DISEÑO DE INTERACCIÓN INTERACCIÓN HUMANO-COMPUTADOR ARQ DI DISEÑO INDUSTRIAL DISEÑO DE SONIDO AI ARQUITECTURA ARQUITECTURA DE INFORMACIÓN DG DISEÑO GRÁFICO HCI Diseño de Interfaces Computación ubicua Ingeniería de Usabilidad Controles Diseño de Información Navegación PRODUCCIÓN DE CONTENIDO (Texto, Imagen, Video, sonido) Dan Saffer, Designing for Interaction
  • 5. Diseño de Interacción • Funciones del diseño MEMBER Información Presentación Uso 5
  • 6. 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 Diseño de Interacción • Forma versus Función MEMBER 1 2 3 4 5 6
  • 7. Diseño de Interacción • Forma y Función MEMBER 7 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
  • 8. • 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) Diseño de Interacción • MEMBER Usabilidad 8
  • 9. Efectividad: Incorporando al usuario
  • 10. Eficiencia: análisis y cuantificación Diseño de Interacción • MEMBER 10
  • 11. Aburrimiento Diseño de Interacción • Satisfacción: experiencia óptima Frustración Simplificación del modelo de Mihaly Csikszentmihalyi MEMBER Fluencia desafío habilidad 11
  • 12. ¿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 Diseño de Interacción • MEMBER 12
  • 13. • Su fin es realizar una tarea. • Nuestra interfaz es sólo un medio que puede ser transparente, o un impedimento. • Nuestra interfaz no debe ocupar lugar en la mente del usuario. • Cuando el usuario tiene que pensar en nuestra interfaz, es porque se está preguntando lo que espera o necesita que sea evidente. Y eso, es señal de que no hicimos bien nuestro trabajo. Diseño de Interacción • Entendiendo al usuario MEMBER 13
  • 14. Sitios que te inspiran vs. sitios que usás Diseño de Interacción • MEMBER 14
  • 15. Proceso de diseño y caso de ejemplo Diseño de Interacción • MEMBER 15
  • 16. Diseño de Interacción • Caso de ejemplo • Administración de un videoclub • Requerimientos: • Alquilar una pelicula • Devolver una pelicula • Cargar una película • Cargar un nuevo cliente Ejemplo desarrollado junto con Diego González (Lagash Systems, fundador) MEMBER 16
  • 17. Diseño de Interacción • Programador cavernario • 3 entidades • Películas: Datos • Clientes: Datos • Alquileres: Relaciones • Operaciones • Alta, baja, modificación y consulta para cada entidad MEMBER 17 Prototipo de interfaz publicado en http://kambrica.com/raf08/ caveman.zip(ejecutable para Windows)
  • 18. 1234
  • 19. 1234
  • 20. 1234 Gonzalez
  • 21. 760 Diego Gonzalez Rivadavia 5000 11 B Buenos Aires 12
  • 22. 760 1234
  • 23. No hay stock.
  • 24. 760 1235
  • 25. Diseño de Interacción • Diseñador cavernario • Metáforas • Películas: DVDs • Clientes: Fichas • Alquileres: Ficha + DVD • Representación • Experiencia inmersiva • Fotorealismo MEMBER 31
  • 26. • “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) Diseño de Interacción • ¿Qué es Calidad? MEMBER 43
  • 27. • “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 Diseño de Interacción • Cuantificación MEMBER 44
  • 28. Cada operación del usuario tiene un costo. Diseño de Interacción • Cuantificación: KLM-GOMS MEMBER 45 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)
  • 29. Diseño de Interacción • Cuantificación: Buscar cliente (v. programador) MEMBER 46 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
  • 30. Diseño de Interacción • Cuantificación: Buscar cliente (v. diseñador) MEMBER 47 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
  • 31. ¿Qué estamos tratando de resolver? Diseño de Interacción • • Problemas bien definidos • Algoritmos • Resolución lineal • Metodología estructurada • Foco en análisis y documentación MEMBER • Problemas dinámicos • Heurísticas • Resolución asintótica • Metodología ágil • Foco en entregables 48
  • 32. Diseño de Interacción • Proceso lineal 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. MEMBER 49
  • 33. Diseño de Interacción • 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 quería, retrocede tres casilleros. 5. Se repite hasta el hartazgo de una o ambas partes. MEMBER 50
  • 34. Diseño de Interacción • Proceso convergente 1. Objetivos y análisis inicial. 2. Diseño y desarrollo en iteraciones avanzando progresivamente en: • Funcionalidad • Estructura y elementos • Lenguaje visual 3. Entrega y puesta en producción. MEMBER 51
  • 35. Diseño Centrado en el Usuario: Hipótesis inicial de casos de uso Diseño de Interacción • MEMBER 52 • 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
  • 36. • 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 • No tomamos requerimientos del usuario. Diseño de Interacción • Resultados del Relevamiento (un videoclub, dos usuarios) Nos enfocamos en lo que el usuario hace. MEMBER 53
  • 37. Diseño de Interacción • Casos de uso reales priorizados MEMBER 54 • Modalidad de atención: mostrador, teléfono y buzón • Búsqueda de clientes: por nombre del titular, dirección o teléfono. • Búsqueda de copias: por título o código • 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 • Carga de 40 devoluciones de buzón • Alta o modificación de un cliente • Editar película: ABM copias, “baja” si no hay copias • Copia dañada • Listado de películas por géneros / estrenos • Reporte de atrasos • ¿Qué temporadas vio el cliente? • Se desordena fila en mostrador
  • 38. 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 Diseño de Interacción • MEMBER prototipo… 55
  • 39. Sistema con dos campos de búsqueda Diseño de Interacción • MEMBER 56
  • 40. Sistema con dos campos de búsqueda Diseño de Interacción • MEMBER 57
  • 41. Sistema con dos campos de búsqueda Diseño de Interacción • MEMBER 58
  • 42. Sistema con dos campos de búsqueda Diseño de Interacción • MEMBER
  • 43. Propuesta: un solo campo de búsqueda • Resultado dependiente del contenido • 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 Diseño de Interacción • MEMBER 60 • Necesitamos prueba de concepto
  • 44. Diseño de Interacción • Prueba de concepto MEMBER 61 Prueba de concepto publicada en http://kambrica.com/raf08/
  • 45. Diseño de Interacción • Cuantificación: Búsqueda 2.0 MEMBER 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 62
  • 46. Bases del diseño • 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 diseño de interacción • MEMBER 63
  • 47. Diseño de Interacción • Buscar peliculas o clientes MEMBER Esquema 64 Funciones secundarias listado películas alquiler listado clientes detalle película listado copias Seleccionar copia Copias + Cliente = Ficha Cliente Seleccionar película
  • 48. Clientes Activar Cliente Relacionadas Reservar Diseño de Interacción • MEMBER 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 + + Alquilar a Diego González 78079 78079 78079 78079 78079 78079 78079 78079 78079 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 Director Woody Allen Géneros Sátira, Comedia, Woody Allen Duración 1 hora 22 minutos 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 65
  • 49. Diseño de Interacción • MEMBER 66 Mockup final
  • 50. Ejemplos de 4 casos de uso • Alta diaria de 20 nuevas películas • Cliente devuelve y alquila en mostrador • Carga de 40 devoluciones por buzón • Reporte de atrasos Diseño de Interacción • MEMBER 67
  • 51. Diseño de Interacción • Alta diaria de 20 nuevas películas • Caso 1 / 4 • Reducción de input y pasos • Eliminar tareas repetitivas • Aplicación 2.0 • Mejores datos MEMBER 68
  • 52. Alta diaria de 20 nuevas películas Diseño de Interacción • MEMBER 69
  • 53. Alta diaria de 20 nuevas películas Diseño de Interacción • MEMBER 70
  • 54. Alta diaria de 20 nuevas películas Diseño de Interacción • MEMBER 71
  • 55. Alta diaria de 20 nuevas películas Diseño de Interacción • MEMBER 72
  • 56. Alta diaria de 20 nuevas películas Diseño de Interacción • MEMBER 73
  • 57. • Caso 2 / 4 • Anticipación, no es necesario buscar al cliente • Minimizar input y pasos • Permitir operaciones en cualquier orden Diseño de Interacción • Cliente devuelve y alquila MEMBER 74
  • 58. Diseño de Interacción • Cliente devuelve y alquila MEMBER 75
  • 59. Diseño de Interacción • Cliente devuelve y alquila MEMBER 76
  • 60. Diseño de Interacción • Cliente devuelve y alquila MEMBER 77
  • 61. Diseño de Interacción • Cliente devuelve y alquila MEMBER 78
  • 62. • Caso 3 / 4 • Soportar un proceso de lotes con el mismo Diseño de Interacción • Devolución de 40 películas modelo de interacción MEMBER 79
  • 63. Diseño de Interacción • Devolución de 40 películas MEMBER 80
  • 64. Diseño de Interacción • Devolución de 40 películas MEMBER 81
  • 65. Diseño de Interacción • Devolución de 40 películas MEMBER 82
  • 66. Diseño de Interacción • Devolución de 40 películas MEMBER 83
  • 67. Reporte de atrasos • Caso 4 / 4 • Comprensión del caso de uso: Lo importante no es el listado, sino la notificación Diseño de Interacción • MEMBER 84
  • 68. Diseño de Interacción • Reporte de atrasos MEMBER 85
  • 69. Diseño de Interacción • Reporte de atrasos MEMBER 86
  • 70. 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% Diseño de Interacción • Resultados MEMBER 87
  • 71. Conclusiones • No hay User Experience sin usuarios (Verónica Traynor) • 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 Diseño de Interacción • MEMBER 88
  • 72. Diseño de Interacción en América Latina Oportunidades • Interés creciente en Usabilidad • Diseño 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 • Poca madurez del mercado • Alto riesgo de innovación Diseño de Interacción • MEMBER deseable usable confiable funcional 89
  • 73. www.kambrica.com