¿Cómo corregir los problemas de usabilidad en móviles?

optimizacion-movilHace ya tiempo que tener una web correctamente adaptada a móvil es uno más de los 200 factores (o más) que influyen en el posicionamiento orgánico de cualquier página web.

Es muy probable que ya tengas tu web con una versión móvil siguiendo alguna de las tres técnicas que se enumeran en este artículo, pero es muy probable que incluso tras implementar la versión móvil con diseño web adaptable, publicación dinámica o un sistema de urls independientes sigas viendo errores en el apartado usabilidad móvil de Google Web Masters Tools ¿verdad?

[-] Indice de contenidos
  • Errores principales de usabilidad móvil
  • Para corregir los problemas de usabilidad en dispositivos móviles, te recomiendo seguir estos pasos:
  • Errores principales de usabilidad móvil

    Elementos táctiles demasiado próximos entres sí o de reducido tamaño

    Este error es bastante claro, cuando un usuario móvil se enfrenta a pulsar un botón demasiado pequeño tiene serios problemas y puede llegar a frustrarse o también si ponemos dos elementos táctiles muy próximos entre sí es posible que sea difícil pulsar en el correcto.

    Para resolverlo debemos hacer que ningún elemento táctil sea de menos de 48×48 pixeles en caso de ser una imagen y si es un enlace de texto seria muy recomendable que también fuera de fácil pulsación bien haciendo un ancho suficientemente largo, utilizando un tamaño de fuente suficiente o dejándolo bien separado del resto del texto.

    Ajustar el tamaño del contenido a la ventana gráfica

    Este problema se centra en que no debemos usar contenidos que puedan ser más anchos que la ventana grafica, porque de hacerlo obligamos al usuario a hacer scroll lateral y esto es algo que nos gusta muy poco porque no estamos acostumbrados a ello.

    Por tanto tenemos que hacer contenidos que se ajusten a la ventana, podemos seguir estos consejos:

    1. No usar elementos CSS de ancho fijo, es mucho mejor usar anchos relativos basados en el tamaño de la pantalla.
    2. Mucho ojo también con los valores de posicionamiento absolutos de gran tamaño porque pueden hacer que parte del elemento quede fuera de la pantalla visible.

    En definitiva tienes que conseguir que sean los elementos de contenido los que se adapten a la pantalla para ofrecer una buena experiencia en cualquier tipo de dispositivo.

    Ventana gráfica no configurada

    Este es un aspecto muy importante y además sin él no podríamos tener nunca bien el punto uno sobre elementos táctiles.

    Una página optimizada para dispositivos móviles debería incluir en su cabecera lo siguiente:

    ventana-optima-moviles

    Con lo anterior estaríamos diciendo el ancho de la ventana será igual al ancho del dispositivo y que la escala incial es 1. De esta forma los dispositivos móviles serán capaces de mostrar el contenido según el tamaño de su pantalla. Si no se coloca esta instrucción en la cabecera las páginas se mostrarán igual en una dispositivo móvil que un PC lo que provocará que el usuario no pueda ver bien el contenido y tenga que hacer zoom.

    Tamaño de las fuentes muy pequeño

    Debes usar un tamaño de fuente suficiente para que el usuario móvil lo pueda leer sin hacer zoom, para unas recomendaciones más concretas os dejo aquí estas de Google.

    1. Utiliza un tamaño de fuente base de 16 píxeles CSS. Ajusta el tamaño según sea necesario basándote en las propiedades de la fuente usada
    2. Usa tamaños en relación con el tamaño base para definir la escala tipográfica.
    3. El texto necesita espacio vertical entre los caracteres y puede ser necesario ajustarlo para cada fuente. La recomendación general es utilizar la altura de línea predeterminada del navegador, que es de 1,2 em.
    4. Limita la cantidad de fuentes y la escala tipográfica. Si usas muchas fuentes y tamaños de fuente, el diseño de la página puede parecer descuidado y excesivamente complejo.

    Uso de Flash

    En fin… parece mentira pero todavía queda «mucho internet» proveniente de aquellos años en los que se usaba Flash, si tu web es así o usa elementos Flash ya puedes ir cambiandolo porque no lo quieren ni los buscadores ni los dispositivos móviles.

    Para corregir los problemas de usabilidad en dispositivos móviles, te recomiendo seguir estos pasos:

    1. Prueba tu sitio en dispositivos móviles: Accede a tu sitio web desde diferentes dispositivos móviles para evaluar su apariencia y funcionamiento. Observa cómo se carga, si los elementos son accesibles y si la navegación es fluida.

    2. Optimiza el diseño responsive: Asegúrate de que tu sitio esté diseñado de manera responsive, es decir, que se adapte automáticamente al tamaño de la pantalla del dispositivo. Esto garantizará una visualización adecuada en cualquier dispositivo móvil.

    3. Mejora la velocidad de carga: La velocidad de carga es crucial para la usabilidad móvil. Optimiza las imágenes y reduce el tamaño de los archivos para que el sitio se cargue rápidamente en dispositivos móviles. Utiliza herramientas como PageSpeed Insights de Google para identificar y corregir los problemas de velocidad.

    4. Utiliza botones y elementos táctiles adecuados: Asegúrate de que los botones y elementos táctiles en tu sitio sean lo suficientemente grandes para ser seleccionados fácilmente con el dedo en dispositivos móviles. Evita colocarlos demasiado cerca unos de otros para evitar clics accidentales.

    5. Facilita la navegación: Simplifica la navegación de tu sitio para que los usuarios puedan encontrar fácilmente lo que están buscando. Utiliza menús desplegables, barras de búsqueda y enlaces de navegación claros y fáciles de usar en pantallas táctiles.

    6. Evita el contenido que no es compatible con dispositivos móviles: Elimina o reemplaza elementos como Flash, ya que no son compatibles con muchos dispositivos móviles. Asegúrate de que todos los contenidos, como videos o elementos interactivos, sean accesibles en dispositivos móviles.

    7. Optimiza el tamaño de fuente y el espaciado: Asegúrate de que el texto sea legible en pantallas móviles. Utiliza un tamaño de fuente adecuado y un espaciado suficiente entre las líneas y los caracteres para mejorar la legibilidad en dispositivos más pequeños.

    8. Verifica la usabilidad con herramientas de prueba: Utiliza herramientas como el Mobile-Friendly Test de Google para verificar la usabilidad móvil de tu sitio. Estas herramientas te proporcionarán información valiosa sobre posibles problemas y sugerencias de mejora.

    9. Realiza pruebas de usabilidad con usuarios reales: Pide a usuarios reales que prueben tu sitio web en dispositivos móviles y recopila sus comentarios. Esto te ayudará a identificar problemas de usabilidad específicos y realizar ajustes necesarios.

    10. Mantén tu sitio actualizado: A medida que los dispositivos móviles y las tecnologías evolucionan, asegúrate de mantener tu sitio web actualizado y seguir las mejores prácticas de usabilidad móvil.

    Siguiendo estos pasos, podrás corregir los problemas de usabilidad en dispositivos móviles y mejorar la experiencia de los usuarios, lo que a su vez puede tener un impacto positivo en el posicionamiento y el rendimiento de tu sitio web.

     

    Espero que esto es sea de ayuda para mejora las versión móvil de vuestra web, como siempre digo si te ha gustado comparte y si no dilo!


    SEO Freelance


    6 comentarios en “¿Cómo corregir los problemas de usabilidad en móviles?

    1. Excelente información. Gracias.

      Y donde exactamente debo colocar esta instrucción en mi wordpress:

    2. Eso depende de tu plantilla aunque si te refieres a la ventana gráfica lo más seguro es que sea en header.php.

    3. Buenas, tengo problemas de usabilidad movil (texto demasiado pequeño, etc…) si le aplico un plugin para utilizar el AMP de Google eso me lo solucionaría???
      Un saludo

    4. Eso te hará una versión AMP del sitio pero no se puede asegurar que sea el mejor método. Prueba y si la versión resultante es usable y óptima saldrás de dudas.

    5. hola! muchas gracias por este post! Suena muy util, te comento que acabo de poner ese codigo en mi header, porque tengo 4 páginas con error según google search, solo que no se actualizan? incluso desactive algunos plugins que me estaban dando problemas y en todo el blog se actualizo correctamente excepto en esas páginas con error sabes si esto tarda o estaré haciendo algo mal? Saludos.

    Deja una respuesta

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

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.