SlideShare une entreprise Scribd logo
1  sur  123
Télécharger pour lire hors ligne
Presentación bajo licencia Creative Commons
Atribución 2.5 Argentina
http://creativecommons.org/licenses/by/2.5/ar
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
Universidad Tecnológica de Tucumán
13 de mayo, 2013
@sbustelo
M E M B E R
M E M B E R
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 •M E M B E R
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) •M E M B E R
¿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) •M E M B E R
Experiencias
cotidianas
5
Santiago Bustelo (@sbustelo) •M E M B E R
La promesa
6
“¡Comprá tus
entradas online!
“¡Ahorrá tiempo!
“¡Es fácil!
Santiago Bustelo (@sbustelo) •M E M B E R
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) •M E M B E R
8
Santiago Bustelo (@sbustelo) •M E M B E R
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) •M E M B E R
10
Santiago Bustelo (@sbustelo) •M E M B E R
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) •M E M B E R
12
Santiago Bustelo (@sbustelo) •M E M B E R
13
Bueno, no me grite
Santiago Bustelo (@sbustelo) •M E M B E R
14
Santiago Bustelo (@sbustelo) •M E M B E R
15
Este botón nos envía de
vuelta a la home, a iniciar
todo el proceso desde cero
Santiago Bustelo (@sbustelo) •M E M B E R
16
Atiende contestador
informando horario de
atención
Santiago Bustelo (@sbustelo) •M E M B E R
El insulto
17
“¡Comprá tus
entradas online!
“¡Ahorrá tiempo!
“¡Es fácil!
Santiago Bustelo (@sbustelo) •M E M B E R
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) •M E M B E R
Las malas experiencias ya forman parte de
la cultura popular
19
XKCD: University WebsiteOffice Space (1999)
Santiago Bustelo (@sbustelo) •M E M B E R
¿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) •M E M B E R
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) •M E M B E R
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) •M E M B E R
¿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
Simplicidad
Consistencia
Marketing
InterfazOferta
Performance
UX
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 a
Cliente y Usuarios
Involucrar a
Cliente y Usuarios
Tecnología
UX
Negocio Diseño
Tecnología
UX
Negocio Diseño
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
Información
UX
Diseño de
Interacción
Análisis
de negocio
Desarrollo
Visual
Tecnología
UX
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
Información
UX
Diseño de
Interacción
Análisis
de negocio
Desarrollo
Visual
Tecnología
UX
Negocio Diseño
Funcionalidad
Prototipado
Versión candidata
a definitiva
Procesos
front-end
Arquitectura
de Información
Ing. de
Usabilidad
Simplicidad
Consistencia
Marketing
Comunicaciones
de Marketing
Diseño
estético
Diseño de
identidad Aspecto y
comportamiento
Interfaz
Guía de
estilo
Plan de
negocios
Oferta
Argumento
comercial
Performance
Diseño de
Interacción
Diseño de
InformaciónDiseño de
Interacción
Análisis
de negocio
Desarrollo
Visual
UX
El universo
de UX
Funcionalidad
Prototipado
Versión candidata
a definitiva
Procesos
front-end
Arquitectura
de Información
Ing. de
Usabilidad
Simplicidad
Consistencia
Marketing
Comunicaciones
de Marketing
Diseño
estético
Diseño de
identidad Aspecto y
comportamiento
Interfaz
Guía de
estilo
Plan de
negocios
Oferta
Argumento
comercial
Performance
Diseño de
Interacción
Diseño de
InformaciónDiseño de
Interacción
Análisis
de negocio
Desarrollo
Visual
UX
Funcionalidad
Prototipado
Versión candidata
a definitiva
Procesos
front-end
Arquitectura
de Información
Ing. de
Usabilidad
Simplicidad
Consistencia
Marketing
Comunicaciones
de Marketing
Diseño
estético
Diseño de
identidad Aspecto y
comportamiento
Interfaz
Guía de
estilo
Plan de
negocios
Oferta
Argumento
comercial
Performance
Diseño de
Interacción
Diseño de
InformaciónDiseño de
Interacción
Análisis
de negocio
Desarrollo
Visual
UX
Tecnología
UX
Negocio Diseño
Diseñar la
experiencia
Funcionalidad
Prototipado
Versión candidata
a definitiva
Procesos
front-end
Arquitectura
de Información
Ing. de
Usabilidad
Simplicidad
Consistencia
Marketing
Comunicaciones
de Marketing
Diseño
estético
Diseño de
identidad Aspecto y
comportamiento
Interfaz
Guía de
estilo
Plan de
negocios
Oferta
Argumento
comercial
Performance
Diseño de
Interacción
Diseño de
InformaciónDiseño de
Interacción
Análisis
de negocio
Desarrollo
Visual
UX
Tecnología
UX
Negocio Diseño
Santiago Bustelo (@sbustelo) •M E M B E R
UX y Calidad
31
Usaurio
Repasando algunas
definiciones de
Diseño de Interacción:
usabilidad aplicada (2012)
Santiago Bustelo (@sbustelo) •M E M B E R
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) •M E M B E R
¿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) •M E M B E R
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) •M E M B E R
Midiendo la calidad de un diseño
1
2 3 4
567
891011
12
1314
15
16 17 18 19
20
21
222324
25
262728293031
35
Santiago Bustelo (@sbustelo) •M E M B E R
Midiendo la calidad de un diseño
36
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) •M E M B E R
Comparar alternativas de manera objetiva
37
1
2 3 4
567
891011
12
1314
15
16 17 18 19
20
21
222324
25
262728293031
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) •M E M B E R
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)
38
Efectividad: Incorporando al usuario
Santiago Bustelo (@sbustelo) •M E M B E R
v1 v2 v1 v2 v1 v2 v1 v2
Cuantificando efectividad
40
v1 v2 v1 v2 v1 v2 v1 v2
Santiago Bustelo (@sbustelo) •M E M B E R
Eficiencia: análisis y cuantificación
41
Santiago Bustelo (@sbustelo) •M E M B E R
Un modelo para cuantificar eficiencia:
KLM-GOMS
Cada operación del usuario tiene un costo.
42
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) •M E M B E R
Satisfacción: experiencia óptima
Simplificación del modelo de Mihaly Csikszentmihalyi
Frustración
Fluencia
desafío
habilidad
Aburrimiento
43
Santiago Bustelo (@sbustelo) •M E M B E R
Cuantificando Satisfacción
44
RecommendGoodMean
v1: 66,3
v2: 73,8
SUS - System
Usability Scale
Santiago Bustelo (@sbustelo) •M E M B E R
Gestión: lograr
calidad en un equipo
45
Santiago Bustelo (@sbustelo) •M E M B E R
La Calidad se declara en un equipo
46
Política de Calidad
Procesos
Técnicas
Herramientas
Santiago Bustelo (@sbustelo) •M E M B E R
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
47
Santiago Bustelo (@sbustelo) •M E M B E R
¿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
48
Santiago Bustelo (@sbustelo) •M E M B E R
Un proyecto se enmarca en la
triple restricción
49
COSTO
TIEMPO
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) •M E M B E R
No se puede tocar una variable sola…
50
TIEMPO
COSTO
ALCANCE extensión de alcance
Calidad
Santiago Bustelo (@sbustelo) •M E M B E R
…a menos que estiremos creativamente…
51
TIEMPO
COSTO
ALCANCE
Calidad
Santiago Bustelo (@sbustelo) •M E M B E R
– =
…y tengamos la suerte de que nadie lo note
52
Gestión del
proyecto:
• Andamiaje,
soporte
• Observar la
triple restricción
durante la
duración del
proyecto
Calidad perdida
TIEMPO
COSTO
ALCANCE
Calidad
Santiago Bustelo (@sbustelo) •M E M B E R
Proceso lineal
1. Definición de requerimientos.
2. Diseño y desarrollo a nivel de producción.
3. Entrega.
53
Santiago Bustelo (@sbustelo) •M E M B E R
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 una
o ambas partes.
54
Santiago Bustelo (@sbustelo) •M E M B E R
¿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
55
Santiago Bustelo (@sbustelo) •M E M B E R
• 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
56
El proceso modela el resultado.
Santiago Bustelo (@sbustelo) •M E M B E R
Proceso convergente
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.
57
Santiago Bustelo (@sbustelo) •
M E M B E R
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.
58
Santiago Bustelo (@sbustelo) •M E M B E R
Diseñar la experiencia vs. soluciones mágicas
59
“ 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) •M E M B E R
Disciplinas y
prácticas
60
Santiago Bustelo (@sbustelo) •M E M B E R
Niveles de decisión
61
Jared Spool: Anatomy of design decisions
Trucos
Técnicas
Procesos
Metodología
Dogma
Toma de decisiones
informal
Toma de decisiones
basada en reglas y fe
Santiago Bustelo (@sbustelo) •M E M B E R
Factores que componen UX
62
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) •M E M B E R
• 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
63
Santiago Bustelo (@sbustelo) •M E M B E R
Arquitectura de Información
(IA, Information Architecture)
64
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
Santiago Bustelo (@sbustelo) •M E M B E R
Relevamiento: entender al usuario,
mucho más que simplemente preguntar
65
• Lo que pide no es
lo que quiere
• Lo que quiere
no es lo que necesita
Santiago Bustelo (@sbustelo) •M E M B E R
Entender al usuario:
mucho más que simplemente escuchar
66
Pide
Reactivo
Quiere
Proactivo
Necesita
Creativo
Santiago Bustelo (@sbustelo) •M E M B E R
¿Qué necesitamos saber para lograr un
buen producto?
67
• 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) •M E M B E R
Técnicas de relevamiento
Entrevistas, Focus group
Card sorting
Mapeo Conceptual
Construcción de Personas/Arquetipos
Pruebas de usabilidad
Prototipado iterativo
Relevamiento Contextual
68
PIDE QUIERE NECESITA
Santiago Bustelo (@sbustelo) •M E M B E R
Analizar el comportamiento, no el discurso
69
X
Foto: National Chiao Tung University
Santiago Bustelo (@sbustelo) •M E M B E R
Card Sorting
70
Santiago Bustelo (@sbustelo) •M E M B E R
Mapeo conceptual
71
Foto: Craig Duncan, United Nations
Santiago Bustelo (@sbustelo) •M E M B E R
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.
72
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) •M E M B E R
Pruebas de usabilidad
73
Santiago Bustelo (@sbustelo) •M E M B E R
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.
74
Usabilityproblemsfound
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) •M E M B E R
Prototipado iterativo
75
Santiago Bustelo (@sbustelo) •M E M B E R
Prototipado iterativo
76
Santiago Bustelo (@sbustelo) •M E M B E R
77
Netbook escolar
Bebé
Relevamiento contextual
llamadas al
fijo y celular
Fuera de cámara:
hijos (4 y 7 años)
Santiago Bustelo (@sbustelo) •M E M B E R
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.
78
Caso típico de un software que no logra
superar y absorber las alternativas.
Santiago Bustelo (@sbustelo) •M E M B E R
Roles y áreas
79
Santiago Bustelo (@sbustelo) •M E M B E R
Cliente
Área Comercial
Jefes de proyecto
Desarrolladores
Usuarios
Modelo clásico
80
Santiago Bustelo (@sbustelo) •M E M B E R
Roles en un proyecto simple
81
Requerimientos
Entregables
Cliente Proveedor
Santiago Bustelo (@sbustelo) •M E M B E R
…y la forma en que frecuentemente escalan
82
“Esa manga de inútiles”“Esos cretinos”
Santiago Bustelo (@sbustelo) •M E M B E R
Producto
que se inflige
al mercado
Mientras tanto, fuera de la burbuja…
83
“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) •M E M B E R
Recuperando la cordura
84
Interlocutor del
Equipo
Desarrolladores
Diseñadores
Contenidistas
Requerimientos
Entregables
Interlocutor
del Cliente
Patrocinadores
Clientes
Usuarios
Santiago Bustelo (@sbustelo) •M E M B E R
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.”
85
Santiago Bustelo (@sbustelo) •M E M B E R
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.
86
Santiago Bustelo (@sbustelo) •M E M B E R
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.
87
Santiago Bustelo (@sbustelo) •M E M B E R
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.
88
Santiago Bustelo (@sbustelo) •M E M B E R
Equipo de diseño y desarrollo de UX:
roles con áreas solapadas
89
Ben Melbourne: The
difference between a UX
Designer and UI Developer
Santiago Bustelo (@sbustelo) •M E M B E R
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?
90
Santiago Bustelo (@sbustelo) •M E M B E R
Caso real:
Rediseño de Guía Oleo
91
Santiago Bustelo (@sbustelo) •M E M B E R
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.
92
Santiago Bustelo (@sbustelo) •M E M B E R
Interfaz original
93
Santiago Bustelo (@sbustelo) •M E M B E R
Interfaz original
94
Santiago Bustelo (@sbustelo) •M E M B E R
Interfaz original
95
Santiago Bustelo (@sbustelo) •M E M B E R
Interfaz original
96
Santiago Bustelo (@sbustelo) •M E M B E R
Diseño y desarrollo en sprints
Sprint 0
Relevamiento
Pruebas usabilidad
Análisis
Exploración
Sprints 1 - N
IxD
Diseño de interfaz
Arq. de Información
Pruebas usabilidad
Sprints 1-N: desarrollo
Desarrollo de la interfaz:
HTML, CSS, JavaScript
• Kickoff Marco del proyecto: alcance, plazos y responsables
Nivel de detalle de las decisiones
UX
Estrategia
Desarrollo
97
Santiago Bustelo (@sbustelo) •M E M B E R
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.
98
Santiago Bustelo (@sbustelo) •M E M B E R
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.
99
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 1: prototipos iniciales
100
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 1: prototipos iniciales
101
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 1: pruebas de usabilidad, prototipo en papel
102
Santiago Bustelo (@sbustelo) •M E M B E R
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
103
Santiago Bustelo (@sbustelo) •M E M B E R
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.
104
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 2: Prototipos avanzados
105
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 2: Prototipos avanzados
106
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 2: Prototipos avanzados
107
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 2: pruebas de usabilidad
108
Santiago Bustelo (@sbustelo) •M E M B E R
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.
109
Santiago Bustelo (@sbustelo) •M E M B E R
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.
110
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 3: Diseño final
111
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 3: Diseño final
112
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 3: Diseño final
113
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 3: Pruebas de usabilidad, prototipo HTML
114
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 3: Diseño final
115
Santiago Bustelo (@sbustelo) •M E M B E R
Sprint 3: Diseño final
116
Santiago Bustelo (@sbustelo) •M E M B E R
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.
117
¡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
M E M B E R
w w w . k a m b r i c a . c o m

