Presentación de Santiago Bustelo (icograma) y Diego González (Lagash Systems) para el MIX08 Buenos Aires organizado por Microsoft. Se presenta cómo un programador y un diseñador gráfico estereotipados, desarrollarían un caso de ejemplo sin contemplar aspectos de usabilidad e interacción. Luego del análisis y cuantificación de estas interfaces, y la introducción de principios fundamentales de interacción, se expone cómo se desarrollaría el caso desde la perspectiva del diseño de interacción.

1. San$ago
Bustelo,
Kambrica
Diego
Gonzalez,
Lagash
Systems
SA
Diseño
de
Interacción
en
el
siglo
XXI

2. Bienvenidos
al
Siglo
XXI

3. Un
mundo
mejor
Agosto
1981,
IBM
PC-­‐XT
US$
3.000
Junio
2008,
Lenovo
ThinkStaKon
D10
US$
3.000
Mejora
Intel
8088
4.77
MHz
16
bits
2
x
Intel
Xeon
E5405
Quad
Core
2GHz
64
bits
13.416
veces
16
Kb
RAM 4
GB
DDR2
SDRAM 262.143
veces
160
Kb
5"
1/4 2
x
500GB
Serial
ATA 6.553.599
veces

4. Un
mundo
mejorable

5. Calidad
de
un
Sistema

6. • Model
View
Controller
• Model
View
Presenter
• Components
• Shell
• Data
Binding
• Styles
• …?
Herramientas

7. • Modelos?
• Conceptos?
• Patrones?
• CuanUficación?
¿Herramientas?

8. Aplicación

9. Administración
de
un
videoclub
Requerimientos
• Alquilar
una
pelicula
• Devolver
una
pelicula
• Cargar
una
película
• Cargar
un
nuevo
cliente
Ejemplo
de
aplicación

10. Caveman
programmer
3
en$dades
• Películas:
Datos
• Clientes:
Datos
• Alquileres:
Relaciones
Operaciones
• Alta,
baja,
modificación
y
consulta
para
cada
en$dad
Tecnología
• Aplicación
WinForms
• Base
de
datos
SQL
Server
Diseño
(caveman
programmer
/
designer)
Caveman
designer
Metáforas
• Películas:
DVDs
• Clientes:
Fichas
• Alquileres:
Ficha
+
DVD
Representación
• Experiencia
inmersiva
• Fotorealismo
Tecnología
• Silverlight
full
screen
• Renders
3D

11. Caso:
Caveman
Programmer

17. Caso:
Caveman
designer

29. Interfaces

