Factores ineludibles para el diseño web móvil

No es noticia que la mayoría de accesos a páginas web se hacen desde el canal móvil. Es por eso que la mayoría de los buscadores web han optado por puntuar de manera negativa aquellas webs que no dispongan de una versión de su web adaptada a dispositivos mobile. Para dar solución a dicho problema, la mayoría de empresas optan por hacer uso de plantillas web responsive, las cuales incluyen una versión mobile.










Dicha plantilla la acaban retocando para adaptarla a las guías de estilo de la empresa y define la estructura en base al contenido. No obstante, casi siempre desde un punto de vista de diseño web desktop, lo cual puede implicar que los usuarios que acceden desde el canal móvil acaben con una experiencia de usuario negativa. Algún ejemplo de no llevar a cabo un correcto diseño web móvil se puede apreciar en esta imagen:

El uso de elementos pensados en un diseño web desktop en un diseño web móvil hacen que el contenido quede completamente escondido al usuario. Es por éste y otros motivos por lo que se recomienda seguir una estrategia que se ha bautizado como “Mobile First”. Resumiendo en gran medida, persigue diseñar una web empezando siempre por el dispositivo más pequeño desde el cual se accederá al contenido para luego ir incrementado el tamaño de pantalla y, por tanto, los posible elementos y contenido a mostrar. A continuación enumero algunos de los puntos más relevantes a tener en cuenta:

• Tal y como se aprecia en la imagen anterior, el primer y más importante impacto que se lleva el usuario es la publicidad y aviso del uso de las cookies, los cuales se llevan un % de espacio que sumado es igual o superior al del contenido. En este caso particular nos encontramos, además, con que la parte que aprecia el usuario es una imagen no acompañada de texto alguno. Es probable que al usuario no le sea fácil ubicarse en nuestra web y, por tanto, no captemos su atención. En otras palabras: estamos ante una mala experiencia de usuario que puede acabar con una tasa de rebote elevada. Así pues, la recomendación a seguir es definir qué contenido es el más importante para captar la atención del usuario y asegurarse de que se visualizará, o bien será lo que mayor impacto imprima en el usuario sólo abrir la página.

• Siguiendo con el mismo ejemplo, se utilizan elementos pensados principalmente para un escenario desktop que, llevado al canal móvil, se presentan de una manera adaptada pero no óptima. En este ejemplo podríamos hablar tanto de la publicidad como del aviso de las cookies. En otras ocasiones nos podemos encontrar con banners flotantes, o bien elementos que no se adaptan bien cambiando la estructura del resto de componentes, haciendo una mala lectura o un mal acceso al contenido de relevancia. Si se sigue la estrategia de empezar por el diseño web móvil evitaremos estas situaciones haciendo que la experiencia del usuario en cada dispositivo (móvil, tablet y/o desktop) sea óptima.

• Uno de los puntos fuertes del diseño web es la navegabilidad de la página. La forma en la que actualmente la mayoría de páginas web resuelven este problema en el móvil es mediante un menú escondido accesible desde un botón, tal y como ha sido resuelto por la mayoría de las Apps. El hecho que sea un elemento ya reconocido facilita la experiencia del usuario. El “pero” lo podemos encontrar en dos aspectos. Uno de ellos es el caso de las páginas que disponen de dos menús, haciendo que la versión web móvil contenga dos botones de menú, y ocasionando que la experiencia de usuario se vea afectada. El segundo “pero” lo podemos encontrar en estructuras de menús complejas (elementos y subelementos). Para estos casos una recomendación puede ser crear un menú adaptado para el canal móvil diferente del desktop. Esto implicaría la creación de nuevas páginas que, por otra parte, podrían ayudar en la estrategia de posicionamiento de la página. En todo caso, si se opta por hacer el diseño web móvil antes que el diseño web desktop, es probable que el menú no llegue a cierta complejidad por falta de espacio y/o facilidad de acceso a la navegación cuando comparamos el canal móvil frente al desktop.

• Como último consejo y, aunque cada vez más resuelto por la mayoría de webs, es tener muy en cuenta que interactuamos con la página web con nuestro dedo y no con un ratón. Cuando se hace el diseño web desktop se suele pensar muchas veces en eventos como “mouse-over” (cuando el puntero del ratón se sitúa encima de un elemento) para que aparezca un menú contextual, o bien el elemento cambie de formato (forma, color, sombreado, etcétera). Cuando se programan estos eventos, el resultado en el canal móvil es que a los usuarios nos toca hacer dos taps (clicks) en el elemento para que finalmente haga la acción. Por ejemplo: sobre un botón de enviar configuramos que cuando el puntero de ratón se sitúe cambie el color. Cuando desde el móvil hagamos el primer tap no conseguiremos que el botón haga la acción, sino que primero cambiará de color y, cuando hagamos el segundo tap, entonces realizará la acción. Otro caso habitual son utilizar botones de tamaños no adaptados para el correcto uso en pantallas táctiles, los cual dificulta el acceso haciendo que al final el usuario necesite hacer zoom in. En resumen, otra mala experiencia de usuario.

Estos cuatro puntos son probablemente los más destacables, aunque a buen seguro todos habremos tenido experiencia positivas y negativas que podríamos compartir. Así pues recuerda que si vas a hacer un diseño web en breve, plantea hacer primero el diseño web móvil pensando tanto en la parte de contenido como en los elementos.

Son aspectos esenciales para todos los profesionales que en el desarrollo de sus proyectos profesionale se enfrentan a los desafíos del ámbito Mobile. En ICEMD, Instituto de la Economía Digital de ESIC, ofrecemos el Curso Especializado en Mobile App Marketing. Puedes obtener más información y detalles de inscripciones aquí.