Que podemos aprender los diseñadores de las metodologias agiles
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Que podemos aprender los diseñadores de las metodologias agiles

  • 2,169 views
Uploaded on

Proyectos que se vuelven interminables, clientes insatisfechos y productos finales con los que el equipo no se siente orgulloso, son problemas comunes a muchos proyectos de diseño. No sólo son......

Proyectos que se vuelven interminables, clientes insatisfechos y productos finales con los que el equipo no se siente orgulloso, son problemas comunes a muchos proyectos de diseño. No sólo son problemas evitables, sino que en los últimos años han surgido, desde la ingeniería industrial e ingeniería de software, definiciones y herramientas que resultan aplicables a problemas de diseño. Conceptos fundamentales como la triple restricción, definición objetiva de Calidad y la diferencia entre problemas bien definidos y problemas dinámicos, hasta la metodología Scrum y desarrollo de un caso real de aplicación de sus principios en un proyecto de diseño.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Muy buena la presentación. Y divertido el slide 42 :)
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,169
On Slideshare
1,591
From Embeds
578
Number of Embeds
9

Actions

Shares
Downloads
128
Comments
1
Likes
5

Embeds 578

http://www.keikendo.com 375
http://www.ux2012.com.ar 154
http://ux2012.com.ar 31
http://librosweb.es 9
http://localhost 4
https://si0.twimg.com 2
http://translate.googleusercontent.com 1
http://en.keikendo.com 1
http://www.linkedin.com 1

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. Qué podemos aprender los diseñadores de las metodologías ágiles Santiago Bustelo Director de diseño, Kambrica IxDA Central and South America Regional Coordinator Congreso Latinoamericano de Diseño Universidad de Palermo, 2 de agosto 2012 Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar @sbustelo MEMBER
  • 2. 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. MEMBER
  • 3. Antes de hablar de proyectos y metodologías, un experimento… Dibujar una estrella de cinco puntas “ideal”, a mano alzada Santiago Bustelo (@sbustelo) • MEMBER 3
  • 4. 1 min.
  • 5. Santiago Bustelo (@sbustelo) • MEMBER ¿Lograste un buen resultado? (sin excusas, disculpas…) 5
  • 6. Santiago Bustelo (@sbustelo) • Cosas que pasan… MEMBER 6 xkcd: Drawing stars
  • 7. …cuando trabajamos sin método Santiago Bustelo (@sbustelo) • MEMBER 7 • En cuanto logramos hacernos una idea, nos ponemos a ejecutar • No sabemos hasta el final si el resultado será el que queremos • Cada intento es a suerte o verdad
  • 8. Ahora, vamos a probar de otra manera… Dibujar una estrella de cinco puntas “ideal”, con método Santiago Bustelo (@sbustelo) • MEMBER 8
  • 9. Santiago Bustelo (@sbustelo) • Dibujando con método MEMBER 9 1. Andamiaje para asegurar proporción desde el principio: 1. Ejes 2. Rombo 3. Círculo
  • 10. Santiago Bustelo (@sbustelo) • Dibujando con método MEMBER 10 2. Marcamos cinco puntos equidistantes sobre el círculo
  • 11. Santiago Bustelo (@sbustelo) • Dibujando con método MEMBER 11 3. Unimos los puntos y… ¡listo!
  • 12. Santiago Bustelo (@sbustelo) • Dibujando con método MEMBER 12 4. Si nos queda tiempo: retrazamos el contorno de la estrella para separarlo del andamiaje
  • 13. 1 min. 1. Andamiaje: 15” 2. Cinco puntos: 15” 3. Unir puntos: 15” 4. Retrazado: 15”
  • 14. Santiago Bustelo (@sbustelo) • MEMBER ¿Lograste un buen resultado? ¿O al menos, mejor que antes? 14
  • 15. Otros productos de dibujar con método Santiago Bustelo (@sbustelo) • MEMBER 15 Santiago Bustelo, 1994 Santiago Bustelo, 1993
  • 16. Santiago Bustelo (@sbustelo) • Método: para el producto MEMBER 16 • Ordenar la construcción del qué • Andamiaje, tareas de soporte • Aplicable a problemas del mismo tipo • Reducir influencia de la suerte • Aumentar replicabilidad de los resultados
  • 17. Repasemos cómo trabajamos… Santiago Bustelo (@sbustelo) • MEMBER 17 ¿Cómo ejecutamos proyectos?
  • 18. Santiago Bustelo (@sbustelo) • MEMBER 18 Ejecutando proyectos a suerte o verdad
  • 19. Metodología: para el proyecto Santiago Bustelo (@sbustelo) • MEMBER 19 • Ordenar la construcción del cómo • Andamiaje, tareas de soporte • Aplicable a problemas del mismo tipo • Reducir influencia de la suerte • Aumentar replicabilidad de los resultados
  • 20. Anatomía de un proyecto Santiago Bustelo (@sbustelo) • MEMBER 20
  • 21. • ¿Qué es un proyecto? • Triple restricción y gestión del proyecto • Calidad y cuantificación • Tipos de problema y procesos • Objetivos y requerimientos • Roles en un proyecto Santiago Bustelo (@sbustelo) • Definiciones fundamentales MEMBER 21
  • 22. • Esfuerzo que se realiza por única vez: tiene principio y fin • Para crear algo nuevo: tiene un propósito • Tiene recursos asignados: Consumir más que lo proyectado es condición de fracaso Santiago Bustelo (@sbustelo) • ¿Qué es un proyecto? MEMBER 22
  • 23. Un proyecto se enmarca en la triple restricción Tiempo calendario requerido para completar todas Santiago Bustelo (@sbustelo) • Recursos y esfuerzo que deben ser aplicados o asignados MEMBER 23 COSTO TIEMPO ALCANCE Lo que el equipo se compromete a lograr las tareas Calidad
  • 24. No se puede tocar una variable sola… Santiago Bustelo (@sbustelo) • MEMBER 24 TIEMPO COSTO Calidad ALCANCE extensión de alcance
  • 25. …a menos que estiremos creativamente… Santiago Bustelo (@sbustelo) • MEMBER 25 TIEMPO COSTO Calidad ALCANCE
  • 26. …y tengamos la suerte de que nadie lo note Santiago Bustelo (@sbustelo) • MEMBER – = 26 Gestión del proyecto: • Andamiaje, soporte • Observar la triple restricción durante la duración del proyecto Calidad perdida TIEMPO COSTO Calidad ALCANCE
  • 27. • “Calidad es lo que nuestros usuarios valoran. Todo lo demás es desperdicio” (Lean Software Development) • Cuantificar nos permite: • Comparar alternativas/progreso de manera objetiva • Análisis en lugar de opiniones • Identificar y priorizar áreas de oportunidad Santiago Bustelo (@sbustelo) • Calidad y cuantificación MEMBER 27
  • 28. Usabilidad: atributo cualitativo y cuantificable para un producto interactivo • 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) Santiago Bustelo (@sbustelo) • MEMBER 28
  • 29. 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 Santiago Bustelo (@sbustelo) • Usabilidad de un calendario MEMBER 1 2 3 4 5 29
  • 30. Santiago Bustelo (@sbustelo) • Usabilidad de un calendario MEMBER 31 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 1 2 3 4 5
  • 31. Comparar alternativas de manera objetiva Santiago Bustelo (@sbustelo) • 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 MEMBER 33 1 2 3 4 5 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 1 2 3 4 5
  • 32. Métricas de usabilidad durante el proyecto Efectividad Eficiencia Satisfacción Santiago Bustelo (@sbustelo) • MEMBER 34 5,00 3,75 2,50 1,25 0 ➔ Interfaz inicial Wireframes v.1 Wireframes v.2 Prototipo navegable
  • 33. Tipos de problema y Santiago Bustelo (@sbustelo) • MEMBER procesos 35
  • 34. 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. Santiago Bustelo (@sbustelo) • Proceso lineal MEMBER 36
  • 35. 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 o lo que el usuario necesitaba, retrocede tres casilleros. 5. Se repite hasta el hartazgo de una o ambas partes. Santiago Bustelo (@sbustelo) • Proceso lineal interminable MEMBER 37
  • 36. Entender el tipo de problema Santiago Bustelo (@sbustelo) • Problemas bien definidos • Es posible definir estado inicial, estado deseado, y camino más corto. • Se aplican algoritmos: secuencias estructuradas de pasos que garantizan “la” solución. • Metodología secuencial. • Foco en análisis y documentación. MEMBER Problemas complejos • El problema no es entendido hasta no haberlo resuelto. • Se trabajan de forma heurística, en un proceso de prueba y error para aproximarse a “una” solución. • Metodología ágil. • Foco en entregables. 38
  • 37. 1. Objetivos y análisis inicial. 2. Diseño y desarrollo en iteraciones avanzando y validando progresivamente aspectos del producto, de general a particular. 3. Entrega. Santiago Bustelo (@sbustelo) • Proceso convergente MEMBER 39
  • 38. Objetivos: para qué ejecutamos el proyecto • Foco en los problemas a resolver, no en funcionalidades ni soluciones. • Breves y concisos, sin expresiones de deseo. • Medibles de forma objetiva. • Parámetro temporal definido para el cumplimiento. • Deben contemplar las capacidades del equipo y ser consensuados con todos los miembros del equipo. Santiago Bustelo (@sbustelo) • MEMBER 40
  • 39. Requerimientos: qué nos comprometemos a construir • Especifican una función o atributo visible de un producto. • Son propuestas de cómo satisfacer un objetivo. • Son por definición limitantes. • Tienen que estar alineados a un objetivo. De lo contrario, no sólo sobran: son perjudiciales. Santiago Bustelo (@sbustelo) • MEMBER 41
  • 40. Roles en un proyecto Santiago Bustelo (@sbustelo) • MEMBER 42
  • 41. Santiago Bustelo (@sbustelo) • Roles elementales MEMBER 43 Requerimientos Entregables Cliente Desarrollador Diseñador Contenidista
  • 42. …y la forma en que suelen escalar Santiago Bustelo (@sbustelo) • MEMBER 44 “Esos cretinos” “Esa manga de inútiles”
  • 43. Interlocutores para mantener la cordura Santiago Bustelo (@sbustelo) • MEMBER 45 Interlocutor del equipo Desarrolladores Diseñadores Contenidistas Requerimientos Entregables Interlocutor del cliente Stakeholders Sponsors
  • 44. Roles extendidos: nuestro proyecto, en el mundo real Santiago Bustelo (@sbustelo) • MEMBER 46 Burbuja del Proyecto Se rompe una vez finalizado el proyecto Usuarios finales Operan todos los días el producto del proyecto finalizado Producto Mundo real
  • 45. Santiago Bustelo (@sbustelo) • MEMBER Metodologías ágiles 47
  • 46. Manifiesto por el Desarrollo Ágil (2001) Santiago Bustelo (@sbustelo) • • Valoramos… • Individuos e interacciones • Software funcionando • Colaboración con el Cliente • Responder al Cambio MEMBER • Sobre… • Procesos y herramientas • Documentación extensiva • Negociación contractual • Aferrarse a un plan 48 “Esto es, aunque valoramos los elementos de la derecha, valoramos más los de la izquierda.”
  • 47. Santiago Bustelo (@sbustelo) • MEMBER Scrum • Hirotaka Takeuchi y Ikujiro Nonaka, 1986. • Enfoque para el desarrollo de productos que incrementa velocidad y flexibilidad. • Basado en casos de industria automotriz, fotocopiadoras e impresoras. • Utilizado en Xerox, Canon, Honda, NEC, Epson, 3M, HP. • Equipos capacitados, típicamente 5 a 9 personas. • Comunicación entre miembros del equipo, confianza con el cliente. • Hoy es un estándar aceptado en proyectos de desarrollo de software. 49
  • 48. Scrum: aspectos que los diseñadores podemos incorporar en nuestros proyectos • Separar el proyecto en sprints: iteraciones, mini-proyectos de tiempo fijo. • Repriorizar tareas al principio de cada sprint. • Cada sprint genera entregables. • Intervención necesaria y estructurada del cliente en el proceso (rol Product Owner) • Reducción del riesgo. Santiago Bustelo (@sbustelo) • MEMBER 50
  • 49. Santiago Bustelo (@sbustelo) • Reuniones en Scrum MEMBER 51 • Sprint planning meeting: Al principio de cada sprint. Equipo + PO. Máximo 8h. • Seleccionar el trabajo que se realizará. • Desagregar tareas, dependencias. • Estimacion de esfuerzo en equipo. • Pririozar tareas por relación costo/impacto (ROI). • Daily Scrum: Cada día durante el sprint. 15 min. Cada miembro del equipo contesta tres preguntas: • ¿Qué hiciste desde ayer? • ¿Qué planeás hacer hoy? • ¿Qué obstáculos o impedimentos identificás? • Sprint review: Al final del sprint. Equipo + PO + Stakeholders. Máximo 4h. • Repasar el trabajo que se ha completado y el que no. • Presentar los entregables al cliente. • Sprint retrospective: Al final del sprint. Máximo 3h. • ¿Qué anduvo bien durante el sprint? • ¿Qué podemos mejorar?
  • 50. Santiago Bustelo (@sbustelo) • MEMBER Caso real: Rediseño de Guía Oleo 52
  • 51. • Diseño “viejo”. • El sitio había crecido de forma desorganizada a lo largo del tiempo: inconsistencia, problemas de mantenibilidad. • Como producto de diseño autoreferencial, no se conocía el impacto real de muchas decisiones sobre la interfaz. • Muchas ideas de mejora sin priorizar, de difícil aplicación dada la falta de consistencia y solidez del sitio. • Nuevas amenazas en el mercado. Santiago Bustelo (@sbustelo) • Problemática inicial MEMBER 53
  • 52. Santiago Bustelo (@sbustelo) • MEMBER Interfaz original 54
  • 53. Santiago Bustelo (@sbustelo) • MEMBER Interfaz original 55
  • 54. Santiago Bustelo (@sbustelo) • MEMBER Interfaz original 56
  • 55. Diseño y desarrollo en sprints • Kickoff Marco del proyecto: alcance, plazos y responsables Santiago Bustelo (@sbustelo) • MEMBER 57 Sprint 0 Relevamiento Pruebas usabilidad Análisis Exploración Sprints 1 - N IxD Diseño de interfaz Arq. de Información Pruebas usabilidad Sprints 1-N: desarrollo Desarrollo de la interfaz: HTML, CSS, JavaScript Nivel de detalle de las decisiones UX Estrategia Desarrollo
  • 56. Santiago Bustelo (@sbustelo) • Plan general • Sprint 0 • Relevamiento del sitio y modelo de negocios. • Análisis de analíticas. • Análisis FODA. • Revisión experta de usabilidad. • Entrevistas cualitativas con usuarios: posicionamiento de marca, modelo mental de usuarios. • Definición de instancias en la Experiencia del Usuario. MEMBER • Proyección a futuro: brainstorming y exploración de hipótesis. • Selección de hipótesis para su desarrollo durante el proyecto. • Sprints 1, 2 y 3: • Diseño de prototipos. • Diseño visual. • Pruebas de usabilidad. • Ajustes luego de las pruebas. • Desarrollo front-end. • Cada sprint genera entregables. 58
  • 57. Cierre sprint 0: planeamiento inicial sprints • Sprint 1: lo crítico • Prototipos de baja fidelidad. • Diseño de: Buscador, Ficha del restaurante (como inicio de tareas, en lugar de fin), Registración, Votación, Obtención de descuentos. • Sprint 2: lo importante • Prototipos con diseño, no operables. • Diseño de: Home, otras a definir al cierre de sprint 1. • Sprint 3: lo deseable, cierre del proyecto • Prototipos HTML. • Diseño de: Propuestas de mejora de interfaces back-end. Otras a definir al cierre Santiago Bustelo (@sbustelo) • MEMBER de sprint 2. 59
  • 58. Sprint 1: prototipos iniciales Santiago Bustelo (@sbustelo) • MEMBER 60
  • 59. Sprint 1: prototipos iniciales Santiago Bustelo (@sbustelo) • MEMBER 61
  • 60. Sprint 1: pruebas de usabilidad, prototipo en papel Santiago Bustelo (@sbustelo) • MEMBER 62
  • 61. Sprint 1: conclusiones pruebas usabilidad Santiago Bustelo (@sbustelo) • • Aciertos • Facetado con mapa • AJAX • Mapa integrado a la ficha • Buscar relacionados • Iniciar una búsqueda chequeando muchas cosas • Fotos del lugar con prox/anterior • Saltearse listado si sólo hay un resultado • Que estén claras las especialidades y cosas MEMBER básicas del menú • Cosas a mejorar • Mapa muy chiquito en resultados • Alta densidad de datos • Se confunde promoción AmEx con tarjetas con las que se opera, pareciera que no aceptan otras en el restauranta • No se interpreta “poner en la mira” • No tener como opción “no aplica” o “ninguna” • Tener que ingresar nombre, apellido y DNI, es una barrera demasiado alta • Lo que se extrañaba • Precio día vs. noche • Autocomplete de campo de búsqueda 63
  • 62. Santiago Bustelo (@sbustelo) • MEMBER Sprint 2 • Home: definición de estructura y funcionalidades propias (“wall”) • Diseño de la interacción social (ej: comentar, compartir) • ¿Qué lleva a los usuarios a hacerlo efectivamente? ¿Qué oportunidades se pueden explotar? • Diseño: ficha de usuario. Propuestas de game mechanics. • Es necesario seguir trabajando sobre la ficha del restaurante. • Aumento de fidelidad del diseño. 64
  • 63. Sprint 2: Prototipos avanzados Santiago Bustelo (@sbustelo) • MEMBER 65
  • 64. Sprint 2: Prototipos avanzados Santiago Bustelo (@sbustelo) • MEMBER 66
  • 65. Sprint 2: Prototipos avanzados Santiago Bustelo (@sbustelo) • MEMBER 67
  • 66. Sprint 2: pruebas de usabilidad Santiago Bustelo (@sbustelo) • MEMBER 68
  • 67. Sprint 2: conclusiones pruebas usabilidad Santiago Bustelo (@sbustelo) • • Home • No molesta el cambio general • Uso de links de listas, búsqueda avanzada, por zona • Buscador en header puede llevar a bares y restaurantes; vinos es un escenario aparte • Algunos preferirían integrar Mi Oleo con Home, a otros les resultaría confuso • Buscar restaurantes • Buena recepción de minimapa • Guardar… mejor que “en la mira”. • “Lo recomiendo” en lugar de “lo conozco” • Descuentos aplicados al precio, sólo si corren hoy MEMBER • Ficha de restaurante • Muy buena recepción de positivo y negativo más votados • Buena recepción de tags • OK barras, código color calificaciones muy bajas • Formas de pago en encabezado • El puntaje de cada usuario no aporta tanto al comentario • Calificar • Se completan los campos • Cuándo fui: poder ingresar fecha con menos precisión. • Perfil • Más que premios, construcción de perfil, posibilidad de descubrirse. Tooltips con descripciones. • No soy un “experto”. • Ficha de usuario • Control de privacidad. No se quiere mostrar que usaste descuento, que no salís de un barrio, nivel de consumo. • Valoración general • No hay cambios que desorienten, se mantiene el carácter. • Mejora general, no se extrañan features o procesos. • “Está más claro”, “Más amigable que ahora”, “Los datos están más a la vista”. • Casi no se ven los contenidos de la columna derecha. 69
  • 68. Santiago Bustelo (@sbustelo) • MEMBER Sprint 3 • Rediseño del blog. • Propuestas de mejora de interfaces back-end. • Diseño de modelos de mail a enviar al usuario. • Diseño de interacciones sociales más complejas. • Rediseño no funcional de Tienda para el caso en que el negocio decida mantenerla. • Ajustes a todas las páginas diseñadas en sprints anteriores. • Coordinación final para implementación. 70
  • 69. Sprint 3: Diseño final Santiago Bustelo (@sbustelo) • MEMBER 71
  • 70. Sprint 3: Diseño final Santiago Bustelo (@sbustelo) • MEMBER 72
  • 71. Sprint 3: Diseño final Santiago Bustelo (@sbustelo) • MEMBER 73
  • 72. Sprint 3: Pruebas de usabilidad, prototipo HTML Santiago Bustelo (@sbustelo) • MEMBER 74
  • 73. Santiago Bustelo (@sbustelo) • MEMBER 75 Sprint 3: Diseño final
  • 74. Sprint 3: Diseño final Santiago Bustelo (@sbustelo) • MEMBER 76
  • 75. • Se cumplieron todos los compromisos asumidos en tiempo y forma, y a satisfacción del cliente. • El equipo de diseño y desarrollo estuvo enfocado, motivado Santiago Bustelo (@sbustelo) • Conclusiones del proyecto MEMBER 77 y orgulloso de su trabajo durante todo el proyecto. • “El trabajo que hicieron es excelente. Estoy feliz. Gracias!” Esteban Brenman, Guía Oleo. • Guía Oleo triplicó su facturación. • Continuamos trabajando con el cliente en nuevos proyectos y desafíos durante un año.
  • 76. www.kambrica.com