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

UX en proyectos dediseño y desarrollo Gestión, procesos, roles y prácticasSantiago BusteloDirector de diseño, KambricaIxDA Latin America Regional Coordinator

Universidad Tecnológica de Tucumán13 de mayo, 2013

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

Evolución en Experiencia de Usuario •MEMBER

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 76.000 miembros, 160 grupos locales, 36 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: @IxDAMDQ• Mendoza: ixdaMza.com.ar• Rosario: ixdaRosario.com.ar• Tucumán: ixdaTucuman.com.ar

3

ixda.org

Santiago Bustelo (@sbustelo) •MEMBER

¿Qué es 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

4

Santiago Bustelo (@sbustelo) •MEMBER

Experiencias cotidianas

5

Santiago Bustelo (@sbustelo) •MEMBER

La promesa6

“¡Comprá tus entradas online!

“¡Ahorrá tiempo!

“¡Es fácil!

Santiago Bustelo (@sbustelo) •MEMBER

El “servicio”

• El sitio presenta un largo listado de películas ordenadas por fecha, empezando por funciones de la semana anterior.

• El formulario pide un montón de información que no tiene relación con el servicio ofrecido. En el mejor de los casos, es para obligarme a realizar un esfuerzo inútil. En el peor, para inundar mi casilla con publicidad.

• La página es lenta y tiene errores de programación.

• Después de 15 minutos, abandonaría y realizaría la operación telefónicamente. Si existiera esa posibilidad.

7

Santiago Bustelo (@sbustelo) •MEMBER

8

Santiago Bustelo (@sbustelo) •MEMBER

9

Traducción: el programador no previó el ingreso de acentos en los

datos, ni separadores en números de DNI y teléfono…

“Modificar”

Faltan acentos

Santiago Bustelo (@sbustelo) •MEMBER

10

Santiago Bustelo (@sbustelo) •MEMBER

11

Hipótesis: el programador tiene una pésima ortografía, y el paso anterior es parte de su plan para obligar a los demás a aplicarla…

“Cargo de admisión”

“Impuestos” (¿cero?)

“Debe” (innecesario)

“Código de promoción” (innecesario)

Subtotal

Santiago Bustelo (@sbustelo) •MEMBER

12

Santiago Bustelo (@sbustelo) •MEMBER

13

Bueno, no me grite

Santiago Bustelo (@sbustelo) •MEMBER

14

Santiago Bustelo (@sbustelo) •MEMBER

15

Este botón nos envía de vuelta a la home, a iniciar todo el proceso desde cero

Santiago Bustelo (@sbustelo) •MEMBER

16

Atiende contestador informando horario de

atención

Santiago Bustelo (@sbustelo) •MEMBER

El insulto17

“¡Comprá tus entradas online!

“¡Ahorrá tiempo!

“¡Es fácil!

Santiago Bustelo (@sbustelo) •MEMBER

Experiencia de usuario

• La forma en que se siente una persona usando un producto, sistema o servicio.

• Incluye las percepciones de utilidad, facilidad de uso y eficiencia.

• Satisfacción de las promesas de la marca y la puesta en práctica de sus valores.

18

Santiago Bustelo (@sbustelo) •MEMBER

Las malas experiencias ya forman parte de la cultura popular

19

XKCD: University WebsiteOffice Space (1999)

Santiago Bustelo (@sbustelo) •MEMBER

¿Por qué las malas experiencias son tan frecuentes?

20

“ Nadie quiere creer que ofrece un producto de mala calidad o deficiente, porque nadie se propone un mal diseño como meta. Es siempre un riesgo. Los malos diseños y malas experiencias suceden”.

(Kaleem Khan, consultor de UX)

Santiago Bustelo (@sbustelo) •MEMBER

UX y QA: ¿Quién absorbe los defectos?

• Decidir quién encontrará los problemas:si el usuario final, o el equipo.

• Todo es perfectible: UX y QA terminan cuando se termina el tiempo o el presupuesto.

21

Santiago Bustelo (@sbustelo) •MEMBER

UX: ¿Quién absorbe la complejidad?

22

SQL console

Usuario Sistema

Búsqueda avanzada

Búsqueda facetada

Me siento con suerte

Complejidad

