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.

Desarrollo de interfaz de usuario en un contexto mobile

El paradigma de la interacción con el dispositivo y lo que contiene ha cambiado. Los dispositivos táctiles modifican nuestra forma de comunicarnos e interactuar con la web y las aplicaciones móviles.

Mobile first es una filosofia de trabajo, un concepto que prioriza el diseño y desarrollo en los dispositivos móviles. Se trata de pensar el contexto en el que nuestros contenidos van a ser consumidos para mejorar la usabilidad y la experiencia de usuario.

  • Login to see the comments

  • Be the first to like this

Desarrollo de interfaz de usuario en un contexto mobile

  1. 1. Desarrollo de interfaz de usuario en un contexto mobile. Laura Carazo laura@workoholics.es T. 610 368 134 / 944 059 957 NUEVAS TECNOLOGÍAS WEB
  2. 2. Diseño de interacción centrado en la experiencia de usuario. Contextos y hábitos del usuario en 2015. Más allá del desarrollo responsive: first mobile. Tocar la web: diseño de interfaz para dispositivos táctiles. Índice 1. 2. 3. 4.
  3. 3. Diseño de interacción centrado en el usuario
  4. 4. La interacción (IxD) es la esencia de todas la experiencias del usuario. Es la conversación entre vuestro producto y el usuario.
  5. 5. Qué es IxD, UI y UX El diseño de interacción está en todas partes: en los controles de vuestro smartphone, la web o app de twitter, o en la pantalla del cajero automático. Siempre que tomas una decisión en un entorno digital proyectas tu necesidad en una máquina que deberá responder como si te conociera, interpretando tus deseos. Podemos distinguir entre diseño de interacción y diseño de interfaz. Diseño de interfaz (UI) es lo que los usuarios ven. El diseño de interacción se refiere a cómo los usuarios se relacionan con la interfaz, y cómo esta interfaz responde de tal forma que los usuarios saben que se han logrado sus metas. Como resultado de esta interacción, el disfrute del usuario de la interfaz forma la experiencia general del usuario (UX).
  6. 6. Mejorar la experiencia del usuario es un problema complejo, pero sin duda podemos diseñar mejores interfaces e interacciones para marcar la diferencia entre un sistema que sólo funciona y crear uno que los usuarios puedan disfrutar. Tu diseño es una extensión de tu marca. La interfaz de tu web o e-commerce se relaciona con tus clientes y, claro está, quieres que sea útil y amigable.
  7. 7. 5 pilares del diseño de interacción Estos son 5 principios básicos del diseño de interacción o puntos críticos, incluso para el diseño de interacción más básico: 1. Diseño centrado en el usuario. 2. Usabilidad. 3. Posibilidades sugeridas (afforances) y significados. 4. Capacidad de aprendizaje (learnability). 5. Feedback y tiempo de respuesta.
  8. 8. 1. Diseño centrado en el usuario. Diseño orientado al público objetivo. Tal y como expresa Andrew Maier “en todas las disciplinas del diseño, el artista debe primero conocer sus limitaciones, y luego diseñar una solución.” En el caso del diseño de interacción, los propios usuarios en general, forman la base de las limitaciones de una interfaz. El Diseño Centrado en el Usuario es una filosofía de diseño que pretende crear experiencias, más allá de los productos y servicios y un ambiente que conecte, a nivel emocional, con el usuario. Centrar el diseño en sus usuarios implica involucrar desde el comienzo a los usuarios en el proceso de desarrollo del sitio siempre con el objetivo claro de mejorar la experiencia del usuario. Valorar si un sitio web consigue o no sus objetivos está condicionado al nivel de satisfacción del usuario.
  9. 9. Diseña con el usuario en el centro: ● Técnica de personas. ● Escenarios del usuario. ● Mapa de experiencias
  10. 10. 2. Usabilidad La usabilidad es el punto de partida del diseño de interacción. Si tu audiencia no puede usar tu producto o servicio, no hay relación posible: usabilidad, utilidad y deseo son ingredientes básicos para un buen diseño. Eficacia, eficiencia y satisfacción. 3. Posibilidades sugeridas y significados El concepto “affordance” significa que una función tiene que hablar por sí misma y sugerir su propio uso. Esto no es incompatible con apoyar el entendimiento o acotar los significados a través de tooltips, textos de introducción, etc. Ej. el botón de play de un video invita a mirar un video, y no puede utilizarse para cargar una imagen.
  11. 11. 4. Capacidad de aprendizaje Los usuarios no recordamos cada funcionalidad con un solo uso y el diseño de interfaz tiene que tener en cuenta lo familiar y la capacidad de intuición del usuario. La consistencia crea predictibilidad, lo cual mejora la capacidad de aprendizaje del usuario. Crea un espacio consistente, utiliza los patrones básicos de diseño de interfaz de usuario: UI-Patterns.
  12. 12. 5. Feedback y tiempo de respuesta El feedback es el corazón de la interacción. Si la interacción del usuario es una conversación entre el usuario y el producto, entonces hagamos que sea amigable, interesante y útil. Un factor clave es el tiempo de respuesta, que es mejor cuanto más inmediato. - ¿Cuándo debe sonar la cuerda de mi guitarra? - Ya.
  13. 13. Pasos para mejorar las interacciones Ahora que conocemos los fundamentos, proponemos un proceso que puede ser útil para mejorar nuestros diseños de interacción. Veámoslo: 1. Juego de roles con la interacción. Ponte en la situación del usuario y de la interfaz, dando respuestas que sólo se componen de “labels”, “menús”, y cualquier otro elemento de tu UI. 2. Trazar la narrativa. Documenta cada paso de la experiencia. 3. Simplifica los pasos. El usuario puede tener metas complejas como alquilar un coche pero nuestra interfaz tiene que ser capaz 4. Limita las opciones del usuario. El paso más difícil. 5. Pon atención en los micro-momentos. Humaniza tu interfaz, se amable.
  14. 14. A. El lenguaje en IxD La comunicación es la base de la interacción y el lenguaje, las palabras son la base de la comunicación. Usa el lenguaje para humanizar la experiencia. ● El saludo. Más que un simple hola, explicamos qué somos y ofrecemos los primeros pasos. ● Los sistema de navegación. Los literales expresan dónde estamos y sugieren nuevas opciones. ● Sugerir acciones. Palabras en el menú, botones y pequeñas instrucciones. ● Proporcionar servicio. Y el contexto es el rey: ¿Quién va a leerlo, cuándo? ¿Qué necesitan saber? ¿Cuál es el siguiente paso? ¿Cuál es el formato? ¿El mejor tono?.
  15. 15. Más allá de la importancia de los literales, los copis: ● Respeta la parte dominante de la visión: AMARILLO. Usamos todos los sentidos pero nuestros superpoderes están en la visión. ● Procura un espacio visual claro favorece la navegación. ● Mantén la consistencia. ○ Usa como base los patrones de diseño UI. ○ Crea rápidas guías de estilo: mailchimp, BBC Gel, B. La importancia de lo visual
  16. 16. «El tiempo necesario para moverse rápidamente hasta un área objetivo es una función que relaciona la distancia al objetivo y el tamaño del objetivo» Paul Fiss. Según Fiss hay dos maneras de favorecer la accesibilidad: ● El tamaño. Haz el botón principal más grande, el área clickable debe ser lo más amplia posible. ● La proximidad. Incluye las funciones clave en los bordes, agrupa las acciones y pon distancia entre ellas cuando sea necesario. C. Tamaño y distancia en IxD
  17. 17. La funcionalidad más importante debe utilizar una combinación de tamaño y colocación para ayudar a los usuarios a acceder de forma rápida y sencilla. Un ejemplo común de mala praxis: Al completar el último campo en un proceso de registro, nos encontramos con que el botón “enviar” está más lejos de ese punto que otros botones del formulario y su tamaño es exactamente el mismo.
  18. 18. Distancias minúsculas en una pequeña pantalla pueden parecer una preocupación menor, pero adquieren mayor relevancia sobre todo cuando las acciones que realizamos se repiten. Parte de un buen diseño de interacción es ser capaz de identificar estos “micromomentos” que pueden pasar desapercibidos incluso para el radar del usuario, pero que si consigues corregir y optimizar se apreciará en el producto. Fuente: Social media y contenidos
  19. 19. El uso eficaz del espacio en el diseño de interacción requiere de una comprensión de la estética, la funcionalidad y nuestro comportamiento. El espacio en blanco también es una herramienta de diseño. En el diseño de interacción el espacio en blanco tiene 3 funciones: mejorar la comprensión, clarificar las relaciones y centrar la atención. No hagas pensar al usuario. Una interfaz usable y agradable reducirá la carga cognitiva del usuario: 1. Agrupa la información relevante para hacerla más sencilla de procesar y recordar. 2. Ayúdale a recordar: cambia el color de los links visitados, incluye páginas de comparación de productos o utiliza cupones en vez de códigos en las promociones. D. El espacio y la disposición en IxD
  20. 20. Leyes de la Gestalt y el diseño de interface Fuente: Wikipedia y Sara Clip Las leyes de la Gestalt son un conjunto de reglas que explican el origen de las percepciones a partir de los estímulos. 1-Ley de la totalidad El todo es más que la suma de sus partes. Para que un diseño funcione bien hay que pensar en cómo se percibe su totalidad, y no cada parte individual.
  21. 21. 2-Ley de la estructura Una forma es percibida como un todo, independientemente de las partes que la constituyen. Los elementos son organizados en figuras lo más simples posible, (simétricas, regulares y estables). Esta ley se basa en que el cerebro intenta organizar los elementos percibidos de la mejor forma posible, incluyendo el sentido de perspectiva, volumen, profundidad… Por ello, una forma es percibida como un todo, independientemente de las partes que la constituyen. El cerebro prefiere las formas integradas, completas y estables.
  22. 22. 3-Ley de la dialéctica Toda forma se desprende sobre un fondo al que se opone. La mirada decide si “x” elemento pertenece a la forma o al fondo. Se basa en que el cerebro no puede interpretar un objeto como figura o fondo al mismo tiempo. El ojo reconoce una figura sobre el fondo, pero ésta a su vez puede verse también como fondo. Es una relación reversible o ambigua. La mirada decide si “x” elemento pertenece a la forma o al fondo.
  23. 23. 4-Ley del contraste Una forma es tanto mejor percibida, en la medida en que el contraste entre el fondo y la forma sea mayor. Sin contraste no hay percepción. 5-Ley del cierre Tanto mejor será una forma, cuanto mejor cerrado esté su contorno. Si un contorno no está completamente cerrado, el espíritu tiende a cerrarlo. Las formas cerradas son más estables visualmente, lo que hace que tendamos a “cerrar” y a completar con la imaginación las formas percibidas buscando la mejor organización posible.
  24. 24. 6-Principio de proximidad Los elementos aislados pero con cierta cercanía tienden a ser considerados como grupos. Elementos diferentes, pero situados juntos tienden a ser considerados como un mismo grupo. La distancia entre los objetos es clave en la percepción de los elementos. Tendemos a agrupar los miembros más cercanos o próximos en el espacio, integrándolos en una unidad completa o un todo.
  25. 25. 7-Principio de semejanza Nuestra mente agrupa los elementos similares en una entidad. La semejanza depende de la forma, el tamaño, el color y otros aspectos visuales de los elementos. Tenemos una tendencia natural a poner en relación los elementos parecidos o iguales, ya sean similares en forma, color o dimensión. La percepción de similitudes nos ayuda a asumir la relación de elementos entre sí e implica una estructura basada en un patrón. Los objetos que comparten características crean cohesión en el diseño, ya que nuestro cerebro busca automáticamente los patrones.
  26. 26. 8-Principio de simetría Las imágenes simétricas son percibidas como iguales, como un solo elemento, en la distancia. Tiene tal trascendencia, que desborda el campo de la percepción de las formas para constituir uno de los fenómenos fundamentales de la naturaleza. La biología, la matemática, la química y la física, y hasta la misma estética, se organizan siguiendo las leyes especulares, simples o múltiples, de la simetría.
  27. 27. 9-Ley del destino o movimiento común Los elementos que parecen moverse en la misma dirección y a la misma velocidad tienden a ser vistos como un grupo o conjunto. 10-Principio de la memoria Las formas son mejor percibidas cuanto mayor sea el número de veces vistas.
  28. 28. 11-Noción de pregnancia El concepto "pregnancia" se relaciona, también, con la idea de "impregnación". Es decir, aquello con lo que nos quedamos "impregnados" cuando miramos. Es la forma cargada de información, la fuerza de la forma, es la dictadura que la forma ejerce sobre los ojos. 12-Principio de la experiencia Desde el punto de vista biológico, el propio sistema nervioso se ha ido formando por el condicionamiento del mundo exterior.
  29. 29. 13-Principio de jerarquización Una forma compleja será más pregnante en función de cómo orientemos la percepción, de una forma jerarquizada: de lo principal a lo accesorio.
  30. 30. ¿Dónde se utilizan las leyes? La maquetación de un periódico, ya sea en papel u online, muestra la importancia de las leyes de proximidad, continuidad y semejanza. Por ejemplo si un título está muy separado de la noticia, la gente no identifica que pertenezcan a la misma unidad. Las leyes nos ayudan a entender la manera de pensar de los usuarios, lo que unido a nuestra lógica favorecerá diseños más funcionales, intuitivos y atractivos.
  31. 31. Visión clásica: proceso desarrollo UX Jesse James Garret (The Elements of User Experience, un modelo conceptual del diseño centrado en el usuario) presenta la idea de manejar planos para administrar el proceso de desarrollo de la experiencia de usuario en un sitio web, tomando en cuenta cada situación a la que un usuario se podría enfrentar y también las acciones que un usuario podría o no realizar. Su modelo conceptual se distribuye en 5 planos. ● Superficie. Diseño visual ● Esqueleto. Diseño de navegación ● Estructura. Arquitectura de la información ● Alcance. Requerimiento de contenidos ● Estrategia. Definición de objetivos ideas
  32. 32. Es fácil ver estas capas desde dos puntos de vista complementarios: como una interface de software orientado a tareas o como un sistema de información. En la ejecución los planos se afectan los unos a los otros y lo más recomendado es no ejecutarlos por separado. El modelo conceptual de Garret va desde lo abstracto (la estrategia) hasta lo concreto (la superficie). Y desde la concepción a la culminación en un espacio de tiempo.
  33. 33. 1. La superficie - el diseño visual Es una serie de páginas con imágenes, texto y otros elementos interactivos, algunos de los cuales pueden interactuar con el usuario, por ejemplo los componentes de navegación. El tratamiento gráfico de los elementos de la interfaz el “look & feel”, son aquellos aspectos del producto que los usuarios van a percibir a primera vista. El diseño responde a los objetivos de los planos anteriores.
  34. 34. El usuario debe ser capaz de captar con simples recorridos visuales donde se encuentran los diferentes elementos que componen una página. Con una serie de bloques o módulos dispuestos de una forma más o menos estandarizada, que responden a modelos de lógica visual que están relacionados con el comportamiento de los usuarios. Objetivos ● Crear una jerarquía visual que permite al usuario detectar de inmediato qué elementos son importantes y cuales secundarios. ● Detectar las regiones funcionales del sitio. ● Formar grupos de elementos para que los usuarios puedan percibir con claridad la estructura del sitio.
  35. 35. Coherencia del diseño Al navegar por diferentes páginas de un sitio web, el visitante debe tener la sensación de que las diferentes páginas que visitan pertenecen a un mismo sitio. Esto se logra mediante la repetición de algunos elementos, que dan un estilo definido al sitio (unidad visual) y permite a los visitantes ubicar los elementos más importantes, ya que se encontrarán con la misma distribución (o similar) en todos los puntos del sitio.
  36. 36. 2. El esqueleto - wireframes Cómo se distribuye la información en cada página: menú, titulares, textos, botones, pestañas… Diseño de interfaz para facilitar la interacción del usuario con la funcionalidad, y la interacción entre persona, dispositivo y cultura. Diseño de navegación para facilitar el movimiento de los usuarios a través de la arquitectura de la información. Diseño de la información. Diseño de la presentación de la información para facilitar su entendimiento. Eficacia y eficiencia: ● Documentos comprensibles. ● Sistemas interactivos. ● Espacios de información navegables.
  37. 37. 3. La estructura - arquitectura Define los flujos de navegación del usuario dentro del sitio, qué página verá primero y cuáles serán sus siguientes opciones hasta llegar al final del proceso de navegación. Diseño de interacción. Desarrollo del flujo de las aplicaciones para facilitar las tareas del usuario, definiendo cómo el usuario interactúa con la funcionalidad del sitio. Su fin es: ● Mejorar su eficiencia ● Disminuir la curva de aprendizaje ● Eliminar barreras en la frontera persona-máquina.
  38. 38. El objetivo es presentar a los usuarios experiencias útiles, satisfactorias y usables. Diseñamos la experiencia desde el punto de vista del usuario, no desde el punto de vista técnico o artístico. Es necesario interiorizar y entender los objetivos, acciones, necesidades y deseos de los usuarios mientras utilizan el producto. Arquitectura de la información es el diseño estructural del espacio de información para facilitar el acceso intuitivo al contenido.
  39. 39. 4. Alcance Definición del espacio web: ● requisitos de contenidos: tipo de información y para quién está disponible; ● y especificaciones funcionales, que es la descripción de las funcionalidades del sitio para satisfacer las necesidades del usuario y favorecer una experiencia positiva (perspectiva del usuario). La especificación técnica describe la implementación interna del programa. Habla de estructuras de datos, modelos de bases de datos, elección de lenguajes y herramientas de programación, algoritmos, etc.
  40. 40. 5. Estrategia La estrategia incorpora los objetivos de la entidad promotora del site y las necesidades del usuario, el beneficio que obtendrá al consumir nuestro producto.
  41. 41. Contextos y hábitos del usuario en 2015
  42. 42. Contextos para la interacción de los usuarios. El paradigma de la interacción con el dispositivo y lo que contiene ha cambiado. 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.
  43. 43. Teclado Lenguaje escrito; código; comandos (atajos de teclado)
  44. 44. Ratón Movimiento de arrastre; clicks (botón derecho - izquierdo); scroll.
  45. 45. Pen-tablet Movimiento de arrastre; clicks (botón derecho - izquierdo); scroll.
  46. 46. Track-pad Movimientos y clicks sobre un panel y gestos.
  47. 47. PeriféricoUsuario Contenido
  48. 48. Interacción del usuario directamente con el contenido
  49. 49. É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.
  50. 50. Tipos de dispositivos táctiles Más allá de los móviles y tablets.
  51. 51. ● 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) ● TV ● Smartphones ● Phablets* ● Tablets ● Smartwatches ● Wearables ● 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.
  52. 52. Cajeros automáticosQuiosco TPV Bandeja de sonido PDA Wearables
  53. 53. Cámara digitalReproductor MP3 Monitores interactivos Relojes
  54. 54. Smartphones
  55. 55. Tablets
  56. 56. Phablets
  57. 57. El usuario que todo lo toca. Algunas cifras. En 2014... ● Un total de 21,44 millones de españoles accedieron a internet en movilidad. ● Por primera vez en España hay más usuarios de Internet (76,2%) que de ordenador (73,3%). El 77,1% de los internautas accedieron a Internet mediante el teléfono móvil. Fuente: ine, 2 de octubre de 2014
  58. 58. Evolución del equipamiento TIC en los hogares (%) Fuente: ine, 2 de octubre de 2014
  59. 59. La manera de comunicarnos ha cambiado Fuente: The App Date
  60. 60. Y una previsión para 2019… ● Los usuarios de teléfonos móviles serán 9.300 millones. ● De los cuales 5.600millones serán smartphones. Fuente: El mundo
  61. 61. ¿Para qué usamos el móvil? ● 88,4% comunicación ● 82,7% correo ● 72,7% redes sociales ● 68,4% localización ● 53,7% información ● 53,3% entretenimiento ● 36,8% ocio y tiempo libre ● 15,2% otras Fuente: The App Date, datos de 2014 en España. Móvil
  62. 62. ¿Cuándo usamos el móvil? ● Por la mañana en el trabajo ● Por la tarde en el sillón ● Por la noche en la cama
  63. 63. ¿Para qué usamos la tablet? ● 28,8% comunicación ● 74,8% correo ● 63% redes sociales ● 51,3% localización ● 65% información ● 66% entretenimiento ● 43,9% ocio y tiempo libre ● 17,3% otras Fuente: The App Date, datos de 2014 en España. Tablet
  64. 64. ¿Cuándo usamos la tablet? ● Por la mañana en el trabajo ● Por la tarde en el sillón ● Por la noche en la cama
  65. 65. Y si volvemos a 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á?
  66. 66. ¿A qué se debe el éxito en la interacción táctil?
  67. 67. A la naturalidad con la que nos relacionamos con ellos, mediante gestos ergonómicos. NUI: Natural User Interface
  68. 68. A la capacidad de simular reacciones físicas conocidas (gravedad, inercia, velocidad…) en las reacciones del contenido.
  69. 69. A la relación directa, acercándonos más y humanizando a ambos: dispositivo y contenido.
  70. 70. A la posibilidad de adaptar el dispositivo a nosotros y nuestro entorno.
  71. 71. 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.
  72. 72. Más allá del desarrollo responsive: First mobile La web pensada para todos los dispositivos
  73. 73. Diseño responsive, crear un solo sitio web que se adapte automáticamente a todas las resoluciones y dispositivos reorganizando la distribución de todos sus elementos. Esto se consigue con HTML5 CSS3 (media queries) y Javascript. Mobile First, o por qué diseñar primero para móvil. Diseñar primero para móviles, obligando a centrarnos en los elementos y las acciones más importantes de un sitio web, creando una experiencia y una buena usabilidad para el usuario. Mobile First se refiere tanto a la organización de la información como a la carga de contenidos. ● Jerarquía de contenidos ● Mejora del rendimiento de las resoluciones inferiores. (La magia está en el CSS) ● Diseñando para el futuro. Adaptable, según el contenido y funcionalidades de tu web
  74. 74. /* Artículos en versión movil, con un padding superior moderado */ article { padding-top: 30px; } /* Los mismos artículos en una versión movil o tablet, con un padding superior amplio */ @media (min-width: 600px) { article { padding-top: 50px; } } /* Los mismos artículos en una versión escritorio, con un padding superior muy generoso */ @media (min-width: 1200px) { article { padding-top: 90px; } }
  75. 75. Internet Explorer Las queries no funcionan en las versiones antiguas de IE (grrrrr). Esto era un problemilla con la web responsive, pero en un proyecto first-mobile el problema se agrava. Soluciones: ● Cargar una hoja complementaria, a través de un condicional, para las versiones inferiores a IE9. Pero cada vez que realices un cambio en tu css origen tendrás que llevarlo a este ie.css. ● La opción recomendada: cargar un script que interpreta estas clases dentro del media queries haciéndolas entendibles para IE en sus versiones antiguas. La librería respond.js.
  76. 76. = = Ux para móvil Ux para tablet Ux para desktop En este proceso de diseño... No es lo mismo
  77. 77. + + No es sólo diseñar para móviles o para tablets u ordenadores de sobremesa, se trata de diseñar en conjunto. Existen cientos de dispositivos móviles diferentes.
  78. 78. El diseño sensible o responsive design tiene en cuenta las características de cada dispositivo.
  79. 79. Tocar la web: diseño de interface para dispositivos táctiles. Touch vs Click
  80. 80. Los dispositivos táctiles son un modelo de interacción y contexto de uso totalmente diferente, influyen en la propia organización de contenidos, sistema de navegación e incluso en su representación visual, generando una nueva experiencia de uso en los sitios web.
  81. 81. 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 Diseñar para el tamaño REAL de los dedos
  82. 82. Y aunque cada uno tenemos nuestras manitas... Punta: 8 - 10 mm. Yema: 10 - 14 mm. Diámetro: 16 - 20 mm.
  83. 83. 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 *
  84. 84. Tamaño del objetivo El 9x9 los iconos de las Apps
  85. 85. Efecto iceberg La zona pulsable ha de ser igual o mayor al tamaño visual del botón. Zona pulsable Objeto
  86. 86. La zona pulsable ha de ser igual o mayor al tamaño visual del botón
  87. 87. Espacio en blanco entre objetos Al menos 2 mm. de separación visual reduce errores y la percepción de dificultad. 2 mm.
  88. 88. Espacio en blanco entre objetivos
  89. 89. El espacio muerto (zona no pulsable) Reduce el peligro de pulsar otra zona por equivocación. Espacio muerto
  90. 90. El espacio muerto (zona no pulsable)
  91. 91. 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.
  92. 92. ¿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. Teléfonos móviles
  93. 93. El 49% de los usuarios utiliza una mano. *En el caso de las personas zurdas hacen lo contrario. Fuente: http://msalazar.aiux.cl/
  94. 94. 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.
  95. 95. ¿Cómo usamos/sostenemos el dispositivo? Tablets
  96. 96. 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.
  97. 97. 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.
  98. 98. 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.
  99. 99. 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).
  100. 100. x √
  101. 101. 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.
  102. 102. Gestos inteligentes y sencillos
  103. 103. Existen ciertos gestos que ya son estándares Se han adoptado como universales, e incluso hay gestos patentados. ● Gestos simples: requieren de uno o dos dedos para la interacción. ● Multitouch: requieren dos o más puntos de interacción.
  104. 104. Tap - Tocar/Pulsar Presionar brevemente la pantalla con el dedo. ● Seleccionar un elemento o scroll. ● Scroll rápido.
  105. 105. 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.
  106. 106. Multi-finger tap - Tocar con varios dedos Presionar la superficie con varios dedos simultáneamente. ● Seleccionar/desplazar.
  107. 107. 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.
  108. 108. 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.
  109. 109. 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.
  110. 110. 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.
  111. 111. 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.
  112. 112. Press - Mantener pulsado/Presionar Tocar la pantalla y mantener el dedo durante un periodo determinado. ● Cambiar estado. ● Hacer scroll. ● Invocar objeto.
  113. 113. 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 vídeo.
  114. 114. Press and tap - Presionar y tocar Presionar sin soltar la superficie y tocar con un segundo dedo brevemente la pantalla. ● Mover.
  115. 115. 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.
  116. 116. Rotate - Rotar/Girar Presionar en dos puntos simultáneamente y deslizar en forma de curva. ● Girar objetos.
  117. 117. Los gestos persiguen un mismo objetivo: Simplificar y facilitar al máximo la interacción del usuario.
  118. 118. 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.
  119. 119. Naturalidad en las acciones
  120. 120. NUI: Natural User Interface. Aplicamos al diseño de interface toda la experiencia táctil que llevamos aprendiendo en nuestra vida.
  121. 121. Interactuamos directamente con el contenido 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.
  122. 122. Para que sea natural...
  123. 123. Proximidad espacial La acción del usuario está cerca físicamente del elemento sobre el que actúa.
  124. 124. Proximidad temporal El objeto de la interfaz reacciona al mismo tiempo que la acción que realiza el usuario.
  125. 125. Correlación paralela Orientación, escala, velocidad… entre la acción del usuario y la reacción del elemento en la interfaz.
  126. 126. Como conclusión, al interactuar directamente con el contenido éste se convierte en la interfaz. Contenido = Interfaz
  127. 127. Eliges contenido.
  128. 128. Luego… diseñamos teniendo en cuenta que el contenido es lo principal. 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...
  129. 129. Integrar realismo
  130. 130. ¡Atención! aclaremos la aplicación de realismo. Aplicar el realismo NO (sólo) como la representación realística de los objetos.
  131. 131. La representación realística de los objetos, se ha denominado esqueuomorfismo. 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.
  132. 132. Aspecto plano Esqueoumorfismo
  133. 133. Si bien en algunas ocasiones ayuda al usuario a entender mejor cómo funciona el contenido...
  134. 134. ...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.
  135. 135. Aclarado ésto, algunas directrices para la integración de realismo.
  136. 136. Manipulación directa con el contenido En vez de a través de controles.
  137. 137. Simular las leyes físicas Velocidad, inercia aceleración, desaceleración, elasticidad, transparencia, gravedad… 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.
  138. 138. Feedback inmediato al toque (respuestas hápticas) Hemos comentado antes una respuesta del contenido natural en tiempo y espacio, pero además podemos tener… ● Reacción visual ● Reacción sonora ● Reacción táctil / vibración 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: Wikipedia
  139. 139. No podemos contar siempre con una reacción sonora o de vibración pues no siempre se tienen activadas estas prestaciones en el dispositivo. La clave es la respuesta visual ● Cambio de color ● Cambio de tamaño ● Movimiento
  140. 140. Animación Todo fluye.
  141. 141. Como elemento que da continuidad a la interacción Cuando abrimos una aplicación. O elegimos escenarios en una aplicación.
  142. 142. Como complemento a la reacción visual del contenido
  143. 143. Como ayuda al usuario para un mejor entendimiento de lo que está ocurriendo Mejora la orientación y fija la atención. Cargando...
  144. 144. Existen referencias o guías de diseño en las principales plataformas. WindowsiOSMaterial Design Es muy recomendable consultarlas. *
  145. 145. Material Design Material Design es un concepto, una filosofía, unas pautas enfocadas al diseño creada por Google y presentada durante su conferencia anual Google I/O 2014. Busca combinar el diseño visual con la tecnología con el fin de mejorar la experiencia de usuario. Material Design recibe su nombre por estar basado en objetos materiales, en la realidad táctil. Piezas colocadas en un espacio (lugar) y con un tiempo (movimiento) determinado.
  146. 146. Los fundamentos de la luz, la superficie y el movimiento son clave para el transporte de cómo los objetos se mueven, interactúan y existen en el espacio y en relación el uno al otro. Es un diseño donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal. Es una manera de intentar aproximarse a la realidad, algo que en un mundo donde todo es táctil y virtual es difícil. Se guía por por las leyes de la física: animaciones lógicas, objetos que se superponen pero no pueden atravesarse el uno al otro y demás.
  147. 147. Una filosofía de diseño unificada para todas las pantallas. Material Design nace con un objetivo, adaptarse a todas las pantallas. Es multiplataforma, tantos los smartphones, tablets, smartwatches o televisores pueden hacer uso de este diseño. También las páginas webs. Material Design ha sido creado pensando en todos los sistemas, no solo Android. El objetivo es desarrollar un sistema que permita una experiencia unificada independiente de la plataforma o el dispositivo. Crear un lenguaje visual que sintetiza los principios clásicos de buen diseño con la innovación con las posibilidades que dan la tecnología y la ciencia.
  148. 148. PRINCIPIOS 1. El material es la metáfora Una metáfora material es la teoría unificadora de un espacio racionalizado y un sistema de movimiento. El material está basado en la realidad táctil, inspirada en el estudio de papel y tinta. Los fundamentos de la luz, la superficie y el movimiento son clave para el transporte de cómo los objetos se mueven, interactúan y existen en el espacio y en relación el uno al otro. Es un diseño donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal. Es una manera de intentar aproximarse a la realidad, algo que en un mundo donde todo es táctil y virtual es difícil. Se guía por por las leyes de la física: animaciones lógicas, objetos que se superponen pero no pueden atravesarse el uno al otro y demás.
  149. 149. 2. Intrépido, gráfico, intencional Material Design es una guía de diseño con una tipografía clara, casillas bien ordenadas, colores e imágenes llamativas para no perder el foco y dar un sentido de orden y jerarquía. Opciones de color deliberados, imágenes de borde a borde, tipografía de gran escala, el espacio en blanco intencional... para crear una interfaz gráfica audaz y sumergir al usuario en la experiencia. 3. El movimiento proporciona significado Toda acción tiene lugar en un único entorno. Los objetos se presentan al usuario sin romper la continuidad de la experiencia, incluso a medida que se transforman y se reorganizan. Los aspectos que tiene en cuenta son el tiempo, la velocidad y la dirección. El movimiento sirve para centrar la atención y mantener la continuidad, por ejemplo un objeto que parpadea significa que está llamando tu atención, un elemento que se expande es que se acaba de abrir. Recursos de Material Design.
  150. 150. Tendencias del diseño táctil y otras formas de interactuación con los dispositivos. Dudas razonables en el futuro
  151. 151. 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.
  152. 152. Nuestra tarea más inmediata... ¿es seguir explorando la interacción táctil?
  153. 153. 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?
  154. 154. En su mayoría, ahora, están pensados para un uso individual. Aunque hay excepciones, sobre todo en juegos: Badland App
  155. 155. Crumble Zone App Omicrom HD App
  156. 156. ¿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
  157. 157. Nuevos dispositivos implican una nueva manera de interacción con ellos y con el entorno.
  158. 158. ¿Cómo será esa interacción? ¿esa interfaz? Google Glass
  159. 159. Gracias. Eskerrik asko.
  160. 160. Comunicación y proyecto digitales Bilbao - Frankfurt

×