Diseño de e-commerce mobile-first: qué cambia cuando casi todo el tráfico llega desde el móvil

Cuando diseñé la tienda online de HighSteaks, una carnicería premium de Nueva York, hubo una cifra que marcó todas las decisiones: esperábamos que más del 90% de las visitas llegaran desde un móvil. Su fundador, Brandon Alwadish, tiene más de 150K seguidores entre Instagram y TikTok, y de ahí vienen los compradores. Tocan un enlace, aterrizan en la tienda a mitad de scroll y deciden en segundos si se quedan.

Mobile-first no significa encoger una web de escritorio hasta que quepa. Significa diseñar primero para el móvil y después aprovechar el espacio extra del escritorio. Esto es lo que cambia cuando trabajas así.

Quien llega desde redes sociales no se comporta igual que quien te ha buscado. Está en lo que yo llamo modo «scroll and shop»: una mano, un pulgar, poca atención y, muchas veces, dentro del navegador de Instagram o TikTok en lugar de Safari o Chrome. No pensaba comprar. Tienes que ganarte el siguiente toque.

Aunque no tengas una audiencia en redes, el móvil suele ser la pantalla principal. Para Bandar’s Bounties, un grupo premium de Discord que ayuda a encontrar errores de precio y ofertas exclusivas online, optimicé para móvil cada elemento de la versión de escritorio, porque alrededor del 60% del tráfico web mundial es móvil.

Antes de diseñar nada, respondo a cuatro preguntas:

• ¿De dónde vienen las visitas: redes, buscadores, email o anuncios?
• ¿Qué quieren hacer en los primeros diez segundos?
• ¿Cuántas navegarán dentro del navegador de una app?
• ¿Qué necesitan ver antes de confiarte su tarjeta?

En el móvil, la ficha de producto hace casi todo el trabajo de venta. La gente recorre la cuadrícula rápido, y cada tarjeta tiene que decirle si merece un toque. En HighSteaks, cada tarjeta muestra de un vistazo el nombre del producto, la granja de origen, el peso y el precio. En carne premium, esos cuatro datos son los que se comparan, así que ninguno queda escondido detrás de un toque.

Las reglas que sigo para las fichas de producto en móvil:

• Una imagen, un estilo. Mismo ángulo, misma luz y mismo fondo en todo el catálogo, para que la cuadrícula transmita calma y los productos sean fáciles de comparar.
• Nombres cortos. Dos líneas como máximo. Las variantes y los detalles, en la página de producto.
• Los datos que deciden. En carne son el origen y el peso; en moda pueden ser las tallas disponibles. Muestra lo que de verdad decide la compra.
• El precio siempre visible. Esconderlo solo añade un toque y una duda.
• Toda la tarjeta es pulsable, y cualquier botón de añadir al carrito mide al menos 44 × 44 puntos, el mínimo que recomienda Apple para zonas táctiles.

Cada vez que mandas a un comprador móvil a otra página, te arriesgas a perderlo: otra carga, la posición del scroll perdida, un momento para pensárselo dos veces. En HighSteaks, el carrito es un panel lateral. Se desliza desde la derecha, oscurece la página de detrás, muestra los productos junto a otros recomendados y se cierra con un toque. Nadie tiene que salir de la página que estaba viendo.

Si usas un carrito lateral, cuida los detalles:

• Mantén el botón de pago a la vista. Debe verse sin hacer scroll, aunque haya varios productos.
• Facilita cambiar las cantidades con botones de más y menos grandes, no con un desplegable diminuto.
• Recomienda poco. Dos o tres productos que combinen con lo que ya hay en el carrito.
• Ofrece varias formas de cerrarlo: un botón de cierre claro, un toque sobre la página oscurecida y, a ser posible, un gesto de deslizar.
• Hazlo accesible. Lleva el foco al panel cuando se abre y devuélvelo cuando se cierra, para que funcione también con lectores de pantalla.

Cuando alguien llega desde un vídeo, la tienda debería sentirse como su continuación. HighSteaks tiene una sección con fragmentos del contenido de Brandon en Instagram y TikTok, junto a tres mensajes breves: «Curated Collection», «Save Time» y «Experience». La sección «About» cuenta su historia, firmada por él, y los cortes destacados aparecen sobre un fondo oscuro y limpio con la granja de origen, el peso y la calificación de calidad.

En el móvil, ese contenido tiene que ser ligero. Usa fragmentos de vídeo cortos, nunca reproduzcas sonido automáticamente y deja claro que un carrusel se puede deslizar asomando la siguiente tarjeta por el borde.

• Pon las acciones principales al alcance, en la mitad inferior de la pantalla, donde descansa el pulgar.
• Usa una sola columna. Los carruseles horizontales sirven para productos relacionados, no para el catálogo principal.
• Pliega el contenido secundario. Las especificaciones, los envíos y las preguntas frecuentes funcionan bien como acordeones: la página se queda corta y no se pierde nada.
• Añade una barra fija de «añadir al carrito» en las páginas de producto largas, para que la acción nunca desaparezca de la pantalla.
• Diseña los formularios para el móvil: el teclado adecuado para cada campo, el autocompletado activado y un texto de al menos 16 píxeles en los campos para que iOS no haga zoom.
• Pregunta una cosa cada vez en los flujos largos. En Timepiece FNF, el flujo de venta pide la marca, luego el modelo y luego las fotos, un paso por pantalla.

Un móvil con mala cobertura perdona mucho menos que un portátil con el wifi de la oficina. Comprime cada imagen y usa formatos modernos como WebP o AVIF. Carga las imágenes y los vídeos que quedan más abajo solo cuando estén a punto de verse. Sé estricto con los scripts de terceros: cada widget de chat, cada píxel de seguimiento y cada pop-up suman peso. Y prueba en un móvil real de gama media con datos móviles, no solo en la vista de dispositivo del navegador.

Cuando la experiencia móvil funciona, el escritorio consiste en aprovechar bien el espacio extra: más productos por fila, los detalles junto a las fotos, estados hover y un relato más rico. Es mucho más fácil añadir que quitar. En Timepiece FNF, muchos coleccionistas navegan desde el móvil, así que todos los layouts se diseñaron mobile-first y las páginas de escritorio crecieron a partir de ahí. Cuento el resto de ese enfoque en principios de diseño web de lujo.