UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,010 views

En los últimos años, la demanda a los equipos de diseño y desarrollo está pasando del cumplimiento de requerimientos del cliente, a la creación de productos que satisfacen las necesidades de los ...

En los últimos años, la demanda a los equipos de diseño y desarrollo está pasando del cumplimiento de requerimientos del cliente, a la creación de productos que satisfacen las necesidades de los usuarios y objetivos del negocio.

En ese contexto, UX (User Experience) se establece como la visión, gestión y prácticas necesarias para cumplir con este desafío de manera efectiva y recurrente. Esta presentación brinda a los responsables de dirección y ejecución de proyectos de tecnología las distinciones fundamentales para iniciar el camino a su adopción.

Temario:

- Definición de UX y disciplinas. 
- Experiencias accidentales vs. experiencias diseñadas.
- La experiencia de usuario como identidad del producto.
- Roles y áreas típicos en proyectos de diseño y desarrollo.
- Impacto de UX en los equipos de diseño y desarrollo, su responsabilidad y relación con clientes y usuarios.
- Principios de gestión de UX. Anatomía de un proyecto. Calidad y cuantificación.
- Prácticas de UX: nuestras herramientas para resolver problemas complejos.
- Roles en un equipo de UX.
- El camino a la adopción de UX: Modelo de madurez Keikendo.

Statistics

Views

Total Views
2,010
Views on SlideShare
1,797
Embed Views
213

Actions

Likes
9
Downloads
73
Comments
1

2 Embeds 213