Santiago Bustelo (@sbustelo) •MEMBER

¿A quién le toca“hacer UX”?

23

UX: áreas de percepción

Simplicidad

Consistencia

Marketing

InterfazOferta

Performance

UX

UX: áreas de percepción

Simplicidad

Consistencia

Marketing

InterfazOferta

Performance

UX

No se pueden “agregar”

Tecnología

UX

Negocio Diseño

UX: Campos

Simplicidad

Consistencia

Marketing

InterfazOferta

Performance

UX

UX: Campos

Simplicidad

Consistencia

Marketing

InterfazOferta

Performance

UX

Involucrar a Cliente y Usuarios

Involucrar aCliente y Usuarios

Involucrar aCliente y Usuarios

Tecnología

UX

Negocio Diseño

Tecnología

UX

Negocio Diseño

UX: Áreasde trabajo

Prototipado

Procesosfront-end

Arquitecturade Información

Ing. deUsabilidad

Comunicacionesde Marketing

Diseñoestético

Diseño deidentidad

Diseño deInteracción

Diseño deInformaciónUX

Diseño deInteracción

Análisisde negocio

DesarrolloVisual

Tecnología

UX

Negocio Diseño

El universode UX

Funcionalidad

Prototipado

Versión candidataa de!nitiva

Procesosfront-end

Arquitecturade Información

Ing. deUsabilidad

Simplicidad

Consistencia

Marketing

Comunicacionesde Marketing

Diseñoestético

Diseño deidentidad Aspecto y

comportamiento

Interfaz

Guía de estilo

Plan denegocios

Oferta

Argumentocomercial

Performance

Diseño deInteracción

Diseño deInformaciónDiseño de

Interacción

Análisisde negocio

DesarrolloVisual

UX

Diseñar laexperiencia

Funcionalidad

Prototipado

Versión candidataa de!nitiva

Procesosfront-end

Arquitecturade Información

Ing. deUsabilidad

Simplicidad

Consistencia

Marketing

Comunicacionesde Marketing

Diseñoestético

Diseño deidentidad Aspecto y

comportamiento

Interfaz

Guía de estilo

Plan denegocios

Oferta

Argumentocomercial

Performance

Diseño deInteracción

Diseño deInformaciónDiseño de

Interacción

Análisisde negocio

DesarrolloVisual

UX

Tecnología

UX

Negocio Diseño

Santiago Bustelo (@sbustelo) •MEMBER

UX y Calidad

31

Usaurio

Repasando algunas definiciones deDiseño de Interacción: usabilidad aplicada (2012)

Santiago Bustelo (@sbustelo) •MEMBER

UX como Calidad

• Atributos cualitativos intrínsecos al producto

• No se pueden “agregar”.

• Son afectados por todos los que construyen el producto.

• Siempre ocurren

• A un producto no le “falta” UX.En todo caso, su experiencia de usuario es mala.

• Experiencias diseñadas vs experiencias accidentales

32

Santiago Bustelo (@sbustelo) •MEMBER

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

33

Santiago Bustelo (@sbustelo) •MEMBER

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

34

Santiago Bustelo (@sbustelo) •MEMBER

Midiendo la calidad de un diseño

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

35

Santiago Bustelo (@sbustelo) •MEMBER

Midiendo la calidad de un diseño

37

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

Santiago Bustelo (@sbustelo) •MEMBER

Comparar alternativas de manera objetiva

39

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 S26 27 28 29 30 31 12 3 4 5 6 7 89 10 11 12 13 14 1516 17 18 19 20 21 2223 24 25 26 27 28 2930 31 1 2 3 4 5

Santiago Bustelo (@sbustelo) •MEMBER

Cuantificación: Usabilidad

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

40

Efectividad: Incorporando al usuario

Santiago Bustelo (@sbustelo) •MEMBER

v1 v2 v1 v2 v1 v2 v1 v2

Cuantificando efectividad

42

v1 v2 v1 v2 v1 v2 v1 v2

Santiago Bustelo (@sbustelo) •MEMBER

Eficiencia: análisis y cuantificación

43

Santiago Bustelo (@sbustelo) •MEMBER

Un modelo para cuantificar eficiencia:KLM-GOMS

Cada operación del usuario tiene un costo.

