Presentación de Santiago Bustelo en la apertura de las XII Jornadas Universitarias de Sistemas de Información en Salud realizadas en el Hospital Italiano, el 15 de noviembre de 2017. Consolida contenidos presentados previamente: - Caso de aplicación de KLM-GOMS para mejoras operativas en sistemas de gestión (presentado por primera vez en 2008 en el evento Microsoft RAF), - Heurísticas entendidas desde principios de psicología cognitiva (presentado desde 2015 en Taller UX).

1. XII JORNADAS UNIVERSITARIAS DE SISTEMAS DE INFORMACIÓN EN SALUD
15, 16 y 17 DE NOVIEMBRE DE 2017
Metodología y
Herramientas para
diseñar sistemas
de alta performance
Santiago Bustelo
User Experience Director, Kambrica
IxDA Buenos Aires Local Group Coordinator

2. Esta presentación está publicada bajo licencia
Creative Commons Atribución-CompartirIgual 4.0 Internacional (CC BY-SA 4.0)
Usted es libre de:
• Compartir — copiar y redistribuir el material en cualquier medio o formato
• Adaptar — remezclar, transformar y crear a partir del material.
Para cualquier propósito, incluso comercialmente.
El licenciante no puede revocar estas libertades en tanto usted siga los términos de la licencia.
Bajo las condiciones siguientes:
Atribución — Usted debe darle crédito a esta obra de manera adecuada (dar nombre del creador y
de las partes atribuidas, un aviso de derechos de autor, una nota de licencia, un aviso legal, y un
enlace al material), proporcionando un enlace a la licencia, e indicando si se han realizado
cambios. Puede hacerlo en cualquier forma razonable, pero no de forma tal que sugiera que usted
o su uso tienen el apoyo del licenciante.
Compartir igual — Si usted mezcla, transforma o crea nuevo material a partir de esta obra, usted
podrá distribuir su contribución siempre que utilice la misma licencia que la obra original, o una
que aparezca como compatible en https://creativecommons.org/compatiblelicenses.
No hay restricciones adicionales — Usted no puede aplicar términos legales ni medidas tecnológicas que
restrinjan legalmente a otros hacer cualquier uso permitido por la licencia.

3. M E M B E R
SANTIAGO BUSTELO
Consultor en Experiencia de Usuario (UX)
y Diseñador de Interacción.
Fundador y Director de UX, Kambrica.
Fundador y Coordinador IxDA Buenos Aires.
Coordinador IxDA Latinoamérica 2010-2015.
Chair Interaction South America 2014.
Empecé a trabajar en diseño de interacción en 1996.
Desde entonces participé en proyectos para Argentina, Chile,
Colombia, Perú, España, Estados Unidos e Inglaterra, para
empresas de todo tamaño de las más diversas industrias y
también para organismos públicos.
Desde 2001 he dictado presentaciones y talleres sobre UX,
Usabilidad, Diseño de Interacción y Diseño Centrado en el
Usuario en Argentina, Chile, Colombia, Estados Unidos,
Canadá, Alemania, Irlanda, Finlandia y Países Bajos.

4. M E M B E R
IXDA: INTERACTION
DESIGN ASSOCIATION
Organización mundial 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 80.000 miembros, 175 grupos
locales, 42 grupos en América Latina.
ixda.com.ar
En Argentina: Buenos Aires, Córdoba,
Corrientes / Resistencia, La Plata, Mar del Plata,
Mendoza, Rosario, Santa Fe y Tucumán.
ILA.ixda.org
Conferencia Interaction Latin America:
Noviembre 2018, Río de Janeiro, Brasil

5. Santiago Bustelo •M E M B E R
UX, DISEÑO DE INTERACCIÓN (IXD),
DISEÑO DE INTERFACES (UI)
5
Interfaz
(User Interface, UI),
(Arq. de
Información, IA)
(Diseño visual /
gráfico)
Interacción
(Interaction
Design,
IxD)
Experiencia
(User Experience,
UX)
ISO 9241-210:2010
ARTEFACTO USUARIO
Lo que
sucede
delante de la
pantalla
Lo que
sucede en la
pantalla

