Santiago BusteloDirector de diseño, KambricaIxDA Central and South America Regional Coordinator

Congreso Latinoamericano de DiseñoUniversidad de Palermo, 2 de agosto 2012

Presentación bajo licencia Creative CommonsAtribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/ar

Qué podemos aprender los diseñadores de las metodologías ágiles

@sbustelo

MEMBER

MEMBER

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.

Santiago Bustelo (@sbustelo) •MEMBER

Antes de hablar de proyectos y metodologías, un experimento…

3

Dibujar una estrellade cinco puntas “ideal”, a mano alzada

1 min.

Santiago Bustelo (@sbustelo) •MEMBER

¿Lograste un buen resultado?

(sin excusas, disculpas…)

5

Santiago Bustelo (@sbustelo) •MEMBER

Cosas que pasan…

6

xkcd: Drawing stars

Santiago Bustelo (@sbustelo) •MEMBER

…cuando trabajamos sin método

7

• En cuanto logramos hacernos una idea,nos ponemos a ejecutar

• No sabemos hasta el final si el resultadoserá el que queremos

• Cada intento es a suerte o verdad

Santiago Bustelo (@sbustelo) •MEMBER

Ahora, vamos a probar de otra manera…

8

Dibujar una estrellade cinco puntas “ideal”,con método

Santiago Bustelo (@sbustelo) •MEMBER

Dibujando con método

9

1. Andamiaje para asegurar proporción desde el principio:

1. Ejes

2. Rombo

3. Círculo

Santiago Bustelo (@sbustelo) •MEMBER

Dibujando con método

10

2. Marcamos cinco puntos equidistantes sobre el círculo

Santiago Bustelo (@sbustelo) •MEMBER

Dibujando con método

11

3. Unimos los puntos y… ¡listo!

Santiago Bustelo (@sbustelo) •MEMBER

Dibujando con método

12

4. Si nos queda tiempo: retrazamos el contorno de la estrella para separarlo del andamiaje

1 min.1. Andamiaje: 15”2. Cinco puntos: 15”3. Unir puntos: 15”4. Retrazado: 15”

Santiago Bustelo (@sbustelo) •MEMBER

¿Lograste un buen resultado?

¿O al menos, mejor que antes?

14

Santiago Bustelo (@sbustelo) •MEMBER

Otros productos de dibujar con método

15

SantiagoBustelo,

1994

SantiagoBustelo,

1993

Santiago Bustelo (@sbustelo) •MEMBER

Método: para el producto

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

Santiago Bustelo (@sbustelo) •MEMBER

Repasemos cómo trabajamos…

17

¿Cómo ejecutamos proyectos?

Santiago Bustelo (@sbustelo) •MEMBER

18

Ejecutando proyectos a suerte o verdad

Santiago Bustelo (@sbustelo) •MEMBER

Metodología: para el proyecto

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

Santiago Bustelo (@sbustelo) •MEMBER

Anatomía deun proyecto

20

Santiago Bustelo (@sbustelo) •MEMBER

Definiciones fundamentales

• ¿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

21

Santiago Bustelo (@sbustelo) •MEMBER

¿Qué es un proyecto?

• 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

22

Santiago Bustelo (@sbustelo) •MEMBER

Un proyecto se enmarca en latriple restricción

23

COST

OTIEM

PO

ALCANCE

Lo que el equipo se compromete a lograr

Recursos y esfuerzo que deben ser aplicados o asignados

Tiempo calendario requerido para

completar todas las tareas

Calidad

Santiago Bustelo (@sbustelo) •MEMBER

No se puede tocar una variable sola…

24

TIEMPO

COST

O

ALCANCE extensión de alcance

Calidad

Santiago Bustelo (@sbustelo) •MEMBER

…a menos que estiremos creativamente…

25

TIEMPO

COST

O

ALCANCE

Calidad

Santiago Bustelo (@sbustelo) •MEMBER

– =

…y tengamos la suerte de que nadie lo note

26

Gestión del proyecto:

• Andamiaje, soporte

• Observar la triple restricción durante la duración del proyecto

Calidad perdida

TIEMPO

COST

O

ALCANCE

Calidad

Santiago Bustelo (@sbustelo) •MEMBER

Calidad y cuantificación

• “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

27

Santiago Bustelo (@sbustelo) •MEMBER

• 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: atributo cualitativo y cuantificable para un producto interactivo

28

Santiago Bustelo (@sbustelo) •MEMBER

Usabilidad de un calendario

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

29

Santiago Bustelo (@sbustelo) •MEMBER

Usabilidad de un calendario

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

Santiago Bustelo (@sbustelo) •MEMBER

Comparar alternativas de manera objetiva

33

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

Santiago Bustelo (@sbustelo) •MEMBER