Contenu connexe

Tendances

Introducción al Diseño de Experiencia del Usuario – UX2013
Introducción al Diseño de Experiencia del Usuario – UX2013Introducción al Diseño de Experiencia del Usuario – UX2013
Introducción al Diseño de Experiencia del Usuario – UX2013Gabriel Celemin
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignJoan Lumanauw
 
Ux en 30 minutos
Ux en 30 minutosUx en 30 minutos
Ux en 30 minutosSol Mesz
 
Demystifying User Experience
Demystifying User ExperienceDemystifying User Experience
Demystifying User ExperienceCake and Arrow
 
Introduction to Information Architecture
Introduction to Information ArchitectureIntroduction to Information Architecture
Introduction to Information ArchitectureMike Crabb
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)iFactory Digital
 
TechTalk 77 UI & UX Presentation
TechTalk 77 UI & UX PresentationTechTalk 77 UI & UX Presentation
TechTalk 77 UI & UX PresentationEvan Purnama
 
14 Ways to an Impressive UX Design Portfolio
14 Ways to an Impressive UX Design Portfolio14 Ways to an Impressive UX Design Portfolio
14 Ways to an Impressive UX Design PortfolioBayUX
 
UX is Not Equal to UI Design
UX is Not Equal to UI Design UX is Not Equal to UI Design
UX is Not Equal to UI Design Rifat Talukder
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
Ux design process in product development
Ux design process in product developmentUx design process in product development
Ux design process in product developmentT-Design Center
 
