Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

3,054 views
3,122 views

Published on

Charla presentada en:
- X Encuentro Latinoamericano de Diseño, Universidad de Palermo, 2015
- La Metro, Córdoba, 2013
- Universidad de la Cuenca del Plata, 2013
- UTN Tucumán, 2012
- Día de la Usabilidad - Bogotá, Colombia, 2011
- Microsoft MIX 2008
- Microsoft Regional Architect Forum 2008

………

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 una visión de UX que integra tecnología, diseño y negocio, 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
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,054
On SlideShare
0
From Embeds
0
Number of Embeds
989
Actions
Shares
0
Downloads
125
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada

  1. 1. do ulas alquiler list cli detalle película listado copias Seleccionar copia Copias + Cliente = F onar cula as o clientes UX y Diseño de Interacción: Usabilidad aplicada Santiago Bustelo User Experience Director, Kambrica IxDA Buenos Aires Local Group Coordinator X Encuentro Latinoamericano de Diseño Universidad de Palermo, 29 de julio 2015 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 UX, Kambrica. • Fundador y Coordinador IxDA Buenos Aires. Coordinador Regional de IxDA en Latinoamérica 2010-2015. 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 80.000 miembros, 175 grupos locales, 39 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: facebook/groups/IxDAMDQ • Mendoza: ixdaMza.com.ar • Rosario: ixdaRosario.com.ar • Santa Fe: ixdaSantaFe.com.ar • Tucumán: ixdaTucuman.com.ar 3 ixda.org
  4. 4. Santiago Bustelo (@sbustelo) •M E M B E R ¿Cuál es el rol del diseñador en el Siglo XXI? 4
  5. 5. Santiago Bustelo (@sbustelo) •M E M B E R Leer el diario 1993 2013 5
  6. 6. Santiago Bustelo (@sbustelo) •M E M B E R 1993 2013 Buscar trabajo 6
  7. 7. Santiago Bustelo (@sbustelo) •M E M B E R 1993 2013 Trabajo administrativo 7
  8. 8. Santiago Bustelo (@sbustelo) •M E M B E R 1993 2013 Hacer las compras 8
  9. 9. Santiago Bustelo (@sbustelo) •M E M B E R 1993 2013 Reencontrarse con compañeros de escuela 9
  10. 10. Santiago Bustelo (@sbustelo) •M E M B E R El mundo digital que nosotros construimos 10 • En un mundo cada vez más conectado e interdependiente, los diseñadores y desarrolladores tenemos la llave para lograr que cada producto o servicio interactivo sea usable y accesible para todas las personas, sin importar el nivel de alfabetización digital y las capacidades físicas, sensoriales, e intelectuales que tengan.
  11. 11. Santiago Bustelo (@sbustelo) •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. 11
  12. 12. Santiago Bustelo (@sbustelo) • M E M B E R User Experience (UX) “Inventé el término porque pensé que interfaz y usabilidad eran demasiado limitados. Quise cubrir todos los aspectos de la experiencia de una persona con un sistema, incluyendo el diseño industrial, gráficos, la interfaz, la interacción física, y el manual. Don Norman 12
  13. 13. Santiago Bustelo (@sbustelo) •M E M B E R • Diseño de Experiencias (UX) • Dirigir la forma en que se siente una persona usando un producto, sistema o servicio. • Diseño de Servicios • Planificar y organizar personas, infraestructura, comunicación y componentes materiales de un servicio para mejorar su calidad y relación con sus clientes. • 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 13
  14. 14. 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
  15. 15. Santiago Bustelo (@sbustelo) • M E M B E R Arquitectura de Información (IA, Information Architecture) • Organizar, jerarquizar y nombrar la información presente en sitios Web, dispositivos móviles e interfaces en general. 15
  16. 16. Santiago Bustelo (@sbustelo) • M E M B E R 16 Jakob Nielsen, Hoa Lorenger: Prioritizing Web Usability IA 75% de los problemas de UX involucran IA
  17. 17. Santiago Bustelo (@sbustelo) • M E M B E R Arq. de Información fuera de la pantalla 17 DISEÑO INTERACTIVO PARA TODOS: USABLE Y ACCESIBLE Señalética: prototipos Señalética: versión final
  18. 18. Santiago Bustelo (@sbustelo) • M E M B E R Factores que componen UX 18 time pressure, pressure of success and fail, explicit and implicit requirements, etc. sex, fashion, habits, norms, language, symbols, religion, etc. time, place, accompanying persons, temperature, etc. cultural factorssocial factors values, emotions, expectations, prior experiences, physical characteristics, motor functions, personality, motivation, skills, age, etc. user usability, functions, size, weight, language, symbols, aesthetic characteristics, usefulness, reputation, adaptivity, mobility, etc. product context of use INTERACTION User Experience Arhippainen, L., Tähti, M. (2003). Empirical Evaluation of User Experience in Two Adaptative Mobile Application Prototypes. Proceedings of the 2nd International Conference on Mobile and Ubiquitous Multimedia, 10–12 December, 2003, Norrköping, Sweden. Espacio de diseño Impacto
  19. 19. Santiago Bustelo (@sbustelo) •M E M B E R Sitios inspiradores vs. sitios que usamos 19
  20. 20. Santiago Bustelo (@sbustelo) •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 20
  21. 21. Santiago Bustelo (@sbustelo) •M E M B E R Forma y Función 21 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
  22. 22. Santiago Bustelo (@sbustelo) •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 22
  23. 23. Efectividad: Incorporando al usuario
  24. 24. Santiago Bustelo (@sbustelo) •M E M B E R Eficiencia: análisis y cuantificación 24
  25. 25. Santiago Bustelo (@sbustelo) •M E M B E R Satisfacción: experiencia óptima Simplificación del modelo de Mihaly Csikszentmihalyi Frustración Fluencia desafío habilidad Aburrimiento 25
  26. 26. Santiago Bustelo (@sbustelo) •M E M B E R Caso de ejemplo y proceso de diseño centrado en el usuario 26
  27. 27. Santiago Bustelo (@sbustelo) •M E M B E R Parte 1: Diseñando desde la caverna 27 Verónica Traynor: UX y la caverna de Platón
  28. 28. Santiago Bustelo (@sbustelo) •M E M B E R • Producto: Software de administración de un videoclub • Nuestros personajes: Caso de ejemplo 28 Programador cavernario Diseñador cavernario Emprendedor cavernario Iconos: FastIcon
  29. 29. Santiago Bustelo (@sbustelo) •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 29
  30. 30. 1234
  31. 31. 1234
  32. 32. 1234 Gonzalez
  33. 33. GonzalezDiego760 Rivadavia 5000 11 B Buenos  Aires 12
  34. 34. 1234 760
  35. 35. No  hay  stock.
  36. 36. 760
  37. 37. 1235 760
  38. 38. Santiago Bustelo (@sbustelo) •M E M B E R Diseñador cavernario • Metáforas • Películas: DVDs • Clientes: Fichas • Alquileres: Ficha + DVD • Representación • Experiencia inmersiva • Fotorealismo 45
  39. 39. Santiago Bustelo (@sbustelo) •M E M B E R Emprendedor cavernario • Relevamiento competitivo • Definición del mercado • Especificación • Recursos y plan de trabajo • ???? • Profit! 57
  40. 40. Santiago Bustelo (@sbustelo) •M E M B E R Relevamiento competitivo 58 freemium
  41. 41. Santiago Bustelo (@sbustelo) •M E M B E R Relevamiento competitivo 59 screencast
  42. 42. Santiago Bustelo (@sbustelo) •M E M B E R Relevamiento competitivo 60 amigable touch
  43. 43. Santiago Bustelo (@sbustelo) •M E M B E R Definición del mercado 61 Foto: Ned Raggett Foto: Andrés Rueda
  44. 44. Santiago Bustelo (@sbustelo) •M E M B E R “Especificación” para diseño y desarrollo 62 ✓ 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.
  45. 45. Santiago Bustelo (@sbustelo) •M E M B E R Recursos y “metodología” 63 Ejercerpresión Ejercerpresión
  46. 46. Santiago Bustelo (@sbustelo) •M E M B E R Expectativa 64 En 3 meses Foto: Wikipedia
  47. 47. Santiago Bustelo (@sbustelo) •M E M B E R Resultado 65 Después de 1 año Foto: Wikipedia
  48. 48. Santiago Bustelo (@sbustelo) •M E M B E R Parte 2: Saliendo de la caverna 66
  49. 49. Santiago Bustelo (@sbustelo) •M E M B E R ¿Qué tienen en común los tres casos anteriores? 67 • 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
  50. 50. Santiago Bustelo (@sbustelo) •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. • Diseño sin intención: la interfaz no se diseña, se comete. • Diseño autoreferencial: quien diseña (o comete) la interfaz considera que representa al usuario. • 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. 68
  51. 51. Santiago Bustelo (@sbustelo) • M E M B E R La Calidad se declara en un equipo 69 Política de Calidad Procesos Técnicas Herramientas
  52. 52. Santiago Bustelo (@sbustelo) •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. 70
  53. 53. Santiago Bustelo (@sbustelo) •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. 71
  54. 54. Santiago Bustelo (@sbustelo) •M E M B E R ¿Cuándo está terminado nuestro trabajo? (criterio de Calidad) • Cuando nos gusta a nosotros • Cuando funciona como queríamos • Cuando le gusta al cliente • Cuando el usuario logra lo que esperábamos 72
  55. 55. Santiago Bustelo (@sbustelo) •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 73 El proceso modela el resultado.
  56. 56. Santiago Bustelo (@sbustelo) •M E M B E R Design thinking • Los diseñadores trabajan en iteraciones en las que simultáneamente se entiende el problema y se formulan soluciones. • Dos maneras de entender el problema: • Esfuerzos para entender información y requerimientos. • Simulaciones de situaciones, hipótesis de soluciones y consecuencias. • Procesos divergentes (exploración) y convergentes (elaboración). 74 Wicked Problems & Social Complexity - Jeff Conklin, Ph.D.
  57. 57. Santiago Bustelo (@sbustelo) •M E M B E R Proceso convergente e iterativo 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. 75
  58. 58. Santiago Bustelo (@sbustelo) •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 76 Usaurio
  59. 59. Santiago Bustelo (@sbustelo) •M E M B E R Cuantificación: KLM-GOMS Cada operación del usuario tiene un costo. 77 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)
  60. 60. Santiago Bustelo (@sbustelo) •M E M B E R Cuantificación: Buscar cliente (v. programador) 78 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
  61. 61. Santiago Bustelo (@sbustelo) •M E M B E R Cuantificación: Buscar cliente (v. diseñador) 79 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
  62. 62. Santiago Bustelo (@sbustelo) •M E M B E R Casos de uso: hipótesis inicial 80 • 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
  63. 63. Santiago Bustelo (@sbustelo) •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 81
  64. 64. Santiago Bustelo (@sbustelo) •M E M B E R Priorización y estrategia de versiones 82 v. 1.0 v. 2.0 v. 3.0 v. 4.0 v. 5.0 v. 6.0
  65. 65. Santiago Bustelo (@sbustelo) •M E M B E R Casos de uso reales y priorizados 83 • 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
  66. 66. Santiago Bustelo (@sbustelo) •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… 84
  67. 67. Sistema con dos campos de búsqueda
  68. 68. Sistema con dos campos de búsqueda
  69. 69. Sistema con dos campos de búsqueda
  70. 70. Sistema con dos campos de búsqueda
  71. 71. Santiago Bustelo (@sbustelo) •M E M B E R Propuesta: un solo campo de búsqueda 89 • 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
  72. 72. Santiago Bustelo (@sbustelo) •M E M B E R Prueba de concepto 90
  73. 73. Santiago Bustelo (@sbustelo) •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 91
  74. 74. Santiago Bustelo (@sbustelo) •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 92
  75. 75. Santiago Bustelo (@sbustelo) •M E M B E R Esquema 93 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
  76. 76. Santiago Bustelo (@sbustelo) •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 94
  77. 77. Santiago Bustelo (@sbustelo) •M E M B E R 95 Mockup final
  78. 78. Santiago Bustelo (@sbustelo) •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 96
  79. 79. Santiago Bustelo (@sbustelo) •M E M B E R Cliente devuelve y alquila 97
  80. 80. Santiago Bustelo (@sbustelo) •M E M B E R Cliente devuelve y alquila 98
  81. 81. Santiago Bustelo (@sbustelo) •M E M B E R Cliente devuelve y alquila 99
  82. 82. Santiago Bustelo (@sbustelo) •M E M B E R Cliente devuelve y alquila 100
  83. 83. Santiago Bustelo (@sbustelo) •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 101
  84. 84. Santiago Bustelo (@sbustelo) •M E M B E R Devolución de 40 películas 102
  85. 85. Santiago Bustelo (@sbustelo) •M E M B E R Devolución de 40 películas 103
  86. 86. Santiago Bustelo (@sbustelo) •M E M B E R Devolución de 40 películas 104
  87. 87. Santiago Bustelo (@sbustelo) •M E M B E R Devolución de 40 películas 105
  88. 88. Santiago Bustelo (@sbustelo) •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% 106
  89. 89. Santiago Bustelo (@sbustelo) •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 107
  90. 90. 18 al 21 de Noviembre 2015 Córdoba, Argentina isa.ixda.org
  91. 91. w w w . k a m b r i c a . c o m

×