6. Santiago Bustelo •M E M B E R
!
ARTEFACTOS
Diseño
final
Prototipo
baja fidelidad
Sistema
existente
Prototipo
alta fidelidad
TAREAS
PROCESO DE DISEÑO
CENTRADO EN EL USUARIO
6
Pruebas con
usuarios
Pruebas con
usuarios
Pruebas con
usuarios
Diseño Diseño
" "" # #
Diseño
#
$ % &

7. PRUEBAS CON USUARIOS:
EVALUANDO EXPERIENCIA INICIAL

8. SALA DE OBSERVACIÓN

9. PRUEBAS CON USUARIOS:
PROTOTIPOS EN PAPEL

10. PRUEBAS CON USUARIOS:
PROTOTIPOS ALTA FIDELIDAD

11. M E M B E R
¿CÓMO LOGRAMOS
MEJORES RESULTADOS
EN CADA ITERACIÓN?

12. Santiago Bustelo •M E M B E R
PRINCIPIOS DE…
12
• Instrucción
• Formación de hábitos
• Operación
• Selección
• Percepción
COSTO

13. Santiago Bustelo •M E M B E R
FEDCBA8976543215123456789ABCDEF
FEDCBA8976543214123456789ABCDEF
FEDCBA8976543213123456789ABCDEF
FEDCBA8976543212123456789ABCDEF
FEDCBA8976543211123456789ABCDEF
FEDCBA8976543210123456789ABCDEF
FEDCBA8976543211123456789ABCDEF
FEDCBA8976543212123456789ABCDEF
FEDCBA8976543213123456789ABCDEF
FEDCBA8976543214123456789ABCDEF
FEDCBA8976543215123456789ABCDEF
Wilbert O. Galitz, The Essential Guide to User Interface Design
3213123
54321212345
6543211123456
765432101234567
6543211123456
54321212345
3213123
AGUDEZA VISUAL
13

14. Santiago Bustelo •M E M B E R
PATRÓN DE LECTURA EN “F”
14
Jakob Nielsen: F-Shaped Pattern For Reading Web Content

15. Santiago Bustelo •M E M B E R
CEGUERA A LA PUBLICIDAD
15
Jakob Nielsen: Fancy Formatting, Fancy Words =
Looks Like a Promotion = Ignored

16. Santiago Bustelo •M E M B E R
CÓMO USAMOS LAS INTERFACES
• No leemos, barremos. Estamos apurados y estamos seguros de que no
necesitamos leer todo.
• No esperamos a conocer todas las opciones para compararlas y elegir la mejor.
Simplemente tomamos la primer opción que se nos cruza aceptable.
• No nos molestamos en comprender cómo las cosas funcionan. Simplemente
esperamos arreglárnoslas por el camino.
Steve Krug: Don’t Make Me Think
16

17. Santiago Bustelo •M E M B E R
DURANTE EL FIN DE SEMANA, NADIE PUDO
INGRESAR… NI PUDO ENTENDER POR QUÉ
17

18. Santiago Bustelo •M E M B E R
Estética y diseño
minimalista.
No mostrar información irrelevante o
innecesaria, ya que cada elemento
adicional disminuye la relevancia del otro.
Jakob Nielsen
Reconocer en lugar de
recordar.
Hacer que los objetos, acciones y
opciones sean visibles en el momento
apropiado para reducir al mínimo la carga
de memoria del usuario y facilitar las
decisiones.
Jakob Nielsen
18
H E U R Í S T I C A S

19. Santiago Bustelo •M E M B E R
Principios de percepción:
MEMORIA DE
“CORTO PLAZO”
19
• Instrucción
• Formación de
hábitos
• Operación
• Selección
• Percepción

20. Santiago Bustelo •M E M B E R
MEMORIA DE TRABAJO O “DE CORTO PLAZO”
(BADDELEY & HITCH, 1974, 2000)
20
Ejecutivo
Central
Bucle
fonológico
Agenda
visoespacial
Almacén
episódico
Lenguaje Semántica
visual
Memoria
episódica de
corto plazo
Información sensorial
Memoria sensorial Decaimiento
Atención
Simply Psychology:
Working Memory
Wikipedia:
Memoria de trabajo

