El abandono de carritos en el comercio electrónico móvil es del 85,65%, frente a tasas más bajas en ordenador. Buena parte de esa diferencia se puede evitar con buenas decisiones de diseño. Este artículo explica qué hace que una tienda funcione bien en el móvil y cómo conseguirlo página por página.
¿Qué diferencia hay entre una tienda adaptada al móvil y una optimizada para móvil?
Una tienda adaptada al móvil no se rompe en una pantalla pequeña. El texto se ajusta, las imágenes cambian de tamaño y los botones se pueden pulsar. Es el mínimo. Google lo considera necesario para indexar tu tienda.
Una tienda optimizada para móvil está diseñada para vender desde el móvil. El diseño, la jerarquía de la información, las zonas de toque, el proceso de pago y la velocidad de carga están pensados para cómo la gente compra con el teléfono. Una tienda puede estar adaptada sin estar optimizada. Muchas lo están así.
La diferencia importa porque estar adaptada te mete en el juego. Estar optimizada es lo que genera ingresos. Una tienda que no se rompe en el teléfono pero tarda 8 segundos en cargar y tiene un formulario de pago pensado para ratón y teclado está técnicamente adaptada. No está optimizada. Cada mejora que hagas más allá de "que no se rompa" mejora tu tasa de conversión.
Por qué el índice mobile-first de Google lo cambia todo
Google usa el índice mobile-first, es decir, posiciona tu tienda según su versión móvil. No según la de escritorio. Si tu tienda móvil tiene menos contenido, menos enlaces internos o imágenes que no cargan, la idea que Google se hace de tu tienda se basa en esas carencias.
Esto tiene consecuencias directas en tus posiciones. Una tienda que se ve completa en ordenador pero está recortada en el móvil se posicionará según lo que muestre la versión móvil. Si las descripciones de producto se cortan en el móvil, Google indexa la versión cortada. Si los enlaces de navegación quedan ocultos en un menú plegado, puede que Google no los rastree igual de bien.
En la práctica, el rendimiento móvil no es solo un problema de experiencia de usuario. Es un problema de SEO. Mejorar tu tienda móvil mejora tus posiciones en las búsquedas. Cada arreglo en el móvil cuenta por partida doble.
Core Web Vitals y cómo afectan a tus posiciones
Los Core Web Vitals son un conjunto de métricas de rendimiento que Google usa como señales de posicionamiento. Largest Contentful Paint mide cuánto tarda en cargar el contenido principal de una página. Interaction to Next Paint mide la rapidez con la que la página responde a lo que hace el usuario. Cumulative Layout Shift mide cuánto se desplaza el diseño de forma inesperada mientras la página carga.
Las tres importan en el móvil, donde la velocidad de red y la potencia de proceso son menores que en ordenador. Una puntuación aceptable en un navegador de escritorio puede suspender en un móvil de gama media con conexión 4G. Y ese móvil es el que usa buena parte de tu tráfico.
Unos Core Web Vitals pobres perjudican por separado las posiciones y las conversiones. Según algunos estudios, cada segundo extra de carga en una página móvil reduce la conversión un 4,42%. Una página que tarda 5 segundos en cargar en vez de 2 puede perder ya la mitad de sus conversiones potenciales antes de que nadie vea tus productos.
Diseño móvil según el tipo de página
Cada tipo de página de una tienda tiene prioridades distintas en el móvil. Tratarlas todas igual significa no optimizar bien ninguna.
Página de inicio
En el móvil, la página de inicio tiene que decir qué vende la tienda y adónde ir en la primera pantalla. Las páginas de inicio de escritorio suelen usar secciones principales anchas con varios elementos. En el móvil, esa misma sección ocupa toda la pantalla. Si no comunica valor de inmediato y no invita a actuar, la visita sigue bajando o se va.
Mantén la navegación principal accesible sin demasiados toques. Un menú de hamburguesa es lo habitual, pero lo que haya dentro debería limitarse a las categorías que de verdad necesita quien llega por primera vez. En el móvil, una navegación enterrada es una navegación invisible.
Páginas de categoría
Las páginas de categoría en el móvil tienen que equilibrar la cantidad de productos con la facilidad de uso. Las cuadrículas de dos columnas funcionan bien para la mayoría de productos. Las listas de una columna van mejor cuando el detalle de la imagen importa. Ambas son preferibles a las de tres columnas, que dejan las imágenes demasiado pequeñas para verse en casi cualquier teléfono.
Los filtros y la ordenación son clave en las páginas de categoría y difíciles en el móvil. Un panel de filtros que se abre a pantalla completa, en lugar de una barra lateral, hace que filtrar sea viable en una pantalla pequeña. Consulta la guía completa sobre qué es una página de categoría y cómo diseñarla para ver con más detalle su estructura.
Fichas de producto
La ficha de producto en el móvil tiene que responder tres preguntas rápido. ¿Qué es? ¿Cuánto cuesta? ¿Lo puedo conseguir fácilmente? La imagen principal debe cargar al instante y poder deslizarse. El precio, la elección de variante y el botón de añadir al carrito tienen que verse sin hacer scroll.
Pon el botón de añadir al carrito en la parte visible sin desplazarse o, como mínimo, usa un botón fijo que acompañe al usuario mientras baja por la descripción. Un cliente que tiene que subir otra vez para añadir algo al carrito tiene una oportunidad más de cambiar de idea.
Pago
El pago es donde más se abandona en el móvil. Cuantos menos pasos y campos, mejor. Ofrecer compra como invitado elimina la barrera de crear una cuenta, que hace desistir a muchos usuarios móviles. Consulta la guía completa sobre cómo diseñar una página de pago que reduzca el abandono para ver cómo optimizar el pago con detalle.
Zonas del pulgar y diseño ergonómico
La gente usa el móvil con los pulgares, y los pulgares solo llegan cómodamente a ciertas zonas de la pantalla. El centro de la parte inferior es la zona más fácil de alcanzar. Las esquinas superiores son las más difíciles. No es un detalle menor. Es una realidad ergonómica que influye directamente en si los clientes interactúan con los elementos clave de tu tienda.
Coloca tus botones de acción más importantes, como añadir al carrito, continuar al pago y aplicar filtro, en la zona inferior central, donde el pulgar descansa de forma natural. Las barras de navegación en la parte baja de la pantalla son más accesibles que las superiores en móviles grandes. Las barras superiores son una costumbre del escritorio que no encaja bien con el uso a una mano.
Las zonas de toque demasiado pequeñas son un problema frecuente de usabilidad móvil. Los botones y enlaces que se pulsan fácilmente con el cursor del ratón cuestan de acertar con la yema del dedo. Google recomienda zonas de toque de al menos 48 por 48 píxeles, con espacio suficiente entre las contiguas. Si son demasiado pequeñas, hay toques fallidos, frustración y abandonos.
Pago móvil y optimización de formularios
Los formularios son una de las mayores fuentes de fricción en el pago móvil. Un formulario pensado para teclado y ratón se vuelve lento y propenso a errores cuando se rellena en una pantalla táctil con el autocorrector metiendo la cuchara. Varias mejoras concretas hacen que los formularios sean mucho más fáciles de completar en el móvil.
Usa el tipo de teclado adecuado
Los tipos de campo HTML le dicen al navegador móvil qué teclado mostrar. Un campo de correo con el tipo email muestra un teclado con la arroba bien a mano. Un campo de teléfono con el tipo tel muestra un teclado numérico. Un campo con el tipo de texto por defecto muestra el teclado completo para todo, incluidos teléfonos y códigos postales.
Usar un tipo de campo equivocado añade fricción innecesaria. El cliente tiene que cambiar de teclado a mano o escribir con una distribución que no es la suya. La solución es cambiar un único atributo en cada campo. Es una de las mejoras con mejor relación esfuerzo-resultado en el pago móvil.
Reduce los campos del formulario
Cada campo del formulario de pago es un punto de fricción en el móvil. Revisa tu pago y elimina todo campo que no sea imprescindible para completar la compra. Los campos de nombre y apellidos separados suelen poder unirse. Los campos de tratamiento casi nunca hacen falta. Varias líneas de dirección se pueden sustituir a menudo por una sola búsqueda de dirección.
Si necesitas recoger más información para marketing o analítica, plantéate pedirla después de la compra, no durante el pago. Una encuesta posterior a la compra obtiene los mismos datos sin el riesgo de abandono.
Permite el autocompletado
Los navegadores móviles modernos y los gestores de contraseñas pueden autocompletar los campos del pago si tu formulario está bien estructurado. El atributo autocomplete de cada campo le dice al navegador qué tipo de dato es. Un campo con el valor de autocomplete correcto lo rellena el navegador automáticamente si el cliente ha guardado sus datos. El autocompletado puede reducir mucho el tiempo de pago en el móvil, y eso influye de verdad en que el cliente termine la compra.
Ofrece métodos de pago móvil
Los métodos de pago móvil, como las carteras digitales, permiten al cliente completar la compra con autenticación biométrica en lugar de introducir a mano los datos de la tarjeta. Para quien está en el teléfono, no tener que teclear un número de tarjeta de 16 dígitos, una fecha de caducidad y un código de seguridad supone un ahorro de esfuerzo importante. Las tiendas que ofrecen estos métodos junto a los pagos con tarjeta habituales consiguen más conversión móvil porque se elimina la fricción en el paso más delicado.
Velocidad de página en el móvil
La velocidad afecta más a las tiendas móviles que a las de escritorio, porque las conexiones móviles son más lentas y los procesadores más débiles. Una página que carga en 2 segundos con banda ancha puede tardar 6 con datos móviles. Según algunos estudios, el 53% de las visitas móviles espera que las páginas carguen en menos de 3 segundos. Quien no lo consigue, se va.
Comprime las imágenes
Las imágenes son lo que más pesa en el tiempo de carga móvil. Toda imagen de producto, banner y foto de ambiente debería comprimirse antes de llegar al navegador. Los formatos de imagen modernos ofrecen archivos mucho más pequeños que los antiguos con la misma calidad visual.
La carga diferida (lazy loading) retrasa la carga de las imágenes que están más abajo hasta que el cliente se acerca a ellas con el scroll. La parte visible de la página carga al momento. Todo lo demás carga solo cuando hace falta. Esta técnica mejora la velocidad percibida aunque el peso total de la página no cambie.
Reduce los scripts
Los scripts de terceros, como los de analítica, los chats, los píxeles de marketing y las herramientas de reseñas, añaden tiempo de carga a cada página. Cada script hay que descargarlo, analizarlo y ejecutarlo. En el móvil, eso tarda más que en ordenador. Revisa los scripts que se ejecutan en tu tienda y quita los que no aporten de forma activa a las ventas o a la experiencia del cliente.
Los scripts necesarios muchas veces se pueden cargar de forma asíncrona, es decir, después del contenido principal de la página y no antes. Así la página se puede usar antes de que terminen de cargar, lo que mejora las puntuaciones de Core Web Vitals y la experiencia del cliente.
Prueba en dispositivos reales
Las herramientas para desarrolladores del navegador incluyen un simulador móvil que te deja ver tu tienda como si estuvieras en un teléfono. El simulador sirve para revisar el diseño, pero no reproduce con exactitud el rendimiento de un dispositivo real en una red real. Un móvil de gama media con conexión 4G se comportará distinto de lo que muestra el simulador en un ordenador rápido.
Prueba con regularidad en dispositivos reales. Los problemas que no se ven en el simulador, como retrasos en los toques, fallos al mostrar las fuentes y ciertos errores de diseño, se notan enseguida en dispositivos reales. Si no tienes acceso a varios dispositivos, hay herramientas gratuitas en línea que muestran tu tienda a través de aparatos reales con conexiones de red reales.
SEO móvil más allá de la velocidad
La velocidad y los Core Web Vitals son lo más comentado del SEO móvil, pero hay otros factores que influyen en cómo posiciona tu tienda en las búsquedas desde el móvil.
Evita los elementos intersticiales que tapan el contenido principal en el móvil. Los pop-ups y las capas que bloquean la página nada más cargar los penaliza el algoritmo de búsqueda móvil de Google. Si usas un pop-up para captar correos o un aviso de cookies, no debería ocultar el contenido principal antes de que la visita haya podido ver la página.
Asegúrate de que todo el contenido visible en tu tienda de escritorio también es accesible en el móvil. Si en el móvil el contenido queda oculto tras un botón de "leer más", Google puede indexar el estado plegado en lugar del texto completo. En las descripciones de producto y el contenido de categoría que contribuyen a tus posiciones, el texto completo debería poder verse en el móvil sin toques adicionales.
Los enlaces internos deberían ser coherentes entre escritorio y móvil. Si tu tienda de escritorio tiene una sección destacada de productos relacionados con enlaces a otras categorías, la versión móvil debería incluir también esos enlaces. Los enlaces de navegación que Google usa para entender la estructura de tu tienda no deberían desaparecer en el móvil.
Cómo gestiona WEMASY el móvil
El sistema de e-commerce de WEMASY genera páginas de tienda adaptables que se ajustan a cualquier tamaño de pantalla por defecto. Las fichas de producto, las páginas de categoría y el pago están diseñados para cumplir los requisitos del índice mobile-first de Google. El proceso de pago admite métodos de pago móvil y campos de formulario con el tipo correcto. El rendimiento en Core Web Vitals está integrado en el hosting y la entrega del sistema, sin necesidad de optimizarlo a mano. Mira qué incluye cada plan en la página de precios.
Preguntas frecuentes
¿Cómo compruebo si mi tienda está adaptada al móvil?
Search Console de Google incluye un informe de usabilidad móvil que señala problemas concretos en tus páginas, como texto demasiado pequeño, elementos pulsables muy juntos o contenido más ancho que la pantalla. PageSpeed Insights te da las puntuaciones de Core Web Vitals del móvil y del ordenador por separado. Ambas herramientas son gratuitas y dan resultados concretos y accionables, no un simple aprobado o suspenso. Con el creador de webs de WEMASY, puedes configurarlo directamente en tu tienda.
¿El diseño móvil afecta a mis posiciones en Google?
Sí, directamente. Google usa el índice mobile-first, lo que significa que tu tienda se posiciona según su versión móvil. Las puntuaciones de Core Web Vitals, que dependen de factores de rendimiento móvil como la velocidad de carga y la estabilidad del diseño, son una señal de posicionamiento confirmada. Una tienda que funciona bien en el móvil tiene ventaja de posicionamiento sobre una que no, aunque las versiones de escritorio sean equivalentes.
¿Cuál es el problema más habitual en el pago móvil?
La fricción de los formularios es el problema más habitual. Los formularios de pago pensados para ratón y teclado exigen demasiado esfuerzo en una pantalla táctil. Los arreglos que más impacto tienen son: usar los tipos de campo correctos para que aparezca el teclado adecuado, reducir el número de campos, activar el autocompletado y ofrecer métodos de pago móvil que evitan introducir los datos de la tarjeta a mano. Corregir estos cuatro puntos suele mejorar de forma medible la tasa de pagos completados en el móvil.
¿Cómo afecta la velocidad de página móvil a las ventas?
La relación es directa y está bien documentada. Según los estudios, la tasa de conversión baja alrededor de un 4% por cada segundo extra de carga. Una tienda que carga en 1 segundo convierte bastante más que la misma tienda cargando en 4. En las tiendas móviles en particular, donde las condiciones de red varían y las visitas abandonan antes lo que va lento, mejorar la velocidad suele dar el retorno más rápido de toda la inversión técnica.
¿Debo crear una tienda móvil aparte o usar un diseño adaptable?
El diseño adaptable, en el que una sola tienda ajusta su diseño según el tamaño de pantalla, es el enfoque habitual y el que recomienda Google. Las webs móviles aparte suponen más mantenimiento, pueden provocar incoherencias de indexación y son más difíciles de mantener sincronizadas cuando actualizas productos y contenido. Salvo que haya una razón operativa concreta para tener una experiencia móvil separada, lo adecuado es un diseño adaptable en una sola URL.
¿Cómo reduzco el abandono de carritos en el móvil?
El abandono de carritos en el móvil se debe a una mezcla de fricción y distracción. Las estrategias que más lo reducen son: un pago simplificado con los menos pasos y campos posibles, una opción de compra como invitado que quite la barrera de crear cuenta, métodos de pago móvil que eviten teclear la tarjeta y una página de pago que cargue rápido. El retargeting por correo para carritos abandonados también sirve para recuperar sesiones en las que el cliente no terminó la compra en una sola visita.