Post on 27-Jan-2015
description
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.