21. Santiago Bustelo •M E M B E R
LÍMITE DEL BUCLE FONOLÓGICO COMO
SISTEMA AUTÓNOMO
21
2”aprox.

22. Santiago Bustelo •M E M B E R
¿CUÁNTAS FIGURAS PODEMOS CONTAR
DE UN VISTAZO?
22

23. Santiago Bustelo •M E M B E R
¿CUÁNTAS FIGURAS PODEMOS CONTAR
DE UN VISTAZO?
23

24. Santiago Bustelo •M E M B E R
¿CUÁNTAS FIGURAS PODEMOS CONTAR
DE UN VISTAZO?
24

25. Santiago Bustelo •M E M B E R
¿CUÁNTAS FIGURAS PODEMOS CONTAR
DE UN VISTAZO?
25

26. Santiago Bustelo •M E M B E R
3 a 4 elementos
es el límite que podemos
enumerar de un vistazo, y
también de la memoria de
trabajo.
P R I N C I P I O
26

27. APLICACIÓN

28. APLICACIÓN

29. 3570841 AddPrinter.app/
147198 AddressBookUrlForwarder.app/
39677 AirPlayUIAgent.app/
122696 AirPort Base Station Agent.app/
178925 AOS.bundle/
2233447 AppDownloadLauncher.app/
1039622 AppleFileServer.app/
30542 AppleGraphicsWarning.app/
3612189 AppleScript Utility.app/
0 ApplicationFirewall.bundle/
66853510 Applications/
1236110 Automator Runner.app/
3609117 backupd.bundle/
3192667 Bluetooth Setup Assistant.app/
3742573 BluetoothUIServer.app/
4240544 CalendarFileHandler.app/
78901 Captive Network Assistant.app/
20944 CarbonSpellChecker.bundle/
64241082 Certificate Assistant.app/
5217723 cloudphotosd.app/
0 com.apple.recovery.boot/
54890 CommonCocoaPanels.bundle/
1441525 CoreLocationAgent.app/
2347880 CoreServicesUIAgent.app/
326758843 CoreTypes.bundle/
636007 Database Events.app/
4453617 DiskImageMounter.app/
21420341 Dock.app/
1605493 Encodings/
2153879 Expansion Slot Utility.app/
3740960 File Sync.app/
3,570,841 AddPrinter.app/
147,198 AddressBookUrlForwarder.app/
39,677 AirPlayUIAgent.app/
122,696 AirPort Base Station Agent.app/
178,925 AOS.bundle/
2,233,447 AppDownloadLauncher.app/
1,039,622 AppleFileServer.app/
30,542 AppleGraphicsWarning.app/
3,612,189 AppleScript Utility.app/
0 ApplicationFirewall.bundle/
66,853,510 Applications/
1,236,110 Automator Runner.app/
3,609,117 backupd.bundle/
3,192,667 Bluetooth Setup Assistant.app/
3,742,573 BluetoothUIServer.app/
4,240,544 CalendarFileHandler.app/
78,901 Captive Network Assistant.app/
20,944 CarbonSpellChecker.bundle/
64,241,082 Certificate Assistant.app/
5,217,723 cloudphotosd.app/
0 com.apple.recovery.boot/
54,890 CommonCocoaPanels.bundle/
1,441,525 CoreLocationAgent.app/
2,347,880 CoreServicesUIAgent.app/
326,758,843 CoreTypes.bundle/
636,007 Database Events.app/
4,453,617 DiskImageMounter.app/
21,420,341 Dock.app/
1,605,493 Encodings/
2,153,879 Expansion Slot Utility.app/
3,740,960 File Sync.app/
vs. vs.