Scaling UX Design
Scaling UX DesignScaling UX Design
Scaling UX DesignUXDXConf
 
Experiencia de Usuario (UX): Los publicos en primer plano
Experiencia de Usuario (UX): Los publicos en primer planoExperiencia de Usuario (UX): Los publicos en primer plano
Experiencia de Usuario (UX): Los publicos en primer planoSantiago Bustelo
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory sessionSooraj P R
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 

Tendances (20)

Introducción al Diseño de Experiencia del Usuario – UX2013
Introducción al Diseño de Experiencia del Usuario – UX2013Introducción al Diseño de Experiencia del Usuario – UX2013
Introducción al Diseño de Experiencia del Usuario – UX2013
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
User experience design
User experience designUser experience design
User experience design
 
Ux en 30 minutos
Ux en 30 minutosUx en 30 minutos
Ux en 30 minutos
 
Demystifying User Experience
Demystifying User ExperienceDemystifying User Experience
Demystifying User Experience
 
Introduction to Information Architecture
Introduction to Information ArchitectureIntroduction to Information Architecture
Introduction to Information Architecture
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
TechTalk 77 UI & UX Presentation
TechTalk 77 UI & UX PresentationTechTalk 77 UI & UX Presentation
TechTalk 77 UI & UX Presentation
 
14 Ways to an Impressive UX Design Portfolio
14 Ways to an Impressive UX Design Portfolio14 Ways to an Impressive UX Design Portfolio
14 Ways to an Impressive UX Design Portfolio
 
UX is Not Equal to UI Design
UX is Not Equal to UI Design UX is Not Equal to UI Design
UX is Not Equal to UI Design
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
Ux design process in product development
Ux design process in product developmentUx design process in product development
Ux design process in product development
 
What is UX?
What is UX?What is UX?
What is UX?
 
Scaling UX Design
Scaling UX DesignScaling UX Design
Scaling UX Design
 
Experiencia de Usuario (UX): Los publicos en primer plano
Experiencia de Usuario (UX): Los publicos en primer planoExperiencia de Usuario (UX): Los publicos en primer plano
Experiencia de Usuario (UX): Los publicos en primer plano
 
UI UX Design Presentation
UI UX Design Presentation UI UX Design Presentation
UI UX Design Presentation
 
Interaction design
Interaction designInteraction design
Interaction design
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 

En vedette

UX no es lo mismo que UI
UX no es lo mismo que UIUX no es lo mismo que UI
UX no es lo mismo que UIAndrea Cantú
 
UX: Una disciplina para curiosos, inconformes y locos
UX: Una disciplina para curiosos, inconformes y locosUX: Una disciplina para curiosos, inconformes y locos
UX: Una disciplina para curiosos, inconformes y locosAndrea Cantú
 
15 errores comunes de ux en móviles (y cómo evitarlos)
15 errores comunes de ux en móviles (y cómo evitarlos)15 errores comunes de ux en móviles (y cómo evitarlos)
15 errores comunes de ux en móviles (y cómo evitarlos)Andrea Cantú
 
UX en 30 Minutos
UX en 30 MinutosUX en 30 Minutos
UX en 30 MinutosSol Mesz
 
Hablemos de UX - José Ma. Medina, UX UI designer
Hablemos de UX - José Ma. Medina, UX UI designerHablemos de UX - José Ma. Medina, UX UI designer
Hablemos de UX - José Ma. Medina, UX UI designerJosé Ma. Medina
 
UX: La experiencia de diseñar la experiencia
UX: La experiencia de diseñar la experienciaUX: La experiencia de diseñar la experiencia
UX: La experiencia de diseñar la experienciaAriel Glaz
 
Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Martin Redigolo
 
UX Industry Survey Spain 2016 _ Highlights
UX Industry Survey Spain 2016 _ HighlightsUX Industry Survey Spain 2016 _ Highlights
UX Industry Survey Spain 2016 _ HighlightsSonia Villanueva
 
Workshop UX Design [UIXCode]
Workshop UX Design [UIXCode]Workshop UX Design [UIXCode]
Workshop UX Design [UIXCode]Treze Estudio
 
UX como estrategia Corporativa - UX2013
UX como estrategia Corporativa - UX2013UX como estrategia Corporativa - UX2013
UX como estrategia Corporativa - UX2013Diego Lopez Castan ✎
 
Comunicacion 2.0 para empresas
Comunicacion 2.0 para empresasComunicacion 2.0 para empresas
Comunicacion 2.0 para empresasCecilia Nuñez
 
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...Alysson Franklin Martins Moreira, UXMC
 
Agile UX …O Como integrar UX en equipos ágiles y no morir en el intento
Agile UX …O Como integrar UX en equipos ágiles y no morir en el intentoAgile UX …O Como integrar UX en equipos ágiles y no morir en el intento
Agile UX …O Como integrar UX en equipos ágiles y no morir en el intentoSandra Vilchez
 
CAS2014 - Integrando UX & Diseño en el Desarrollo Agil - La historia dos años...
CAS2014 - Integrando UX & Diseño en el Desarrollo Agil - La historia dos años...CAS2014 - Integrando UX & Diseño en el Desarrollo Agil - La historia dos años...
CAS2014 - Integrando UX & Diseño en el Desarrollo Agil - La historia dos años...Antonio de la Torre Fernández
 
Marca Personal PDF
Marca Personal PDFMarca Personal PDF
Marca Personal PDFReina Díaz
 
Diseño de Experiencia de Usuarios para una startup: ClerkHotel errores y acie...
Diseño de Experiencia de Usuarios para una startup: ClerkHotel errores y acie...Diseño de Experiencia de Usuarios para una startup: ClerkHotel errores y acie...
Diseño de Experiencia de Usuarios para una startup: ClerkHotel errores y acie...Jorge Barahona Ch.
 

En vedette (20)

UX no es lo mismo que UI
UX no es lo mismo que UIUX no es lo mismo que UI
UX no es lo mismo que UI
 
UX: Una disciplina para curiosos, inconformes y locos
UX: Una disciplina para curiosos, inconformes y locosUX: Una disciplina para curiosos, inconformes y locos
UX: Una disciplina para curiosos, inconformes y locos
 
15 errores comunes de ux en móviles (y cómo evitarlos)
15 errores comunes de ux en móviles (y cómo evitarlos)15 errores comunes de ux en móviles (y cómo evitarlos)
15 errores comunes de ux en móviles (y cómo evitarlos)
 
Proceso de diseño UI/UX
Proceso de diseño UI/UXProceso de diseño UI/UX
Proceso de diseño UI/UX
 
¿Por qué UX?
¿Por qué UX?¿Por qué UX?
¿Por qué UX?
 
UX en 30 Minutos
UX en 30 MinutosUX en 30 Minutos
UX en 30 Minutos
 
Hablemos de UX - José Ma. Medina, UX UI designer
Hablemos de UX - José Ma. Medina, UX UI designerHablemos de UX - José Ma. Medina, UX UI designer
Hablemos de UX - José Ma. Medina, UX UI designer
 
UX: La experiencia de diseñar la experiencia
UX: La experiencia de diseñar la experienciaUX: La experiencia de diseñar la experiencia
UX: La experiencia de diseñar la experiencia
 
Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.
 