44

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)

Santiago Bustelo (@sbustelo) •MEMBER

Satisfacción: experiencia óptima

Simplificación del modelo de Mihaly Csikszentmihalyi

Frustración

Fluencia

desafío

habilidad

Aburrimiento

45

Santiago Bustelo (@sbustelo) •MEMBER

Cuantificando Satisfacción

46

RecommendGoodMean

v1: 66,3

v2: 73,8

SUS - System Usability Scale

Santiago Bustelo (@sbustelo) •MEMBER

Gestión: lograr calidad en un equipo

47

Santiago Bustelo (@sbustelo) •MEMBER

La Calidad se declara en un equipo

48

Política de Calidad

Procesos

Técnicas

Herramientas

Santiago Bustelo (@sbustelo) •MEMBER

Anatomía de un proyecto: definiciones fundamentales

• ¿Qué es un proyecto?

• Triple restricción y gestión del proyecto

• Calidad y cuantificación

• Procesos y tipos de problema

• Objetivos y requerimientos

49

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

50

Santiago Bustelo (@sbustelo) •MEMBER

Un proyecto se enmarca en latriple restricción

51

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…

52

TIEMPO

COST

O

ALCANCE extensión de alcance

Calidad

Santiago Bustelo (@sbustelo) •MEMBER

…a menos que estiremos creativamente…

53

TIEMPO

COST

O

ALCANCE

Calidad

Santiago Bustelo (@sbustelo) •MEMBER

– =

…y tengamos la suerte de que nadie lo note

54

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

Proceso lineal

1. Definición de requerimientos.

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

3. Entrega.

55

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 o el usuario querían,retrocede tres casilleros.

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

56

Santiago Bustelo (@sbustelo) •MEMBER

¿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

57

Santiago Bustelo (@sbustelo) •MEMBER

• 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

58

El proceso modela el resultado.

Santiago Bustelo (@sbustelo) •MEMBER

Proceso convergente

1. Objetivos y análisis inicial.

2. Diseño y desarrollo en iteracionesavanzando y validando progresivamente:

• Funcionalidad

• Estructura y elementos

• Lenguaje visual

3. Entrega y puesta en producción.

4. Iteración de todo el proceso.

59

Santiago Bustelo (@sbustelo) •MEMBER

Objetivos vs. Requerimientos

Objetivos: para quéejecutamos el proyecto

• Foco en los problemas a resolver, no en funcionalidades ni soluciones.

• Medibles de forma objetiva.

• Parámetro temporal definido para el cumplimiento.

Requerimientos: qué nos compromemos a hacer

• Especifican una función o atributo visible de un producto.

• Son propuestas de cómo satisfacer un objetivo.

• Son por definición limitantes.

60

Santiago Bustelo (@sbustelo) •MEMBER

Diseñar la experiencia vs. soluciones mágicas

61

“ La mayoría de los clientes espera que diseñar la experiencia sea una actividad discreta, que resuelva todos sus problemas con una única especificación o estudio. Debe ser un esfuerzo constante, un proceso de aprendizaje continuo sobre los usuarios, respondiendo a sus comportamientos, y mejorando el producto o servicio”.

Dan Brown, consultor de UX

Santiago Bustelo (@sbustelo) •MEMBER

Disciplinas y prácticas

62

Santiago Bustelo (@sbustelo) •MEMBER

Niveles de decisión

63

Jared Spool: Anatomy of design decisions

Trucos

Técnicas

Procesos

Metodología

Dogma

Toma de decisionesinformal

Toma de decisionesbasada en reglas y fe

Santiago Bustelo (@sbustelo) •MEMBER

Factores que componen UX

64

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ñoEspacio de relevamiento

Santiago Bustelo (@sbustelo) •MEMBER

• 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

Disciplinas de Diseño en UX

65

Santiago Bustelo (@sbustelo) •MEMBER

Arquitectura de Información(IA, Information Architecture)

66

DISEÑO INTERACTIVO PARA TODOS: USABLE Y ACCESIBLE

• Organizar, jerarquizar y nombrar la información presente en sitios Web, dispositivos e interfaces en general.

• 75% de los problemas de UX involucran IA.

IAJakob Nielsen, Hoa Lorenger: Prioritizing Web Usability