30. Santiago Bustelo •M E M B E R
Reducir la carga de la
memoria a corto plazo.
La limitación humana para procesar
información a corto plazo requiere que las
pantallas se mantengan simples, la
paginación debe consolidarse, reducir el
movimiento entre ventanas, y se debe
ofrecer un tiempo de aprendizaje
adecuado para comprender los códigos,
datos técnicos y secuencias del programa.
Ben Shneiderman
Estética y diseño
minimalista.
No mostrar información irrelevante o
innecesaria, ya que cada elemento
adicional disminuye la relevancia del otro.
Jakob Nielsen
Reconocer en lugar de
recordar.
Hacer que los objetos, acciones y
opciones sean visibles en el momento
apropiado para reducir al mínimo la carga
de memoria del usuario y facilitar las
decisiones.
Jakob Nielsen
30
H E U R Í S T I C A S

31. Santiago Bustelo •M E M B E R
Información es lo que está
al servicio de una decisión.
El resto es ruido.
Entender el proceso de decisión del usuario en primer
lugar, permite ver claro qué presentar, cómo y cuándo.
31
P R I N C I P I O D E B U S T E L O

32. Santiago Bustelo •M E M B E R
Principios de percepción:
GESTALT
32
• Instrucción
• Formación de
hábitos
• Operación
• Selección
• Percepción

33. Santiago Bustelo •M E M B E R
EVALUAR LA PERCEPCIÓN
VS. CONTARNOS UN CUENTO
• El diseño debe ser interpretado de manera preconsciente.
• Evaluar con el primer vistazo para ponernos en lugar del
usuario (considerando las distancias…).
• Si tenemos que dar muchas vueltas para interpretar el
diseño, algo anda mal.
33

34. Santiago Bustelo •M E M B E R
DE UN VISTAZO…
¿CÓMO CLASIFICAMOS ESTAS FIGURAS?
34

35. Santiago Bustelo •M E M B E R
DE UN VISTAZO…
¿CÓMO CLASIFICAMOS ESTAS FIGURAS?
35

36. Santiago Bustelo •M E M B E R
DE UN VISTAZO…
¿CÓMO CLASIFICAMOS ESTAS FIGURAS?
36

37. Santiago Bustelo •M E M B E R
Y AHORA…
¿CÓMO CLASIFICAMOS ESTAS FIGURAS?
37

38. Santiago Bustelo •M E M B E R
GESTALT: PRINCIPIO DE UNIDAD
• Los objetos encerrados son percibidos como un grupo
38

39. Santiago Bustelo •M E M B E R
EL LENGUAJE VISUAL NO ESCALA
INFINITAMENTE
39

40. Santiago Bustelo •M E M B E R
1 + 1 = 3 O MÁS
40
La actividad visual suplementaria es
no-información, ruido, y recarga.
(Edward Tufte, The Visual display of Quantitive Information)

41. Santiago Bustelo •M E M B E R
LOS ONCE COLORES BÁSICOS EN EL LENGUAJE
Y ORDEN EN EL QUE APARECEN
(BERLIN Y KAY, 1969)
41

42. Santiago Bustelo •M E M B E R
COLORES EN CULTURA DIGITAL
42
• Importante
• Texto normal
• Secundario
• Link
• Importante
• Texto normal
• Secundario
• Link
• Importante
• Texto normal
• Secundario
• Link

43. Santiago Bustelo •M E M B E R
Estética y diseño
minimalista.
No mostrar información irrelevante o
innecesaria, ya que cada elemento
adicional disminuye la relevancia del otro.
Jakob Nielsen
Usar el menor recurso
capaz de aportar
significado.
Edward Tufte
Considerar las
limitaciones humanas.
El diseño debe considerar y evitar
sobrecargar las limitaciones, cognitivas y
sensoriales, del ser humano.
Susan Weinschenk & Dean Barker
43
H E U R Í S T I C A S

