1. Interfaces
tác,les:
el
desa(o
de
las
tabletas
Armando
Fidalgo

4. K. Hofmeester&K. Markiewicz

5. Diseñar
para
tocar

7. Adecuación de los elementos de la interfaz al
tamaño de los dedos
Istargazer

8. Tamaño
del
obje9vo

9. Adecuación de los elementos de la interfaz al
tamaño de los dedos
Punta:
8-10 mm
Yema/pulpejo:
10-14 mm Diametro:
16-20 mm

10. Tamaño
del
obje9vo
7 mm
7 mm Recomendado general
9 mm
Óptimo por precisión
9 mm § Para cerrar, eliminar o acciones graves o
importantes
5 mm
Óptimo para tamaños pequeños
5 mm § Si se necesita apilar gran cantidad de
elementos

11. El tamaño del objetivo influye en la
tasa de errores

12. Efecto
iceberg
Objetivo visual
Área táctil
OK

13. Zona pulsable
La zona pulsable debe ser igual o mayor al
tamaño real (visual) del botón.
13

14. Espacio
en
blanco
entre
obje9vos
2 mm
2 mm (al menos) de separación visual reduce
errores y la percepción de dificultad.
14

15. 15

16. El espacio entre objetivos táctiles debe ser
inversamente proporcional al tamaño de los
objetos adyacentes.
T. Wood

17. Espacio muerto
El espacio muerto reduce el peligro de pulsar otro
botón por equivocación.
17

18. Al
alcance
de
la
mano

19. ¿Cómo sostienen los usuarios
el dispositivo?

20. Diseñar en función de cómo sostienen el
dispositivo los usuarios
Microsoft

21. Microsoft

22. Áreas
de
interacción
Microsoft D. Saffer

23. Facilitar las
acciones Dificultar las
principales acciones
decisivas

24. Acciones
principales

25. Acciones
habituales

27. Áreas
de
interacción
Raizlabs

29. Evitar situar
controles en el
centro superior

31. Los
lenguajes
tác,les

32.
Hay
muchas
posibilidades...
Gestureworks

33.
Caracterís9cas
de
nuestra
anatomía...

34. Convenciones...

35. Drag (2
Tap DblTap Fling Drag Spread Pinch Press Rotate
Fngr)
Pinch Pinch Touch & 2- Finger
iOS Tap DblTap Flick Drag X
Open Close Hold Scroll
Touch &
WP7 Tap DblTap Flick Pan Pinch Pinch X X
Hold
Swipe /
Touch &
webOS Tap DblTap Flick Touch Spread Pinch X Rotate
Hold
&Drag
Touch &
Android Tap DblTap Flick Drag Pinch Pinch X X
Hold
N. Koechley

36. Gestos
principales
§ Seleccionar un elemento o
control
§ Scroll rápido

37. § Abrir
§ Acercar y centrar un bloque de
contenido o una imagen.
§ Alejar si algo está acercado.

38. § Borrar
§ Mover
§ Desplazar

39. § Mover o desplazar
§ Hacer scroll rápido

40. § Reducir o encoger un objeto
§ Zoom out /alejar

41. § Ampliar o agrandar un objeto
§ Zoom in /acercar

42. § Cambiar modo
§ Hacer scroll

43. Mover

44. Ajustar

45. Girar o voltear un objeto

46. Gestos
básicos
46

47. Asegurar que el usuario puede
realizar las acciones principales y
acceder a los contenidos principales

49. Proceso alternativo

51. No recargar la pantalla de controles

52. Hacer la interacción reversible

53. Cuanto más complicados sean los gestos,
menos personas podrán realizarlos

54. Emular
las
interacciones
“naturales”

55. Acción
y
manipulación
directa

56. Acción – reacción/percepción están cerca,
similar al mundo físico
B. Pagán

57. Proximidad espacial: la acción del usuario está
cerca físicamente del elemento sobre el que actúa

58. Proximidad temporal: el elemento de la interfaz
reacciona al mismo tiempo que la acción del usuario

59. Acción paralela: hay correlación (orientación, escala, velocidad….)
entre la acción del usuario y la reacción del elemento en la interfaz

60. Interactuar directamente con
el contenido

61. Interactuar directamente con
el contenido

62. Interactuar directamente con
el contenido

63. El contenido es la interfaz

64. El contenido es lo principal

67. Sensación
de
realismo

69. “ When appropriate, add a realistic,
physical dimension to your application.
Often, the more true to life your
application looks and behaves, the
easier it is for people to understand
how it works and the more they enjoy
”
using it
iOS Human Interface Guidelines

70. Toques de realismo
Manipulación directa del contenido, en lugar de uso de controles
Respuesta inmediata a cada toque del usuario
Mostrar inercia en los objetos y contenidos que se pueden mover

71. Utilización de metáforas del mundo físico

73. Realismo visual = realismo de interacción

74. No romper la metáfora

75. “ Skeuomorphism is the use of
previously necessary design
elements in a place they are no
longer necessary in order to increase
”
appeal or usability
Andrew Watterson

76. Pistas de comportamiento falsas
Amplio consumo de espacio
Ruido visual y distracción
Asumir que es conocido y familiar

78. “
Leather buttons ... feels very much like
real leather buttons would feel: Tacky.
[Calendar app] feels wrong and it is
wrong. It’s kitsch.
If you use favor style over function to
make something look like something it is
not, you are not a product designer, you
”
are an illusion artist.
Oliver Reichenstein

80. Feedback
adecuado
e
inmediato

81. Ofrecer un feedback apropiado, claro
y a tiempo al usuario para que vea los
resultados de sus acciones y conozca
qué está pasando con el sistema.

82. Acción – reacción
Comunicar que la acción se
ha realizado con éxito.

83. Tipos de feedback:
§ Visual
§ Sonoro
§ Táctil

84. Feedback visual es el
principal y más importante.

85. Cambiar de color
Cambiar de tamaño
Moverse

86. Feedback sonoro de apoyo,
no como sistema principal.
Utilizar tonos bajos.
Se pueden ofrecer diferentes
sonidos según la acción.

88. Feedback táctil ofrece una
respuesta inmediata al
usuario.
Adecuada para entornos
ruidosos.
Crea aplicaciones más
realistas y refuerza la
metáfora física.

89. Experiencia atractiva y emocional
Personalización
Efecto de teclado mecánico

90. Feedback inmediato

91. Animación:
interacción
más
natural
e
intui,va

92. E. Muybridge

93. Sensación de realismo usando
efectos del mundo físico
Inercia
Velocidad
Aceleración y desaceleración
Elasticidad
Fricción

95. Mejora la orientación
Las transiciones visuales mejoran la comprensión de
lo que ha pasado
Muestra cambios de estado o situación
Muestra relaciones entre elementos
Anticipación: Prepara al usuario sobre que lo va a
pasar a continuación.

97. Dirige la atención del usuario
La percepción periférica del movimiento es eficiente
Puede ayudar en los cambios de elementos
pequeños o fuera del centro de la pantalla

98. Ofrece continuidad y mantiene el flujo
Las transiciones suaves añaden realismo
Crea consistencia y continuidad
Las transiciones deben ser suaves y sutiles para no
llamar la atención hacia sí mismas

100. Ofrece continuidad y mantiene el flujo
Reducir el cambio entre pantallas puede mantener el flujo
De pantallas discretas a movimiento continuo
Abrir, cerrar y refrescar paneles con gestos
Abrir el contenido y medias en la página

101. Futuro:
explorar
un
lenguaje
tác9l

102. K. Hofmeester&K. Markiewicz

103. Multigestos
R. Zinner

104. Multimodos

105. Momento
de
transición
Nueva Copia del Nuevo
tecnología lenguaje antiguo lenguaje
Asegurar la interacción básica
Fomentar la creación e innovación

106. “ Buttons are sometimes a lazy touch
designer’s easy way out, but
”
sometimes they’re a necessity
Suzanne Ginsburg

111. La comunicación humana es mejor
cuando combina varios sentidos

112. Las interfaces futuras estarán basadas en todos
los sentidos humanos
THE MAGIC COMES
WHEN WE BLEND
THE SENSES TOGETHER

113. Métodos
de
intput
Microsoft

114. Métodos
de
output
Microsoft

115. n la
Nuestra tarea más in mediata es trabajar e
interacción táctil

116. ¡Gracias!
Gracias
a
Dani
Armengol
armando@usolab.com
afidalgo@gmail.com