Enlace a facebook.
digitalDot diseño webLogo Diseño Web digitalDot

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

Cómo hacer un buen diseño web Mobile First
Escrito por Digitaldot
7 de mayo de 2020
Tiempo de lectura 7 min

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.

Diseño Mobile First para tiendas online

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:

,

Noticias relacionadas sobre Posicionamiento web

Herramienta GEO para mejorar urls

Auditoría GEO para optimizar URLs

En digitalDot hemos desarrollado una nueva herramienta de auditoría GEO para analizar el potencial de cada URL dentro de las nuevas búsquedas con inteligencia artificial. Esta herramienta nos permite saber si una página está preparada para ser entendida, citada o reutilizada por sistemas como ChatGPT, Gemini, Perplexity o Copilot. Su…

Caso de éxito SEO de tienda de detalles

Caso de éxito SEO de una tienda online de detalles para eventos

Vamos a contaros el caso de una tienda online, que contacto con nuestro equipo de marketing digital, porque tiene un comportamiento claramente estacional, donde los meses de mayor actividad (de febrero a mayo) concentran buena parte de las ventas del año y necesitaban optimizar la web para estar bien posicionada…

Módulo slider responsive para PrestaShop

Módulo slider responsive para PrestaShop

Con la actual crisis, sabemos que muchos habéis optado por el lanzamiento de vuestra tienda online, y habéis apostado por Prestashop como la mejor opción para gestor CMS de vuestra tienda.   En esta ocasión y con los recientes avisos por parte de Google, queremos informaros a todos los que…

AI Overviews y AI mode

AI Overviews y AI Mode: por qué tu web puede seguir posicionando pero recibir menos clics

Hubo un tiempo en el que mirar el posicionamiento en Google y mirar los clics era casi la misma película. Si subías posiciones, subían las visitas. Si entrabas en primera página, había premio. No era un sistema perfecto, pero al menos la lógica general se entendía. Ahora la cosa se…

Cómo gestionar miles de categorías en PrestaShop sin afectar el rendimiento

Cómo gestionar miles de categorías en PrestaShop sin afectar el rendimiento

En tiendas online con miles de categorías, como recambios o despieces, PrestaShop puede convertirse en un cuello de botella. No es un problema puntual, sino estructural cuando el árbol de categorías es muy grande o profundo. Según referencias públicas en GitHub y foros oficiales de PrestaShop, este comportamiento ya ha…

Cómo crear una ficha de productos para tiendas online

Cómo crear una ficha de producto para tu ecommerce

Hay fichas de producto que parecen escritas para cumplir expediente. Y luego están las que venden.La diferencia no está en “poner más texto” ni en añadir tres iconos de envío gratis y cruzar los dedos. Está en algo mucho más complejo: entender por qué alguien compra y traducirlo en una…

Errores SEO

8 errores comunes en SEO y cómo evitarlos

Antes de empezar por los errores te voy a contar por qué estos errores puede que te estén quitando tráfico (y, lo que es más trágico: ¡¡ventas!!) Muchos proyectos tienen el mismo problema: Si el SEO fuese un cubo, no es que no estén echando agua en él (contenido, enlaces,…

Auditoria SEO técnica en PrestaShop para un ecommerce

Auditoría SEO técnica en un Prestashop B2B con más de 10.000 productos

En digitalDot, como agencia especializada en SEO técnico, SEM y desarrollo ecommerce, vemos un patrón que se repite en tiendas B2B construidas sobre Prestashop: “Invertimos en marketing digital, tenemos catálogo, hacemos campañas… pero las ventas no crecen como deberían.” En este caso analizamos un ecommerce B2B de equipamiento para hostelería…

Usar Search Console para posicionar

Cómo usar Search Console para mejorar tu posicionamiento web

Si tienes una web pero no sabes cómo te va en Google, es muy probable que necesites conocer esta herramienta: Google Search Console.Search Console es, básicamente, el lugar donde Google te deja ver qué está pasando entre tu web y el buscador: Por qué búsquedas apareces. Qué páginas atraen clics…

1 2 3 18
crossmenuchevron-down