![Page 1: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/1.jpg)
Diseño de Interacción: usabilidad aplicadaSantiago BusteloDirector de diseño, KambricaIxDA Central and South America Regional Coordinator
Tucumán Valley: Diseño de Interfaces16 de mayo, 2012
Presentación bajo licencia Creative CommonsAtribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/ar
@sbustelo
MEMBER
![Page 2: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/2.jpg)
MEMBER
Me presento…
• Santiago Bustelo, diseñador de interacción.• Fundador y Director de Diseño, Kambrica.
• Fundador y Coordinador IxDA Buenos Aires y Coordinador Regional de IxDA en Latinoamérica. Organizador de los principales eventos de UX en Argentina desde 2010 y de Interaction South America 2014.
• Desde 1997 he participado en proyectos de diseño y desarrollo para Microsoft, Staples, Coca-Cola, HP, TetraPak, MetLife, HSBC, Telefónica, Jumbo, Molinos, Banco Santander, Bumeran.com, Guía Óleo y Universidad de Stanford, entre otros.
• He dictado presentaciones y talleres sobre Usabilidad, Diseño de Interacción y Experiencia de Usuario (UX) desde el año 2001 en Argentina, Brasil, Colombia, EEUU, Canadá, Irlanda y Holanda.
![Page 3: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/3.jpg)
Evolución en Experiencia de Usuario •MEMBER
IxDA (Interaction Design Association)
• Organización abierta, voluntaria y gratuita, con la misión de liberar a la condición humana de las malas experiencias que la desafían, avanzando la disciplina de Diseño de Interacción.
• Foro global, más de 76.000 miembros, 160 grupos locales, 36 grupos en América Latina.
• En Argentina:• Buenos Aires: ixda.com.ar• Córdoba: ixdaCba.com.ar• Corrientes / Resistencia:
facebook/IxdaCorrientesResistencia• La Plata: ixdaLaPlata.com.ar• Mar del Plata: @IxDAMDQ• Mendoza: ixdaMza.com.ar• Rosario: ixdaRosario.com.ar• Tucumán: ixdaTucuman.com.ar
3
ixda.org
![Page 4: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/4.jpg)
Diseño de Interacción •MEMBER
• Diseño de Experiencias (UX)
• 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
UX y Diseño: definir cómo es, cómo funciona y cómo luce un producto digital
4
![Page 5: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/5.jpg)
Diseño de Interacción •MEMBER
Funciones del diseño
Información
Presentación
Uso
5
![Page 6: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/6.jpg)
Diseño de Interacción •MEMBER
Sitios inspiradores vs. sitios que usamos
6
![Page 7: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/7.jpg)
Diseño de Interacción •MEMBER
Forma versus Función
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
7
![Page 8: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/8.jpg)
![Page 9: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/9.jpg)
Diseño de Interacción •MEMBER
Forma y Función
9
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
![Page 10: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/10.jpg)
![Page 11: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/11.jpg)
Diseño de Interacción •MEMBER
• La usabilidad de una interfaz es una medida de la efectividad, eficiencia y satisfacción con la cual determinados usuarios pueden alcanzar determinados objetivos en un entorno particular con dicha interfaz.(ISO 9241, Requerimientos ergonómicos para trabajo de oficina con terminales visuales, Parte 11 - 1997)
Usabilidad
11
![Page 12: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/12.jpg)
Efectividad: Incorporando al usuario
![Page 13: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/13.jpg)
Diseño de Interacción •MEMBER
Eficiencia: análisis y cuantificación
13
![Page 14: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/14.jpg)
Diseño de Interacción •MEMBER
Satisfacción: experiencia óptima
Simplificación del modelo de Mihaly Csikszentmihalyi
Frustración
Fluencia
desafío
habilidad
Aburrimiento
14
![Page 15: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/15.jpg)
Diseño de Interacción •MEMBER
Proceso de diseñoy caso de ejemplo
15
![Page 16: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/16.jpg)
Diseño de Interacción •MEMBER
• Producto: Software de administración de un videoclub
• Nuestros personajes:
Caso de ejemplo
16
Programadorcavernario
Diseñadorcavernario
Emprendedorcavernario
Iconos: FastIcon
![Page 17: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/17.jpg)
Diseño de Interacción •MEMBER
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
17
![Page 18: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/18.jpg)
![Page 19: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/19.jpg)
![Page 20: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/20.jpg)
![Page 21: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/21.jpg)
1234
![Page 22: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/22.jpg)
1234
![Page 23: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/23.jpg)
1234
Gonzalez
![Page 24: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/24.jpg)
GonzalezDiego760 Rivadavia 5000 11 B Buenos Aires 12
![Page 25: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/25.jpg)
1234
760
![Page 26: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/26.jpg)
No hay stock.
![Page 27: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/27.jpg)
![Page 28: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/28.jpg)
![Page 29: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/29.jpg)
![Page 30: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/30.jpg)
760
![Page 31: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/31.jpg)
1235
760
![Page 32: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/32.jpg)
![Page 33: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/33.jpg)
Diseño de Interacción •MEMBER
Diseñador cavernario
• Metáforas
• Películas: DVDs
• Clientes: Fichas
• Alquileres: Ficha + DVD
• Representación
• Experiencia inmersiva
• Fotorealismo
33
![Page 34: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/34.jpg)
![Page 35: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/35.jpg)
![Page 36: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/36.jpg)
![Page 37: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/37.jpg)
![Page 38: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/38.jpg)
![Page 39: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/39.jpg)
![Page 40: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/40.jpg)
![Page 41: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/41.jpg)
![Page 42: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/42.jpg)
![Page 43: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/43.jpg)
![Page 44: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/44.jpg)
![Page 45: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/45.jpg)
Diseño de Interacción •MEMBER
Emprendedor cavernario
• Relevamiento competitivo
• Definición del mercado
• Especificación
• Recursos y plan de trabajo
• ????
• Profit!
45
![Page 46: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/46.jpg)
Diseño de Interacción •MEMBER
Relevamiento competitivo46
freemium
![Page 47: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/47.jpg)
Diseño de Interacción •MEMBER
Relevamiento competitivo47
screencast
![Page 48: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/48.jpg)
Diseño de Interacción •MEMBER
Relevamiento competitivo
48
amigable
touch
![Page 49: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/49.jpg)
Diseño de Interacción •MEMBER
Definición del mercado
49
Foto: Ned Raggett Foto: Andrés Rueda
![Page 50: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/50.jpg)
Diseño de Interacción •MEMBER
“Especificación” para diseño y desarrollo
50
✓ 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 51: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/51.jpg)
Diseño de Interacción •MEMBER
Recursos y “metodología”
51
Ejerce
r pres
ión Ejercer presión
![Page 52: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/52.jpg)
Diseño de Interacción •MEMBER
Expectativa52
En 3 meses
Foto: Wikipedia
![Page 53: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/53.jpg)
Diseño de Interacción •MEMBER
Resultado53
Después de 1 año
Foto: Wikipedia
![Page 54: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/54.jpg)
Diseño de Interacción •MEMBER
¿Qué tienen estos tres casos en común?
54
• Diseño sin intención / autoreferencial
• El usuario final no participa del proceso
• Proceso lineal
• Falta de metodología
• Falta de política de calidad
![Page 55: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/55.jpg)
Diseño de Interacción •MEMBER
Diseño y Usabilidad
• Siempre ocurren
• A un producto no le “falta” diseño o usabilidad.En todo caso, su diseño o usabilidad son malos.
• Son atributos cualitativos intrínsecos al producto
• Como la performance, no se pueden “agregar”.
• Son definidos por el elemento más débil y afectados por todos los que construyen el producto.
55
![Page 56: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/56.jpg)
Diseño de Interacción •MEMBER
Proceso lineal
1. Definición de requerimientos.
2. Diseño y desarrollo a nivel de producción.
3. Entrega.
56
![Page 57: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/57.jpg)
Diseño de Interacción •MEMBER
Proceso lineal interminable
1. Definición de requerimientos.
2. Diseño y desarrollo a nivel de producción.
3. Entrega.
4. No es lo que el cliente o el usuario querían,retrocede tres casilleros.
5. Se repite hasta el hartazgo de unao ambas partes.
57
![Page 58: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/58.jpg)
Diseño de Interacción •MEMBER
¿Cuándo está terminado nuestro trabajo?
• Cuando nos gusta a nosotros
• Cuando funciona como queríamos
• Cuando le gusta al cliente
• Cuando el usuario logra lo que esperábamos
58
![Page 59: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/59.jpg)
Diseño de Interacción •MEMBER
• Problemas bien definidos
• Algoritmos
• Resolución lineal
• Metodología estructurada
• Foco en análisis y documentación
• Problemas dinámicos
• Heurísticas
• Resolución asintótica
• Metodología ágil
• Foco en entregables
Entender el tipo de problema
59
El proceso modela el resultado.
![Page 60: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/60.jpg)
Diseño de Interacción •MEMBER
Proceso convergente
1. Objetivos y análisis inicial.
2. Diseño y desarrollo en iteracionesavanzando y validando progresivamente:
• Funcionalidad
• Estructura y elementos
• Lenguaje visual
3. Entrega y puesta en producción.
4. Iteración de todo el proceso.
60
![Page 61: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/61.jpg)
Diseño de Interacción •MEMBER
Incorporando UX a nuestro ejemplo
61
![Page 62: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/62.jpg)
Diseño de Interacción •MEMBER
Diseño Centrado en el Usuario
• Filosofía de diseño:
• Creación de productos que resuelvan necesidades concretas de sus usuarios finales, consiguiendo la mayor satisfacción y mejor experiencia de uso posible con el mínimo esfuerzo de su parte.
• Proceso de diseño:
• Conocer a fondo a los usuarios finales reales.
• Diseñar un producto que resuelva sus necesidades y se ajuste a sus capacidades, expectativas y motivaciones.
• Poner a prueba lo diseñado.
62
![Page 63: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/63.jpg)
Diseño de Interacción •MEMBER
Caso Centrado en el Usuario
• Proceso de diseño y desarrollo convergente e iterativo
• Evaluación competitiva, identificación de oportunidades
• Definición preliminar del modelo
• Validación y ajuste del modelo con usuarios
• Priorización y estrategia de versiones
• Prototipado de la interfaz
• Pruebas con usuarios y ajuste de prototipos
• Metodología ágil
• Pruebas de usabilidad y QA antes de cada lanzamiento
63
Usaurio
![Page 64: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/64.jpg)
Diseño de Interacción •MEMBER
¿Qué es Calidad?
• “La Calidad de un producto es una función del bien que hace al mundo” (Tom DeMarco)
• Calidad = Resultados del esfuerzo / Costos totales (W. Edwards Deming)
• “Calidad es lo que nuestros usuarios valoran. Todo lo demás es desperdicio” (Lean Software Development)
64
![Page 65: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/65.jpg)
Diseño de Interacción •MEMBER
Calidad y Cuantificación
• “Mide lo que sea medible y haz medible lo que no lo sea” (Galileo Galilei)
• Cuantificar nos permite:
• Comparar alternativas de manera objetiva
• Análisis en lugar de opiniones
• Identificar áreas de oportunidad
65
![Page 66: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/66.jpg)
Diseño de Interacción •MEMBER
Cuantificación: KLM-GOMS
Cada operación del usuario tiene un costo.
66
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 67: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/67.jpg)
Diseño de Interacción •MEMBER
Cuantificación:Buscar cliente (v. programador)
67
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 68: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/68.jpg)
Diseño de Interacción •MEMBER
Cuantificación:Buscar cliente (v. diseñador)
68
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 69: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/69.jpg)
Diseño de Interacción •MEMBER
Casos de uso: hipótesis inicial
69
• 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 70: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/70.jpg)
Diseño de Interacción •MEMBER
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
70
![Page 71: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/71.jpg)
Diseño de Interacción •MEMBER
Priorización y estrategia de versiones
71
v. 1.0 v. 2.0 v. 3.0 v. 4.0 v. 5.0 v. 6.0
![Page 72: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/72.jpg)
Diseño de Interacción •MEMBER
Casos de uso reales y priorizados
72
• 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 73: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/73.jpg)
Diseño de Interacción •MEMBER
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…
73
![Page 77: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/77.jpg)
Diseño de Interacción •MEMBER
Sistema con dos campos de búsqueda
![Page 78: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/78.jpg)
Diseño de Interacción •MEMBER
Propuesta: un solo campo de búsqueda
78
• 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 79: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/79.jpg)
Diseño de Interacción •MEMBER
Prueba de concepto
79
![Page 80: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/80.jpg)
Diseño de Interacción •MEMBER
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
80
![Page 81: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/81.jpg)
diseño de interacción •MEMBER
• 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
81
![Page 82: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/82.jpg)
Diseño de Interacción •MEMBER
Esquema
82
Funciones secundarias
listadopelículas
alquiler
listadoclientes
detalle película
listado copiasSeleccionar copia
Copias + Cliente =
Ficha Cliente
Seleccionarpelícula
Buscar peliculas o clientes
![Page 83: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/83.jpg)
Diseño de Interacción •MEMBER
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 avanzado83
![Page 84: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/84.jpg)
Diseño de Interacción •MEMBER
84
Mockup final
![Page 85: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/85.jpg)
Diseño de Interacción •MEMBER
Caso: Cliente devuelve y alquila
• Anticipación, no es necesario buscar al cliente
• Minimizar input y pasos
• Permitir operaciones en cualquier orden
85
![Page 86: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/86.jpg)
Diseño de Interacción •MEMBER
Cliente devuelve y alquila
86
![Page 87: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/87.jpg)
Diseño de Interacción •MEMBER
Cliente devuelve y alquila
87
![Page 88: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/88.jpg)
Diseño de Interacción •MEMBER
Cliente devuelve y alquila
88
![Page 89: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/89.jpg)
Diseño de Interacción •MEMBER
Cliente devuelve y alquila
89
![Page 90: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/90.jpg)
Diseño de Interacción •MEMBER
Caso: Devolución de 40 películas
• Soportar un proceso de lotes con el mismo modelo de interacción
90
![Page 91: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/91.jpg)
Diseño de Interacción •MEMBER
Devolución de 40 películas
91
![Page 92: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/92.jpg)
Diseño de Interacción •MEMBER
Devolución de 40 películas
92
![Page 93: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/93.jpg)
Diseño de Interacción •MEMBER
Devolución de 40 películas
93
![Page 94: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/94.jpg)
Diseño de Interacción •MEMBER
Devolución de 40 películas
94
![Page 95: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/95.jpg)
Diseño de Interacción •MEMBER
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%
95
![Page 96: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/96.jpg)
Diseño de Interacción •MEMBER
• 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
96
![Page 97: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/97.jpg)
Diseño de Interacción •MEMBER
Diseño de Interacción en América Latina
Oportunidades
• Interés creciente en Usabilidad
• Diseño y UX como requerimiento
Desafíos
• Baja integración del diseñador conDesarrollo y Negocios
• Falta de visión y lenguaje común
• Falta de percepción de valor
• Baja madurez del mercado
• Poco apoyo académico
deseable
usable
confiable
funcional
97
![Page 98: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c778024a7959916e8b4570/html5/thumbnails/98.jpg)
¡Muchas gracias!
K a m b r i c a
Diseño de Interacción: usabilidad aplicada
Tucumán Valley: Diseño de Interfaces16 de mayo, 2012
MEMBER