Santiago Bustelo (@sbustelo) •MEMBER

Relevamiento: entender al usuario,mucho más que simplemente preguntar

67

• Lo que pide no eslo que quiere

• Lo que quiereno es lo que necesita

Santiago Bustelo (@sbustelo) •MEMBER

Entender al usuario:mucho más que simplemente escuchar

68

Pide

Reactivo

Quiere

Proactivo

Necesita

Creativo

Santiago Bustelo (@sbustelo) •MEMBER

¿Qué necesitamos saber para lograr un buen producto?

69

• lo que el usuario pide

• lo que el usuario quiere

• lo que el usuario necesita

Malcolm Gladwell, The Ketchup Conundrum:Cómo Howard Moskowitz encontró que la gente

realmente no sabe qué quiere hasta que lo prueba, y reinventó la salsa de tomate.

Santiago Bustelo (@sbustelo) •MEMBER

Técnicas de relevamiento

Entrevistas, Focus group

Card sortingMapeo ConceptualConstrucción de Personas/Arquetipos

Pruebas de usabilidadPrototipado iterativoRelevamiento Contextual

70

PIDE QUIERE NECESITA

Santiago Bustelo (@sbustelo) •MEMBER

Analizar el comportamiento, no el discurso71

XFoto: National Chiao Tung University

Santiago Bustelo (@sbustelo) •MEMBER

Card Sorting72

Santiago Bustelo (@sbustelo) •MEMBER

Mapeo conceptual73

Foto: Craig Duncan, United Nations

Santiago Bustelo (@sbustelo) •MEMBER

Construcción de Personas o Arquetipos

• Herramienta muy discutida: es difícil evaluar si lo hicimos bien.

• Permite generar empatía en el equipo con los usurios finales.

• Basar las personas en relevamiento y datos reales.

• Poner foco en objetivos y actividades, no en detalles personales.

• Relacionadas con el producto. No se reusan.

• Es más importante el relevamiento que el entregable.

74

Inés, Contadora (73 años)• Lleva una vida activa. Para mantener

las expensas bajas para todos, se hace cargo de la administración de su edificio.

• Trabajó con computadoras las últimas décadas. Las considera herramientas, no le interesa cómo funcionan.

• Como millones de adultos mayores, Inés sufre de degeneración macular asociada a la edad. Tiene dificultad en leer textos pequeños o con poco contraste. Sabe ampliar el texto en Explorer, pero no funciona en todos los sitios.

• Tiene un ligero temblor en la mano derecha. Usar el mouse a veces resulta un desafío, particularmente con links o botones muy pequeños. Prefiere usar el teclado.

• Las páginas que Inés puede leer y usar sin problemas, funcionan muy bien en la pantallita de nuestro celular.

Foto kellyCDB (CC)

“La otra noche fuimos al teatro con las chicas. ¡Qué buenos actores! Hacía tiempo que no me reía tanto”.

Santiago Bustelo (@sbustelo) •MEMBER

Pruebas de usabilidad75

Santiago Bustelo (@sbustelo) •MEMBER

Pruebas de usabilidad: usuarios reales

• Hasta que no testeamos, sólo podemos tener hipótesis.

• Testear con 5 usuarios revela el 80% de los problemas de usabilidad presentes en el producto.

• Pruebas rápidas y de gran impacto cualitativo.

• Observación y análisis de operación para resolver tareas solicitadas.

• No se toman requerimientos del usuario. Nos enfocamos en lo que el usuario hace.

76

Usa

bilit

y pr

oble

ms

foun

d 100%

75%

50%

25%

0%0 3 6 9 12 15

Number of Test Users

Jakob Nielsen: Why You Only Need to Test with 5 Users

Santiago Bustelo (@sbustelo) •MEMBER

Prototipado iterativo77

Santiago Bustelo (@sbustelo) •MEMBER

Prototipado iterativo78

Santiago Bustelo (@sbustelo) •MEMBER

79

Netbook escolar

Bebé

Relevamiento contextual

llamadas alfijo y celular

Fuera de cámara:hijos (4 y 7 años)

Santiago Bustelo (@sbustelo) •MEMBER

Lo que siempre necesita el usuario

