Your SlideShare is downloading. ×
Diseño de interacción, Usabilidad aplicada (Día de la Usabilidad 2011 - Bogotá, Colombia)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,173
views

Published 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.


0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,173
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
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 Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar Santiago Bustelo Director de diseño, Kambrica IxDA Latin America Regional Coordinator Día de la Usabilidad • Bogotá, Colombia 11 de noviembre, 2011 @sbustelo M E M B E R
  • 2. Diseño de Interacción •M E M B E R IxDA (Interaction Design Association) • Red global dedicada a la práctica 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 2 ixda.org
  • 3. 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 la mayor cantidad de usuarios • Diseño de Interfaces • Define los elementos concretos empleados en la interacción ABSTRACTO CONCRETO Diseño de Interacción 3
  • 4. DISEÑO DE INTERACCIÓN INTERACCIÓN HUMANO-COMPUTADOR IxD DISEÑO INDUSTRIAL DISEÑO DE SONIDO DI ARQUITECTURAARQUITECTURA DE INFORMACIÓN ARQ DISEÑO DE EXPERIENCIAS UX AI DISEÑO GRÁFICO DG HCI Señalética Entornos Interactivos 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 •M E M B E R Funciones del diseño Información Presentación Uso 5
  • 6. 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 6
  • 7. Diseño de Interacción •M E M B E R Forma y Función 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. 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 8
  • 9. Efectividad: Incorporando al usuario
  • 10. Diseño de Interacción •M E M B E R Eficiencia: análisis y cuantificación 10
  • 11. 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 11
  • 12. 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 12
  • 13. Diseño de Interacción •M E M B E R Entendiendo al usuario • 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. 13
  • 14. Diseño de Interacción •M E M B E R Sitios que te inspiran vs. sitios que usás 14
  • 15. Diseño de Interacción •M E M B E R Proceso de diseño y caso de ejemplo 15
  • 16. Diseño de Interacción •M E M B E R • 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) Caso de ejemplo 16
  • 17. 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 17 Prototipo de interfaz publicado en http://kambrica.com/raf08/ caveman.zip(ejecutable para Windows)
  • 18. 1234
  • 19. 1234
  • 20. 1234 Gonzalez
  • 21. GonzalezDiego760 Rivadavia 5000 11 B Buenos  Aires 12
  • 22. 1234 760
  • 23. No  hay  stock.
  • 24. 1235 760
  • 25. 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 31
  • 26. 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) 43
  • 27. Diseño de Interacción •M E M B E R 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 44
  • 28. Diseño de Interacción •M E M B E R Cuantificación: KLM-GOMS Cada operación del usuario tiene un costo. 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 •M E M B E R Cuantificación: Buscar cliente (v. programador) 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 •M E M B E R Cuantificación: Buscar cliente (v. diseñador) 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. 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 ¿Qué estamos tratando de resolver? 48
  • 32. 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. 49
  • 33. 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 quería, retrocede tres casilleros. 5. Se repite hasta el hartazgo de una o ambas partes. 50
  • 34. 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 progresivamente en: • Funcionalidad • Estructura y elementos • Lenguaje visual 3. Entrega y puesta en producción. 51
  • 35. Diseño de Interacción •M E M B E R Diseño Centrado en el Usuario: Hipótesis inicial de casos de uso 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. Diseño de Interacción •M E M B E R Resultados del Relevamiento (un videoclub, dos usuarios) • 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. Nos enfocamos en lo que el usuario hace. 53
  • 37. Diseño de Interacción •M E M B E R Casos de uso reales priorizados 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. 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… 55
  • 39. Diseño de Interacción •M E M B E R Sistema con dos campos de búsqueda 56
  • 40. Diseño de Interacción •M E M B E R Sistema con dos campos de búsqueda 57
  • 41. Diseño de Interacción •M E M B E R Sistema con dos campos de búsqueda 58
  • 42. Diseño de Interacción •M E M B E R Sistema con dos campos de búsqueda
  • 43. Diseño de Interacción •M E M B E R Propuesta: un solo campo de búsqueda 60 • 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 • Necesitamos prueba de concepto
  • 44. Diseño de Interacción •M E M B E R Prueba de concepto 61 Prueba de concepto publicada en http://kambrica.com/raf08/
  • 45. 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 62
  • 46. 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 63
  • 47. Diseño de Interacción •M E M B E R Esquema 64 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
  • 48. 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 65
  • 49. Diseño de Interacción • M E M B E R 66 Mockup final
  • 50. Diseño de Interacción •M E M B E R • Alta diaria de 20 nuevas películas • Cliente devuelve y alquila en mostrador • Carga de 40 devoluciones por buzón • Reporte de atrasos Ejemplos de 4 casos de uso 67
  • 51. Diseño de Interacción •M E M B E R 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 68
  • 52. Diseño de Interacción •M E M B E R Alta diaria de 20 nuevas películas 69
  • 53. Diseño de Interacción •M E M B E R Alta diaria de 20 nuevas películas 70
  • 54. Diseño de Interacción •M E M B E R Alta diaria de 20 nuevas películas 71
  • 55. Diseño de Interacción •M E M B E R Alta diaria de 20 nuevas películas 72
  • 56. Diseño de Interacción •M E M B E R Alta diaria de 20 nuevas películas 73
  • 57. Diseño de Interacción •M E M B E R Cliente devuelve y alquila • Caso 2 / 4 • Anticipación, no es necesario buscar al cliente • Minimizar input y pasos • Permitir operaciones en cualquier orden 74
  • 58. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 75
  • 59. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 76
  • 60. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 77
  • 61. Diseño de Interacción •M E M B E R Cliente devuelve y alquila 78
  • 62. Diseño de Interacción •M E M B E R Devolución de 40 películas • Caso 3 / 4 • Soportar un proceso de lotes con el mismo modelo de interacción 79
  • 63. Diseño de Interacción •M E M B E R Devolución de 40 películas 80
  • 64. Diseño de Interacción •M E M B E R Devolución de 40 películas 81
  • 65. Diseño de Interacción •M E M B E R Devolución de 40 películas 82
  • 66. Diseño de Interacción •M E M B E R Devolución de 40 películas 83
  • 67. Diseño de Interacción •M E M B E R • Caso 4 / 4 • Comprensión del caso de uso: Lo importante no es el listado, sino la notificación Reporte de atrasos 84
  • 68. Diseño de Interacción •M E M B E R Reporte de atrasos 85
  • 69. Diseño de Interacción •M E M B E R Reporte de atrasos 86
  • 70. 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% 87
  • 71. Diseño de Interacción •M E M B E R • 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 Conclusiones 88
  • 72. 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 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 deseable usable confiable funcional 89
  • 73. w w w . k a m b r i c a . c o m