Lean UX
Lean UXLean UX
Lean UX
 
UX Industry Survey Spain 2016 _ Highlights
UX Industry Survey Spain 2016 _ HighlightsUX Industry Survey Spain 2016 _ Highlights
UX Industry Survey Spain 2016 _ Highlights
 
Workshop UX Design [UIXCode]
Workshop UX Design [UIXCode]Workshop UX Design [UIXCode]
Workshop UX Design [UIXCode]
 
UX Mobile
UX MobileUX Mobile
UX Mobile
 
UX como estrategia Corporativa - UX2013
UX como estrategia Corporativa - UX2013UX como estrategia Corporativa - UX2013
UX como estrategia Corporativa - UX2013
 
Comunicacion 2.0 para empresas
Comunicacion 2.0 para empresasComunicacion 2.0 para empresas
Comunicacion 2.0 para empresas
 
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
OK UX #1 - Entendiendo y creando una estrategia de user experience para su em...
 
Agile UX …O Como integrar UX en equipos ágiles y no morir en el intento
Agile UX …O Como integrar UX en equipos ágiles y no morir en el intentoAgile UX …O Como integrar UX en equipos ágiles y no morir en el intento
Agile UX …O Como integrar UX en equipos ágiles y no morir en el intento
 
CAS2014 - Integrando UX & Diseño en el Desarrollo Agil - La historia dos años...
CAS2014 - Integrando UX & Diseño en el Desarrollo Agil - La historia dos años...CAS2014 - Integrando UX & Diseño en el Desarrollo Agil - La historia dos años...
CAS2014 - Integrando UX & Diseño en el Desarrollo Agil - La historia dos años...
 
Marca Personal PDF
Marca Personal PDFMarca Personal PDF
Marca Personal PDF
 
Diseño de Experiencia de Usuarios para una startup: ClerkHotel errores y acie...
Diseño de Experiencia de Usuarios para una startup: ClerkHotel errores y acie...Diseño de Experiencia de Usuarios para una startup: ClerkHotel errores y acie...
Diseño de Experiencia de Usuarios para una startup: ClerkHotel errores y acie...
 

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

Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicadaDiseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicadaSantiago Bustelo
 
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013Santiago Bustelo
 
Diseño de interaccion, accesibilidad e inclusion - 3ª Jornada del FIEDBA
Diseño de interaccion, accesibilidad e inclusion - 3ª Jornada del FIEDBADiseño de interaccion, accesibilidad e inclusion - 3ª Jornada del FIEDBA
Diseño de interaccion, accesibilidad e inclusion - 3ª Jornada del FIEDBASantiago Bustelo
 
UX Touch vs. Ouch! User Experience para dispositivos móviles - XI Encuentro...
UX Touch vs. Ouch! User Experience para dispositivos móviles - XI Encuentro...UX Touch vs. Ouch! User Experience para dispositivos móviles - XI Encuentro...
UX Touch vs. Ouch! User Experience para dispositivos móviles - XI Encuentro...Santiago Bustelo
 
Diseñando sin desperdicio: Qué podemos aprender los diseñadores de las metodo...
Diseñando sin desperdicio: Qué podemos aprender los diseñadores de las metodo...Diseñando sin desperdicio: Qué podemos aprender los diseñadores de las metodo...
Diseñando sin desperdicio: Qué podemos aprender los diseñadores de las metodo...Santiago Bustelo
 
devconchile 2015 - Introducción a UX para desarrolladores: Caso software de ...
devconchile 2015 - Introducción a UX para desarrolladores: Caso software de ...devconchile 2015 - Introducción a UX para desarrolladores: Caso software de ...
devconchile 2015 - Introducción a UX para desarrolladores: Caso software de ...Santiago Bustelo
 
Diseño de Interacción - Experiencia de usuario y negocios
Diseño de Interacción - Experiencia de usuario y negociosDiseño de Interacción - Experiencia de usuario y negocios
Diseño de Interacción - Experiencia de usuario y negociosSantiago Bustelo
 
Diseño Centrado en el Usuario - UP 25 ago 2009
Diseño Centrado en el Usuario - UP 25 ago 2009Diseño Centrado en el Usuario - UP 25 ago 2009
Diseño Centrado en el Usuario - UP 25 ago 2009Santiago Bustelo
 
Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)
Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)
Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)Santiago Bustelo
 
EL NUEVO ROL DE LOS UX EN LA INDUSTRIA PUBLICITARIA COLOMBIANA
EL NUEVO ROL DE LOS UX EN LA INDUSTRIA PUBLICITARIA COLOMBIANAEL NUEVO ROL DE LOS UX EN LA INDUSTRIA PUBLICITARIA COLOMBIANA
EL NUEVO ROL DE LOS UX EN LA INDUSTRIA PUBLICITARIA COLOMBIANAwww.usarte.co
 
Experiencia de usuario y negocios - CACE 2011 01 25
Experiencia de usuario y negocios - CACE 2011 01 25Experiencia de usuario y negocios - CACE 2011 01 25
Experiencia de usuario y negocios - CACE 2011 01 25Santiago Bustelo
 
Experiencia de usuario, experiencia del cliente
Experiencia de usuario, experiencia del clienteExperiencia de usuario, experiencia del cliente
Experiencia de usuario, experiencia del clienteSantiago Bustelo
 
Experiencia de Usuario y Política Pública: Incorporando UX a Ingeniería de s...
Experiencia de Usuario y Política Pública: Incorporando UX a Ingeniería de s...Experiencia de Usuario y Política Pública: Incorporando UX a Ingeniería de s...
Experiencia de Usuario y Política Pública: Incorporando UX a Ingeniería de s...Santiago Bustelo
 
User experience: Touch vs. tOuch!
User experience: Touch vs. tOuch!User experience: Touch vs. tOuch!
User experience: Touch vs. tOuch!Santiago Bustelo
 
Santiago Bustelo - Incorporando UX a Ingeniería de Software y Desarrollo de S...
Santiago Bustelo - Incorporando UX a Ingeniería de Software y Desarrollo de S...Santiago Bustelo - Incorporando UX a Ingeniería de Software y Desarrollo de S...
Santiago Bustelo - Incorporando UX a Ingeniería de Software y Desarrollo de S...IxDA La Plata
 
Diseño de Información Interactivo: Principios, Fundamentos y Casos - DG3 R...
Diseño de  Información Interactivo: Principios, Fundamentos y Casos - DG3 R...Diseño de  Información Interactivo: Principios, Fundamentos y Casos - DG3 R...
Diseño de Información Interactivo: Principios, Fundamentos y Casos - DG3 R...Santiago Bustelo
 
Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...
Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...
Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...Santiago Bustelo
 
Presentacion ds alumnos
Presentacion ds alumnosPresentacion ds alumnos
Presentacion ds alumnosPTF
 
Desarrollar una idea negocio pensando en el usuario.
Desarrollar una idea negocio pensando en el usuario.Desarrollar una idea negocio pensando en el usuario.
Desarrollar una idea negocio pensando en el usuario.Josafat Busio, PMP
 

Similaire à UX en proyectos de diseño y desarrollo - Gestión, procesos, roles y prácticas (20)

Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicadaDiseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
Diseño Centrado en el Usuario: UX, IxD, Usabilidad aplicada
 
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
Diseño de Interacción y usabilidad - DG3 Salomone FADU/UBA 6 may 2013
 
Diseño de interaccion, accesibilidad e inclusion - 3ª Jornada del FIEDBA
Diseño de interaccion, accesibilidad e inclusion - 3ª Jornada del FIEDBADiseño de interaccion, accesibilidad e inclusion - 3ª Jornada del FIEDBA
Diseño de interaccion, accesibilidad e inclusion - 3ª Jornada del FIEDBA
 
