devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión
-
Upload
santiago-bustelo -
Category
Technology
-
view
2.427 -
download
0
Transcript of devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión
![Page 1: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/1.jpg)
User ExperienceIntroducción a UX para desarrolladoresCaso: Software de Gestión
Santiago BusteloUser Experience Director, KambricaIxDA Buenos Aires Local Group Coordinator
M E M B E R
Obra bajo licencia Creative Commons Reconocimiento 4.0 Internacional
![Page 2: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/2.jpg)
M E M B E R
Me presento…
• Santiago Bustelo, diseñador de interacción.
• Fundador y Director de UX, Kambrica.
• Fundador y Coordinador IxDA Buenos Aires. Coordinador Regional de IxDA en Latinoamérica 2010-2015.
• 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.
![Page 3: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/3.jpg)
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 80.000 miembros, 175 grupos locales, 39 grupos en América Latina.
• En Chile:
• Santiago: ixdasantiago.cl• Viña del mar, Valparaiso (V), Chile:
Facebook > IxDA Viña del Mar
3
ixda.org
![Page 4: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/4.jpg)
Santiago Bustelo // @kambrica •M E M B E R
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
![Page 5: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/5.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Facetas de la Experiencia de Usuario
5
Peter Morville, Facets of the User Experience (2004)
útil
deseable
valioso
accesible
creíble
encontrable
usable
![Page 6: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/6.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Factores que componen UX
6
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.
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
Espacio de diseño
Impacto
Espacio de relevamiento
![Page 7: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/7.jpg)
Santiago Bustelo // @kambrica •M E M B E R
•Diseño de Experiencias (UX)
•Dirigir lo que experimenta una persona en todos sus puntos de contacto con un producto, sistema o servicio.
•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
7
![Page 8: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/8.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Caso de ejemplo y proceso de diseño centrado en el usuario
8
![Page 9: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/9.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Parte 1: Diseñando desde la caverna
9
Verónica Traynor: UX y la caverna de Platón
![Page 10: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/10.jpg)
Santiago Bustelo // @kambrica •M E M B E R
• Producto: Software de administración de un videoclub
• Nuestros personajes:
Caso de ejemplo
10
Programadorcavernario
Diseñadorcavernario
Emprendedorcavernario
Iconos: FastIcon
![Page 11: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/11.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Programador cavernario
• 3 entidades
• Películas: Datos
• Clientes: Datos
• Alquileres: Relaciones
• Operaciones
• Alta, baja, modificación y consulta para cada entidad
Ejemplo desarrollado por Diego González, Fundador Lagash Systems
11
![Page 12: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/12.jpg)
![Page 13: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/13.jpg)
![Page 14: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/14.jpg)
![Page 15: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/15.jpg)
1234
![Page 16: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/16.jpg)
1234
![Page 17: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/17.jpg)
1234
Gonzalez
![Page 18: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/18.jpg)
GonzalezDiego760 Rivadavia 5000 11 B Buenos Aires 12
![Page 19: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/19.jpg)
1234
1
![Page 20: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/20.jpg)
No hay stock.
![Page 21: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/21.jpg)
![Page 22: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/22.jpg)
![Page 23: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/23.jpg)
![Page 24: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/24.jpg)
1
![Page 25: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/25.jpg)
1235
1
![Page 26: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/26.jpg)
![Page 27: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/27.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Diseñador cavernario
• Metáforas
• Películas: DVDs
• Clientes: Fichas
• Alquileres: Ficha + DVD
• Representación
• Experiencia inmersiva
• Fotorealismo
27
![Page 28: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/28.jpg)
![Page 29: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/29.jpg)
![Page 30: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/30.jpg)
![Page 31: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/31.jpg)
![Page 32: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/32.jpg)
![Page 33: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/33.jpg)
![Page 34: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/34.jpg)
![Page 35: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/35.jpg)
![Page 36: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/36.jpg)
![Page 37: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/37.jpg)
![Page 38: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/38.jpg)
![Page 39: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/39.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Emprendedor cavernario
• Relevamiento competitivo
• Definición del mercado
• Especificación
• Recursos y plan de trabajo
• ????
• Profit!
39
![Page 40: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/40.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Relevamiento competitivo
40
freemium
![Page 41: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/41.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Relevamiento competitivo
41
screencast
![Page 42: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/42.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Relevamiento competitivo
42
amigable
touch
![Page 43: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/43.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Definición del mercado
43
Foto: Ned Raggett Foto: Andrés Rueda
![Page 44: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/44.jpg)
Santiago Bustelo // @kambrica •M E M B E R
“Especificación” para diseño y desarrollo
44
✓ Más potente y con más funciones que la competencia.
✓ Gestión de uno o múltiples locales.
✓ Informes y estadísticas.
✓ Cálculo automático de recargos.
✓ Módulo avanzado de búsquedas.
✓ Tipos de artículos y formatos configurables.
✓ Módulo de Promociones.
✓ Sistema de premios y puntos de cliente.
✓ Soporte de lectores de códigos de barras.
✓ Módulo de diseño de catálogos.
✓ Módulo de diseño de páginas web.
✓ Control de envíos y retiros a domicilio (delivery) con emisión de ticket de retiro.
✓ Creación de abonos de alquiler con fecha de vencimiento.
✓ Módulo de envío de catálogo por e-mail a socios.
✓ Interfaz amigable y fácil de usar.
![Page 45: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/45.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Recursos y “metodología”
45
Ejerce
r pres
ión Ejercer presión
![Page 46: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/46.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Expectativa
46
En 3 meses
Foto: Wikipedia
![Page 47: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/47.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Resultado
47
Después de 1 año
Foto: Wikipedia
![Page 48: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/48.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Parte 2: Saliendo de la caverna
48
![Page 49: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/49.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Experiencia de Usuario y Usabilidadcomo Calidad
• Son atributos cualitativos intrínsecos al producto
• Como la performance, no se pueden “agregar”.
• Son afectados por todos los que construyen el producto.
• Siempre ocurren
• A un producto no le “falta” UX o usabilidad. En todo caso, su diseño o usabilidad son malos.
• Hay experiencias intencionales… y experiencias que se cometen
49
![Page 50: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/50.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Calidad y Cuantificación
• “Calidad es lo que nuestros usuarios valoran.Todo lo demás es desperdicio”(Lean Software Development)
• Cuantificar nos permite:
• Comparar alternativas y progresode manera objetiva
• Análisis en lugar de opiniones
• Identificar y priorizar áreas de oportunidad
50
![Page 51: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/51.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Cuantificación: KLM-GOMS
Cada operación del usuario tiene un costo.
51
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)
![Page 52: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/52.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Cuantificación:Buscar cliente (v. programador)
52
Inicio tarea: 1,35Mover mano al mouse: 0,40
Proxima tarea: 1,35Apuntar menu Clientes: 1,10
click menu Clientes: 0,20Apuntar menú Clientes »
Modificación: 1,10click menú Clientes » Modificación:
0,20Próxima tarea: 1,35
Apuntar campo texto: 1,10click campo texto: 0,20
Mover mano al teclado: 0,40Proxima tarea: 1,35
Tipear apellido: 1,60Mover mano al mouse: 0,40
Proxima tarea: 1,35point OK: 1,10click OK: 0,20
Obtuvimos (o no) el dato:
14.75 segundos
Recuperación:Mover mano al mouse: 0,40
Proxima tarea: 1,35point Cancel: 1,10click Cancel: 0,20
Volvemos a abrir el cuadro, Tipeamos apellido otra vez: 12,32
Mover mano al mouse: 0,40Proxima tarea: 1,35
apuntarOK: 1,10click OK: 0,20
Total con recuperación:
32,55 segundos
![Page 53: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/53.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Cuantificación:Buscar cliente (v. diseñador)
53
Inicio tarea: 1,35Apuntar al fichero home: 1,10
Click Fichero home: 0,20Animación "files, lots of files¨: 4
Proxima tarea: 1,35Apuntar boton prox serie ficheros:
1,10Click proxima serie ficheros: 0,20
Animación serie de ficheros: 1Prox tarea: 1,35
Apuntar fichero "G": 1,10Click fichero "G": 0,20
Animación fichero G: 2
Proxima tarea: 1,35Leer etiquetas x 4: 5,40
Proxima tarea: 1,35Apuntar GON: 1,10
Click GON: 0,20Animación Cajón GON: 2
Proxima tarea: 1,35Leer Apellido, Nombre x 5: 6,75
Proxima tarea: 1,35Apuntar Gonzalez, Diego: 1,10
Click Gonzalez, Diego: 0,20
Obtuvimos la ficha:
28.10 segundos
Beneficio eliminar animaciones:9 segundos
Total sin animaciones:
19,1 segundos
![Page 54: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/54.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Caso Centrado en el Usuario
• Objetivos antes que requerimientos
• Proceso iterativo
• Construir prototipos
• Medir, validar con usuarios
• Aprender, ajustar, mejorar hasta lograr objetivos
54
Usaurio
Ideas
ProductoDatos
CONSTRUIR
OBSERVAR,MEDIR,
VALIDAR
APRENDER
![Page 55: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/55.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Casos de uso: hipótesis inicial
55
• Modalidad de atención: mostrador, teléfono y buzón
• Búsqueda de clientes y títulos
• Alta de un cliente
• Alta de nueva película
• Cliente alquila más de una película
• Cliente devuelve películas y alquila otras
• Carga de devoluciones de buzón
• Copia dañada
• Reporte de atrasos
![Page 56: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/56.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Resultados del Relevamiento(un videoclub, dos usuarios)
• No tomamos requerimientos de los usuarios.Nos enfocamos en lo que los usuarios hacen.
• Procesos y problemas reales del negocio
• Gestión actual, áreas de mejora
• Aprox. 5000 clientes y 5000 películas
• Los clientes casi nunca saben el Nro. de Cliente, menos aún cuando no son titulares
• Se dan de alta 10 a 20 títulos por día, con datos mínimos
• Cargar devoluciones de buzón puede llevar toda la mañana
• Muchas copias para una película
• No se dan clientes de baja
56
![Page 57: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/57.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Priorización y estrategia de versiones
57
v. 1.0 v. 2.0 v. 3.0 v. 4.0 v. 5.0 v. 6.0
![Page 58: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/58.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Casos de uso reales y priorizados
58
• Modalidad de atención: mostrador, teléfono
• Búsqueda de clientes: por nombre del titular, dirección o teléfono.
• Búsqueda de copias: por título o código
• Alta o modificación de un cliente
• Editar película: ABM copias, “baja” si no hay copias
• Cliente alquila hasta 3 películas
• Cliente devuelve hasta 3 películas
• Cliente devuelve hasta 3 películas y alquila hasta 3
• Alta de 20 nuevos títulos, asignación de copias
• Modalidad de atención: buzón
• Carga de 40 devoluciones de buzón
• Copia dañada
• Listado de películas por géneros / estrenos
• Reporte de atrasos
• ¿Qué temporadas vio el cliente?
• Se desordena fila en mostrador
![Page 59: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/59.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Idea: Sistema centrado en la Búsqueda
• ¿Un campo con dos botones?
• ¿Un campo con dos radio buttons y botón “Buscar”?
• ¿Dos campos de búsqueda?
• Tal vez funcione, empezamos un prototipo…
59
![Page 60: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/60.jpg)
Sistema con dos campos de búsqueda
60
![Page 61: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/61.jpg)
Sistema con dos campos de búsqueda
61
![Page 62: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/62.jpg)
Sistema con dos campos de búsqueda
62
![Page 63: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/63.jpg)
Sistema con dos campos de búsqueda
63
![Page 64: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/64.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Propuesta: un solo campo de búsqueda
64
• Resultado dependiente del contenido.No hace falta especificar el tipo de dato.
• Ventajas del patrón Instant Search
• Mínimo input
• Corrección sobre la marcha
• Podemos usar [enter] para próxima acción: el proceso es predecible en base a los datos
• Necesitamos prueba de concepto
![Page 65: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/65.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Prueba de concepto
65
Prueba de concepto publicada enhttp://kambrica.com/raf08
![Page 66: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/66.jpg)
![Page 67: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/67.jpg)
![Page 68: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/68.jpg)
![Page 69: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/69.jpg)
![Page 70: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/70.jpg)
![Page 71: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/71.jpg)
![Page 72: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/72.jpg)
![Page 73: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/73.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Cuantificación: Búsqueda 2.0
Inicio tarea: 1,35Mover mano al mouse: 0,40
Proxima tarea: 1,35apuntar Buscar: 1,10
click Buscar: 0,20Mover mano al teclado: 0,40
Proxima tarea: 1,35Tipear 3 caratacteres apellido: 0,60
Proxima tarea: 1,35Tipar espacio: 0,20Proxima tarea: 1,35
Tipear 3 caracteres nombre: 0,60
Total: 10,25 segundos
Beneficio de mantener foco en búsqueda: 4,80 segundos
Total manteniendofoco en búsqueda:
5,45 segundos
73
![Page 74: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/74.jpg)
Santiago Bustelo // @kambrica •M E M B E R
• Evitar uso del mouse
• Modelo unificado y consistente
• Metáforas / Referencias: Mail, address book
• Sujeto + verbo
• No intrusivo
• Diseño respetando Guías de diseño de interfaz de Windows Vista / Windows 7
Bases del diseño
74
![Page 75: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/75.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Esquema
75
Funciones secundarias
listadopelículas
alquiler
listadoclientes
detalle película
listado copiasSeleccionar copia
Copias + Cliente =
Ficha Cliente
Seleccionarpelícula
Buscar peliculas o clientes
![Page 76: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/76.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Buscar peliculas o clientes
Películas
Alquiler: 3 películas
La Rosa Púrpura del CairoWoody Allen
La Rosa Púrpura del CairoWoody Allen
La Rosa Púrpura del CairoWoody Allen
La Rosa Púrpura del CairoWoody Allen
Santiago Bustelo 32 años4123-4567
Diego González 32 años4123-4567
Santiago Bustelo 32 años4123-4567
Diego González 32 años4123-4567
Diego González 32 años4123-4567Juan de los Palotes 1638Deuda $67
Clientes
Activar Cliente
+
+
Alquilar a Diego González
78079
78079
78079
78079
78079
78079
78079
78079
78079
ReservarRelacionadas
78079
78079
78079
78079
La Rosa Púrpura del Cairo (1985)The Purple Rose of Cairo
La Rosa Púrpuradel Cairo#78909
Mia FarrowJeff DanielsDanny AielloIrving MetzmanStephanie Farrow
Actores
Woody AllenDirectorSátira, Comedia, Woody AllenGéneros
1 hora 22 minutosDuración
La Rosa Púrpuradel Cairo#78909
La Rosa Púrpuradel Cairo
El ciudadanoEterno resplandor de una mente...Yo sé que tu sabes que yo sé
reservada
Mockup avanzado
76
![Page 77: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/77.jpg)
Santiago Bustelo // @kambrica •M E M B E R
77
Mockup final
![Page 78: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/78.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Caso: Cliente devuelve y alquila
• Anticipación, no es necesario buscar al cliente
• Minimizar input y pasos
• Permitir operaciones en cualquier orden
78
![Page 79: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/79.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Cliente devuelve y alquila
79
![Page 80: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/80.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Cliente devuelve y alquila
80
![Page 81: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/81.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Cliente devuelve y alquila
81
![Page 82: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/82.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Cliente devuelve y alquila
82
![Page 83: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/83.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Caso: Devolución de 40 películas
• Soportar un proceso de lotes con el mismo modelo de interacción
83
![Page 84: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/84.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Devolución de 40 películas
84
![Page 85: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/85.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Devolución de 40 películas
85
![Page 86: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/86.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Devolución de 40 películas
86
![Page 87: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/87.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Devolución de 40 películas
87
![Page 88: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/88.jpg)
Santiago Bustelo // @kambrica •M E M B E R
Resultados
Tarea 1.0 2.0 %
Búsqueda 15 a 33 seg. 5.45 seg. 175 a 500 %
Alta de 20 nuevas películas 1.543 seg. 204 seg. 656%
Cliente devuelve y alquila 52 a 87 seg. 7.80 seg. 566%
Buzón 40 devoluciones 636 seg. 156 seg. 300%
Notificación de 9 atrasos 10 a 15 min.? 7 seg. 8400%
88
![Page 89: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/89.jpg)
Santiago Bustelo // @kambrica •M E M B E R
• No hay Experiencia de Usuario sin usuarios
• Proceso iterativo de análisis y diseño centrado en la operación del usuario
• Bases racionales, cuantificación, calidad
• Obtener producto como resultado de un proceso, y satisfaciendo metas
Conclusiones
89
![Page 90: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/90.jpg)
18 al 21 de Noviembre 2015 Córdoba, Argentina
isa.ixda.org
![Page 91: devconchile 2015 - Introducción a UX para desarrolladores: Caso software de gestión](https://reader034.fdocumento.com/reader034/viewer/2022050613/588201e71a28abf05e8b4d63/html5/thumbnails/91.jpg)
w w w . k a m b r i c a . c o m