Métricas de usabilidad durante el proyecto

34

0

1,25

2,50

3,75

5,00

Interfaz inicial Wireframes v.1 Wireframes v.2 Prototipo navegable

EfectividadEficienciaSatisfacción

➔

Santiago Bustelo (@sbustelo) •MEMBER

Tipos de problema y procesos

35

Santiago Bustelo (@sbustelo) •MEMBER

Proceso lineal

1. Definición de requerimientos.

2. Diseño y desarrollo a nivel de producción.

3. Entrega.

36

Santiago Bustelo (@sbustelo) •MEMBER

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 o lo queel usuario necesitaba,retrocede tres casilleros.

5. Se repite hasta el hartazgo de unao ambas partes.

37

Santiago Bustelo (@sbustelo) •MEMBER

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.

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.

Entender el tipo de problema

38

Diseño como innovación implica resolver problemas complejos.

Santiago Bustelo (@sbustelo) •MEMBER

Proceso convergente

1. Objetivos y análisis inicial.

2. Diseño y desarrollo en iteracionesavanzando y validando progresivamenteaspectos del producto, de general a particular.

3. Entrega.

39

Santiago Bustelo (@sbustelo) •MEMBER

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.

40

Santiago Bustelo (@sbustelo) •MEMBER

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.

41

Santiago Bustelo (@sbustelo) •MEMBER

Roles en un proyecto

42

Santiago Bustelo (@sbustelo) •MEMBER

Roles elementales

43

Requerimientos

EntregablesCliente Desarrollador

DiseñadorContenidista

Santiago Bustelo (@sbustelo) •MEMBER

…y la forma en que suelen escalar

44

“Esa manga de inútiles”“Esos cretinos”

Santiago Bustelo (@sbustelo) •MEMBER

Interlocutores para mantener la cordura

45

Interlocutor del equipo

DesarrolladoresDiseñadoresContenidistas

Requerimientos

EntregablesInterlocutor del cliente

StakeholdersSponsors

Santiago Bustelo (@sbustelo) •MEMBER

Roles extendidos:nuestro proyecto, en el mundo real

46

Burbuja del ProyectoSe rompe una vez finalizado

el proyecto

Usuarios finalesOperan todos los días

el producto del proyecto finalizado

Mundo real

Producto

Santiago Bustelo (@sbustelo) •MEMBER

Metodologíaságiles

47

Santiago Bustelo (@sbustelo) •MEMBER

Manifiesto por el Desarrollo Ágil (2001)

• Valoramos…

• Individuos e interacciones

• Software funcionando

• Colaboración con el Cliente

• Responder al Cambio

• 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.”

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

Santiago Bustelo (@sbustelo) •MEMBER

Scrum: aspectos que los diseñadores podemos incorporar en nuestros proyectos

50

• 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

Reuniones en Scrum

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?

Santiago Bustelo (@sbustelo) •MEMBER

Caso real:Rediseño de Guía Oleo

52

Santiago Bustelo (@sbustelo) •MEMBER

Problemática inicial

53

• 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) •MEMBER

Interfaz original54

Santiago Bustelo (@sbustelo) •MEMBER

Interfaz original55

Santiago Bustelo (@sbustelo) •MEMBER

Interfaz original56

Santiago Bustelo (@sbustelo) •MEMBER

Diseño y desarrollo en sprints

57

Sprint 0RelevamientoPruebas usabilidadAnálisisExploración

Sprints 1 - NIxDDiseño de interfazArq. de InformaciónPruebas usabilidad

Sprints 1-N: desarrolloDesarrollo de la interfaz:HTML, CSS, JavaScript

• Kickoff Marco del proyecto: alcance, plazos y responsables

Nivel de detalle de las decisiones

UXEstrategia

Desarrollo

Santiago Bustelo (@sbustelo) •MEMBER

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.

• 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

Santiago Bustelo (@sbustelo) •MEMBER

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 de sprint 2.

59

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 1: prototipos iniciales60

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 1: prototipos iniciales61

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 1: pruebas de usabilidad, prototipo en papel62

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 1: conclusiones pruebas usabilidad

• 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

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

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

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 2: Prototipos avanzados65

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 2: Prototipos avanzados66

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 2: Prototipos avanzados67

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 2: pruebas de usabilidad68

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 2: conclusiones pruebas usabilidad

• 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

• 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

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

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 3: Diseño final71

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 3: Diseño final72

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 3: Diseño final73

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 3: Pruebas de usabilidad, prototipo HTML74

Santiago Bustelo (@sbustelo) •MEMBER

75

Sprint 3: Diseño final

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 3: Diseño final76

Santiago Bustelo (@sbustelo) •MEMBER

Conclusiones del proyecto

77

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

www.kambrica.com