Se suele decir que un diseñador soluciona problemas. El cliente tiene un encargo específico y el diseño hace uso de sus conocimiento para llevarlo a cabo a nivel visual. En el campo del diseño web y móvil implica simplificar interfaces de manera que el usuario pueda aprender a utilizarlas rápidamente.
Aunque los dispositivos móviles poseen muchos beneficios a nivel de interacción, una de sus mayores limitaciones son las dimensiones de su pantalla. Particularmente si estás acostumbrado a diseñar para pantallas de ordenador, trasladar un diseño web para ordenadores a un dispositivos móvil puede ser una tarea que genera bastante estrés.
Las dimensiones de la pantalla de un móvil puede traer diversos problemas de usabilidad para tus usuarios, así que debes asegurarte de ser especialmente cuidadoso. Uno de estos problemas es el scrolling que se hace excesivamente largo en móviles, para los usuarios esto implica que volver a localizar una sección específica es bastante molesto. En este artículo te mencionamos algunos consejos generales que puedes poner en práctica si notas que el scrolling de tu sitio web móvil es muy largo.
Considera el tamaño estándar para dispositivos móviles
Para los sitios web no existe una medida estándar de altura que debe tener. Desplazarse hacia abajo o arriba no es ningún problema para los usuarios, simplemente deben dirigirse hacia la barra de scroll que se encuentra al parte lateral derecha y mover el indicados hacia arriba o abajo según prefieras.
En móviles, como ya hemos mencionado, cuando la altura de la página se hace demasiado larga, es complicado para los usuarios regresar a la sección que les interesa. Se hace mucho más difícil escanear la página.
Aunque para móviles no existe una longitud estándar que se debe seguir, lo ideal es que el sitio web pueda ser visto en su totalidad en 3 a 5 desplazamientos. La mayoría de móviles que se lanzan en la actualidad tienen la pantalla ligeramente más grande pues los usuarios suelen ver películas y jugar en estas pantallas. Considera los modelos de dispositivos móviles que más se utilizan hoy en día para que puedas realizar las pruebas respectivas.
Sitúa el botón de llamada a la acción en un lugar visible
Tanto en ordenadores como en móviles, para los usuarios la primera impresión cuenta. Las empresas lo saben y por ello ponen mucho cuidado en la página de inicio, principalmente todo el contenido que se encuentra visible en el primer pantallazo. Para ordenadores, esto funciona bastante bien pues la pantalla es lo suficientemente grande como para colocar el menú, una fotografía como fondo, un título y subtítulo, así como un botón de llamada a la acción.
Sin embargo, al trasladar todos estos elementos a un dispositivo móvil como un teléfono inteligente que no solo tiene una pantalla más pequeña, sino que se usa principalmente en formato vertical y no horizontal como el de los ordenadores. A pesar de estas limitaciones, debes conseguir captar la atención de tus usuarios en estos dispositivos y para ello, tanto las imágenes como el botón CTA son importantes.
La información principal y el botón de llamada a la acción debería ser visible en el primer pantallazo que los usuarios ven en móviles. Debes considerar que cuentas con menos espacio, entonces deberás mover ciertos elementos. Es probable que tu botón CTA se sitúe en el centro de la imagen o en la parte inferior derecha del primer pantallazo.
Evitar usar efectos que puedan afectar el tiempo de carga
El parallax scrolling es una tendencia actual que ya lleva algunos años vigente y que, como muchas otras tendencias de diseño web, tiene una ocasión apropiada de uso. Si se emplea como es debido, es probable que se obtenga un efecto que realmente de valor a tu sitio web e incluso ayude a contar una historia con mayor fluidez.
Pero, al igual que muchas otras tendencias de diseño, posee ventajas y desventajas. Una de las más notables es que aumenta el tiempo de carga de la página, especialmente en móviles. Este es un factor que realmente afecta la experiencia de usuario y el posicionamiento SEO.
Así que piensa cuidadosamente antes de implementar el parallax scrolling en tu sitio web. Realizar pruebas sobre el tiempo de carga y la visualización en móviles para averiguar y si realmente vale la pena implementarlo y comparar si este efecto trae mayores beneficios.
Optimiza el aspecto de tu galería
Sin importar qué tipo de sitio web tengas, es probable que exista un buen número de imágenes, particularmente si cuentas con un portafolio o tienda en línea. Recuerda que no solo las imágenes deben estar optimizadas para móviles, sino que el aspecto de la galería también debe adaptarse a las dimensiones de pantalla de un móvil. En las galerías se suelen colocar vistas previas de las fotografías organizadas en un número determinado de filas y columnas. Este sistema se puede mantener, pero debes tener en cuenta que se contará con un menor número de imágenes en cada página, como consecuencia aumentaría la paginación.
Si tienes muchas imágenes, es mejor contar con etiquetas visibles que tus usuarios pueden seleccionar para solo ver las fotografías que más le interesan. También es una buena idea colocar un sistema de búsqueda que puede contener diversos filtros, por ejemplo, si se trata de una tienda en línea con una gran variedad de productos.
Elimina elementos duplicados
En los sitios web se suelen colocar dos elementos de navegación: el encabezado donde se coloca la barra de menú y el pie de página que usualmente suele tener los mismos enlaces del menú y otros adicionales. Se hace de esta manera para que evitar que el visitante deba desplazarse hasta el inicio de la página para regresar nuevamente a la barra de menú, simplemente puede pinchar sobre el enlace de su preferencia para ir directamente a la página o sección que desea.
Aunque es una función bastante útil en ordenadores, en móviles los enlaces repetidos en el pie de página deben ser eliminados. Es decir, los enlaces de navegación que ya se encuentran en la barra de menú no deben colocarse nuevamente en el pie de página. A cambio, mantén siempre la navegación accesible en móviles. La opción más común suelen ser los hamburger menus.
Evalúa tu sitio web en su totalidad para verificar si existen otros elementos que se repiten en el sitio web y podrían hacer crecer el layout en dispositivos móviles.
Esconde elementos innecesarios en la versión móvil
Aunque la experiencia debe ser de la misma calidad en móviles, no implica que debas colocar todo el contenido del sitio web. Como ya hemos mencionado previamente, te puedes deshacer de ciertos elementos que han sido duplicados en la versión de ordenador del sitio web. Siguiendo esta misma lógica, también puedes eliminar elementos que realmente son innecesarios en la versión móvil. Para ello, debes conocer la estructura del sitio a fondo, evaluar el contenido, layout y los elementos visuales que conforman la página web para determinar de forma más acertada cuáles son esos elementos de los que podrías deshacerte sin afectar la experiencia de usuario de tus visitantes.
También puedes ser de utilidad listar todos los elementos de tu página y ordenarlos por orden de importancia. Obviamente los que poseen los primeros lugares de esta lista son elementos sumamente importantes, pero las últimas ubicaciones pueden ser cuidadosamente evaluadas para determinar su utilidad en móviles.
En conclusión…
Existen acciones que puedes tomar en cuenta para disminuir el scrolling de tu sitio web móvil y hacerlo más accesible y sencillo de navegar para tus usuarios. Ya sabes que un porcentaje de tu tráfico proviene de estos dispositivos, así que optimizar adecuadamente la experiencia en móviles es parte de tu trabajo como diseñador web.
Un scrolling excesivamente largo es solo uno de los problemas a los que te deberás enfrentar como diseñador web. Optimizar la experiencia en móviles implica tener en cuenta todas las características de estos dispositivos, así como el uso común que le dan los usuarios. Por ejemplo, saber que gran parte de los usuarios sujetan el teléfono móvil de forma vertical te pemrite preparar adecuadamente el layout y la interacción.
