Diseño de Interacción: Usabilidad Aplicada

Diseño de Interacción:
Usabilidad aplicada
Santiago Bustelo @sbustelo
IxDA Central and South America Regional Coordinator

Día de la Usabilidad • Bogotá, Colombia
11 de noviembre, 2011
Presentación bajo licencia Creative Commons
Atribución 2.5 Argentina
MEMBER
http://creativecommons.org/licenses/by/2.5/ar

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 Latina
y creciendo!
• ixda_bogota@googlegroups.com ixda.org
Asociación de Diseño de Interacción Diseño de Interacción • 2
MEMBER

Diseño de Interacción

ABSTRACTO
• 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
CONCRETO
interacción

MEMBER

UX
DISEÑO DE
EXPERIENCIAS

AI
ARQUITECTURA
ARQ
ARQUITECTURA
DE INFORMACIÓN

Diseño de

DI
Información Entornos
PRODUCCIÓN
DE CONTENIDO Señalética Interactivos
(Texto, Imagen, Navegación Computación
DISEÑO
Video, sonido) ubicua
INDUSTRIAL
Diseño de Controles
Interfaces

DG
DISEÑO
IxD
DISEÑO DE
GRÁFICO
INTERACCIÓN

Ingeniería de DISEÑO
Usabilidad DE SONIDO

HCI
INTERACCIÓN
Dan Saffer, Designing for Interaction

HUMANO-COMPUTADOR

Funciones del diseño

Presentación

Información Uso

MEMBER

Forma versus Función

16 17 18 19
15 20

13 14 2 3 4

21

2
1

5 6 7

2 23
12

8 1
9 10 1

24
25
2 1
6 2 3
7 28 29 30

MEMBER

Forma y Función

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

MEMBER

Usabilidad

• La usabilidad de una interfaz es una medida
de la efectividad, eficiencia y satisfacción con
la cual determinados usuarios pueden
alcanzar determinados objetivos en un
entorno particular con dicha interfaz.
(ISO 9241, Requerimientos ergonómicos para
trabajo de oficina con terminales visuales, Parte
11 - 1997)

MEMBER

Efectividad: Incorporando al usuario

Eficiencia: análisis y cuantificación

MEMBER

Satisfacción: experiencia óptima

!"#$%"&'()*

!+#,*'(&
-,$&./0

32#""(4(,*%0

1&2(+(-&-
Simplificación del modelo de Mihaly Csikszentmihalyi

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

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.

MEMBER

Sitios que te inspiran vs. sitios que usás

MEMBER

Proceso de diseño
y caso de ejemplo

MEMBER

Caso de ejemplo

• 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)

MEMBER

Programador cavernario
• 3 entidades
• Películas: Datos
• Clientes: Datos
• Alquileres:
Relaciones
• Operaciones
• Alta, baja,
Prototipo de interfaz publicado en
modificación y http://icograma.com/raf08/caveman.zip
consulta para (ejecutable para Windows)
cada entidad

MEMBER

760 Diego Gonzalez Rivadavia 5000 11 B Buenos
Aires 12

Diseñador cavernario
• Metáforas
• Películas: DVDs
• Clientes: Fichas
• Alquileres: Ficha + DVD
• Representación
• Experiencia inmersiva
• Fotorealismo

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)

MEMBER

Cuantificación

• “Si no medimos, no hay calidad. Punto y aparte”
(Sebastián Fernández Quezada, Keikendo)
• “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
MEMBER

Cuantificación: KLM-GOMS

Cada operación del usuario tiene un costo.
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)

MEMBER

