Cómo hacer un buen diseño web Mobile First

Desde hace tiempo, en digitalDot os estamos anunciando la preferencia de Google por los dispositivos móviles y por aquellas webs que no pierden un ápice de usabilidad en dichos dispositivos.

La filosofía Mobile First, de la que ya os hemos hablado en varias ocasiones, ha terminado siendo impuesta por Google y las agencias de diseño web han sucumbido a los “caprichos” de este todopoderoso buscador.

En digitalDot llevamos años diseñando tiendas online y desarrollando todo tipo de webs bajo los parámetros del Mobile First y sabemos los beneficios que de ello han obtenido las empresas para las que trabajamos.

Hoy queremos terminar de convenceros con los datos que aporta un último estudio de Google sobre el comportamiento de los usuarios y la necesidad de adaptar las tiendas online y webs a sus necesidades.

Y, daros algún que otro consejo para aplicarlo en vuestro próximo diseño web y cumplir con las directrices de este buscador.

¿Cómo hacer que una web sea Mobile First?

Los datos que os vamos a dar a continuación son los elaborados por Google y han sido extraídos del análisis durante 119 horas de uso de dispositivos iOS y Android.

La auditoria se realizó sobre 25 webs en donde se analizó: Home, menú, buscador, formularios, usabilidad y conversiones.

Teniendo todo esto en cuenta vamos a recalcar aquellos puntos de diseño web a los que debéis prestar atención para adaptar una web o tienda online a las exigencias de Google y, en definitiva, de los usuarios, para que sea completamente funcional en smartphone y Tablet.

Google destaca los siguientes puntos de diseño web:

- Llamadas a la acción en el la página principal y centradas. Esto permitía la acción sobre ellas al no estar “perdidas” en el menú o subpáginas.

- Menús cortos y bien categorizados están dando mejores resultados en la versión móvil porque están facilitando la localización de categorías.

- Facilidad de volver atrás. ¿Cómo conseguirlo? Mediante el uso de las migas de pan o tener un botón de volver atrás

- Promociones y zonas de venta claras sin mezclarlas con el resto de contenido de navegación.

- Buscador. Es fundamental en la versión móvil, debemos trabajar varios puntos:

• Ser visible. Colóquelo siempre en la parte superior.
• Resultados relevantes. Ningún usuario navegó por la segunda página del listado de resultados. Debemos permitir el uso de fallos de ortografía en el buscador.
• Uso de filtros por capas. Debemos tener los mejores filtros y más usados por el comprador para localizar los productos.
• Retroalimentación. Facilitar el feedback de los usuarios cuando los resultados del buscador no sean óptimos para los visitantes.

Un buen diseño móvil para tiendas online

Los usuarios, cuando visitan una tienda online se ha comprobado que no se encuentran cómodos cuando se les “acosa” con el registro desde el inicio. Permíteles navegar con comodidad, sin presiones, que conozcan el producto y, por último, dales la oportunidad para registrarse.

Un consejo: Los usuarios prefieren formularios de contacto y registro con auto rellenado de datos. Este proceso reduce la inseguridad y las dudas en el momento de la compra.

Los usuarios de una tienda online no se encuentran cómodos cuando se les “acosa” con el registro desde el inicio. Permíteles primero navegar, que conozcan el producto y, por último, ofréceles… Compartir en X

- Coloca zonas de asistencia rápida: zonas de click de llamada, servicios de chat, etc. De esta forma los visitantes se encuentran más confiados y minimiza el porcentaje de rebote.

- Permite la compatibilidad entre dispositivos. Si los usuarios tienen su carrito realizado y quieren finalizar el proceso de compra en escritorio o Tablet dales la posibilidad de enviar su proceso de compra por email, WhatsApp o redes sociales para que puedan acceder de nuevo a él.

- En la parte de formularios los visitantes prefieren los más simplificados y sencillos de completar. Solicita solo la información imprescindible.

Google valoró positivamente aquellos formularios que admitiendo solo valores numéricos, como fecha y/o código postal, mostraban solamente el teclado de números facilitando la entrada sin tener que cambiar entre letras y números.

En la parte de formularios los visitantes prefieren los más simplificados y sencillos de completar. Solicita solo la información imprescindible. Compartir en X

- Por otro lado, se tuvo en mejor consideración aquellos que al completar un campo el formulario hiciera el Tab hacia el próximo campo a completar, de forma que le usuario no tuviera que estar desplazándose con el dedo durante la inscripción.

- Los mensajes de error han de estar cercanos al campo del formulario que se está completando. No tener una zona común para todos los errores porque esto confunde al usuario y dificulta el completado de datos.

- Por otro lado, los formularios con información dentro ocasionaban cierta confusión y pérdida de tiempo al tener que borrar los datos que en ellos existía.

- Es recomendable usar el proceso de validación de tipo de datos en el momento de completar, de forma que se identifiquen emails válidos, CIF o datos fiscales o un correcto código postal.

- En la parte de formularios con varios pasos, los usuarios se encontraban más cómodos con los asistentes de procesos mostrando el punto y los datos que le faltaban por completar, haciendo uso de barras de progreso.

- Utiliza la tecnología necesaria para que los usuarios puedan ver el total de la información y detalles.

- En tiendas online, las fotos de productos deben de tener la posibilidad de hacer zoom sobre ellas, y estas deben tener una buena resolución que permita ampliarlas sin pérdida de calidad. Se detectó sentimientos de frustración en aquellos usuarios que no pudieron apreciar correctamente el producto que querían adquirir.

- De este estudio también se sacó la conclusión de no ofertar la opción de versión completa o móvil, ya que, la mayoría de los usuarios del estudio no optaron por la versión móvil al pensar que tendría menos información que la que se ofrecía como “versión completa”.

- El estudio demuestra que los diseños Mobile First son más intuitivos y los visitantes se encuentran más satisfechos que aquellas páginas de ordenador que terminan adaptándose al móvil.

Si queréis un buen diseño de tienda online Mobile First, que se adapte a los principios de Google, y ganar en posicionamiento web desde el principio no dudéis en consultar a nuestro equipo de diseño de tiendas online.

También puede interesarte:

• Servicio de diseño de tiendas online
• Qué es el diseño UX y el diseño UI
• Diseño de páginas webs en Murcia