diseño de interacción, usabilidad aplicada (tucumán valley, 16 mayo 2012)
DESCRIPTION
El acelerado acceso a la tecnología a través de PCs, notebooks, tablets y smartphones, entre otros dispositivos, ha dado origen a una nueva disciplina de gran importancia y no siempre explorada por los profesionales de la web: el diseño de interacción (IxD, por sus siglas en inglés). En la charla se presenta un caso hipotético de creación de una aplicación en la que se repiten algunos de los problemas comunes a los que enfrentan diseñadores, programadores y emprendedores. Se muestra cómo se resolvería el mismo encargo desde el diseño de interacción y tomando en cuenta la experiencia de usuario, exponiendo las diferencias de criterio y proceso, y la aplicación de un modelo cuantificado para comparar los resultados y lograr calidad.TRANSCRIPT
![Page 1: Diseño de interacción, usabilidad aplicada (Tucumán Valley, 16 mayo 2012)](https://reader034.vdocuments.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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.co/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