Cuantificación:
Buscar cliente (v. programador)
Inicio tarea: 1,35 Mover mano al teclado: 0,40 Recuperación:
Mover mano al mouse: 0,40 Proxima tarea: 1,35 Mover mano al mouse: 0,40
Proxima tarea: 1,35 Tipear apellido: 1,60 Proxima tarea: 1,35
Apuntar menu Clientes: 1,10 Mover mano al mouse: 0,40 point Cancel: 1,10
click menu Clientes: 0,20 Proxima tarea: 1,35 click Cancel: 0,20
Apuntar menú Clientes » point OK: 1,10 Volvemos a abrir el cuadro,
Modificación: 1,10 click OK: 0,20 Tipeamos apellido otra vez: 12,32
click menú Clientes » Modificación: Mover mano al mouse: 0,40
0,20 Obtuvimos (o no) el dato: Proxima tarea: 1,35
Próxima tarea: 1,35
14.75 segundos apuntarOK: 1,10
Apuntar campo texto: 1,10 click OK: 0,20
click campo texto: 0,20
Total con recuperación:
32,55 segundos

MEMBER

Cuantificación:
Buscar cliente (v. diseñador)
Inicio tarea: 1,35 Proxima tarea: 1,35 Obtuvimos la ficha:
Apuntar al fichero home: 1,10 Leer etiquetas x 4: 5,40 28.10 segundos
Click Fichero home: 0,20 Proxima tarea: 1,35
Animación "files, lots of files¨: 4 Apuntar GON: 1,10 Beneficio eliminar animaciones:
Proxima tarea: 1,35 Click GON: 0,20 9 segundos
Apuntar boton prox serie ficheros: Animación Cajón GON: 2
1,10 Proxima tarea: 1,35 Total sin animaciones:
Click proxima serie ficheros: 0,20 Leer Apellido, Nombre x 5: 6,75 19,1 segundos
Animación serie de ficheros: 1 Proxima tarea: 1,35
Prox tarea: 1,35 Apuntar Gonzalez, Diego: 1,10
Apuntar fichero "G": 1,10 Click Gonzalez, Diego: 0,20
Click fichero "G": 0,20
Animación fichero G: 2

MEMBER

¿Qué estamos tratando de resolver?

• Problemas bien definidos • Problemas dinámicos
• Algoritmos • Heurísticas
• Resolución lineal • Resolución asintótica
• Metodología estructurada • Metodología ágil
• Foco en análisis y documentación • Foco en entregables

MEMBER

Proceso lineal

1. Definición de requerimientos.
2. Diseño y desarrollo a nivel de producción.
3. Entrega.

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 una
o ambas partes.

MEMBER

Proceso convergente

1. Objetivos y análisis inicial.
2. Diseño y desarrollo en iteraciones
avanzando progresivamente en:
• Funcionalidad
• Estructura y elementos
• Lenguaje visual
3. Entrega y puesta en producción.

MEMBER

Diseño Centrado en el Usuario:
Hipótesis inicial de casos de uso

• 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

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.

MEMBER

Casos de uso reales priorizados

• Modalidad de atención: • Carga de 40 devoluciones de
mostrador, teléfono y buzón buzón
• Búsqueda de clientes: por • Alta o modificación de un
nombre del titular, dirección o cliente
teléfono. • Editar película: ABM copias,
• Búsqueda de copias: por título “baja” si no hay copias
o código • Copia dañada
• Cliente alquila hasta 3 películas • Listado de películas por
• Cliente devuelve hasta 3 géneros / estrenos
películas • Reporte de atrasos
• Cliente devuelve hasta 3 • ¿Qué temporadas vio el
películas y alquila hasta 3 cliente?
• Alta de 20 nuevos títulos, • Se desordena fila en mostrador
asignación de copias

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…

MEMBER

Sistema con dos campos de búsqueda

MEMBER


MEMBER


Asociación de Diseño de Interacción Diseño de Interacción •
MEMBER

Propuesta: un solo campo de búsqueda

• 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
MEMBER

Prueba de concepto

Prueba de concepto publicada en
http://icograma.com/raf08/

MEMBER

Cuantificación: Búsqueda 2.0