UX Touch vs. Ouch! User Experience para dispositivos móviles - XI Encuentro...
UX Touch vs. Ouch! User Experience para dispositivos móviles - XI Encuentro...UX Touch vs. Ouch! User Experience para dispositivos móviles - XI Encuentro...
UX Touch vs. Ouch! User Experience para dispositivos móviles - XI Encuentro...
 
Diseñando sin desperdicio: Qué podemos aprender los diseñadores de las metodo...
Diseñando sin desperdicio: Qué podemos aprender los diseñadores de las metodo...Diseñando sin desperdicio: Qué podemos aprender los diseñadores de las metodo...
Diseñando sin desperdicio: Qué podemos aprender los diseñadores de las metodo...
 
devconchile 2015 - Introducción a UX para desarrolladores: Caso software de ...
devconchile 2015 - Introducción a UX para desarrolladores: Caso software de ...devconchile 2015 - Introducción a UX para desarrolladores: Caso software de ...
devconchile 2015 - Introducción a UX para desarrolladores: Caso software de ...
 
Diseño de Interacción - Experiencia de usuario y negocios
Diseño de Interacción - Experiencia de usuario y negociosDiseño de Interacción - Experiencia de usuario y negocios
Diseño de Interacción - Experiencia de usuario y negocios
 
Diseño Centrado en el Usuario - UP 25 ago 2009
Diseño Centrado en el Usuario - UP 25 ago 2009Diseño Centrado en el Usuario - UP 25 ago 2009
Diseño Centrado en el Usuario - UP 25 ago 2009
 
Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)
Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)
Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)
 
EL NUEVO ROL DE LOS UX EN LA INDUSTRIA PUBLICITARIA COLOMBIANA
EL NUEVO ROL DE LOS UX EN LA INDUSTRIA PUBLICITARIA COLOMBIANAEL NUEVO ROL DE LOS UX EN LA INDUSTRIA PUBLICITARIA COLOMBIANA
EL NUEVO ROL DE LOS UX EN LA INDUSTRIA PUBLICITARIA COLOMBIANA
 
Experiencia de usuario y negocios - CACE 2011 01 25
Experiencia de usuario y negocios - CACE 2011 01 25Experiencia de usuario y negocios - CACE 2011 01 25
Experiencia de usuario y negocios - CACE 2011 01 25
 
Experiencia de usuario, experiencia del cliente
Experiencia de usuario, experiencia del clienteExperiencia de usuario, experiencia del cliente
Experiencia de usuario, experiencia del cliente
 
Experiencia de Usuario y Política Pública: Incorporando UX a Ingeniería de s...
Experiencia de Usuario y Política Pública: Incorporando UX a Ingeniería de s...Experiencia de Usuario y Política Pública: Incorporando UX a Ingeniería de s...
Experiencia de Usuario y Política Pública: Incorporando UX a Ingeniería de s...
 
User experience: Touch vs. tOuch!
User experience: Touch vs. tOuch!User experience: Touch vs. tOuch!
User experience: Touch vs. tOuch!
 
Santiago Bustelo - Incorporando UX a Ingeniería de Software y Desarrollo de S...
Santiago Bustelo - Incorporando UX a Ingeniería de Software y Desarrollo de S...Santiago Bustelo - Incorporando UX a Ingeniería de Software y Desarrollo de S...
Santiago Bustelo - Incorporando UX a Ingeniería de Software y Desarrollo de S...
 
Diseño de Información Interactivo: Principios, Fundamentos y Casos - DG3 R...
Diseño de  Información Interactivo: Principios, Fundamentos y Casos - DG3 R...Diseño de  Información Interactivo: Principios, Fundamentos y Casos - DG3 R...
Diseño de Información Interactivo: Principios, Fundamentos y Casos - DG3 R...
 
Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...
Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...
Metodología y Herramientas para diseñar sistemas 
de alta performance - XII J...
 
Presentacion ds alumnos
Presentacion ds alumnosPresentacion ds alumnos
Presentacion ds alumnos
 
Desarrollar una idea negocio pensando en el usuario.
Desarrollar una idea negocio pensando en el usuario.Desarrollar una idea negocio pensando en el usuario.
Desarrollar una idea negocio pensando en el usuario.
 
UX Mobile
UX MobileUX Mobile
UX Mobile
 

Plus de Santiago Bustelo

Nuestros entregables son nuestra moneda: Luchando contra 
la devaluación de UX
Nuestros entregables son nuestra moneda: Luchando contra 
la devaluación de UXNuestros entregables son nuestra moneda: Luchando contra 
la devaluación de UX
Nuestros entregables son nuestra moneda: Luchando contra 
la devaluación de UXSantiago Bustelo
 
Práctica profesional UX: ¿Qué podemos aprender de los errores del Marketing?
Práctica profesional UX: ¿Qué podemos aprender de los errores del Marketing?Práctica profesional UX: ¿Qué podemos aprender de los errores del Marketing?
Práctica profesional UX: ¿Qué podemos aprender de los errores del Marketing?Santiago Bustelo
 
UX professionalism: What can we learn from marketing's mistakes?
UX professionalism: What can we learn from marketing's mistakes?UX professionalism: What can we learn from marketing's mistakes?
UX professionalism: What can we learn from marketing's mistakes?Santiago Bustelo
 
Core Design: Incorporando UX en la educación formal de diseño
Core Design: Incorporando UX en la educación formal de diseñoCore Design: Incorporando UX en la educación formal de diseño
Core Design: Incorporando UX en la educación formal de diseñoSantiago Bustelo
 
Core Design: Taller de definición de roles, trabajo en equipo, ideación.
Core Design: Taller de definición de roles, trabajo en equipo, ideación.Core Design: Taller de definición de roles, trabajo en equipo, ideación.
Core Design: Taller de definición de roles, trabajo en equipo, ideación.Santiago Bustelo
 
Core Design: Design Research - Cómo realizar las preguntas correctas para el ...
Core Design: Design Research - Cómo realizar las preguntas correctas para el ...Core Design: Design Research - Cómo realizar las preguntas correctas para el ...
Core Design: Design Research - Cómo realizar las preguntas correctas para el ...Santiago Bustelo
 
Core Design: Taller de definición de roles, trabajo en equipo, ideación.
Core Design: Taller de definición de roles, trabajo en equipo, ideación.Core Design: Taller de definición de roles, trabajo en equipo, ideación.
Core Design: Taller de definición de roles, trabajo en equipo, ideación.Santiago Bustelo
 
Las metodologías ágiles como problema de diseño
Las metodologías ágiles como problema de diseñoLas metodologías ágiles como problema de diseño
Las metodologías ágiles como problema de diseñoSantiago Bustelo
 
Principios, procesos y herramientas UX para la enseñanza del Diseño
Principios, procesos y herramientas UX para la enseñanza del DiseñoPrincipios, procesos y herramientas UX para la enseñanza del Diseño
Principios, procesos y herramientas UX para la enseñanza del DiseñoSantiago Bustelo
 
Experiencia de Usuario: Diseñar más allá de las pantallas - GoogleLaunchPadBA
Experiencia de Usuario: Diseñar más allá de las pantallas - GoogleLaunchPadBAExperiencia de Usuario: Diseñar más allá de las pantallas - GoogleLaunchPadBA
Experiencia de Usuario: Diseñar más allá de las pantallas - GoogleLaunchPadBASantiago Bustelo
 
Design Research: How to frame the right questions for your design process
Design Research: How to frame the right questions for your design processDesign Research: How to frame the right questions for your design process
Design Research: How to frame the right questions for your design processSantiago Bustelo
 
¿Cómo ser un líder innovador en el mundo digital?
¿Cómo ser un líder innovador en el mundo digital?¿Cómo ser un líder innovador en el mundo digital?
¿Cómo ser un líder innovador en el mundo digital?Santiago Bustelo
 
