Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Interfaces	  tác,les:	  	  el	  desa(o	  de	  las	  tabletas	  Armando	  Fidalgo	  
K. Hofmeester&K. Markiewicz
Diseñar	  para	  tocar                       	  
Adecuación de los elementos de la interfaz al             tamaño de los dedosIstargazer
Tamaño	  del	  obje9vo	  
Adecuación de los elementos de la interfaz altamaño de los dedos                        Punta:                        8-10...
Tamaño	  del	  obje9vo	  7 mm        7 mm    Recomendado general9 mm                Óptimo por precisión         9 mm   §...
El tamaño del objetivo influye en latasa de errores
Efecto	  iceberg	                               Objetivo visual                                Área táctilOK
Zona pulsableLa zona pulsable debe ser igual o mayor altamaño real (visual) del botón.                                    ...
Espacio	  en	  blanco	  entre	  obje9vos                                              	                     2 mm2 mm (al m...
15
El espacio entre objetivos táctiles debe ser          inversamente proporcional al tamaño de los          objetos adyacent...
Espacio muertoEl espacio muerto reduce el peligro de pulsar otrobotón por equivocación.                                   ...
Al	  alcance	  de	  la	  mano	  
¿Cómo sostienen los usuariosel dispositivo?
Diseñar en función de cómo sostienen eldispositivo los usuarios Microsoft
Microsoft
 Áreas	  de	  interacción	  Microsoft                                        D. Saffer
Facilitar lasacciones        Dificultar lasprincipales     acciones                decisivas
Accionesprincipales
Accioneshabituales
Áreas	  de	  interacción	  Raizlabs
Evitar situarcontroles en elcentro superior
Los	  lenguajes	  tác,les                          	  
            Hay	  muchas	  posibilidades...                                           	                              	  Ge...
 Caracterís9cas	  de	  nuestra	  anatomía...                                             	                          	  
Convenciones...              	  
Drag (2                Tap   DblTap   Fling    Drag     Spread   Pinch   Press                 Rotate                     ...
Gestos	  principales                    	               §  Seleccionar un elemento o                 control             ...
§  Abrir§  Acercar y centrar un bloque de    contenido o una imagen.§  Alejar si algo está acercado.
§  Borrar§  Mover§  Desplazar
§  Mover o desplazar§  Hacer scroll rápido
§  Reducir o encoger un objeto§  Zoom out /alejar
§  Ampliar o agrandar un objeto§  Zoom in /acercar
§  Cambiar modo§  Hacer scroll
Mover
Ajustar
Girar o voltear un objeto
Gestos	  básicos                	                         46
Asegurar que el usuario puederealizar las acciones principales yacceder a los contenidos principales
Proceso alternativo
No recargar la pantalla de controles
Hacer la interacción reversible
Cuanto más complicados sean los gestos,menos personas podrán realizarlos
Emular	  las	  interacciones	       “naturales”        	  
Acción	  y	  manipulación	  directa	  
Acción – reacción/percepción están cerca,           similar al mundo físicoB. Pagán
Proximidad espacial: la acción del usuario estácerca físicamente del elemento sobre el que actúa
Proximidad temporal: el elemento de la interfazreacciona al mismo tiempo que la acción del usuario
Acción paralela: hay correlación (orientación, escala, velocidad….) entre la acción del usuario y la reacción del elemento...
Interactuar directamente conel contenido
Interactuar directamente conel contenido
Interactuar directamente conel contenido
El contenido es la interfaz
El contenido es lo principal
Sensación	  de	  realismo	  
“   When appropriate, add a realistic,    physical dimension to your application.    Often, the more true to life your    ...
Toques de realismoManipulación directa del contenido, en lugar de uso de controles                  Respuesta inmediata a ...
Utilización de metáforas del mundo físico
Realismo visual = realismo de interacción
No romper la metáfora
“   Skeuomorphism is the use of    previously necessary design    elements in a place they are no    longer necessary in o...
Pistas de comportamiento falsas     Amplio consumo de espacio        Ruido visual y distracciónAsumir que es conocido y fa...
“Leather buttons ... feels very much likereal leather buttons would feel: Tacky.[Calendar app] feels wrong and it iswrong....
Feedback	  adecuado	  e	  inmediato	  
Ofrecer un feedback apropiado, claroy a tiempo al usuario para que vea losresultados de sus acciones y conozcaqué está pas...
Acción – reacciónComunicar que la acción seha realizado con éxito.
Tipos de feedback:§  Visual§  Sonoro§  Táctil
Feedback visual es elprincipal y más importante.
Cambiar de colorCambiar de tamaño         Moverse
Feedback sonoro de apoyo,no como sistema principal.Utilizar tonos bajos.Se pueden ofrecer diferentessonidos según la acción.
Feedback táctil ofrece unarespuesta inmediata alusuario.Adecuada para entornosruidosos.Crea aplicaciones másrealistas y re...
Experiencia atractiva y emocional                 Personalización       Efecto de teclado mecánico
Feedback inmediato
Animación:	  interacción	  más	  natural	                 e	  intui,va	  
E. Muybridge
Sensación de realismo usandoefectos del mundo físico                          Inercia                        Velocidad    ...
Mejora la orientaciónLas transiciones visuales mejoran la comprensión de                  lo que ha pasado          Muestr...
Dirige la atención del usuarioLa percepción periférica del movimiento es eficiente       Puede ayudar en los cambios de el...
Ofrece continuidad y mantiene el flujo          Las transiciones suaves añaden realismo                  Crea consistencia...
Ofrece continuidad y mantiene el flujoReducir el cambio entre pantallas puede mantener el flujo          De pantallas disc...
Futuro:	  explorar	  un	  lenguaje	  tác9l                                             	  
K. Hofmeester&K. Markiewicz
MultigestosR. Zinner
Multimodos
Momento	  de	  transición	    Nueva         Copia del              Nuevotecnología   lenguaje antiguo         lenguaje    ...
“   Buttons are sometimes a lazy touch    designer’s easy way out, but                                ”    sometimes they’...
La comunicación humana es mejorcuando combina varios sentidos
Las interfaces futuras estarán basadas en todos los sentidos humanosTHE MAGIC COMESWHEN WE BLENDTHE SENSES TOGETHER
Métodos	  de	  intput                                  	  Microsoft
Métodos	  de	  output                                  	  Microsoft
n laNuestra tarea más in mediata es trabajar einteracción táctil
¡Gracias!               	  Gracias	  a	  Dani	  Armengol                               	               armando@usolab.com	...
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Interfaces táctiles: el desafío de las tabletas
Upcoming SlideShare
Loading in …5
×

Interfaces táctiles: el desafío de las tabletas

10,937 views

Published on

Interfaces táctiles: el desafío de las tabletas

  1. 1. Interfaces  tác,les:    el  desa(o  de  las  tabletas  Armando  Fidalgo  
  2. 2. K. Hofmeester&K. Markiewicz
  3. 3. Diseñar  para  tocar  
  4. 4. Adecuación de los elementos de la interfaz al tamaño de los dedosIstargazer
  5. 5. Tamaño  del  obje9vo  
  6. 6. Adecuación de los elementos de la interfaz altamaño de los dedos Punta: 8-10 mm Yema/pulpejo: 10-14 mm Diametro: 16-20 mm
  7. 7. Tamaño  del  obje9vo  7 mm 7 mm Recomendado general9 mm Óptimo por precisión 9 mm §  Para cerrar, eliminar o acciones graves o importantes5 mm Óptimo para tamaños pequeños 5 mm §  Si se necesita apilar gran cantidad de elementos
  8. 8. El tamaño del objetivo influye en latasa de errores
  9. 9. Efecto  iceberg   Objetivo visual Área táctilOK
  10. 10. Zona pulsableLa zona pulsable debe ser igual o mayor altamaño real (visual) del botón. 13
  11. 11. Espacio  en  blanco  entre  obje9vos   2 mm2 mm (al menos) de separación visual reduceerrores y la percepción de dificultad. 14
  12. 12. 15
  13. 13. El espacio entre objetivos táctiles debe ser inversamente proporcional al tamaño de los objetos adyacentes.T. Wood
  14. 14. Espacio muertoEl espacio muerto reduce el peligro de pulsar otrobotón por equivocación. 17
  15. 15. Al  alcance  de  la  mano  
  16. 16. ¿Cómo sostienen los usuariosel dispositivo?
  17. 17. Diseñar en función de cómo sostienen eldispositivo los usuarios Microsoft
  18. 18. Microsoft
  19. 19.  Áreas  de  interacción  Microsoft D. Saffer
  20. 20. Facilitar lasacciones Dificultar lasprincipales acciones decisivas
  21. 21. Accionesprincipales
  22. 22. Accioneshabituales
  23. 23. Áreas  de  interacción  Raizlabs
  24. 24. Evitar situarcontroles en elcentro superior
  25. 25. Los  lenguajes  tác,les  
  26. 26.   Hay  muchas  posibilidades...    Gestureworks
  27. 27.  Caracterís9cas  de  nuestra  anatomía...    
  28. 28. Convenciones...  
  29. 29. 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 HoldN. Koechley
  30. 30. Gestos  principales   §  Seleccionar un elemento o control §  Scroll rápido
  31. 31. §  Abrir§  Acercar y centrar un bloque de contenido o una imagen.§  Alejar si algo está acercado.
  32. 32. §  Borrar§  Mover§  Desplazar
  33. 33. §  Mover o desplazar§  Hacer scroll rápido
  34. 34. §  Reducir o encoger un objeto§  Zoom out /alejar
  35. 35. §  Ampliar o agrandar un objeto§  Zoom in /acercar
  36. 36. §  Cambiar modo§  Hacer scroll
  37. 37. Mover
  38. 38. Ajustar
  39. 39. Girar o voltear un objeto
  40. 40. Gestos  básicos   46
  41. 41. Asegurar que el usuario puederealizar las acciones principales yacceder a los contenidos principales
  42. 42. Proceso alternativo
  43. 43. No recargar la pantalla de controles
  44. 44. Hacer la interacción reversible
  45. 45. Cuanto más complicados sean los gestos,menos personas podrán realizarlos
  46. 46. Emular  las  interacciones   “naturales”  
  47. 47. Acción  y  manipulación  directa  
  48. 48. Acción – reacción/percepción están cerca, similar al mundo físicoB. Pagán
  49. 49. Proximidad espacial: la acción del usuario estácerca físicamente del elemento sobre el que actúa
  50. 50. Proximidad temporal: el elemento de la interfazreacciona al mismo tiempo que la acción del usuario
  51. 51. 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
  52. 52. Interactuar directamente conel contenido
  53. 53. Interactuar directamente conel contenido
  54. 54. Interactuar directamente conel contenido
  55. 55. El contenido es la interfaz
  56. 56. El contenido es lo principal
  57. 57. Sensación  de  realismo  
  58. 58. “ 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
  59. 59. Toques de realismoManipulación directa del contenido, en lugar de uso de controles Respuesta inmediata a cada toque del usuarioMostrar inercia en los objetos y contenidos que se pueden mover
  60. 60. Utilización de metáforas del mundo físico
  61. 61. Realismo visual = realismo de interacción
  62. 62. No romper la metáfora
  63. 63. “ 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
  64. 64. Pistas de comportamiento falsas Amplio consumo de espacio Ruido visual y distracciónAsumir que es conocido y familiar
  65. 65. “Leather buttons ... feels very much likereal leather buttons would feel: Tacky.[Calendar app] feels wrong and it iswrong. It’s kitsch.If you use favor style over function tomake something look like something it isnot, you are not a product designer, you ”are an illusion artist.Oliver Reichenstein
  66. 66. Feedback  adecuado  e  inmediato  
  67. 67. Ofrecer un feedback apropiado, claroy a tiempo al usuario para que vea losresultados de sus acciones y conozcaqué está pasando con el sistema.
  68. 68. Acción – reacciónComunicar que la acción seha realizado con éxito.
  69. 69. Tipos de feedback:§  Visual§  Sonoro§  Táctil
  70. 70. Feedback visual es elprincipal y más importante.
  71. 71. Cambiar de colorCambiar de tamaño Moverse
  72. 72. Feedback sonoro de apoyo,no como sistema principal.Utilizar tonos bajos.Se pueden ofrecer diferentessonidos según la acción.
  73. 73. Feedback táctil ofrece unarespuesta inmediata alusuario.Adecuada para entornosruidosos.Crea aplicaciones másrealistas y refuerza lametáfora física.
  74. 74. Experiencia atractiva y emocional Personalización Efecto de teclado mecánico
  75. 75. Feedback inmediato
  76. 76. Animación:  interacción  más  natural   e  intui,va  
  77. 77. E. Muybridge
  78. 78. Sensación de realismo usandoefectos del mundo físico Inercia Velocidad Aceleración y desaceleración Elasticidad Fricción
  79. 79. Mejora la orientaciónLas 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.
  80. 80. Dirige la atención del usuarioLa percepción periférica del movimiento es eficiente Puede ayudar en los cambios de elementos pequeños o fuera del centro de la pantalla
  81. 81. Ofrece continuidad y mantiene el flujo Las transiciones suaves añaden realismo Crea consistencia y continuidadLas transiciones deben ser suaves y sutiles para no llamar la atención hacia sí mismas
  82. 82. Ofrece continuidad y mantiene el flujoReducir 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
  83. 83. Futuro:  explorar  un  lenguaje  tác9l  
  84. 84. K. Hofmeester&K. Markiewicz
  85. 85. MultigestosR. Zinner
  86. 86. Multimodos
  87. 87. Momento  de  transición   Nueva Copia del Nuevotecnología lenguaje antiguo lenguaje Asegurar la interacción básica Fomentar la creación e innovación
  88. 88. “ Buttons are sometimes a lazy touch designer’s easy way out, but ” sometimes they’re a necessity Suzanne Ginsburg
  89. 89. La comunicación humana es mejorcuando combina varios sentidos
  90. 90. Las interfaces futuras estarán basadas en todos los sentidos humanosTHE MAGIC COMESWHEN WE BLENDTHE SENSES TOGETHER
  91. 91. Métodos  de  intput  Microsoft
  92. 92. Métodos  de  output  Microsoft
  93. 93. n laNuestra tarea más in mediata es trabajar einteracción táctil
  94. 94. ¡Gracias!  Gracias  a  Dani  Armengol   armando@usolab.com   afidalgo@gmail.com    

×