¿Está tu web adaptada a dispositivos móviles? Descubre cómo mejorar la usabilidad de tu web móvil aunque ya esté optimizada y mejorar así la experiencia de tus usuarios.

Contenido más ancho que la pantalla = Scroll horizontal

A veces ocurre. Si no prestamos atención a la forma que tienen los elementos de escalarse en nuestra versión responsive, nos podemos encontrar con la necesidad hacer scroll horizontal para ver la totalidad de una imagen; aunque donde más se suele dar es cuando insertamos vídeos.

Más allá de la terrible experiencia de usuario que ofreceremos a nuestros lectores, lo que debería preocuparnos es el mensaje que estamos lanzando a los buscadores. Comprueba siempre que los elementos audiovisuales se comportan adecuadamente.

El scroll vertical con el pulgar que cambia de sección

Algunas páginas están pensadas para que nos podamos mover entre secciones utilizando el scroll horizontal (el clásico movimiento de pasar página).

El problema es que no se suele tener en cuenta a aquellas personas que utilizan su dispositivo con una mano. En este caso, el scroll vertical con el dedo pulgar no sigue una vertical “perfecta”, por lo que se puede interpretar como un movimiento diagonal-horizontal que nos cambie de página, con la consecuente frustración para nuestro visitante.

Coloca siempre lo más importante en el centro

Aceptémoslo. Ni dejándonos las uñas muy largas llegaríamos con una sola mano a las esquinas de los smartphones de 6,5 pulgadas.

Una vez más, no tenemos que pensar como el usuario, sino que debemos SER el usuario. Coloca los elementos importantes para él, por ejemplo un botón de suscripción, de compra o de más información, lo más cerca posible del centro de la pantalla para facilitar el clic con una sola mano.

El icono de la hamburguesa, con queso y explicación por favor

Lo verás en prácticamente el 90% de las páginas actuales, sobre todo en aquellas generadas con Bootstrap o Foundation. El famoso icono en el que muchos vemos una hamburguesa (eso sí, sin extras: solo el pan y la carne), ha generado tantas líneas de debate en Internet que vale la pena ser mencionado.

En base a numerosos tests, la mayor recomendación en este aspecto sería la de seguir los siguientes puntos:

  • Recuadra el icono; los bordes lo hacen parecer más lo que es: un botón.
  • Si puedes, coloca la palabra menú al lado o debajo.
  • Limita los elementos que aparecerán en este menú lo máximo posible, haciendo que la información relevante sea siempre accesible desde la pantalla principal.

Una buena solución es la de utilizar una tab bar, pero cuidado con los dispositivos de dimensiones pequeñas.

La distancia entre elementos con clic, vital para una mejor UX

No hay nada más frustrante que querer hacer clic en un botón y sentir que tu dedo se ha convertido en un enorme salchicha que es capaz de pulsar siete elementos a la vez excepto el deseado.

Por si aún tenías alguna duda… ¡Sí! Google tiene en cuenta el gap de error existente al entrar en una sección midiendo la distancia entre botones y calculando la tasa de rebote que provocan las pulsaciones erróneas.

La solución: Deja un espacio suficiente entre botones y enlaces para que el usuario sea más feliz.

Y no te olvides de…

A parte de lo comentado, vale la pena recordar algunas de las optimizaciones a nivel de usabilidad y experiencia de usuario que son ya clásicas, como por ejemplo:

  • Utilizar un tamaño de letra adecuado (a ser posible, de 16px o superior).
  • Usar un contraste evidente en el texto y elementos de llamada a la acción.
  • Eliminación de los hovers (el efecto de pasar el ratón por encima de un elemento) para las versiones mobile.
  • Las políticas de cookies que ocupan un 50% de la pantalla y que contienen un botón de cerrar pequeño e inaccesible.
  • Formularios que no se adaptan. Por ejemplo que no son numéricos cuando el campo lo requiere o que se muestran en horizontal.
  • No utilizar display:none para la ocultación de elementos en versiones móviles.
  • Cuidado con abusar de las páginas con pestañas, el contenido de las mismas puede no ser indexado.

Y tú, ¿ya tienes tu sitio web adaptado para móviles?