Diseño de interface para pantallas táctiles. Touch Design vs. Click Design.

4,673
-1

Published on

Los dispositivos táctiles modifican nuestra forma de interactuar con la web y las aplicaciones para smartphones y tablets.
Un paso más allá del concepto responsive, del diseño de espacios web que fluyen según se visualicen desde un dispositivo u otro, surge un segundo reto: diseñar y programar para un usuario que se relaciona directamente con el contenido, sin el click de su ratón, sólo con sus gestos.

Published in: Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,673
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
280
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Diseño de interface para pantallas táctiles. Touch Design vs. Click Design.

  1. 1. El diseño para interfaces táctiles Touch design VS Click design
  2. 2. Los dispositivos táctiles modifican nuestra forma de interactuar con la web y las aplicaciones móviles. Un paso más allá del concepto responsive, del diseño de espacios web que fluyen según se visualicen desde un dispositivo u otro, surge el segundo reto: diseñar y programar, para un usuario que se relaciona directamente con el contenido, sin el click de su ratón, sólo con sus gestos.
  3. 3. 01 Contextos para la interacción de los usuarios El paradigma de la interacción con el dispositivo y lo que contiene ha cambiado.
  4. 4. Interacción “tradicional” a través de periféricos. Cómo lo hemos hecho hasta ahora. Del teclado al track-pad
  5. 5. Teclado: lenguaje escrito; código; comandos (atajos de teclado)
  6. 6. Ratón: movimiento de arrastre; clicks (botón derecho - izquierdo); scroll.
  7. 7. Pen-tablet: movimiento arrastre; clicks (botón derecho - izquierdo); scroll.
  8. 8. Track-pad: movimientos y clicks sobre un panel y gestos.
  9. 9. Interacción a través de pantalla táctil. Este es el cambio sustancial.
  10. 10. PeriféricoUsuario Contenido
  11. 11. Interacción del usuario directamente con el contenido.
  12. 12. Éste es el cambio sustancial que afecta a la manera en que el usuario interactúa con el dispositivo y el contenido, y por extensión a la manera en la que nosotros tenemos que pensar y diseñar esa interacción y esos contenidos.
  13. 13. Tipos de dispositivos táctiles. Más allá de los móviles y tablets.
  14. 14. ● Cajeros automáticos ● Quioscos ● TPVs - Terminales de Punto de Venta ● Mezcladoras de sonido - bandejas ● Monitores de ordenador ● Ordenadores portátiles ● PDAs - Personal Digital Assistant (Asistente digital personal) ● Teléfonos móviles (los hay táctiles, que no son smartphones) ● Smartphones ● Phablets* ● Tablets ● Reproductores MP3 ● Cámara digitales ● Otros: impresoras, escáneres, cafeteras... * Phablet es un dispositivo cuyo tamaño es mayor que el móvil y menor que la tableta. Incluye las características del móvil, tableta, escritorio y portátil. Su principal característica es una pantalla de 4-5 pulgadas.
  15. 15. Cajeros automáticosQuiosco TPV Bandeja de sonido PDA
  16. 16. Cámara digitalReproductor MP3 Monitores interactivos
  17. 17. Smartphones
  18. 18. Tablets
  19. 19. Phablets
  20. 20. De entre los distintos tipos de dispositivos táctiles, nos centramos en el segmento que corresponde a los smartphones y tablets. Al inicio de su comercialización la diferencia entre smartphones y tablets quedaba marcada por la diferencia de funcionalidades y del tamaño de pantalla. Esta frontera se va desvaneciendo.
  21. 21. Y hablando de tamaños, ¿cuál es el nuevo 1024x768? No es posible hablar de tamaños de pantalla standard. Porque ya existen multitud de posibilidades y porque constantemente salen nuevos formatos al mercado.
  22. 22. 02 La pantalla táctil, adiós al click
  23. 23. La pantalla táctil es una pantalla de visualización electrónica, a través de la cual el usuario puede controlar su contenido mediante gestos simples o múltiples, con uno o más dedos. La definición.
  24. 24. El usuario puede utilizar la pantalla táctil para reaccionar a lo que se muestra y para controlar la forma en que se muestra (más grande, más pequeño, giros…).
  25. 25. Algunas pantallas táctiles también pueden detectar objetos, como un lápiz óptico o guantes recubiertos especiales.
  26. 26. Pequeños apuntes históricos. - La primer interfaz táctil está patentada por Samuel C. Hurst en 1971. Este desarrollo sirvió como base inicial para la infinita variedad de dispositivos que hoy utilizan este tipo de interfaz. - En el año 2000 esta tecnología se usó en los teléfonos móviles con la aparición de un modelo de Motorolay casi al mismo tiempo un Ericssonque hacía las veces de organizador personal y móvil. - A finales de 2006 y principios de 2007, con la aparición del primer iPhone y otros móviles táctiles, el término táctil se convierte en una palabra corriente en nuestro lenguaje diario. Fuente: http://cydmatica.blogspot.de/2013/05/pantallas-tactiles-su-historia.html
  27. 27. Tipos de pantallas táctiles según su tecnología, las más extendidas: - Resistivas - Capacitativas - Infrarrojas Otras tecnologías: Onda acústica, imagen óptica, galgas extensométricas, de señal dispersa, de reconocimiento por pulsos acústicos...
  28. 28. Pantallas resistivas Son las más económicas y no les afectan el polvo ni el agua, y son precisas y pueden ser usadas con un puntero o con el dedo. Sin embargo, pierden hasta un 25% del brillo y son gruesas. “Las pantallas resistivas son más baratas y están más extendidas, por ejemplo en los Pocket PC de Windows Mobile o el Nokia 5800.” http://www.xatakamovil.com/desarrollo/pantallas-tactiles-capacitivas-vs- resistivas
  29. 29. Pantallas capacitativas Muy buena calidad de imagen, tienen mejor respuesta que las anteriores y algunas permiten el uso de varios dedos a la vez (multitouch). Son más caras y no se pueden usar con puntero normal, sino con uno especial para tal fin o con un guante también especial para ello. “Las pantallas capacitivas son más caras de fabricar y están presentes en el iPhone o el LG KF750 Secret, entre otros móviles.” http://www.xatakamovil.com/desarrollo/pantallas-tactiles-capacitivas-vs- resistivas
  30. 30. Pantallas infrarrojas Entre las ventajas está que se puede tocar además de con el dedo, con cualquier otro objeto o con guantes. También son multitouch aunque son más caras que las dos anteriores. Lo último son las pantallas LED infrarrojas.
  31. 31. Fuente: http://www.netambulo.com/2012/11/13/tipos-de-pantallas-tactiles-resistivas-capacitivas-e-infrarrojas/
  32. 32. 03 El usuario que todo lo toca. Conoce a tu público.
  33. 33. ● Población mundial = algo menos de 7.000 millones de personas. ● En el mundo hay más de 5.000 millones de teléfonos móviles. ● De los cuales 1.075 son smartphones. Fuente: Wikipedia Algunas cifras. En 2013...
  34. 34. ● Los usuarios de teléfonos móviles serán 9.300 millones. ● De los cuales 5.600 millones serán smartphones. Fuente: El mundo Y una previsión para el 2019...
  35. 35. Según la fuente, los datos pueden resultar sorprendentes. Af-studio.pl y supermonitoring.com arroja los siguientes datos sobre 2013: ● 91% de todas las personas del planeta tienen un móvil. ● 56% tienen un smartphone.
  36. 36. ● 50% de los usuarios de teléfonos móviles, lo usan como su fuente principal de Internet. ● 80% del tiempo utilizado en dispositivos móviles, lo usan dentro de las aplicaciones. ● 72% de las personas que tienen tablet, hacen compras online cada semana. (Guau!)
  37. 37. Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013. Telefonía y móviles Evolución de mercado de los smartphones entre 2011 y 2013.
  38. 38. Tablets Evolución de mercado de las tablets entre 2010 y 2013. 18 millones 15 millones iPads 3 millones Android 68,7 millones 40 millones iPads 30 millones Android 128 millones 55 millones iPads 70 millones Android 221 millones 77 millones iPads 134 millones Android 2010 2011 2012 2013 Fuentes: http://blog.seinet.es/evolucion-de-la-venta-de-tablets-en-tres-anos/ http://iblnews.com/story/80962
  39. 39. Y si nos mojamos sacando conclusiones... Android parece ser la plataforma mayoritaria en ambos mercados: móviles y tablets.
  40. 40. Y si nos mojamos sacando conclusiones... Pero quizá la tendencia de uso y aspecto en las tablets, haya sido creada por la plataforma Apple.
  41. 41. Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013. ¿Qué hacemos con el móvil? ● 32% en juegos ● 18% navegar en la red ● 18% en Facebook ● 8% en utilidades ● 8% en entretenimiento ● 6% en redes sociales ● 2% en noticias ● 2% en productividad ● 6% para otros usos
  42. 42. Además... ● El 50% de los usuarios de internet lo hace de manera principal o exclusiva a través de smartphones. ● El consumo medio de Apps en un periodo de 30 días es de 6,5. ● El 80% del tiempo está dedicado a las Apps. Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.
  43. 43. Otros datos importantes ● Frente al casi 30% de los mails que son abiertos en los móviles, sólo un poco más del 10% se hace desde las tablets. Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.
  44. 44. ● 60% de los usuarios de Twitter accede a través de su smartphone ● 44% de los usuarios de smartphone ha dormido con su dispositivo en su mesilla de noche para no perderse ninguna notificación. Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.
  45. 45. ¿Qué hacemos con la tablet? Fuente: http://www.tabinnovation.com/informetab/ A nivel estatal, contamos con el #informeTAB de UNIR, elaborado en 2013 por Redbility. El informe analiza cuáles son los principales terminales empleados, qué empleo se le da, cuál fue el motivo de compra y a qué otros dispositivos sustituye.
  46. 46. Algunas conclusiones: ● Las tablet más comunes son los diferentes modelos de Apple y Samsung.
  47. 47. Algunas conclusiones: ● La tablet es el sustituto del ordenador portátil en el ámbito doméstico. ● Los motivos de compra: se menciona la comodidad, y el hecho de que haya sido un regalo.
  48. 48. Algunas conclusiones: ● La tablet es el sustituto del ordenador portátil en el ámbito doméstico. ● Los motivos de compra: se menciona la comodidad, y el hecho de que haya sido un regalo.
  49. 49. ¿Cuándo utilizamos la tablet? ● Por la mañana en el trabajo ● Por la tarde en el sillón ● Por la noche en la cama
  50. 50. ¿Y para qué? ● Para comunicarse (ya sea por mail o redes sociales) ● Para informarse (lectura de prensa online, información meteorológica, viajes…) ● Para jugar.
  51. 51. También para los niños ● En 3 de cada 10 hogares, los niños usan las tablet, principalmente entre los 7 y los 12 años, lo que supone aproximadamente el 77% del total de hogares con hijos (fuente: INE).
  52. 52. Y si volvemos a los datos internacionales… ● El 80% de los usuarios de smartphones y el 81% de los usuarios de tablets utiliza su dispositivo en frente de la televisión. ¿interactuamos o sólo es el lugar donde está el sofá?
  53. 53. 04 Tocar para comprar. ¿Compramos a través de tablets y móviles?
  54. 54. El 68% de los usuarios de móviles busca información sobre productos a través de su dispositivo. De este 68%, el 35% compra a través de su teléfono móvil.
  55. 55. El 67% de los usuarios de tablets busca información sobre productos a través de su dispositivo. De este 67%, el 41% compra a través de su tablet.
  56. 56. Tab-commerce ● El 56% de los usuarios de tablet reconocen emplear la tablet para comprar, casi el doble que la tendencia de compra normal de internautas. ● El 77% de ellos prefieren consumir a través del navegador, antes que con la APP de comercio electrónico.
  57. 57. Tab-commerce
  58. 58. Negocio a través de smartphone y tablet La tendencia al uso del móvil estando en el comercio para incrementar la experiencia de la compra es a la alza. Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.
  59. 59. ¿Para qué utilizamos los smartphones y tablets en nuestro proceso de compra, e incluso en la tienda/negocio? ● Para comparar la compra ● Para buscar cupones de descuento ● Para buscar versiones del producto ● Para obtener información adicional ● Para consultar opiniones sobre el producto ● Para comprar on-line en vez de en la tienda
  60. 60. Negocio a través de smartphone y tablet ● 52% de los usuarios de tablet prefiere comprar utilizando su tablet que su PC. ● Los usuarios de tablets gastan un 50% más de dinero que los compradores a través de PC ● 72% de las personas que tienen tablet, hacen compras online cada semana. ● Los usuarios de tablets que visitan una tienda on-line son tres veces más propensos a comprar on-line que los que lo hacen a través de un móvil. Fuente: Infografía por AF- Studio y Super Monitoring. Datos mundiales en 2013.
  61. 61. ¿A qué se debe el éxito en la interacción táctil en este tipo de dispositivos? Y después de estos datos, nos preguntamo:s
  62. 62. A la naturalidad con la que nos relacionamos con ellos, mediante gestos ergonómicos. NUI: Natural User Interface
  63. 63. A la capacidad de simular reacciones físicas conocidas (gravedad, inercia, velocidad…) en las reacciones del contenido.
  64. 64. A la relación directa, acercándonos más y humanizando a ambos: dispositivo y contenido.
  65. 65. A la posibilidad de adaptar el dispositivo a nosotros y nuestro entorno.
  66. 66. A la sensación de control sobre el dispositivo, en la que parece que es el objeto el que está atento a nosotros y no al contrario.
  67. 67. 05 Principios básicos del diseño de interface táctil Usabilidad en diseño táctil: Smartphones y Tablets
  68. 68. Diseñar para el tamaño REAL de los dedos *
  69. 69. Diseñar para el tamaño REAL de los dedos Hay que adecuar el tamaño de los elementos de la interfaz al tamaño de los dedos del usuario Fuente: http://www.slideshare. net/Afidalgo/interfaces-tctiles-ux- spain
  70. 70. Diseñar para el tamaño REAL de los dedos Y aunque cada uno tenemos nuestras manitas... Punta: 8 - 10 mm. Yema: 10 - 14 mm. Diámetro: 16 - 20 mm.
  71. 71. Diseñar para el tamaño REAL de los dedos Tamaño del objetivo: 7 mm 7 mm 9 mm 9 mm 5 mm 5 mm Recomendado general Óptimo por precisión Para cerrar, eliminar o acciones importantes Óptimo para tamaños pequeños Si hay que listar gran cantidad de elementos El tamaño del elemento influye en el % de errores *
  72. 72. Diseñar para el tamaño REAL de los dedos Tamaño del objetivo: * El 9x9 en los iconos de las Apps
  73. 73. Diseñar para el tamaño REAL de los dedos Efecto Iceberg Zona pulsable La zona pulsable ha de ser igual o mayor al tamaño visual del botón Objeto
  74. 74. Diseñar para el tamaño REAL de los dedos Efecto Iceberg La zona pulsable ha de ser igual o mayor al tamaño visual del botón
  75. 75. Diseñar para el tamaño REAL de los dedos Espacio en blanco entre objetivos 2 mm. Al menos 2 mm. de separación visual reduce errores y la percepción de dificultad
  76. 76. Diseñar para el tamaño REAL de los dedos Espacio en blanco entre objetivos
  77. 77. Diseñar para el tamaño REAL de los dedos El espacio muerto (zona no pulsable) reduce el peligro de pulsar otro elemento por equivocación Espacio muerto
  78. 78. Diseñar para el tamaño REAL de los dedos El espacio muerto (zona no pulsable)
  79. 79. Ergonomía y uso: smartphones / tablets * La interacción se puede convertir en uno de los principales elementos diferenciadores para una app, web móvil o un responsive design.
  80. 80. Ergonomía y uso: smartphone / tablet Teléfonos móviles ¿cómo usamos/sostenemos el dispositivo? Utilizamos los dedos para acceder a información, compartir datos, organizarlos, ampliar fotografías… y todo esto en multitud de contextos diferentes.
  81. 81. Ergonomía y uso: smartphone / tablet Teléfonos móviles: ¿Cómo usamos/sostenemos el dispositivo?
  82. 82. Ergonomía y uso: smartphone / tablet 49% de los usuarios utiliza una mano. *En el caso de las persona zurdas hacen lo contrario. Fuente: http://msalazar.aiux.cl/
  83. 83. Ergonomía y uso: smartphone / tablet 51% de los usuarios utiliza dos manos. Fuente: http://msalazar.aiux.cl/ *El 36% utilizan la posición Cradling (acunado) de dos formas distintas: con el pulgar o índice. *El 15% de los usuarios observados de teléfonos móviles usaban sus dispositivos con las dos manos y en dos posiciones.
  84. 84. Ergonomía y uso: smartphone / tablet Tablets: ¿Cómo usamos/sostenemos el dispositivo?
  85. 85. Ergonomía y uso: smartphone / tablet Tablets: ¿Cómo usamos/sostenemos el dispositivo?
  86. 86. Ergonomía y uso: smartphone / tablet Algunas conclusiones: ● Diseñamos en función de cómo los usuarios sostienen/usan los dispositivos, lo que genera una serie de zonas de interacción más accesibles o zonas calientes. ● Los dedos más utilizados son el pulgar y el índice, y según el dispositivo y el contexto se usa un dedo, dos o hasta tres y cuatro.
  87. 87. Ergonomía y uso: smartphone / tablet Teléfonos móviles: Áreas de interacción o Zonas Calientes Josh Clark - http://www.netmagazine.com
  88. 88. Ergonomía y uso: smartphone / tablet Teléfonos móviles: Áreas de interacción o Zonas Calientes Será en estas zonas donde intentaremos colocar las acciones: elegir de una lista, los controles de un reproductor de música, siguiente-anterior... NOTA / Hay acciones decisivas, que están fuera de la zona caliente, más alejado. No va a tener un uso tan frecuente.
  89. 89. Ergonomía y uso: smartphone / tablet Tablets: Áreas de interacción o Zonas Calientes El uso de las dos manos en tablet toma más importancia y se diferencian las zonas de de fácil acceso y las zonas de navegación
  90. 90. Ergonomía y uso: smartphone / tablet
  91. 91. Ergonomía y uso: smartphone / tablet Recomendación: evitar poner información importante en la parte central superior. Estaríamos tapando el contenido con la propia mano. (A veces es inevitable, pero debería suceder lo menos posible). x √
  92. 92. Ergonomía y uso: smartphone / tablet Menú de navegación ● En móviles se tiende a utilizar más los menús en la parte inferior de la pantalla, más de lo que se hace en las tablets. ● En tablets hay mucha variación si se diseña en vertical u horizontal. En vertical las soluciones se acercan más a las de móvil y en horizontal a las de la web.
  93. 93. Gestos inteligentes y sencillos *
  94. 94. Existen ciertos gestos que ya son estándares Gestos inteligentes y sencillos Gestos simples: requieren de uno o dos dedos para la interacción Multitouch: requieren dos o más puntos de interacción Se han adoptado como universales, e incluso hay gestos patentados.
  95. 95. Tap - Tocar/Pulsar Presionar brevemente la pantalla con el dedo. - Seleccionar un elemento o control - Scroll rápido Gestos inteligentes y sencillos
  96. 96. Double tap -Tocar/Pulsar dos veces Presionar breve y rápidamente dos veces la pantalla con el dedo. - Abrir. - Acercar y centrar un bloque de contenido o una imagen. - Alejar si algo está acercado. Gestos inteligentes y sencillos
  97. 97. Multi-finger tap - Tocar con varios dedos Presionar la superficie con varios dedos simultáneamente. - Seleccionar / desplazar Gestos inteligentes y sencillos
  98. 98. Drag - Arrastrar/Desplazar/Mover Mover los dedos presionando la pantalla en cualquier dirección sin perder el contacto. Este movimiento se usa, por ejemplo, para desplazar un elemento de un lugar a otro de la pantalla con el objetivo de desbloquear un dispositivo, etc. - Borrar - Mover objetos - Desplazar Gestos inteligentes y sencillos
  99. 99. Swipe/Flick - Deslizar horizontal/Pasar/Navegar horizontal Mover horizontalmente el dedo por la pantalla con un toque rápido (pasar páginas, fotos, etc.) En ocasiones se realiza con dos dedos, buscando otra acción asociada. - Mover o desplazar - Hacer scroll rápido Gestos inteligentes y sencillos
  100. 100. Scroll - Deslizar vertical/Bajar/Navegar vertical Mover verticalmente el dedo por la pantalla con un toque rápido (avanzar en un documento, actualizar/recargar una columna...). - Scroll vertical rápido - Desplazar vertical Gestos inteligentes y sencillos
  101. 101. Pinch - Pellizcar/Reducir/Disminuir/ Unir dos dedos Juntar dos dedos manteniendo en ambos la presión sobre la pantalla. Este movimiento suele usarse para reducir el tamaño del navegador, de una foto, etc. - Reducir o encoger un objeto - Zoom out / alejar Gestos inteligentes y sencillos
  102. 102. Spread - Ampliar/Extender/Separar dos dedos Separar dos dedos manteniendo en ambos la presión sobre la pantalla. Este movimiento suele usarse para aumentar el tamaño del navegador, de una foto, etc. - Ampliar o agrandar un objeto, estirar. - Zoom in / acercar Gestos inteligentes y sencillos
  103. 103. Press - Mantener pulsado/Presionar Tocar la pantalla y mantener el dedo durante un periodo determinado. - Cambiar estado - Hacer scroll - Invocar objeto Gestos inteligentes y sencillos
  104. 104. Pan - Barrer/Frotar/Limpiar/Rascar Mover uno o varios dedos sobre la pantalla sin perder contacto, como si se limpiara. Se utiliza generalmente para descubrir una imagen escondida. Lo vemos en este video Gestos inteligentes y sencillos
  105. 105. Press and tap - Presionar y tocar Presionar sin soltar la superficie y tocar con un segundo dedo brevemente la pantalla. - mover Gestos inteligentes y sencillos /
  106. 106. Press and drag - Presionar y arrastrar Presionar sin soltar la superficie y arrastrar con un segundo dedo brevemente la pantalla. - mover a diferentes niveles de manera vertical u horizontal Gestos inteligentes y sencillos /
  107. 107. Rotate - Rotar / Girar Presionar en dos puntos simultáneamente y deslizar en forma de curva. - girar objetos Gestos inteligentes y sencillos //
  108. 108. Los gestos persiguen un mismo objetivo: Simplificar y facilitar al máximo la interacción del usuario. Gestos inteligentes y sencillos
  109. 109. A través de los gestos debemos: Asegurar que el usuario puede realizar las acciones básicas y acceder a los contenidos más importantes. *Cuanto más complicados sean los gestos, menos personas podrán/sabrán realizarlos. Gestos inteligentes y sencillos
  110. 110. Existen referencias o guías de diseño en las principales plataformas: Windows http://msdn.microsoft.com/es- es/library/windows/apps/hh465415.aspx iOS 7 https://developer.apple. com/library/ios/documentation/UserExperience/C onceptual/MobileHIG/index. html#//apple_ref/doc/uid/TP40006556-CH66-SW1 Android http://developer.android.com/design/index.html Es muy recomendable consultarlas. *
  111. 111. Naturalidad en las interacciones * NUI - Natural user interface. Aplicamos al diseño de interface toda la experiencia táctil que llevamos aprendiendo en nuestra vida.
  112. 112. Naturalidad con las interacciones
  113. 113. Interactuamos directamente con el contenido. Naturalidad con las interacciones La manera de saber que eso es así es que el contenido reaccione, a ser posible de la manera más natural posible, con nuestro tacto. Y para eso hay una serie de directrices. ¿Cómo consigues que navegar en un entorno móvil sea intuitivo? Evidenciando con todos los recursos posibles todas las zonas navegables.
  114. 114. Naturalidad con las interacciones 1. Proximidad espacial. La acción del usuario está cerca físicamente del elemento sobre el que actúa. Para que sea natural:
  115. 115. Para que sea natural: Naturalidad con las interacciones 2. Proximidad temporal. El objeto de la interfaz reacciona al mismo tiempo que la acción que realiza el usuario.
  116. 116. Para que sea natural: Naturalidad con las interacciones 3. Correlación paralela (orientación, escala, velocidad…) entre la acción del usuario y la reacción del elemento en la interfaz.
  117. 117. Como conclusión, al interactuar directamente con el contenido éste se convierte en la interfaz. Naturalidad con las interacciones Contenido = Interfaz
  118. 118. Naturalidad con las interacciones Eliges contenido.
  119. 119. diseñamos teniendo en cuenta que el contenido es lo principal. Naturalidad con las interacciones Luego... Se vuelve a cumplir la máxima de que el contenido, con el contexto, determina el diseño de interface. Es probable que veamos desaparecer de forma paulatina algunos controles típicos hasta ahora: siguiente-anterior, volver, ver más...
  120. 120. Integrar realismo*
  121. 121. Aplicar el realismo NO (sólo) como la representación realística de los objetos. Integrar realismo ¡Atención! aclaramos la aplicación de realismo
  122. 122. La representación realística de los objetos, se ha denominado esqueuomorfismo. Integrar realismo No siempre se necesita esqueuomorfismo para que la sensación de realismo sea efectiva. Es más una discusión estética que de UI.
  123. 123. Integrar realismo Aspecto plano Esqueoumorfismo
  124. 124. Si bien en algunas ocasiones ayuda al usuario a entender mejor cómo funciona el contenido... Integrar realismo ...priorizar que lo que vemos sea constantemente una representación de nuestra realidad y abusar de su uso olvidándonos de la manera de interactuar puede concluir en detrimento de la usabilidad
  125. 125. Aclarado ésto, algunas directrices para la integración de realismo: 1. Manipulación directa con el contenido (en vez de a través de controles) Integrar realismo
  126. 126. Integrar realismo
  127. 127. 2. Simular las leyes físicas: velocidad, inercia aceleración, desaceleración, elasticidad, transparencia, gravedad... Integrar realismo Por ejemplo: Hacer pan o swipe (scroll vertical) en Facebook . Se observa que puede ir más o menos rápido en función de cómo son nuestros gestos, que posee inercia y desaceleración hasta detenerse. Esto ayuda al usuario a vivir una experiencia más fluida. Nos gusta.
  128. 128. - Feedback inmediato al toque (respuestas hápticas) Integrar realismo ● Reacción visual ● Reacción sonora ● Reacción táctil / vibración hemos comentado antes una respuesta del contenido natural en tiempo y espacio, pero además podemos tener... Háptica: designa la ciencia del tacto, por analogía con la acústica (oído) y la óptica (vista). La palabra, que no está incluida en el diccionario de la Real Academia Española, proviene del griego háptō (tocar, relativo al tacto). Fuente: http://es.wikipedia.org/wiki/H%C3%A1ptica
  129. 129. No podemos contar siempre con una reacción sonora o de vibración pues no siempre se tienen activadas estas prestaciones en el dispositivo. Integrar realismo La clave es la respuesta visual ● Cambio de color ● Cambio de tamaño ● Movimiento
  130. 130. Integrar realismo
  131. 131. Integrar realismo
  132. 132. Animación*Todo fluye.
  133. 133. Como elemento que da continuidad a la interacción Animación Cuando abrimos una aplicación. O elegimos escenarios en una aplicación.
  134. 134. Como complemento a la reacción visual del contenido Animación
  135. 135. Como ayuda al usuario a un mejor entendimiento de lo que está ocurriendo Animación Mejora la orientación y fija la atención Cargando...
  136. 136. 06 La web pensada para todos los dispositivos
  137. 137. Recordando las etapas en el diseño de interface. Los elementos de la experiencia de usuario (Jesse James Garrett). ● ● Estrategia. Definición de objetivos e ideas. ● Requerimientos de contenidos. ● Estructura. Arquitectura de la información. ● Diseño de navegación. Wireframing. ● Diseño visual.
  138. 138. En este proceso de diseño... = = No es lo mismo Ux para móvil Ux para tablet Ux para desktop
  139. 139. No es sólo diseñar para móviles o para tablets u ordenadores de sobremesa, se trata de diseñar en conjunto. + +
  140. 140. El diseño sensible o responsive design tiene en cuenta las características de cada dispositivo.
  141. 141. Algunos consejos útiles a la hora de diseñar en responsive:
  142. 142. 1.- Crear una estructura de contenidos ordenada y una arquitectura de la información coherente es esencial para cualquier proyecto web. Pero especialmente a la hora de diseñar en responsive. Porque probablemente habrá que sintetizar, jerarquizar y prescindir de cierto contenido (por ejemplo en los smartphone se suele prescindir del selector de idioma porque el dispositivo detecta el idioma en el que estás navegando) y para eso es necesario haber estructurado los contenidos de manera lógica y ordenada: teniendo en cuenta cómo navega el usuario, cuales son las zonas ‘calientes’, las zonas de navegación más habituales...
  143. 143. 2.- Utilizar un grid para estructurar el contenido. Por ejemplo Bootstrap y su grid de 12 columnas basado en el grid960.
  144. 144. 3.- Cuidar el tamaño de las imágenes. Porque puede darse el caso en el que una imagen en el ordenador de sobremesa coja menor tamaño que visto desde un smartphone.
  145. 145. 4.- Utilizar media queries.
  146. 146. 5.- Especificar el viewport. Básicamente, indica cómo debería de comportarse el navegador móvil a la hora de mostrar en pantalla la página web. La escala automática se puede prevenir y controlar utilizando el atributo viewport.
  147. 147. 07 Tendencias del diseño táctil y otras formas de interactuación con los dispositivos. Dudas razonables en el futuro
  148. 148. Realidad / Conclusiones: Se están dejando de utilizar los ordenadores de sobremesa y portátiles como medio masivo de navegación. Todo apunta a que en un futuro a corto/medio plazo los ordenadores de mesa dejarán de ser el referente para la navegación web, puesto que quedarán reducidos al uso profesional / laboral. La navegación masiva en internet se realizará a través de estos otros dispositivos: smartphone, phablets y tablets.
  149. 149. Nuestra tarea más inmediata... ¿es seguir explorando la interacción táctil?
  150. 150. El lenguaje de comunicación humano es más efectivo cuando se combinan más sentidos. ¿combinar varios sentidos será la manera de funcionar en la interface futuras?
  151. 151. En su mayoría, ahora, están pensados para un uso individual. Aunque hay excepciones, sobre todo en juegos: Badland App
  152. 152. Crumble Zone App Omicrom HD App
  153. 153. ¿Cuánto de importante será el desarrollo de dispositivos e interfaces colaborativos (uso simultáneo por dos o más usuarios)? XTable Multitouch de Digalix
  154. 154. Nuevos dispositivos implican una nueva manera de interacción con ellos y con el entorno.
  155. 155. ¿Cómo será esa interacción? ¿esa interfaz? Google Glass
  156. 156. 08 Bibliografía
  157. 157. Pantallas táctiles https://sei.wikispaces.com/file/view/pantallas_tactiles.swf http://centrodeartigos.com/articulos-noticias-consejos/article_127057.html http://cydmatica.blogspot.de/2013/05/pantallas-tactiles-su-historia.html http://www.netambulo.com/2012/11/13/tipos-de-pantallas-tactiles-resistivas-capacitivas-e-infrarrojas/ http://www.xatakamovil.com/desarrollo/pantallas-tactiles-capacitivas-vs-resistivas http://www.taringa.net/posts/info/8679418/Las-maravillas-tecnologicas-pantalla-tactil.html Bibliografía
  158. 158. Usos y estadísticas sobre dispositivos http://www.universoabierto.com/11437/estudio-sobre-el-comportamiento-de-los-usuarios-de-tablet-en-espana/ http://es.wikipedia.org/wiki/Anexo:Pa%C3%ADses_por_n%C3%BAmero_de_tel%C3%A9fonos_m%C3%B3viles http://sebastianbehar.com/2013/10/10/estadisticas-de-la-telefonia-movil-para-el-2013/ http://www.vuelodigital.com/2012/04/11/120-millones-de-tablets-en-el-mundo/ http://www.iabspain.net/wp-content/uploads/downloads/2012/09/IV-Estudio-IAB-Spain-sobre-Mobile-Marketing-Versi%C3%B3n-Completa.pdf http://www.puromarketing.com/21/16815/espanoles-duplican-compras-traves-moviles-este-verano.html# https://www.myvalue.com/blog/explosion-de-compras-a-traves-de-terminales-moviles-en-2013/ http://www.ecommerce-news.es/index.php?option=com_content&view=article&id=3508:las-compras-a-traves-de-dispositivos-moviles-representan- ya-un-cuarto-del-total-de-las-ventas-online&catid=46:mobile-commerce&Itemid=102 http://cnmcblog.es/2012/04/24/el-peso-del-m-commerce/ http://www.ecommerce-news.es/index.php?option=com_content&view=article&id=4086:el-37-de-las-compras-online-se-realizan-ya-a-traves-de- smartphones-tablets-y-smart-tv&catid=45:start-ups&Itemid=101 http://blog.seinet.es/evolucion-de-la-venta-de-tablets-en-tres-anos/ http://iblnews.com/story/80962 http://www.universoabierto.com/11437/estudio-sobre-el-comportamiento-de-los-usuarios-de-tablet-en-espana/ Bibliografía
  159. 159. http://www.tabinnovation.com/informetab/ http://www.supermonitoring.com/blog/2013/09/23/state-of-mobile-2013-infographic/ http://www.puromarketing.com/12/16660/moviles-redes-sociales-transformados-habitos-frente-television.html# http://www.puromarketing.com/21/16815/espanoles-duplican-compras-traves-moviles-este-verano.html# http://www.ecommerce-news.es/index.php?option=com_content&view=article&id=4086:el-37-de-las-compras-online-se-realizan-ya-a-traves-de- smartphones-tablets-y-smart-tv&catid=45:start-ups&Itemid=101 Bibliografía
  160. 160. Principios de diseño táctil http://www.manualdeestilo.com/tabletas-gestos-tactiles-basicos/ http://msalazar.aiux.cl/ http://www.slideshare.net/percynegrete/usabilidad-en-mviles-y-tabletas-diseo-sensible http://www.latercera.com/noticia/tendencias/2013/09/659-541215-9-los-10-gestos-fisicos-para-dispositivos-moviles-que-han-sido-patentados.shtml http://www.ideup.com/blog/interaccion-en-dispositivos-moviles-i http://punchcut.com/perspectives/videos/design-considerations-touch-ui http://www.slideshare.net/percynegrete/usabilidad-en-mviles-y-tabletas-diseo-sensible?from_search=3 http://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx http://www.slideshare.net/mobile/Afidalgo/disear-para-tabletas http://www.slideshare.net/Afidalgo/interfaces-tctiles-ux-spain http://www.creativebloq.com/design/designing-touch-2123037 http://www.slideshare.net/HDVCG/principios-de-la-gestalt-aplicados-al-diseno-de-interfaz http://www.abookapart.com/products/responsive-web-design https://www.editorialdigitaltec.com/materialadicional/ID094_VerdinesCampbell_Fundamentosdediseno.cap1.pdf Bibliografía
  161. 161. Responsive web http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/mobile-first http://mediaqueri.es Definiciones Háptica: http://es.wikipedia.org/wiki/H%C3%A1ptica Phablet: http://en.wikipedia.org/wiki/Phablet Esqueoumorfismo: http://en.wikipedia.org/wiki/Skeuomorph Guias de UI de las principales plataformas Android http://developer.android.com/design/index.html iOS 7 https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66- SW1 Windows http://msdn.microsoft.com/es-es/library/windows/apps/hh465415.aspx Biblografía
  162. 162. Comunicación de marca y Proyectos digitales www.workoholics.es
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×