44. Santiago Bustelo •M E M B E R
APLICACIÓN
44
I II III IV
x y x y x y x y
100 804 100 914 100 746 80 658
80 695 80 814 80 677 80 576
130 758 130 874 130 1,274 80 771
90 881 90 877 90 711 80 884
110 833 110 926 110 781 80 847
140 996 140 810 140 884 80 704
60 724 60 613 60 608 80 525
40 426 40 310 40 539 190 1,250
120 1,084 120 913 120 815 80 556
70 482 70 726 70 642 80 791
50 568 50 474 50 573 80 689
I II III IV
x y x y x y x y
100 804 100 914 100 746 80 658
80 695 80 814 80 677 80 576
130 758 130 874 130 1,274 80 771
90 881 90 877 90 711 80 884
110 833 110 926 110 781 80 847
140 996 140 810 140 884 80 704
60 724 60 613 60 608 80 525
40 426 40 310 40 539 190 1,250
120 1,084 120 913 120 815 80 556
70 482 70 726 70 642 80 791
50 568 50 474 50 573 80 689
vs.

45. Santiago Bustelo •M E M B E R
APLICACIÓN
45
vs.

46. Santiago Bustelo •M E M B E R
APLICACIÓN
46
Don Quijote de la Mancha
Don Quijote de la Mancha1 es una novela escrita por el español Miguel
de Cervantes Saavedra.
Publicada su primera parte con el título de El ingenioso hidalgo don
Quijote de la Mancha a comienzos de 1605, es la obra más destacada
de la literatura española yuniversal, además de ser la más publicada y
traducida de la historia después de la Biblia.
Su segunda parte apareció en 1615 con el título de El ingenioso
caballero don Quijote de la Mancha.
Es la primera obra genuinamente desmitificadora de la tradición
caballeresca y cortés por su tratamiento burlesco. Representa la
primera novela moderna y la primera polifónica; como tal, ejerció un
enorme influjo en toda la narrativa europea.
Por considerarse «el mejor trabajo literario jamás escrito», encabezó la
lista de las mejores obras literarias de la historia, que se estableció con
las votaciones de cien grandes escritores de 54 nacionalidades a
petición del Club Noruego del Libro en el 2002; así, fue la única
excepción en el estricto orden alfabético que se había dispuesto.3
vs.
Don Quijote de la Mancha
Don Quijote de la Mancha1 es una novela escrita por el español
Miguel de Cervantes Saavedra.
Publicada su primera parte con el título de El ingenioso hidalgo don
Quijote de la Mancha a comienzos de 1605, es la obra más destacada
de la literatura española yuniversal, además de ser la más publicada y
traducida de la historia después de la Biblia.
Su segunda parte apareció en 1615 con el título de El ingenioso
caballero don Quijote de la Mancha.
Es la primera obra genuinamente desmitificadora de la tradición
caballeresca y cortés por su tratamiento burlesco. Representa la
primera novela moderna y la primera polifónica; como tal, ejerció un
enorme influjo en toda la narrativa europea.
Por considerarse «el mejor trabajo literario jamás escrito», encabezó la
lista de las mejores obras literarias de la historia, que se estableció con
las votaciones de cien grandes escritores de 54 nacionalidades a
petición del Club Noruego del Libro en el 2002; así, fue la única
excepción en el estricto orden alfabético que se había dispuesto.
https://es.wikipedia.org/wiki/
Don_Quijote_de_la_Mancha

47. Santiago Bustelo •M E M B E R
Mucho espacio en
blanco.
…e interlineado generoso, y no mezquinar
el tamaño de letra.
Así logrará un producto para reyes.
Giambattista Bodoni (1766-1813)
47
R E C O M E N D A C I O N E S

48. Santiago Bustelo •M E M B E R
Principios de
SELECCIÓN
48
• Instrucción
• Formación de
hábitos
• Operación
• Selección
• Percepción

49. Santiago Bustelo •M E M B E R
LEY DE HICK-HYMAN
Tiempo necesario para tomar una decisión:
T = a + b log2 ( n +1 )
• a, b: latencia y velocidad,
dependientes del contexto.
Raskin: a falta de datos, tomamos a=50, b=150 msec.
• n: cantidad de opciones
con igual índice de probabilidad.
Más información:
Artículo en Wikipedia sobre Ley de Hick (en inglés)
49

