Por qué son importantes las interfaces táctiles en diseño web

Con la llegada de dispositivos como el móvil y la tablet, la experiencia de usuario (UX) ha cambiado en todos los sentidos. Ahora es un usuario más polivalente, accede a Internet a través de distintos dispositivos y consume contenidos en varias plataformas a la vez.

Esta nueva forma de consumo trae consigo grandes cambios. No sólo implica la oportunidad de nuevos negocios o nuevos modelos de consumo – el ecommerce -, sino también cambios en el diseño web y nuevas formas para interpretar o leer los contenidos e interactuar con una marca. De este nuevo escenario, surge la necesidad de un nuevo diseño orientado a la tecnología táctil.

Por eso, hoy te facilitamos algunas pistas a seguir para el diseño de interfaces táctiles.

10 consejos para medir la importancia de las interfaces táctiles en diseño web

1. Interacción táctil, sin clics.

El usuario se relaciona pulsando los contenidos de manera directa sin tener que hacer clic. Consume de manera táctil, con gestos. Es así como tendremos que conceptualizar los diseños web que realicemos a partir de ahora si queremos lograr una buena experiencia en nuestra web.

2. El tamaño de los elementos.

El usuario emplea uno o varios dedos para interactuar con la web y realiza varios movimientos para distintas acciones (ampliar o reducir tamaño, cerrar, arrastrar contenido, cambiar de contenido). Por tanto, habrá que adaptar el contenido y los distintos elementos al tamaño de los dedos del consumidor.

Tamaños recomendados para el diseño de los objetos en interfaces táctiles

• 7×7 milímetros es el tamaño ideal de los objetos = 1% de probabilidades de equivocarse.
• Para elementos de mayor importancia 9×9 milímetros.
• Y si hay que reducir, por ejemplo para listas, como mínimo 5×5 milímetros.

3. Efecto iceberg.

En el diseño web de los elementos hay que tener en cuenta que el área táctil sea mayor que el área pulsada. Lo que se denomina técnicamente como efecto iceberg.

4. Espacio en blanco entre objetos.

Guarda al menos 2mm de separación entre cada botón para facilitar su visualización y accesibilidad.

5. Diseña contemplando espacios muertos o zonas no pulsables.

Este recurso evita que se pulsen zonas por equivocación y también mejora la experiencia de usuario ya que permite que el contenido no esté aglutinado.

6. Equilibrio entre la animación y los diseños estáticos.

Aprovecha la visión periférica del usuario que permite detectar movimientos laterales para el uso de animaciones en la interfaz. Eso sí, sin abusar y sabiendo cuándo utilizarlas para mejorar la interacción con el usuario. Ayudarán a dirigir la atención del usuario y además creará un efecto dinámico aportando continuidad a la navegación.

7. Hábitos de consumo del usuario.

Para situar correctamente los controles, tendremos que tener en cuenta los hábitos de los usuarios a la hora de manejar y coger cada dispositivo móvil.

Para un 49% de los usuarios de smarthphones, es más cómodo manejar el terminal con una sola mano, según un estudio reciente publicado por uxmatters. Siguiendo las conclusiones de este análisis, en las pantallas de 4 pulgadas la zona de confort de los usuarios se sitúa en la parte inferior de la pantalla, siendo los menús en la parte superior más difíciles de alcanzar por el pulgar.

Hay algunas soluciones para mantener al usuario en su zona de confort. Una de ellas puede ser un menú de navegación vertical que se oculta, implementado para Android mediante la funcionalidad Navigation Drawer. La mayoría de las opciones se ubican en la parte inferior, al alcance del pulgar, aunque algunas quedan en la parte superior.

La solución que integra Apple se denomina Reachability. La imagen de la pantalla se desplaza hasta la mitad inferior del dispositivo, y así la superficie pulsable queda accesible al pulgar.

Una tercera solución que te planteamos es ubicar los menús y controles en la zona media o inferior de la pantalla usando un icono flotante. Logramos así que esté accesible en todo momento, salvando la zona de confort del usuario. El tamaño de este botón es menor que el de un menú superior de ancho fijo y reemplazaría al botón back-to-top (volver hacia arriba).

En las tabletas, la zona de comodidad está en las esquinas de abajo, tanto en la vista vertical como en la horizontal. Es en este espacio donde deberemos ubicar los botones para las acciones más comunes. Evita colocar elementos de navegación en la parte superior central de la tablet. ¿Por qué? Por visibilidad. Si obligas al usuario a pulsar en esa zona, su mano ocultará la pantalla y el contenido no se visualizará.

8. Qué cantidad de elementos hay que mostrar en la pantalla del dispositivo móvil.

Para resolver esta duda deberás tener en cuenta varias cuestiones:

• Valora si poner un botón o si existe ya un gesto determinado que contempla la acción que buscas. Por ejemplo: ¿voy a diseñar un botón de refresco de carga web cuando existe ya el gesto “Pull To Refresh” (deslizamiento desde la parte inferior hacia abajo) diseñado para ello?
• Ten en cuenta el espacio de los botones o botones del teclado.
• Si la interacción es por pads (dispositivos como la tableta gráfica, el ratón táctil de los portátiles) o táctil no se podrán utilizar recursos en “rollover”.
• Cómo reconoce los gestos el terminal. Cada sistema tiene su propio libro de estilo, cuenta con recursos propios y hasta con una terminología distinta. Ej: La pulsación larga de un sólo dedo para mostrar opciones ocultas, en Apple lo denominan drag y Android en su guía de estilo habla de Long press, move, lift.

9. Imita los movimientos del mundo real para adaptarlos a tu diseño mobile.

En estos dispositivos el consumidor realiza una acción directa con el contenido y una manipulación gestual. La velocidad de desplazamiento de los objetos deberás adaptarla a la misma del movimiento del dedo. Ten en cuenta que con los dedos es más fácil trazar figuras redondeadas o curvas y no tanto lineales. Y fíjate que para ampliar o reducir objetos los usuarios tienden a pinzar o pulsar dos veces, en vez de expandir.

10. Diseño web responsive o adaptativo.

Por último, cuándo utilizar responsive o adaptive design para pantallas táctiles.

No siempre va a ser la decisión más adecuada desarrollar un diseño web en una aplicación nativa. Por lógica, dependiendo de las necesidades y presupuesto de cada proyecto, podrás elegir entre un diseño desde una aplicación nativa, una webApp o mSite, una app híbrida o responsive design.

El responsive design es útil para desarrollos web pequeños, portfolios personales o webs informativas o corporativas. Como las “media queries” de CSS no funcionan en todos los terminales, si optas por adaptive, tendrás que trabajar bajo filosofía de “Mejora progresiva”.

En este caso, no trabajaremos sobre la versión escritorio, sino a partir de la versión más simple, la que contiene el css básico con las imágenes más pequeñas y sin javascript.

En definitiva, el diseño responsivo es una buena elección cuando quieres emplear los mismos contenidos escalables en distintas resoluciones. Esto es si sólo se puede asumir un único desarrollo, en caso de que tengas que actualizar con frecuencia los contenidos.

The user first

Nuestro consejo es que bases tu decisión en las necesidades de tus usuarios. El contexto de uso de tus usuarios puede ser bien distinto en escritorio, móvil o tablet. Un buen análisis de tu tráfico web puede ayudarte a decidir la mejor opción, ya que verás qué acciones son más habituales, cómo consumen sus contenidos y, en definitiva, cuál es su comportamiento.

Para opciones más avanzadas de trazabilidad de usuario y analítica de comportamientos de usuario de manera automática, te recomendamos que optes por el Inbound marketing.