• El objetivo del usuario es realizar una tarea.

• Nuestro producto es sólo un medio entre muchos posibles para lograr ese objetivo.

• No quiere realizar tareas repetitivas: para eso están las computadoras, no los usuarios.

• Nuestro producto siempre se compara con otros productos digitales, productos no digitales, y soluciones que el usuario puede desarrollar por sus propios medios.

• Accesibilidad: si tenemos suerte, nosotros también seremos viejos el día de mañana.

80

Caso típico de un software que no logra superar y absorber las alternativas.

Santiago Bustelo (@sbustelo) •MEMBER

Roles y áreas

81

Santiago Bustelo (@sbustelo) •MEMBER

Cliente

Área Comercial

Jefes de proyecto

Desarrolladores

Usuarios

Modelo clásico

82

Santiago Bustelo (@sbustelo) •MEMBER

Roles en un proyecto simple

83

Requerimientos

EntregablesCliente Proveedor

Santiago Bustelo (@sbustelo) •MEMBER

…y la forma en que frecuentemente escalan

84

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

Santiago Bustelo (@sbustelo) •MEMBER

Productoque se inflige al mercado

Mientras tanto, fuera de la burbuja…

85

“Esa manga de inútiles”

“Esos cretinos”

Clientes y usuariosOperan todos los días

el producto del proyecto finalizado

Burbuja del ProyectoSe rompe una vez finalizado

el proyecto

Santiago Bustelo (@sbustelo) •MEMBER

Recuperando la cordura

86

Interlocutor del Equipo

DesarrolladoresDiseñadoresContenidistas

Requerimientos

EntregablesInterlocutor del Cliente

PatrocinadoresClientesUsuarios

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

“Esto es, aunque valoramos los elementos de la derecha,valoramos más los de la izquierda.”

87

Santiago Bustelo (@sbustelo) •MEMBER

Razones para adoptar metodologías Agiles

• Ciclos cortos de desarrollo.

• Comunicación abierta, necesaria y diaria con el cliente / usuario.

• El progreso del desarrollo es medido.

• Todos los miembros del equipo pueden influenciar el resultado final.

• El proceso se adapta constantemente al equipo.

• Todos los impedimentos son visibles.

88

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.

89

Santiago Bustelo (@sbustelo) •MEMBER

Scrum: aspectos centrales para UX

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

90

Santiago Bustelo (@sbustelo) •MEMBER

Equipo de diseño y desarrollo de UX:roles con áreas solapadas

91

Ben Melbourne: The difference between a UX

Designer and UI Developer

Santiago Bustelo (@sbustelo) •MEMBER

Reuniones en Scrum

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

92

Santiago Bustelo (@sbustelo) •MEMBER

Caso real:Rediseño de Guía Oleo

93

Santiago Bustelo (@sbustelo) •MEMBER

Problemática inicial

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

94

Santiago Bustelo (@sbustelo) •MEMBER

Interfaz original95

Santiago Bustelo (@sbustelo) •MEMBER

Interfaz original96

Santiago Bustelo (@sbustelo) •MEMBER

Interfaz original97

Santiago Bustelo (@sbustelo) •MEMBER

Interfaz original98

Santiago Bustelo (@sbustelo) •MEMBER

Diseño y desarrollo en sprints

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

99

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.

100

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.

101

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 1: prototipos iniciales102

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 1: prototipos iniciales103

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 1: pruebas de usabilidad, prototipo en papel104

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

105

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.

106

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 2: Prototipos avanzados107

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 2: Prototipos avanzados108

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 2: Prototipos avanzados109

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 2: pruebas de usabilidad110

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.

111

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.

112

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 3: Diseño final113

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 3: Diseño final114

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 3: Diseño final115

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 3: Pruebas de usabilidad, prototipo HTML116

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 3: Diseño final117

Santiago Bustelo (@sbustelo) •MEMBER

Sprint 3: Diseño final118

Santiago Bustelo (@sbustelo) •MEMBER

Conclusiones del proyecto

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

119

¡Muchas gracias!

K a m b r i c a

UX en proyectos de diseño y desarrollo:Gestión, procesos, roles y prácticas

Universidad Tecnológica de Tucumán13 de mayo, 2013

MEMBER

www.kambrica.com