http://www.keikendo.com 212
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • UX en proyectos de diseño y desarrollo Gestión, procesos, roles y prácticas Santiago Bustelo Director de diseño, Kambrica IxDA Latin America Regional Coordinator Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar @sbustelo Universidad Tecnológica de Tucumán 13 de mayo, 2013 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. MEMBER
  • IxDA (Interaction Design Association) • Organización abierta, voluntaria y gratuita, con la Evolución en Experiencia de Usuario • 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 MEMBER 3 ixda.org View slide
  • ¿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. Santiago Bustelo (@sbustelo) • Don Norman MEMBER 4 View slide
  • Experiencias cotidianas Santiago Bustelo (@sbustelo) • MEMBER 5
  • Santiago Bustelo (@sbustelo) • MEMBER La promesa 6 “¡Comprá tus entradas online! “¡Ahorrá tiempo! “¡Es fácil!
  • • 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. Santiago Bustelo (@sbustelo) • El “servicio” MEMBER 7
  • Santiago Bustelo (@sbustelo) • MEMBER 8
  • Traducción: el programador no previó el ingreso de acentos en los datos, ni separadores en números de Santiago Bustelo (@sbustelo) • MEMBER 9 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
  • Este botón nos envía de vuelta a la home, a iniciar todo el proceso desde cero Santiago Bustelo (@sbustelo) • MEMBER 15
  • Santiago Bustelo (@sbustelo) • MEMBER 16 Atiende contestador informando horario de atención
  • Santiago Bustelo (@sbustelo) • MEMBER El insulto 17 “¡Comprá tus entradas online! “¡Ahorrá tiempo! “¡Es fácil!
  • • 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. Santiago Bustelo (@sbustelo) • Experiencia de usuario MEMBER 18
  • Las malas experiencias ya forman parte de la cultura popular Santiago Bustelo (@sbustelo) • MEMBER 19 Office Space (1999) XKCD: University Website
  • ¿Por qué las malas experiencias son tan frecuentes? “ 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”. Santiago Bustelo (@sbustelo) • MEMBER 20 (Kaleem Khan, consultor de UX)
  • UX y QA: ¿Quién absorbe los defectos? Santiago Bustelo (@sbustelo) • • 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. MEMBER 21
  • UX: ¿Quién absorbe la complejidad? Búsqueda facetada Me siento con suerte Santiago Bustelo (@sbustelo) • Búsqueda avanzada MEMBER 22 SQL console Usuario Sistema Complejidad
  • ¿A quién le toca “hacer UX”? Santiago Bustelo (@sbustelo) • MEMBER 23
  • UX: áreas de percepción Oferta Interfaz Simplicidad Performance UX Consistencia Marketing
  • UX: áreas de percepción Oferta Interfaz Simplicidad Performance UX Consistencia Marketing No se pueden “agregar”
  • Tecnología UX: Campos Oferta Interfaz Simplicidad Performance UX Consistencia Negocio Diseño Marketing
  • UX: Campos Involucrar a Cliente y Usuarios Oferta Interfaz Simplicidad Performance UX Consistencia Marketing Involucrar a Cliente y Usuarios Involucrar a Cliente y Usuarios Tecnología Negocio Diseño
  • UX: Áreas de trabajo Prototipado Procesos front-end Arquitectura de Información Ing. de Usabilidad Comunicaciones de Marketing Diseño estético Diseño de identidad Diseño de Interacción Diseño de UX Información Diseño de Interacción Análisis de negocio Desarrollo Visual Tecnología Negocio Diseño
  • El universo de UX Funcionalidad Prototipado Versión candidata a de!nitiva Procesos front-end Arquitectura de Información Ing. de Usabilidad Simplicidad Consistencia Interfaz Diseño de identidad Aspecto y Diseño de Interacción Comunicaciones de Marketing Marketing Diseño estético comportamiento Guía de estilo Plan de negocios Oferta Argumento comercial Performance Diseño de Diseño de Información Interacción Análisis de negocio Desarrollo Visual UX
  • Diseñar la experiencia Funcionalidad Tecnología Prototipado Versión candidata a de!nitiva Procesos front-end Arquitectura de Información Ing. de Usabilidad Simplicidad Consistencia Interfaz Diseño de identidad Aspecto y Diseño de Interacción Comunicaciones de Marketing Marketing Diseño estético comportamiento Guía de estilo Plan de negocios Oferta Argumento comercial Performance Diseño de Diseño de Información Interacción Análisis de negocio Desarrollo Visual UX Negocio Diseño
  • UX y Calidad Santiago Bustelo (@sbustelo) • MEMBER 31 Usaurio Repasando algunas definiciones de Diseño de Interacción: usabilidad aplicada (2012)
  • • Atributos cualitativos intrínsecos al producto • No se pueden “agregar”. • Son afectados por todos los que construyen el • Siempre ocurren • A un producto no le “falta” UX. En todo caso, su experiencia de usuario es mala. • Experiencias diseñadas vs experiencias accidentales Santiago Bustelo (@sbustelo) • UX como Calidad producto. MEMBER 32
  • • “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) Santiago Bustelo (@sbustelo) • ¿Qué es Calidad? MEMBER 33
  • • “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 Santiago Bustelo (@sbustelo) • Calidad y Cuantificación MEMBER 34
  • Midiendo la calidad de un diseño 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) • MEMBER 1 2 3 4 5 35
  • Midiendo la calidad de un diseño Santiago Bustelo (@sbustelo) • MEMBER 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
  • 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 39 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
  • • 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) • Cuantificación: Usabilidad MEMBER 40
  • Efectividad: Incorporando al usuario
  • Cuantificando efectividad v1 v2 v1 v2 v1 v2 v1 v2 Santiago Bustelo (@sbustelo) • MEMBER 42 v1 v2 v1 v2 v1 v2 v1 v2
  • Eficiencia: análisis y cuantificación Santiago Bustelo (@sbustelo) • MEMBER 43
  • Un modelo para cuantificar eficiencia: KLM-GOMS Cada operación del usuario tiene un costo. Santiago Bustelo (@sbustelo) • MEMBER 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)
  • Satisfacción: experiencia óptima Frustración Aburrimiento Simplificación del modelo de Mihaly Csikszentmihalyi Santiago Bustelo (@sbustelo) • MEMBER Fluencia desafío habilidad 45
  • v2: 73,8 Santiago Bustelo (@sbustelo) • Cuantificando Satisfacción MEMBER 46 Mean Good Recommend v1: 66,3 SUS - System Usability Scale
  • Gestión: lograr calidad en un equipo Santiago Bustelo (@sbustelo) • MEMBER 47
  • La Calidad se declara en un equipo Santiago Bustelo (@sbustelo) • MEMBER 48 Herramientas Técnicas Procesos Política de Calidad
  • • ¿Qué es un proyecto? • Triple restricción y gestión del proyecto • Calidad y cuantificación • Procesos y tipos de problema • Objetivos y requerimientos Santiago Bustelo (@sbustelo) • Anatomía de un proyecto: definiciones fundamentales MEMBER 49
  • • 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 50
  • 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 51 COSTO TIEMPO ALCANCE Lo que el equipo se compromete a lograr las tareas Calidad
  • No se puede tocar una variable sola… Santiago Bustelo (@sbustelo) • MEMBER 52 TIEMPO COSTO Calidad ALCANCE extensión de alcance
  • …a menos que estiremos creativamente… Santiago Bustelo (@sbustelo) • MEMBER 53 TIEMPO COSTO Calidad ALCANCE
  • …y tengamos la suerte de que nadie lo note Santiago Bustelo (@sbustelo) • MEMBER – = 54 Gestión del proyecto: • Andamiaje, soporte • Observar la triple restricción durante la duración del proyecto Calidad perdida TIEMPO COSTO Calidad ALCANCE
  • 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. Santiago Bustelo (@sbustelo) • Proceso lineal MEMBER 55
  • 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. Santiago Bustelo (@sbustelo) • Proceso lineal interminable MEMBER 56
  • ¿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 Santiago Bustelo (@sbustelo) • MEMBER 57
  • Entender el tipo de problema Santiago Bustelo (@sbustelo) • • Problemas bien definidos • Algoritmos • Resolución lineal • Metodología estructurada • Foco en análisis y documentación MEMBER • Problemas dinámicos • Heurísticas • Resolución asintótica • Metodología ágil • Foco en entregables 58 El proceso modela el resultado.
  • 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. Santiago Bustelo (@sbustelo) • Proceso convergente MEMBER 59
  • Objetivos vs. Requerimientos Santiago Bustelo (@sbustelo) • 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. MEMBER 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
  • Diseñar la experiencia vs. soluciones mágicas Santiago Bustelo (@sbustelo) • MEMBER 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
  • Disciplinas y prácticas Santiago Bustelo (@sbustelo) • MEMBER 62
  • Dogma Metodología Santiago Bustelo (@sbustelo) • Niveles de decisión Trucos Técnicas Toma de decisiones MEMBER 63 Procesos Jared Spool: Anatomy of design decisions informal Toma de decisiones basada en reglas y fe
  • Espacio de relevamiento Espacio de diseño Santiago Bustelo (@sbustelo) • Factores que componen UX MEMBER 64 time pressure, pressure of success and fail, explicit and implicit requirements, etc. User Experience sex, fashion, habits, norms, language, symbols, religion, etc. time, place, accompanying persons, temperature, etc. social factors cultural 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 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.
  • Disciplinas de Diseño en UX • Diseño de Experiencias (UX) • Dirigir la forma en que se siente una persona usando un producto, sistema o • 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 • 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. Santiago Bustelo (@sbustelo) • servicio. experiencias para más usuarios. MEMBER ABSTRACTO CONCRETO 65
  • Santiago Bustelo (@sbustelo) • Arquitectura de Información (IA, Information Architecture) MEMBER 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. IA Jakob Nielsen, Hoa Lorenger: Prioritizing Web Usability
  • Relevamiento: entender al usuario, mucho más que simplemente preguntar Santiago Bustelo (@sbustelo) • MEMBER 67 • Lo que pide no es lo que quiere • Lo que quiere no es lo que necesita
  • Entender al usuario: mucho más que simplemente escuchar Santiago Bustelo (@sbustelo) • MEMBER 68 Pide Reactivo Quiere Proactivo Necesita Creativo
  • ¿Qué necesitamos saber para lograr un buen producto? Santiago Bustelo (@sbustelo) • MEMBER 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) • Técnicas de relevamiento MEMBER Entrevistas, Focus group Card sorting Mapeo Conceptual Construcción de Personas/Arquetipos Pruebas de usabilidad Prototipado iterativo Relevamiento Contextual 70 PIDE QUIERE NECESITA
  • Analizar el comportamiento, no el discurso Santiago Bustelo (@sbustelo) • MEMBER 71 X Foto: National Chiao Tung University
  • Santiago Bustelo (@sbustelo) • MEMBER Card Sorting 72
  • Foto: Craig Duncan, United Nations Santiago Bustelo (@sbustelo) • MEMBER Mapeo conceptual 73
  • Construcción de Personas o Arquetipos Santiago Bustelo (@sbustelo) • • 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 MEMBER 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”.
  • Pruebas de usabilidad Santiago Bustelo (@sbustelo) • MEMBER 75
  • Pruebas de usabilidad: usuarios reales • Hasta que no testeamos, sólo Santiago Bustelo (@sbustelo) • 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. MEMBER 76 Usability problems found 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 iterativo 77
  • Santiago Bustelo (@sbustelo) • MEMBER Prototipado iterativo 78
  • llamadas al fijo y celular Santiago Bustelo (@sbustelo) • MEMBER 79 Netbook escolar Bebé Relevamiento contextual Fuera de cámara: hijos (4 y 7 años)
  • Lo que siempre necesita el usuario Caso típico de un software que no logra superar y absorber las alternativas. Santiago Bustelo (@sbustelo) • • 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. MEMBER 80
  • Roles y áreas Santiago Bustelo (@sbustelo) • MEMBER 81
  • Santiago Bustelo (@sbustelo) • MEMBER Cliente Área Comercial Jefes de proyecto Desarrolladores Usuarios Modelo clásico 82
  • Santiago Bustelo (@sbustelo) • Roles en un proyecto simple MEMBER 83 Requerimientos Entregables Cliente Proveedor
  • …y la forma en que frecuentemente escalan Santiago Bustelo (@sbustelo) • MEMBER 84 “Esos cretinos” “Esa manga de inútiles”
  • Mientras tanto, fuera de la burbuja… Santiago Bustelo (@sbustelo) • Producto que se inflige al mercado MEMBER 85 “Esa manga de inútiles” “Esos cretinos” Clientes y usuarios Operan todos los días el producto del proyecto finalizado Burbuja del Proyecto Se rompe una vez finalizado el proyecto
  • Santiago Bustelo (@sbustelo) • Recuperando la cordura MEMBER 86 Interlocutor del Equipo Desarrolladores Diseñadores Contenidistas Requerimientos Entregables Interlocutor del Cliente Patrocinadores Clientes Usuarios
  • 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 “Esto es, aunque valoramos los elementos de la derecha, valoramos más los de la izquierda.” 87
  • Razones para adoptar metodologías Agiles Santiago Bustelo (@sbustelo) • • Ciclos cortos de desarrollo. • Comunicación abierta, necesaria y diaria con el cliente / usuario. • El progreso del desarrollo es medido. MEMBER • 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
  • 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. Santiago Bustelo (@sbustelo) • MEMBER 90
  • Equipo de diseño y desarrollo de UX: roles con áreas solapadas Ben Melbourne: The difference between a UX Designer and UI Developer Santiago Bustelo (@sbustelo) • MEMBER 91
  • Santiago Bustelo (@sbustelo) • 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). MEMBER • 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
  • • 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 94
  • Santiago Bustelo (@sbustelo) • MEMBER Interfaz original 95
  • Santiago Bustelo (@sbustelo) • MEMBER Interfaz original 96
  • Santiago Bustelo (@sbustelo) • MEMBER Interfaz original 97
  • Santiago Bustelo (@sbustelo) • MEMBER Interfaz original 98
  • Diseño y desarrollo en sprints • Kickoff Marco del proyecto: alcance, plazos y responsables Santiago Bustelo (@sbustelo) • Sprint 0 Relevamiento Pruebas usabilidad Análisis Exploración MEMBER 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 99
  • 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. 100
  • 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. 101
  • Sprint 1: prototipos iniciales Santiago Bustelo (@sbustelo) • MEMBER 102
  • Sprint 1: prototipos iniciales Santiago Bustelo (@sbustelo) • MEMBER 103
  • Sprint 1: pruebas de usabilidad, prototipo en papel Santiago Bustelo (@sbustelo) • MEMBER 104
  • 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 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
  • Sprint 2: Prototipos avanzados Santiago Bustelo (@sbustelo) • MEMBER 107
  • Sprint 2: Prototipos avanzados Santiago Bustelo (@sbustelo) • MEMBER 108
  • Sprint 2: Prototipos avanzados Santiago Bustelo (@sbustelo) • MEMBER 109
  • Sprint 2: pruebas de usabilidad Santiago Bustelo (@sbustelo) • MEMBER 110
  • 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. 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
  • Sprint 3: Diseño final Santiago Bustelo (@sbustelo) • MEMBER 113
  • Sprint 3: Diseño final Santiago Bustelo (@sbustelo) • MEMBER 114
  • Sprint 3: Diseño final Santiago Bustelo (@sbustelo) • MEMBER 115
  • Sprint 3: Pruebas de usabilidad, prototipo HTML Santiago Bustelo (@sbustelo) • MEMBER 116
  • Sprint 3: Diseño final Santiago Bustelo (@sbustelo) • MEMBER 117
  • Sprint 3: Diseño final Santiago Bustelo (@sbustelo) • MEMBER 118
  • • 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 Santiago Bustelo (@sbustelo) • Conclusiones del proyecto y desafíos durante un año. MEMBER 119
  • ¡Muchas gracias! UX en proyectos de diseño y desarrollo: Gestión, procesos, roles y prácticas Universidad Tecnológica de Tucumán 13 de mayo, 2013 MEMBER K a m b r i c a
  • www.kambrica.com