30. • Modalidad
de
atención:
mostrador,
teléfono
y
buzón
• Búsqueda
de
clientes
y
`tulos
• Alta
de
20
nuevas
películas
• Cliente
alquila
2
películas
• Cliente
devuelve
peliculas
y
alquila
otras
• Copia
dañada
• Carga
de
40
devoluciones
de
buzón
• Reporte
de
atrasos
• Alta
de
un
cliente
Relevamiento
de
usos

31. GOMS
Modelo
para
predecir
$empos
de
operación
de
una
interfaz
de
usuario
CuanHficación
0,2
seg.
Tecla
/
mouse
click
&
release
0,4
seg.
Paso
mouse
←→
teclado
1,1
seg.
Apuntar
con
el
mouse
1,35
seg.
Preparación
mental
nueva
tarea
?
Respuesta
del
sistema

32. Ley
de
Hick-­‐Hyman
Tiempo
decisión
=
50
+
150
log2
(
can$dad
de
opciones
+
1
)
Ley
de
FiXs
Tiempo
para
apuntar
a
un
objeto
=
50
+
150
log2
(
distancia
/
tamaño
del
objeto
+
1
)
CuanHficación

33. Eficiencia
teórica
de
la
información
CuanHficación
Mínima
información
necesaria
para
realizar
una
tarea
Input
requerido
para
realizar
la
tarea

34. Eficiencia
teórica
de
la
información
CuanHficación
Mínima
información
necesaria
para
realizar
una
tarea
Input
requerido
para
realizar
la
tarea

35. Eficiencia
teórica
de
la
información
CuanHficación
Mínima
información
necesaria
para
realizar
una
tarea
Input
requerido
para
realizar
la
tarea
E
=
0

36. CuanHficación:
Búsqueda
1.0
Inicio
tarea:
1,35
Mover
mano
al
mouse:
0,40
Proxima
tarea:
1,35
Apuntar
menu
Clientes:
1,10
click
menu
Clientes:
0,20
Apuntar
menu
Clientes
>
Modificación:
1,10
click
menu
Clientes
>
Modificación:
0,20
Proxima
tarea:
1,35
Apuntar
campo
texto:
1,10
click
campo
texto:
0,20
Mover
mano
al
teclado:
0,40
Proxima
tarea:
1,35
Tipear
apellido:
1,60
Mover
mano
al
mouse:
0,40
Proxima
tarea:
1,35
point
OK:
1,10
click
OK:
0,20
Obtuvimos
(o
no)
el
dato:
14.75
seg.
Recuperación:
Mover
mano
al
mouse:
0,40
Proxima
tarea:
1,35
point
Cancel:
1,10
click
Cancel:
0,20
Volvemos
a
abrir
el
cuadro,
Tipeamos
apellido
otra
vez:
12,32
Mover
mano
al
mouse:
0,40
Proxima
tarea:
1,35
apuntarOK:
1,10
click
OK:
0,20
Total
c/recuperacion:
32,55
segundos

37. CuanHficación:
Navegación
Clientes
Inicio
tarea:
1,35
Apuntar
al
fichero
home:
1,10
Click
Fichero
home:
0,20
Animacion
"files,
lots
of
files¨:
4
Proxima
tarea:
1,35
Apuntar
boton
prox
serie
ficheros:
1,10
Click
proxima
serie
ficheros:
0,20
Animacion
serie
de
ficheros:
1
Prox
tarea:
1,35
Apuntar
fichero
"G":
1,10
Click
fichero
"G":
0,20
Animacion
fichero
G:
2
Proxima
tarea:
1,35
Leer
eUquetas
x
4:
5,40
Proxima
tarea:
1,35
Apuntar
GON:
1,10
Click
GON:
0,20
Animacion
Cajon
GON:
2
Proxima
tarea:
1,35
Leer
Apellido,
Nombre
x
5:
6,75
Proxima
tarea:
1,35
Apuntar
Gonzalez,
Diego:
1,10
Click
Gonzalez,
Diego:
0,20
Obtuvimos
la
ficha:
28.10
seg.
Beneficio
eilminar
animaciones:
9
seg.
Total
sin
animaciones:
19,1
segundos

38. Instant
Search
• Mínimo
input
• Corrección
sobre
la
marcha
• Relevancia
Búsqueda
2.0

39. Búsqueda
2.0:
Prueba
de
concepto
Prueba
de
concepto
Instant
search
AJAX:
hpp://kambrica.com/raf08/

40. CuanHficación:
Búsqueda
2.0
Inicio
tarea:
1,35
Mover
mano
al
mouse:
0,40
Proxima
tarea:
1,35
apuntar
Buscar:
1,10
click
Buscar:
0,20
Moer
mano
al
teclado:
0,40
Proxima
tarea:
1,35
Tipear
3
caratacteres
apellido:
0,60
Proxima
tarea:
1,35
Tipar
espacio:
0,20
Proxima
tarea:
1,35
Tipear
3
caracteres
nombre:
0,60
Total:
10,25
segundos
Beneficio
mantener
foco
en
búsqueda:
4,80
Total
c/
foco:
5,45
segundos

41. Diseño
con
bases
racionales

42. • Modelo
unificado
• Metáforas
• Mail,
address
book
• Sujeto
+
verbo
• No
intrusivo
• Meta:
E
≥
70%
Bases
del
diseño

43. Esquema

44. Aplicación
2.0

45. 1. Alta
diaria
de
20
nuevas
películas
2. Cliente
devuelve
y
alquila
en
mostrador
3. Carga
de
40
devoluciones
por
buzón
4. Reporte
de
atrasos
Ejemplos
de
4
casos
de
uso

46. Alta
diaria
de
20
nuevas
películas
Caso
1
/
4

47. • Reducción
de
input
y
pasos
• Applica$on
2.0
• Mejores
datos
• Eliminar
tareas
repe$$vas
Alta
diaria
de
20
nuevas
películas

48. Alta
diaria
de
20
nuevas
películas

49. Alta
diaria
de
20
nuevas
películas

50. Alta
diaria
de
20
nuevas
películas

51. Alta
diaria
de
20
nuevas
películas

52. Alta
diaria
de
20
nuevas
películas

53. Cliente
devuelve
y
alquila
Caso
2
/
4

54. • An$cipación,
no
es
necesario
buscar
al
cliente
• Minimizar
input
y
pasos
• Permi$r
operaciones
en
cualquier
orden
Cliente
devuelve
y
alquila

55. Cliente
devuelve
y
alquila

56. Cliente
devuelve
y
alquila

57. Cliente
devuelve
y
alquila

58. Cliente
devuelve
y
alquila

59. Devolución
de
40
películas
Caso
3
/
4

60. • Soportar
un
proceso
batch
con
el
mismo
modelo
de
interacción
Devolución
de
40
películas

61. Devolución
de
40
películas

62. Devolución
de
40
películas

63. Devolución
de
40
películas

64. Devolución
de
40
películas

65. Reporte
de
atrasos
Caso
4
/
4

66. Comprensión
de
casos
de
uso
• Lo
importante
no
es
el
listado
sino
la
no$ficación
Reporte
de
atrasos

67. Reporte
de
atrasos

68. Reporte
de
atrasos

69. Resultado
Tarea 1,0 2,0 %
Búsqueda 15
a
33
seg. 5.45
seg. 275
a
600
%
Alta
de
20
nuevas
películas 1.543
seg. 204
seg. 756%
Cliente
devuelve
y
alquila 52
a
87
seg. 7.80
seg. 666%
Buzón
40
devoluciones 636
seg. 156
seg. 400%
NoUficación
de
9
atrasos 10
a
15
min.? 7
seg. 8500%

70. • Proceso
itera$vo
de
análisis
y
diseño
centrado
en
la
operación
del
usuario
• Bases
racionales,
cuan$ficación
• Obtención
de
un
producto
como
resultado
de
un
proceso
y
sa$sfaciendo
metas
Conclusiones

71. Caveman
Programmer
Interface
hpp://kambrica.com/raf08/caveman.zip
Instant
Search
-­‐
proof
of
concept
hpp://www.kambrica.com/raf08/
Demos

72. Jef
Raskin:
The
Humane
Interface
hpp://www.amazon.com/dp/0201379376/
Interface
Hall
of
Shame
/
Hall
of
Fame
hpp://hallofshame.gp.co.at
(mirror)
Jared
Spool’s
User
Interface
Engineering:
web
&
product
usability
hpp://www.uie.com
Jakob
Nielsen’s
Alertbox:
Current
Issues
in
Web
Usability
hpp://www.alertbox.com
Referencias

73. ¡Muchas
gracias!
San$ago
Bustelo
Kambrica
Diego
Gonzalez
Lagash
Systems