7 puntos a seguir para hacer un website más amigable para los móviles

Cada día que pasa, los smartphones ganan más adeptos. Quizás no todos los sitios tengan que ser amigables para los móviles, pero tranquilos que ese día llegará y vale más estar prevenidos. No es lo mismo que un pc debido al tamaño de pantalla, la forma de interactuar, la potencia del aparato… Nos obligan a que el sitio tenga objetivos distintos según el dispositivo que usamos. Por lo que siguiendo estos puntos nos permitirá mejorar la experiencia del usuario de un smartphone.

1- Reduce el contenido visible para el usuario

Todo lo que se muestre por pantalla tiene que ser obligatoriamente imprescindible siempre teniendo en cuenta el objetivo de la página. Y con esto me refiero a:

  • Contenido: Leer mucho texto en un móvil es algo incómodo, y las lecturas suelen ser más rápidas (en diagonal). Con toda la tranquilidad puedes quitar toda la paja e intentar resumir el contenido necesario.

  • Funcionalidades: Estas pueden ser widgets en el blog (contador de visitas, el tiempo…), o links de navegación (por ejemplo el blogroll) pueden molestar bastante al usuario.

Con esto conseguimos que el sitio cargue más rápido y a la vez sea más fácil la navegación para el usuario consiguiendo un aumento de permanencia en el sitio y una menor tasa de rebote.

2- Usa solo una columna

Visualizando el website en el móvil procura que todo se muestre en una sola columna, ya que ir desplazando la pantalla de un lado para otro a cada linea de texto es extremadamente engorroso. Esto también evita que se tenga que hacer zoom para acercar la página y poder leer el texto. Aprovecha todo el ancho de la pantalla de cada dispositivo. Si quieres poner algo más aparte del texto lo mejor es ponerlo debajo del contenido antes que al lateral, evitando así que se tengan que los usuarios se tengan que desplazar lateralmente para no perderse partes del sitio.

3- Haz una navegación distinta

Como los links ya hemos dicho anteriormente que no pueden estar al lado del contenido te doy algunos consejos para ayudarte a emplazar los links de navegación. En principio lo menos recomendable es emplazarlos arriba del todo ya que desplaza el contenido hacia abajo haciéndolo menos visible a los usuarios. Por lo que tienes tres posibilidades:

  • Ponerlo arriba: Esta es para provocar un poco. Creo que es una buena idea situar los links en la página de inicio del sitio, pudiendo incluso evitar poner contenido alguno. A parte de los links puedes poner la cajita de búsqueda y otras funcionalidades que consideres importantes.
  • Ponerlo a bajo: Puedes poner todo el contenido y debajo de este los links y demás. De este modo conseguirás que una vez el usuario haya terminado con el contenido descubra toda una multitud de rutas por las que proseguir con su navegación.
  • No poner nada: Puedes limitarte a poner un link a la página de inicio dónde has colocado todos los links, otro link de “Back” para volver a la página anterior y links usando las palabras del contenido para que sea más fluida la navegación. Este último punto se debería de seguir siempre.

4- No hagas escribir mucho a los usuarios

Todos los que hemos usado un celular sabemos que son engorrosamente lentos para escribir y son aparatejos con los que hacemos muchos errores tipográficos. Es mucho más fácil escribir con un teclado normal que usando la pantalla de nuestro celular. Pero tranquilos, que no cunda el pánico, traigo soluciones para todos! Para reducir la entrada de texto puedes usar:

  • Usa de cookies: Si ya ha entrado o a rellenado el formulario porque no recordar lo que el usuario ya se ha esforzado en rellenar? O simplemente basta con no salir de la sesión.
  • No pidas todos los datos: Puedes pedirlos por partes, o simplemente pedir los necesarios y “obligar” al usuario introducir el resto.
  • Usa otras plataformas, como Facebook, nos permite que puedas incrustar un código a tu sitio permitiendo que los usuarios puedan conectarse a tu sitio sin tener que introducir ningún carácter. Permitiendo que podamos coger algunos datos de los que constan en los perfiles de los usuarios.

5- Usa distintas versiones para móviles

No todos los celulares tienen la misma pantalla, la misma forma de navegación o la velocidad de conexión. Por lo tanto podemos crear versiones más reducidas de peso, de tamaño o que permitan distintas formas de navegación. Sin ir más lejos Facebook tiene 3 versiones, la estándar, la de menor peso y la que es mejor para teléfonos táctiles.

6- Piensa en móviles táctiles y no táctiles

No todos los celulares tienen pantalla touchscreen, por lo tanto debemos pensar en ambos. En los táctiles es muy fácil pulsar sobre un link si no hay otro muy cerca. Para cualquier ruta de navegación importante es recomendable que los links sean imágenes debido a que son de un mayor tamaño y hay una menor probabilidad de fallo.

7- Aproveche TODO el potencial de cualquier móvil

Los smartphones ofrecen muchísimas posibilidades que los PC no pueden ofrecer. Como por ejemplo:

  • Llamar: Cuando pongas un número de teléfono en tu sitio web haz que al pulsar sobre este se le ofrezca la posibilidad al usuario de realizar una llamada a dicho numero.
  • Mapas: Ofrecer la posibilidad de que el usuario al ver una dirección pueda verla localizada en un mapa.
  • Comparte: Da la opción para que puedan compartir su localización usando el gps del móvil para saber que otros usuarios están cerca, de que tienda están cerca…
  • QR: Usa los códigos QR, no te quedes atrasado, brinda la probabilidad a tus usuarios del mundo físico de poder conectarse a cualquier sitio para ampliar la información que se les ofrece.

En resumen, si no es ya una necesidad tener el sitio adaptado para dispositivos móviles lo va a ser muy pronto. Para adaptarlo mejor reduce contenido y pónselo fácil al usuario.
Añadirías algún otro apartado?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>