Inicio tarea: 1,35 Tipear 3 caracteres nombre: 0,60
Mover mano al mouse: 0,40
Proxima tarea: 1,35 Total: 10,25 segundos
apuntar Buscar: 1,10
click Buscar: 0,20 Beneficio de mantener foco en búsqueda:
Mover mano al teclado: 0,40 4,80 segundos
Proxima tarea: 1,35
Tipear 3 caratacteres apellido: 0,60 Total manteniendo
Proxima tarea: 1,35 foco en búsqueda:
Tipar espacio: 0,20 5,45 segundos
Proxima tarea: 1,35

MEMBER

Bases del diseño

• 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
diseño de interacción • 63

Esquema
Buscar peliculas o clientes Funciones secundarias

listado detalle película listado
películas clientes
Seleccionar
película
listado copias
Seleccionar copia
Ficha Cliente

Copias + Cliente =
alquiler

MEMBER

Buscar peliculas o clientes

Películas Clientes
La Rosa Púrpura del Cairo (1985)
La Rosa Púrpura del Cairo The Purple Rose of Cairo Santiago Bustelo 32 años
Woody Allen 4123-4567
Actores Mia Farrow
La Rosa Púrpura del Cairo Jeff Daniels Diego González 32 años
Woody Allen Danny Aiello 4123-4567
Irving Metzman
La Rosa Púrpura del Cairo Stephanie Farrow Santiago Bustelo 32 años
Woody Allen Director Woody Allen 4123-4567
La Rosa Púrpura del Cairo Géneros Sátira, Comedia, Woody Allen Diego González 32 años
Woody Allen Duración 1 hora 22 minutos 4123-4567

Relacionadas Reservar

78079 78079 78079 78079 78079

78079 78079 78079 78079

78079 78079 78079 78079
+ Activar Cliente

Alquiler: 3 películas

Diego González 32 años
reservada
4123-4567
Juan de los Palotes 1638
Deuda $67

La Rosa Púrpura La Rosa Púrpura La Rosa Púrpura El ciudadano
del Cairo del Cairo del Cairo
#78909 #78909 Eterno resplandor de una mente...
+ Alquilar a Diego González Yo sé que tu sabes que yo sé

Mockup avanzado
MEMBER

Mockup final
MEMBER

Ejemplos de 4 casos de uso

• Alta diaria de 20 nuevas películas
• Cliente devuelve y alquila en mostrador
• Carga de 40 devoluciones por buzón
• Reporte de atrasos

MEMBER

Alta diaria de
20 nuevas películas

• Caso 1 / 4
• Reducción de input y pasos
• Eliminar tareas repetitivas
• Aplicación 2.0
• Mejores datos

MEMBER

Alta diaria de 20 nuevas películas

MEMBER


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

MEMBER


MEMBER

Devolución de
40 películas

• Caso 3 / 4
• Soportar un proceso de lotes con el mismo
modelo de interacción

MEMBER

Devolución de 40 películas

MEMBER


MEMBER

Reporte de atrasos

• Caso 4 / 4
• Comprensión del caso de uso:
Lo importante no es el listado, sino la
notificación

MEMBER

Reporte de atrasos

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%

MEMBER

Conclusiones

• No hay User Experiencie sin 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

MEMBER

Diseño de Interacción en América Latina
Oportunidades
• Interés creciente en Usabilidad
• Diseño como requerimiento
Desafíos
• Baja integración del diseñador con
Desarrollo y Negocios deseable

• Falta de visión y lenguaje común
usable
• Falta de percepción de valor
confiable
• Poca madurez del mercado
• Alto riesgo de innovación
funcional

MEMBER

www.ixda.org
Convocando para conformar IxDA Bogotá:
ixda_bogota@googlegroups.com

En línea en ixda.com.co a partir de diciembre 2011

Diseño de Interacción: Usabilidad Aplicada

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (18)

Similar a Diseño de Interacción: Usabilidad Aplicada

Similar a Diseño de Interacción: Usabilidad Aplicada (20)

Más de www.usarte.co

Más de www.usarte.co (20)

Último

Último (20)

Diseño de Interacción: Usabilidad Aplicada