diseño de interacción, usabilidad aplicada (día de la usabilidad 2011 - bogotá, colombia)
DESCRIPTION
Diseño de Interacción: Usabilidad aplicada - Presentación en el Día de la Usabilidad en Bogotá, Colombia, el 11 de noviembre de 2011 (www.diadelausabilidad.com.com) Video: https://www.youtube.com/watch?v=KK-TnDPlx4o El Diseño de Interacción es una nueva disciplina de diseño, relacionado con la Usabilidad y la Ingeniería de Software. En la charla se presentan diferencias y puntos en común del Diseño de Interacción con el Diseño Gráfico y Diseño Industrial, qué nuevas habilidades requieren los profesionales del diseño para desempeñarse dentro de estas disciplinas, y técnicas y metodologías de trabajo específicas. Se muestra cómo un programador, un diseñador visual y un diseñador de interacción tomarían el mismo encargo, exponiendo las diferencias de criterio y proceso, y la aplicación de un modelo cuantificado para comparar los resultados y lograr calidad.TRANSCRIPT
Diseño de Interacción: Usabilidad aplicada
MEMBER
Presentación bajo licencia Creative CommonsAtribución 2.5 Argentinahttp://creativecommons.org/licenses/by/2.5/ar
Santiago BusteloDirector de diseño, KambricaIxDA Latin America Regional Coordinator
Día de la Usabilidad • Bogotá, Colombia11 de noviembre, 2011
@sbustelo
Diseño de Interacción •MEMBER
IxDA (Interaction Design Association)
• Red global dedicada a la práctica profesional del Diseño de Interacción
• Comunidad
• Educación
• Evangelismo
• Profesionalismo
• Innovación
• Foro global, 28.000 miembros
• 20 grupos en América Latinay creciendo!
• ixda.org/local/ixda-bogota
2
ixda.org
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 la mayor cantidad de usuarios
• Diseño de Interfaces
• Define los elementos concretos empleados en la interacción
ABSTRACTO
CONCRETO
Diseño de Interacción
3
DISEÑO DEINTERACCIÓN
INTERACCIÓNHUMANO-COMPUTADOR
IxD
DISEÑOINDUSTRIAL
DISEÑODE SONIDO
DI
ARQUITECTURAARQUITECTURADE INFORMACIÓN
ARQDISEÑO DE
EXPERIENCIAS
UX
AI
DISEÑOGRÁFICO
DG
HCI
SeñaléticaEntornosInteractivos
Diseño de Interfaces
Computaciónubicua
Ingeniería deUsabilidad
Controles
Diseño de Información
Navegación
PRODUCCIÓNDE CONTENIDO(Texto, Imagen,Video, sonido)
Dan Saffer, Designing for Interaction
Diseño de Interacción •MEMBER
Funciones del diseño
Información
Presentación
Uso
5
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
6
Diseño de Interacción •MEMBER
Forma y Función
7
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
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
8
Efectividad: Incorporando al usuario
Diseño de Interacción •MEMBER
Eficiencia: análisis y cuantificación
10
Diseño de Interacción •MEMBER
Satisfacción: experiencia óptima
Simplificación del modelo de Mihaly Csikszentmihalyi
Frustración
Fluencia
desafío
habilidad
Aburrimiento
11
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
12
Diseño de Interacción •MEMBER
Entendiendo al usuario
• Su fin es realizar una tarea.
• Nuestra interfaz es sólo un medio que puede ser transparente, o un impedimento.
• Nuestra interfaz no debe ocupar lugar en la mente del usuario.
• Cuando el usuario tiene que pensar en nuestra interfaz, es porque se está preguntando lo que espera o necesita que sea evidente. Y eso, es señal de que no hicimos bien nuestro trabajo.
13
Diseño de Interacción •MEMBER
Sitios que te inspiran vs. sitios que usás
14
Diseño de Interacción •MEMBER
Proceso de diseñoy caso de ejemplo
15
Diseño de Interacción •MEMBER
• Administración de un videoclub
• Requerimientos:
• Alquilar una pelicula
• Devolver una pelicula
• Cargar una película
• Cargar un nuevo cliente
Ejemplo desarrollado junto con Diego González(Lagash Systems, fundador)
Caso de ejemplo
16
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
17
Prototipo de interfaz publicado enhttp://kambrica.com/raf08/
caveman.zip(ejecutable para Windows)
1234
1234
1234
Gonzalez
GonzalezDiego760 Rivadavia 5000 11 B Buenos Aires 12
1234
760
No hay stock.
1235
760
Diseño de Interacción •MEMBER
Diseñador cavernario
• Metáforas
• Películas: DVDs
• Clientes: Fichas
• Alquileres: Ficha + DVD
• Representación
• Experiencia inmersiva
• Fotorealismo
31
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)
43
Diseño de Interacción •MEMBER
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
44
Diseño de Interacción •MEMBER
Cuantificación: KLM-GOMS
Cada operación del usuario tiene un costo.
45
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)
Diseño de Interacción •MEMBER
Cuantificación:Buscar cliente (v. programador)
46
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
Diseño de Interacción •MEMBER
Cuantificación:Buscar cliente (v. diseñador)
47
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
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
¿Qué estamos tratando de resolver?
48
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.
49
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 quería,retrocede tres casilleros.
5. Se repite hasta el hartazgo de unao ambas partes.
50
Diseño de Interacción •MEMBER
Proceso convergente
1. Objetivos y análisis inicial.
2. Diseño y desarrollo en iteracionesavanzando progresivamente en:
• Funcionalidad
• Estructura y elementos
• Lenguaje visual
3. Entrega y puesta en producción.
51
Diseño de Interacción •MEMBER
Diseño Centrado en el Usuario:Hipótesis inicial de casos de uso
52
• 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
Diseño de Interacción •MEMBER
Resultados del Relevamiento(un videoclub, dos usuarios)
• 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
• No tomamos requerimientos del usuario.Nos enfocamos en lo que el usuario hace.
53
Diseño de Interacción •MEMBER
Casos de uso reales priorizados
54
• Modalidad de atención: mostrador, teléfono y buzón
• Búsqueda de clientes: por nombre del titular, dirección o teléfono.
• Búsqueda de copias: por título o código
• 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
• Carga de 40 devoluciones de buzón
• Alta o modificación de un cliente
• Editar película: ABM copias, “baja” si no hay copias
• Copia dañada• Listado de películas por
géneros / estrenos• Reporte de atrasos• ¿Qué temporadas vio el
cliente?• Se desordena fila en mostrador
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…
55
Diseño de Interacción •MEMBER
Sistema con dos campos de búsqueda
56
Diseño de Interacción •MEMBER
Sistema con dos campos de búsqueda
57
Diseño de Interacción •MEMBER
Sistema con dos campos de búsqueda
58
Diseño de Interacción •MEMBER
Sistema con dos campos de búsqueda
Diseño de Interacción •MEMBER
Propuesta: un solo campo de búsqueda
60
• Resultado dependiente del contenido
• 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
Diseño de Interacción •MEMBER
Prueba de concepto
61
Prueba de concepto publicada enhttp://kambrica.com/raf08/
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
62
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
63
Diseño de Interacción •MEMBER
Esquema
64
Funciones secundarias
listadopelículas
alquiler
listadoclientes
detalle película
listado copiasSeleccionar copia
Copias + Cliente =
Ficha Cliente
Seleccionarpelícula
Buscar peliculas o clientes
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 avanzado65
Diseño de Interacción •MEMBER
66
Mockup final
Diseño de Interacción •MEMBER
• Alta diaria de 20 nuevas películas
• Cliente devuelve y alquila en mostrador
• Carga de 40 devoluciones por buzón
• Reporte de atrasos
Ejemplos de 4 casos de uso
67
Diseño de Interacción •MEMBER
Alta diaria de20 nuevas películas
• Caso 1 / 4
• Reducción de input y pasos
• Eliminar tareas repetitivas
• Aplicación 2.0
• Mejores datos
68
Diseño de Interacción •MEMBER
Alta diaria de 20 nuevas películas
69
Diseño de Interacción •MEMBER
Alta diaria de 20 nuevas películas
70
Diseño de Interacción •MEMBER
Alta diaria de 20 nuevas películas
71
Diseño de Interacción •MEMBER
Alta diaria de 20 nuevas películas
72
Diseño de Interacción •MEMBER
Alta diaria de 20 nuevas películas
73
Diseño de Interacción •MEMBER
Cliente devuelve y alquila
• Caso 2 / 4
• Anticipación, no es necesario buscar al cliente
• Minimizar input y pasos
• Permitir operaciones en cualquier orden
74
Diseño de Interacción •MEMBER
Cliente devuelve y alquila
75
Diseño de Interacción •MEMBER
Cliente devuelve y alquila
76
Diseño de Interacción •MEMBER
Cliente devuelve y alquila
77
Diseño de Interacción •MEMBER
Cliente devuelve y alquila
78
Diseño de Interacción •MEMBER
Devolución de40 películas
• Caso 3 / 4
• Soportar un proceso de lotes con el mismo modelo de interacción
79
Diseño de Interacción •MEMBER
Devolución de 40 películas
80
Diseño de Interacción •MEMBER
Devolución de 40 películas
81
Diseño de Interacción •MEMBER
Devolución de 40 películas
82
Diseño de Interacción •MEMBER
Devolución de 40 películas
83
Diseño de Interacción •MEMBER
• Caso 4 / 4
• Comprensión del caso de uso:Lo importante no es el listado, sino la notificación
Reporte de atrasos
84
Diseño de Interacción •MEMBER
Reporte de atrasos
85
Diseño de Interacción •MEMBER
Reporte de atrasos
86
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%
87
Diseño de Interacción •MEMBER
• No hay User Experiencesin usuarios (Verónica Traynor)
• 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
88
Diseño de Interacción •MEMBER
Diseño de Interacción en América LatinaOportunidades
• Interés creciente en Usabilidad
• Diseño como requerimiento
Desafíos
• Baja integración del diseñador con Desarrollo y Negocios
• Falta de visión y lenguaje común
• Falta de percepción de valor
• Poca madurez del mercado
• Alto riesgo de innovación
deseable
usable
confiable
funcional
89
www.kambrica.com