50. Santiago Bustelo •M E M B E R
APLICACIÓN DE LEY DE HICK
Tenemos 32 items con igual probabilidad.
¿Cómo nos conviene disponerlos?
a) Una sola página con 32 items
b) 4 páginas con 8 items cada una
50
T = a + b log2 ( n +1 )
x log2 x
1 0
2 1
3 1.58
4 2
5 2.32
6 2.58
7 2.81
8 3
9 3.17
10 3.32
11 3.46
x log2 x
12 3.58
13 3.7
14 3.81
15 3.91
16 4
17 4.09
18 4.17
19 4.25
20 4.32
21 4.39
22 4.46
x log2 x
23 4.52
24 4.58
25 4.64
26 4.7
27 4.75
28 4.81
29 4.86
30 4.91
31 4.95
32 5
33 5.04

51. Santiago Bustelo •M E M B E R
APLICACIÓN DE LEY DE HICK
Tenemos 32 items con igual probabilidad. ¿Cómo nos conviene disponerlos?
a)Una sola página con 32 items
50 + 150 log2 (32 + 1) = 806,6 ms.
b)4 páginas con 8 items cada una
50 + 150 log2 (8 + 1) = 525,48 ms. cada pantalla
x 4 = 2101,92 ms.
51

52. Santiago Bustelo •M E M B E R
WINDOWS 3.1: UN SOLO PLANO DE DECISIÓN
52

53. Santiago Bustelo •M E M B E R
WINDOWS 95: JERARQUÍAS
53

54. Santiago Bustelo •M E M B E R
WINDOWS 95: JERARQUÍAS
54

55. Santiago Bustelo •M E M B E R
WINDOWS 95: JERARQUÍAS
55

56. Santiago Bustelo •M E M B E R
WINDOWS 95: JERARQUÍAS
56

57. Santiago Bustelo •M E M B E R
WINDOWS 95: JERARQUÍAS
57

58. MIENTRAS TANTO, EN EL ESCRITORIO…

59. Santiago Bustelo •M E M B E R
59
vs.

60. Santiago Bustelo •M E M B E R
SIMPLICIDAD EN LA SELECCIÓN Y OPERACIÓN:
OPERACIÓN NO MODAL
• Una interfaz es modal cuando su respuesta es modificada por un
estado de la misma, y el usuario no es consciente de ese estado.
• Los modos son fuente de errores, confusiones, restricciones
innecesarias y complejidad en la operación.
(Jef Raskin, The Humane Interface)
60

61. MODOS EN LOS NAVEGADORES
Borrar el caracter a la
izquierda del cursor
Si un campo de texto tiene foco
Ir a la página visitada
anteriormente
Si no hay foco en
un campo de texto
Perder todo el trabajo
realizado en la página
Si el formulario perdió foco, o la
página no respeta estándares

62. Santiago Bustelo •M E M B E R
MONOTONÍA: UNA SOLA FORMA DE CONSEGUIR
EL MISMO RESULTADO
• Cuando hay más de un método capaz de producir el mismo
resultado, se requiere de actividad cognitiva adicional para resolver la
forma de realizar la tarea.
(Jef Raskin, The Humane Interface)
62

63. Santiago Bustelo •M E M B E R
MONOTONÍA VS. ENTROPÍA
63
https://www.goodui.org/

64. Santiago Bustelo •M E M B E R
Considerar las
limitaciones humanas.
Simplicidad.
El diseño no debe emplear complejidad
innecesaria.
Susan Weinschenk & Dean Barker
Estética y diseño
minimalista.
Reducir al mínimo la
carga de memoria.
Flexibilidad y eficiencia
de uso.
Hacer al sistema eficiente, para distintos
niveles de experiencia, a través de atajos,
herramientas avanzadas y acciones
frecuentes.
Jakob Nielsen
64
H E U R Í S T I C A S

65. Santiago Bustelo •M E M B E R
Principios de
OPERACIÓN
65
• Instrucción
• Formación de
hábitos
• Operación
• Selección
• Percepción

66. Santiago Bustelo •M E M B E R
PRINCIPIO DE PRIORIZACIÓN: LEY DE PARETO
El 80% de los resultados proviene del 20% de los elementos.
66