Design Research: cómo realizar las preguntas correctas para el proceso de diseño
Design Research: cómo realizar las preguntas correctas para el proceso de diseñoDesign Research: cómo realizar las preguntas correctas para el proceso de diseño
Design Research: cómo realizar las preguntas correctas para el proceso de diseñoSantiago Bustelo
 
¿Cuál es la relación entre Tecnología y Diseño? XI Encuentro Latinoamericano ...
¿Cuál es la relación entre Tecnología y Diseño? XI Encuentro Latinoamericano ...¿Cuál es la relación entre Tecnología y Diseño? XI Encuentro Latinoamericano ...
¿Cuál es la relación entre Tecnología y Diseño? XI Encuentro Latinoamericano ...Santiago Bustelo
 
El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...
El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...
El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...Santiago Bustelo
 
Sobre ganarnos el respeto para hacer lo que amamos (Interaction South America...
Sobre ganarnos el respeto para hacer lo que amamos (Interaction South America...Sobre ganarnos el respeto para hacer lo que amamos (Interaction South America...
Sobre ganarnos el respeto para hacer lo que amamos (Interaction South America...Santiago Bustelo
 
Sobre ganarnos el respeto para hacer lo que amamos - UX2013 Buenos Aires
Sobre ganarnos el respeto para hacer lo que amamos - UX2013 Buenos AiresSobre ganarnos el respeto para hacer lo que amamos - UX2013 Buenos Aires
Sobre ganarnos el respeto para hacer lo que amamos - UX2013 Buenos AiresSantiago Bustelo
 
On earning respect and doing what we love - ISA13, Recife / Interaction 14, A...
On earning respect and doing what we love - ISA13, Recife / Interaction 14, A...On earning respect and doing what we love - ISA13, Recife / Interaction 14, A...
On earning respect and doing what we love - ISA13, Recife / Interaction 14, A...Santiago Bustelo
 

Plus de Santiago Bustelo (18)

Nuestros entregables son nuestra moneda: Luchando contra 
la devaluación de UX
Nuestros entregables son nuestra moneda: Luchando contra 
la devaluación de UXNuestros entregables son nuestra moneda: Luchando contra 
la devaluación de UX
Nuestros entregables son nuestra moneda: Luchando contra 
la devaluación de UX
 
Práctica profesional UX: ¿Qué podemos aprender de los errores del Marketing?
Práctica profesional UX: ¿Qué podemos aprender de los errores del Marketing?Práctica profesional UX: ¿Qué podemos aprender de los errores del Marketing?
Práctica profesional UX: ¿Qué podemos aprender de los errores del Marketing?
 
UX professionalism: What can we learn from marketing's mistakes?
UX professionalism: What can we learn from marketing's mistakes?UX professionalism: What can we learn from marketing's mistakes?
UX professionalism: What can we learn from marketing's mistakes?
 
Core Design: Incorporando UX en la educación formal de diseño
Core Design: Incorporando UX en la educación formal de diseñoCore Design: Incorporando UX en la educación formal de diseño
Core Design: Incorporando UX en la educación formal de diseño
 
Core Design: Taller de definición de roles, trabajo en equipo, ideación.
Core Design: Taller de definición de roles, trabajo en equipo, ideación.Core Design: Taller de definición de roles, trabajo en equipo, ideación.
Core Design: Taller de definición de roles, trabajo en equipo, ideación.
 
Core Design: Design Research - Cómo realizar las preguntas correctas para el ...
Core Design: Design Research - Cómo realizar las preguntas correctas para el ...Core Design: Design Research - Cómo realizar las preguntas correctas para el ...
Core Design: Design Research - Cómo realizar las preguntas correctas para el ...
 
Core Design: Taller de definición de roles, trabajo en equipo, ideación.
Core Design: Taller de definición de roles, trabajo en equipo, ideación.Core Design: Taller de definición de roles, trabajo en equipo, ideación.
Core Design: Taller de definición de roles, trabajo en equipo, ideación.
 
Las metodologías ágiles como problema de diseño
Las metodologías ágiles como problema de diseñoLas metodologías ágiles como problema de diseño
Las metodologías ágiles como problema de diseño
 
Principios, procesos y herramientas UX para la enseñanza del Diseño
Principios, procesos y herramientas UX para la enseñanza del DiseñoPrincipios, procesos y herramientas UX para la enseñanza del Diseño
Principios, procesos y herramientas UX para la enseñanza del Diseño
 
Experiencia de Usuario: Diseñar más allá de las pantallas - GoogleLaunchPadBA
Experiencia de Usuario: Diseñar más allá de las pantallas - GoogleLaunchPadBAExperiencia de Usuario: Diseñar más allá de las pantallas - GoogleLaunchPadBA
Experiencia de Usuario: Diseñar más allá de las pantallas - GoogleLaunchPadBA
 
Design Research: How to frame the right questions for your design process
Design Research: How to frame the right questions for your design processDesign Research: How to frame the right questions for your design process
Design Research: How to frame the right questions for your design process
 
¿Cómo ser un líder innovador en el mundo digital?
¿Cómo ser un líder innovador en el mundo digital?¿Cómo ser un líder innovador en el mundo digital?
¿Cómo ser un líder innovador en el mundo digital?
 
Design Research: cómo realizar las preguntas correctas para el proceso de diseño
Design Research: cómo realizar las preguntas correctas para el proceso de diseñoDesign Research: cómo realizar las preguntas correctas para el proceso de diseño
Design Research: cómo realizar las preguntas correctas para el proceso de diseño
 
¿Cuál es la relación entre Tecnología y Diseño? XI Encuentro Latinoamericano ...
¿Cuál es la relación entre Tecnología y Diseño? XI Encuentro Latinoamericano ...¿Cuál es la relación entre Tecnología y Diseño? XI Encuentro Latinoamericano ...
¿Cuál es la relación entre Tecnología y Diseño? XI Encuentro Latinoamericano ...
 
El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...
El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...
El futuro del Diseño y UX: los 15 años que se vienen (Tendencias de diseño UX...
 
Sobre ganarnos el respeto para hacer lo que amamos (Interaction South America...
Sobre ganarnos el respeto para hacer lo que amamos (Interaction South America...Sobre ganarnos el respeto para hacer lo que amamos (Interaction South America...
Sobre ganarnos el respeto para hacer lo que amamos (Interaction South America...
 
Sobre ganarnos el respeto para hacer lo que amamos - UX2013 Buenos Aires
Sobre ganarnos el respeto para hacer lo que amamos - UX2013 Buenos AiresSobre ganarnos el respeto para hacer lo que amamos - UX2013 Buenos Aires
Sobre ganarnos el respeto para hacer lo que amamos - UX2013 Buenos Aires
 
On earning respect and doing what we love - ISA13, Recife / Interaction 14, A...
On earning respect and doing what we love - ISA13, Recife / Interaction 14, A...On earning respect and doing what we love - ISA13, Recife / Interaction 14, A...
On earning respect and doing what we love - ISA13, Recife / Interaction 14, A...
 

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

  • 1. Presentación bajo licencia Creative Commons Atribución 2.5 Argentina http://creativecommons.org/licenses/by/2.5/ar 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 Universidad Tecnológica de Tucumán 13 de mayo, 2013 @sbustelo M E M B E R
  • 2. M E M B E R 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.
  • 3. Evolución en Experiencia de Usuario •M E M B E R 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
  • 4. Santiago Bustelo (@sbustelo) •M E M B E R ¿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
  • 5. Santiago Bustelo (@sbustelo) •M E M B E R Experiencias cotidianas 5
  • 6. Santiago Bustelo (@sbustelo) •M E M B E R La promesa 6 “¡Comprá tus entradas online! “¡Ahorrá tiempo! “¡Es fácil!
  • 7. Santiago Bustelo (@sbustelo) •M E M B E R 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
  • 8. Santiago Bustelo (@sbustelo) •M E M B E R 8
  • 9. Santiago Bustelo (@sbustelo) •M E M B E R 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
  • 10. Santiago Bustelo (@sbustelo) •M E M B E R 10
  • 11. Santiago Bustelo (@sbustelo) •M E M B E R 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
  • 12. Santiago Bustelo (@sbustelo) •M E M B E R 12
  • 13. Santiago Bustelo (@sbustelo) •M E M B E R 13 Bueno, no me grite
  • 14. Santiago Bustelo (@sbustelo) •M E M B E R 14
  • 15. Santiago Bustelo (@sbustelo) •M E M B E R 15 Este botón nos envía de vuelta a la home, a iniciar todo el proceso desde cero
  • 16. Santiago Bustelo (@sbustelo) •M E M B E R 16 Atiende contestador informando horario de atención
  • 17. Santiago Bustelo (@sbustelo) •M E M B E R El insulto 17 “¡Comprá tus entradas online! “¡Ahorrá tiempo! “¡Es fácil!
  • 18. Santiago Bustelo (@sbustelo) •M E M B E R 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
  • 19. Santiago Bustelo (@sbustelo) •M E M B E R Las malas experiencias ya forman parte de la cultura popular 19 XKCD: University WebsiteOffice Space (1999)
  • 20. Santiago Bustelo (@sbustelo) •M E M B E R ¿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)
  • 21. Santiago Bustelo (@sbustelo) •M E M B E R 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
  • 22. Santiago Bustelo (@sbustelo) •M E M B E R UX: ¿Quién absorbe la complejidad? 22 SQL console Usuario Sistema Búsqueda avanzada Búsqueda facetada Me siento con suerte Complejidad
  • 23. Santiago Bustelo (@sbustelo) •M E M B E R ¿A quién le toca “hacer UX”? 23
  • 28. UX: Campos Simplicidad Consistencia Marketing InterfazOferta Performance UX Involucrar a Cliente y Usuarios Involucrar a Cliente y Usuarios Involucrar a Cliente y Usuarios Tecnología UX Negocio Diseño Tecnología UX Negocio Diseño
  • 29. 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 Información UX Diseño de Interacción Análisis de negocio Desarrollo Visual Tecnología UX Negocio Diseño
  • 30. 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 Información UX Diseño de Interacción Análisis de negocio Desarrollo Visual Tecnología UX Negocio Diseño
  • 31. Funcionalidad Prototipado Versión candidata a definitiva Procesos front-end Arquitectura de Información Ing. de Usabilidad Simplicidad Consistencia Marketing Comunicaciones de Marketing Diseño estético Diseño de identidad Aspecto y comportamiento Interfaz Guía de estilo Plan de negocios Oferta Argumento comercial Performance Diseño de Interacción Diseño de InformaciónDiseño de Interacción Análisis de negocio Desarrollo Visual UX
  • 32. El universo de UX Funcionalidad Prototipado Versión candidata a definitiva Procesos front-end Arquitectura de Información Ing. de Usabilidad Simplicidad Consistencia Marketing Comunicaciones de Marketing Diseño estético Diseño de identidad Aspecto y comportamiento Interfaz Guía de estilo Plan de negocios Oferta Argumento comercial Performance Diseño de Interacción Diseño de InformaciónDiseño de Interacción Análisis de negocio Desarrollo Visual UX
  • 33. Funcionalidad Prototipado Versión candidata a definitiva Procesos front-end Arquitectura de Información Ing. de Usabilidad Simplicidad Consistencia Marketing Comunicaciones de Marketing Diseño estético Diseño de identidad Aspecto y comportamiento Interfaz Guía de estilo Plan de negocios Oferta Argumento comercial Performance Diseño de Interacción Diseño de InformaciónDiseño de Interacción Análisis de negocio Desarrollo Visual UX Tecnología UX Negocio Diseño
  • 34. Diseñar la experiencia Funcionalidad Prototipado Versión candidata a definitiva Procesos front-end Arquitectura de Información Ing. de Usabilidad Simplicidad Consistencia Marketing Comunicaciones de Marketing Diseño estético Diseño de identidad Aspecto y comportamiento Interfaz Guía de estilo Plan de negocios Oferta Argumento comercial Performance Diseño de Interacción Diseño de InformaciónDiseño de Interacción Análisis de negocio Desarrollo Visual UX Tecnología UX Negocio Diseño
  • 35. Santiago Bustelo (@sbustelo) •M E M B E R UX y Calidad 31 Usaurio Repasando algunas definiciones de Diseño de Interacción: usabilidad aplicada (2012)
  • 36. Santiago Bustelo (@sbustelo) •M E M B E R 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
  • 37. Santiago Bustelo (@sbustelo) •M E M B E R ¿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
  • 38. Santiago Bustelo (@sbustelo) •M E M B E R 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
  • 39. Santiago Bustelo (@sbustelo) •M E M B E R Midiendo la calidad de un diseño 1 2 3 4 567 891011 12 1314 15 16 17 18 19 20 21 222324 25 262728293031 35
  • 40. Santiago Bustelo (@sbustelo) •M E M B E R Midiendo la calidad de un diseño 36 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
  • 41. Santiago Bustelo (@sbustelo) •M E M B E R Comparar alternativas de manera objetiva 37 1 2 3 4 567 891011 12 1314 15 16 17 18 19 20 21 222324 25 262728293031 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
  • 42. Santiago Bustelo (@sbustelo) •M E M B E R 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) 38
  • 44. Santiago Bustelo (@sbustelo) •M E M B E R v1 v2 v1 v2 v1 v2 v1 v2 Cuantificando efectividad 40 v1 v2 v1 v2 v1 v2 v1 v2
  • 45. Santiago Bustelo (@sbustelo) •M E M B E R Eficiencia: análisis y cuantificación 41
  • 46. Santiago Bustelo (@sbustelo) •M E M B E R Un modelo para cuantificar eficiencia: KLM-GOMS Cada operación del usuario tiene un costo. 42 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)
  • 47. Santiago Bustelo (@sbustelo) •M E M B E R Satisfacción: experiencia óptima Simplificación del modelo de Mihaly Csikszentmihalyi Frustración Fluencia desafío habilidad Aburrimiento 43
  • 48. Santiago Bustelo (@sbustelo) •M E M B E R Cuantificando Satisfacción 44 RecommendGoodMean v1: 66,3 v2: 73,8 SUS - System Usability Scale
  • 49. Santiago Bustelo (@sbustelo) •M E M B E R Gestión: lograr calidad en un equipo 45
  • 50. Santiago Bustelo (@sbustelo) •M E M B E R La Calidad se declara en un equipo 46 Política de Calidad Procesos Técnicas Herramientas
  • 51. Santiago Bustelo (@sbustelo) •M E M B E R 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 47
  • 52. Santiago Bustelo (@sbustelo) •M E M B E R ¿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 48
  • 53. Santiago Bustelo (@sbustelo) •M E M B E R Un proyecto se enmarca en la triple restricción 49 COSTO TIEMPO 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
  • 54. Santiago Bustelo (@sbustelo) •M E M B E R No se puede tocar una variable sola… 50 TIEMPO COSTO ALCANCE extensión de alcance Calidad
  • 55. Santiago Bustelo (@sbustelo) •M E M B E R …a menos que estiremos creativamente… 51 TIEMPO COSTO ALCANCE Calidad
  • 56. Santiago Bustelo (@sbustelo) •M E M B E R – = …y tengamos la suerte de que nadie lo note 52 Gestión del proyecto: • Andamiaje, soporte • Observar la triple restricción durante la duración del proyecto Calidad perdida TIEMPO COSTO ALCANCE Calidad
  • 57. Santiago Bustelo (@sbustelo) •M E M B E R Proceso lineal 1. Definición de requerimientos. 2. Diseño y desarrollo a nivel de producción. 3. Entrega. 53
  • 58. Santiago Bustelo (@sbustelo) •M E M B E R 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 una o ambas partes. 54
  • 59. Santiago Bustelo (@sbustelo) •M E M B E R ¿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 55
  • 60. Santiago Bustelo (@sbustelo) •M E M B E R • 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 56 El proceso modela el resultado.
  • 61. Santiago Bustelo (@sbustelo) •M E M B E R Proceso convergente 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. 57
  • 62. Santiago Bustelo (@sbustelo) • M E M B E R 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. 58
  • 63. Santiago Bustelo (@sbustelo) •M E M B E R Diseñar la experiencia vs. soluciones mágicas 59 “ 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
  • 64. Santiago Bustelo (@sbustelo) •M E M B E R Disciplinas y prácticas 60
  • 65. Santiago Bustelo (@sbustelo) •M E M B E R Niveles de decisión 61 Jared Spool: Anatomy of design decisions Trucos Técnicas Procesos Metodología Dogma Toma de decisiones informal Toma de decisiones basada en reglas y fe
  • 66. Santiago Bustelo (@sbustelo) •M E M B E R Factores que componen UX 62 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
  • 67. Santiago Bustelo (@sbustelo) •M E M B E R • 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 63
  • 68. Santiago Bustelo (@sbustelo) •M E M B E R Arquitectura de Información (IA, Information Architecture) 64 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
  • 69. Santiago Bustelo (@sbustelo) •M E M B E R Relevamiento: entender al usuario, mucho más que simplemente preguntar 65 • Lo que pide no es lo que quiere • Lo que quiere no es lo que necesita
  • 70. Santiago Bustelo (@sbustelo) •M E M B E R Entender al usuario: mucho más que simplemente escuchar 66 Pide Reactivo Quiere Proactivo Necesita Creativo
  • 71. Santiago Bustelo (@sbustelo) •M E M B E R ¿Qué necesitamos saber para lograr un buen producto? 67 • 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.
  • 72. Santiago Bustelo (@sbustelo) •M E M B E R Técnicas de relevamiento Entrevistas, Focus group Card sorting Mapeo Conceptual Construcción de Personas/Arquetipos Pruebas de usabilidad Prototipado iterativo Relevamiento Contextual 68 PIDE QUIERE NECESITA
  • 73. Santiago Bustelo (@sbustelo) •M E M B E R Analizar el comportamiento, no el discurso 69 X Foto: National Chiao Tung University
  • 74. Santiago Bustelo (@sbustelo) •M E M B E R Card Sorting 70
  • 75. Santiago Bustelo (@sbustelo) •M E M B E R Mapeo conceptual 71 Foto: Craig Duncan, United Nations
  • 76. Santiago Bustelo (@sbustelo) •M E M B E R 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. 72 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”.
  • 77. Santiago Bustelo (@sbustelo) •M E M B E R Pruebas de usabilidad 73
  • 78. Santiago Bustelo (@sbustelo) •M E M B E R 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. 74 Usabilityproblemsfound 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
  • 79. Santiago Bustelo (@sbustelo) •M E M B E R Prototipado iterativo 75
  • 80. Santiago Bustelo (@sbustelo) •M E M B E R Prototipado iterativo 76
  • 81. Santiago Bustelo (@sbustelo) •M E M B E R 77 Netbook escolar Bebé Relevamiento contextual llamadas al fijo y celular Fuera de cámara: hijos (4 y 7 años)
  • 82. Santiago Bustelo (@sbustelo) •M E M B E R 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. 78 Caso típico de un software que no logra superar y absorber las alternativas.
  • 83. Santiago Bustelo (@sbustelo) •M E M B E R Roles y áreas 79
  • 84. Santiago Bustelo (@sbustelo) •M E M B E R Cliente Área Comercial Jefes de proyecto Desarrolladores Usuarios Modelo clásico 80
  • 85. Santiago Bustelo (@sbustelo) •M E M B E R Roles en un proyecto simple 81 Requerimientos Entregables Cliente Proveedor
  • 86. Santiago Bustelo (@sbustelo) •M E M B E R …y la forma en que frecuentemente escalan 82 “Esa manga de inútiles”“Esos cretinos”
  • 87. Santiago Bustelo (@sbustelo) •M E M B E R Producto que se inflige al mercado Mientras tanto, fuera de la burbuja… 83 “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
  • 88. Santiago Bustelo (@sbustelo) •M E M B E R Recuperando la cordura 84 Interlocutor del Equipo Desarrolladores Diseñadores Contenidistas Requerimientos Entregables Interlocutor del Cliente Patrocinadores Clientes Usuarios
  • 89. Santiago Bustelo (@sbustelo) •M E M B E R 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.” 85
  • 90. Santiago Bustelo (@sbustelo) •M E M B E R 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. 86
  • 91. Santiago Bustelo (@sbustelo) •M E M B E R 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. 87
  • 92. Santiago Bustelo (@sbustelo) •M E M B E R 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. 88
  • 93. Santiago Bustelo (@sbustelo) •M E M B E R Equipo de diseño y desarrollo de UX: roles con áreas solapadas 89 Ben Melbourne: The difference between a UX Designer and UI Developer
  • 94. Santiago Bustelo (@sbustelo) •M E M B E R 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? 90
  • 95. Santiago Bustelo (@sbustelo) •M E M B E R Caso real: Rediseño de Guía Oleo 91
  • 96. Santiago Bustelo (@sbustelo) •M E M B E R 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. 92
  • 97. Santiago Bustelo (@sbustelo) •M E M B E R Interfaz original 93
  • 98. Santiago Bustelo (@sbustelo) •M E M B E R Interfaz original 94
  • 99. Santiago Bustelo (@sbustelo) •M E M B E R Interfaz original 95
  • 100. Santiago Bustelo (@sbustelo) •M E M B E R Interfaz original 96
  • 101. Santiago Bustelo (@sbustelo) •M E M B E R Diseño y desarrollo en sprints Sprint 0 Relevamiento Pruebas usabilidad Análisis Exploración Sprints 1 - N IxD Diseño de interfaz Arq. de Información Pruebas usabilidad Sprints 1-N: desarrollo Desarrollo de la interfaz: HTML, CSS, JavaScript • Kickoff Marco del proyecto: alcance, plazos y responsables Nivel de detalle de las decisiones UX Estrategia Desarrollo 97
  • 102. Santiago Bustelo (@sbustelo) •M E M B E R 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. 98
  • 103. Santiago Bustelo (@sbustelo) •M E M B E R 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. 99
  • 104. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 1: prototipos iniciales 100
  • 105. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 1: prototipos iniciales 101
  • 106. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 1: pruebas de usabilidad, prototipo en papel 102
  • 107. Santiago Bustelo (@sbustelo) •M E M B E R 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 103
  • 108. Santiago Bustelo (@sbustelo) •M E M B E R 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. 104
  • 109. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 2: Prototipos avanzados 105
  • 110. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 2: Prototipos avanzados 106
  • 111. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 2: Prototipos avanzados 107
  • 112. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 2: pruebas de usabilidad 108
  • 113. Santiago Bustelo (@sbustelo) •M E M B E R 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. 109
  • 114. Santiago Bustelo (@sbustelo) •M E M B E R 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. 110
  • 115. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 3: Diseño final 111
  • 116. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 3: Diseño final 112
  • 117. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 3: Diseño final 113
  • 118. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 3: Pruebas de usabilidad, prototipo HTML 114
  • 119. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 3: Diseño final 115
  • 120. Santiago Bustelo (@sbustelo) •M E M B E R Sprint 3: Diseño final 116
  • 121. Santiago Bustelo (@sbustelo) •M E M B E R 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. 117
  • 122. ¡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 M E M B E R
  • 123. w w w . k a m b r i c a . c o m