67. Santiago Bustelo •M E M B E R
CASO: NAVEGACIÓN POR NIVELES FIJOS
HOME >> RUBROS
67

68. Santiago Bustelo •M E M B E R
CASO: NAVEGACIÓN POR NIVELES FIJOS
HOME >> RUBROS >> SUBRUBROS
68

69. Santiago Bustelo •M E M B E R
CASO: NAVEGACIÓN POR NIVELES FIJOS
HOME >> RUBROS >> SUBRUBROS >>
SUB-SUBRUBROS
69

70. Santiago Bustelo •M E M B E R
CASO: NAVEGACIÓN POR NIVELES FIJOS
HOME >> RUBROS >> SUBRUBROS >>
SUB-SUBRUBROS >> RESULTADOS (EN ORDEN
ALFABÉTICO)
70

71. Santiago Bustelo •M E M B E R
NAVEGACIÓN POR NIVELES FIJOS
CUANTIFICACIÓN
71

72. Santiago Bustelo •M E M B E R
FACETADO CON RESULTADOS PRIORIZADOS
CUANTIFICACIÓN
72

73. Santiago Bustelo •M E M B E R
LEY DE FITTS
Tiempo promedio en apuntar a un objetivo:
T = a + b log2 ( D / W +1 )
• a, b: latencia y velocidad,
determinadas experimentalmente.
Raskin: a falta de datos, tomamos a=50, b=150 msec.
• D: distancia desde el punto de partida
hasta el centro del objetivo.
• W: ancho del objetivo,
medido sobre el eje del movimiento.
Más información:
Artículo en Wikipedia sobre Ley de Fitts
73

74. Santiago Bustelo •M E M B E R
APLICACIÓN DE LEY DE FITTS:
OPTIMIZACIÓN DE OPERACIÓN
• Priorizar ubicación respecto a posición inicial del cursor
• Evitar movimientos complejos: submenúes, drag & drop
• Ampliar y distinguir áreas clickeables:
74
Botón Flash mal hecho link estándar
1 2 3 4 5 6 7 8 9 10
Botón Botón
Opción
Página
Página
1 2 3 4 5 6 7 8 9 10
<label for...>opción</label>
Descripción

75. Santiago Bustelo •M E M B E R
APLICACIÓN DE LEY DE FITTS: SUBMENÚES
Permitir operar submenúes en diagonal, generando un área invisible temporal entre
el cursor y el submenú:
75

76. Santiago Bustelo •M E M B E R
• Separar funciones
• Alejar funciones destructivas de funciones habituales:
APLICACIÓN DE LEY DE FITTS:
REDUCCIÓN DE ERRORES
76

77. ¿SUBIR EL VOLUMEN, O APAGAR?

78. Santiago Bustelo •M E M B E R
Prevención de errores.
Evitar que ocurran problemas: eliminar las
condiciones propensas a errores o
detectarlas antes de que los usuarios se
comprometan a la acción.
Jakob Nielsen
78
H E U R Í S T I C A S

79. Santiago Bustelo •M E M B E R
CUANTIFICACIÓN: KLM-GOMS
Cada operación del usuario tiene un costo.
79
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

80. Santiago Bustelo •M E M B E R
Flexibilidad y eficiencia
de uso.
Jakob Nielsen
Soportar puntos de
control interno.
Los usuarios deben sentir que están al
mando y que el sistema responde a sus
acciones, en lugar de ser ellos quienes
responden al sistema.
Ben Shneiderman
Adaptación.
El diseño cumple con las necesidades y el
comportamiento de cada grupo de
usuarios.
Susan Weinschenk & Dean Barker
Automatizar la carga de
trabajo no deseado.
Liberar recursos cognitivos para tareas de
alto nivel.
Eliminar cálculos mentales, estimaciones,
comparaciones, y pensamiento
innecesario.
Jill Gerhardt-Powals
80
H E U R Í S T I C A S

81. Santiago Bustelo •M E M B E R
AUTOMATIZACIÓN
81

82. M E M B E R
APLICACIÓN PRÁCTICA:
CASOS DE EJEMPLO

83. SISTEMA DE GESTIÓN DE VIDEOCLUB

84. Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

85. Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

86. Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

87. 1234
Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

88. 1234
Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

89. 1234
Gonzalez
Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

90. Ejemplo desarrollado por Diego González,
Fundador Lagash Systems
GonzalezDiego760 Rivadavia 5000 11 B Buenos Aires 12

91. 1234
1
Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

92. No hay stock.
Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

93. Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

94. Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

95. Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

96. 1
Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

97. 1235
1
Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

98. Ejemplo desarrollado por Diego González,
Fundador Lagash Systems

99. Santiago Bustelo •M E M B E R
CUANTIFICACIÓN KLM-GOMS:
BUSCAR CLIENTE 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 menú Clientes »
Modificación: 1,10
click menú Clientes »
Modificación: 0,20
Próxima 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 segundos
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 con recuperación:
32,55 segundos
99

100. REDISEÑO: PRIMER ITERACIÓN
SISTEMA CON DOS CAMPOS DE BÚSQUEDA

101. REDISEÑO: PRIMER ITERACIÓN
SISTEMA CON DOS CAMPOS DE BÚSQUEDA

102. REDISEÑO: PRIMER ITERACIÓN
SISTEMA CON DOS CAMPOS DE BÚSQUEDA

103. REDISEÑO: PRIMER ITERACIÓN
SISTEMA CON DOS CAMPOS DE BÚSQUEDA

104. Santiago Bustelo •M E M B E R
PROPUESTA: UN SOLO CAMPO DE BÚSQUEDA
• Resultado dependiente del contenido.
No hace falta especificar el tipo de dato.
• Patrón Instant Search
• Búsqueda instantánea en todos los campos de la base, de términos que
empiecen con lo ingresado.
Si hay más de un término (separado con espacios) empleamos AND.
• 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.
104

105. Santiago Bustelo •M E M B E R
PRUEBA DE CONCEPTO
105
Prueba de concepto publicada en
http://kambrica.com/raf08
Datos: XLS del
Videoclub con los
datos esenciales que
hayan ingresado para
las Películas.
Datos: Nombres y
apellidos tomados al
azar del Padrón, con
direcciones y números
de teléfono al azar
correspondientes a un
radio de 10 cuadras
con distribución de
Poisson.

106. ¿Qué casos de uso podemos
resolver con este sencillo motor
de búsqueda instantánea?

108. Buscar nombre de un actor nos
devuelve sólo películas

109. Seguir tipeando luego el
nombre de una película,
permite acotar la búsqueda.

110. ¿Qué pasa si empezamos a
tipear la dirección de un
cliente?

111. …¡Sólo nos aparecen clientes!

112. También podemos mezclar
términos: una calle y parte de
un número de teléfono.

113. Santiago Bustelo •M E M B E R
CUANTIFICACIÓN KLM-GOMS:
BÚSQUEDA 2.0
113
Inicio tarea: 1,35
Mover mano al mouse: 0,40
Proxima tarea: 1,35
apuntar Buscar: 1,10
click Buscar: 0,20
Mover 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 de mantener foco en
búsqueda: 4,80 segundos
Total manteniendo
foco de teclado:
5,45 segundos

114. Santiago Bustelo •M E M B E R
ESQUEMA DE INTERACCIÓN
114
Funciones secundarias
listado
películas
alquiler
listado
clientes
detalle película
listado copias
Seleccionar copia
Copias + Cliente =
Ficha Cliente
Seleccionar
película
Buscar peliculas o clientes

115. Santiago Bustelo •M E M B E R
DISEÑO FINAL
115

116. Santiago Bustelo •M E M B E R
MÉTRICAS: KLM-GOMS
116
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%

117. Santiago Bustelo •M E M B E R
¿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
117

118. ¡Muchas gracias!
Para conocer más…
ixda.com.ar
Asociación de Diseño de Interacción
Capítulo Buenos Aires
M E M B E R

119. XII JORNADAS UNIVERSITARIAS DE SISTEMAS DE INFORMACIÓN EN SALUD
15, 16 y 17 DE NOVIEMBRE DE 2017
¿Preguntas?