PDP-002: Coloca el botón de añadir al carrito en la primera pantalla en móvil

En móvil, el botón de añadir al carrito debe verse completo en un viewport de 375 por 667 píxeles antes de que el comprador haga scroll, ya sea integrado en la página o en una barra fija (sticky) que esté presente al cargar. Eso es lo que comprueba la regla PDP-002 de UXFix. En nuestras auditorías, un botón de compra que solo aparece tras deslizar más allá de la galería principal y los selectores de variantes es uno de los fallos de severidad alta más frecuentes que encontramos en páginas de producto.

Qué comprueba PDP-002 y cómo lo puntuamos

PDP-002 es una de las 115 reglas del libro de reglas de UXFix y pertenece al grupo de página de producto con una ponderación de severidad alta. La regla en una frase: en una página de producto móvil, un control funcional de añadir al carrito debe verse completo dentro de un viewport de 375 por 667 píxeles CSS en el primer renderizado, sin hacer scroll, tocar ni cerrar nada.

Lo comprobamos con una captura de pantalla, no con el DOM. El auditor carga la PDP a 375x667, espera a que la página se estabilice, captura el viewport y busca el botón. Si una persona que sostiene el teléfono con una mano no puede ver el botón entero, la regla no se supera, diga lo que diga el HTML sobre dónde está el elemento.

Algunas aclaraciones a partir de casos que vemos cada semana.

• Un botón "Avísame cuando vuelva a estar disponible" en la misma posición cuenta como CTA para una variante agotada. La gestión de disponibilidad se puntúa en otra regla.
• Un botón "Seleccionar opciones" o "Elegir talla" cuenta como parcial, no como superado, porque el comprador todavía tiene que averiguar dónde están las opciones.
• Un banner de cookies que cubre el botón cuenta en tu contra. El comprador ve el banner, no el botón.
• Una barra fija presente al cargar cuenta como completamente visible. Una barra fija que solo se desliza cuando el comprador pasa de largo el botón integrado no cuenta, porque en el primer renderizado no hay nada que tocar.

¿Por qué el botón de añadir al carrito acaba por debajo del pliegue en móvil?

Nadie diseña una página de producto con el botón de compra escondido. Ocurre por acumulación. Cada elemento por encima del botón es razonable por sí solo, y juntos empujan el botón fuera de la parte inferior de la pantalla.

Esta es una pila típica en un tema de Shopify o Magento, medida en un viewport de 375 píxeles de ancho:

• Barra de anuncios: de 36 a 44 px
• Cabecera fija con logo, buscador e icono de carrito: de 56 a 72 px
• Migas de pan: de 24 a 32 px
• Imagen principal cuadrada a ancho completo: 375 px
• Tira de miniaturas o paginación por puntos: de 40 a 72 px
• Título del producto en dos líneas: 56 px
• Precio y estrellas de reseñas: de 48 a 64 px

Súmalo y estás entre 635 y 715 px aproximadamente antes de que aparezca un solo selector de variantes. El viewport mide 667 px de alto. El botón ya ha desaparecido, y todavía no has colocado un selector de talla, muestras de color ni un selector de cantidad.

Tres cosas lo empeoran. La primera es la fotografía vertical. Las tiendas de moda y hogar usan imágenes de producto en 4:5 o 2:3, así que la imagen principal por sí sola puede medir entre 470 y 560 px de alto. La segunda son los selectores de variantes mostrados como filas de botones de opción a ancho completo en lugar de una fila compacta de muestras o un desplegable. Un selector con ocho tallas que salta a dos filas cuesta otros 100 px. La tercera son los widgets de carga tardía: un resumen de reseñas, un banner de pago en cuatro plazos o un estimador de envío que se inserta por encima del botón después del primer renderizado y lo empuja todo hacia abajo.

La mayoría de temas se diseñan primero para escritorio, donde la galería va a la izquierda y la caja de compra a la derecha, ambas visibles a la vez. Cuando ese diseño de dos columnas se colapsa en una sola en un teléfono, la galería queda arriba y la caja de compra debajo. El tema hizo exactamente lo que se le pidió. Nadie comprobó el resultado en una pantalla de 667 px de alto.

Por qué importa: qué hace el comprador en la primera pantalla

Los compradores sí hacen scroll en móvil. Ese no es el argumento. El argumento es qué ocurre en la primera pantalla y qué concluye el comprador a partir de ella.

El estudio de seguimiento ocular de Nielsen Norman Group de 2018 sobre scroll y atención descubrió que las personas dedican el 57 % de su tiempo de visualización de una página a la parte superior al pliegue y el 74 % a las dos primeras pantallas. La atención cae en picado después de eso. Si tu botón aparece por primera vez a 900 px, está en la zona donde la mayor parte de la atención ya se ha gastado.

Hay un segundo efecto. Un comprador que llega desde un anuncio de pago o un resultado de Google Shopping ya ha visto el producto y el precio. Llega con intención de comprar, o de comprobar algo concreto, como si su talla está disponible. Si la primera pantalla le muestra una foto que ya ha visto más un título, la página no le ha dicho nada nuevo ni le ha pedido nada. Un CTA visible es lo que convierte una llegada en una decisión.

Baymard Institute mantiene un benchmark de UX de ecommerce móvil dentro de su investigación más amplia sobre UX de ecommerce precisamente porque la misma caja de compra se comporta de forma distinta una vez que se colapsa en una columna. Nuestras propias auditorías muestran el mismo patrón. De 250 PDP móviles puntuadas en el último trimestre, el 41 % falló o falló parcialmente PDP-002, y los fallos se concentran en moda y hogar, donde la fotografía vertical es lo habitual. La visibilidad del botón de compra es uno de los doce problemas de página de producto que tratamos en por qué los compradores abandonan tu página de producto sin comprar.

Fallo, parcial y superado: ejemplos con capturas de auditorías reales

Cada problema PDP-002 en un informe de UXFix va acompañado de una captura anotada a 375x667. Dibujamos el límite del viewport como una línea roja a 667 px y enmarcamos el control de añadir al carrito allí donde realmente está, aunque quede fuera de pantalla. Estos son los tres niveles tal y como aparecen en los informes, con el texto alternativo que adjuntamos a cada imagen.

Fallo: tienda de hogar, imagen principal vertical

La primera pantalla muestra una barra de anuncios, una cabecera, una imagen principal 4:5 de 469 px de alto y la primera línea del título del producto. Después vienen el precio, las reseñas, un selector de talla de tres filas y un selector de color de dos filas. El botón de añadir al carrito se ve completo por primera vez a 1040 px, más de una pantalla y media más abajo. No hay barra fija. Un comprador que llega desde un anuncio ve una foto que ya ha visto y nada que tocar.

Texto alternativo: "Página de producto móvil a 375x667 con una imagen principal alta y el título del producto. El botón de añadir al carrito está 373 px por debajo del borde del viewport. Fallo de UXFix PDP-002."

Parcial: tienda de moda, botón recortado

Esta tienda tiene una imagen principal cuadrada y una fila compacta de muestras, y el diseño casi funciona. Los 22 px superiores del botón asoman por encima del borde inferior del viewport, así que el comprador ve una franja negra sin etiqueta legible. Tocar la franja funciona, pero nada le indica que es un botón. Al hacer scroll, una barra fija se desliza desde abajo, lo que confirma que la tienda sabía que había un problema y lo resolvió para todos menos para quien todavía no ha hecho scroll.

Texto alternativo: "Página de producto móvil a 375x667 con el botón de añadir al carrito recortado en el borde inferior, etiqueta no visible. Parcial de UXFix PDP-002."

Superado: tienda de electrónica de consumo, galería corta

La galería principal está limitada a 300 px de alto y recortada a 5:4, con deslizamiento para ver más ángulos. Un solo desplegable gestiona la variante de almacenamiento. Título, precio, valoración con estrellas y el botón completo de "Añadir al carrito" caben todos, con el borde inferior del botón a 641 px. Además hay una barra fija con el precio y un segundo botón, presente al cargar, lo que significa que el botón sigue visible incluso cuando el comprador baja hasta la descripción.

Texto alternativo: "Página de producto móvil a 375x667 con imagen principal, precio y un botón de Añadir al carrito completamente visible por encima del borde del viewport. Superado de UXFix PDP-002."

Si publicas tus propias capturas de auditoría, márcalas para que los buscadores y los asistentes de IA puedan leer qué demuestra cada una. Nosotros usamos ImageObject de schema.org anidado dentro del Article, con el ID de la regla y el nivel en la descripción:

{
  "@type": "ImageObject",
  "contentUrl": "https://example.com/audits/pdp-002-fail-375x667.png",
  "width": 750,
  "height": 1334,
  "caption": "UXFix PDP-002 fail: add-to-cart button 373 px below the 375x667 viewport edge",
  "description": "Annotated mobile product page screenshot. Red line marks the 667 px fold. Add-to-cart control boxed below the fold."
}

Cómo probarlo y cómo solucionarlo

No necesitas nuestras herramientas para hacer la prueba de visibilidad del CTA en móvil. Necesitas diez minutos y un navegador.

1. Abre Chrome DevTools, activa la barra de dispositivos y elige el preajuste de iPhone SE o configura 375 por 667 con una relación de píxeles de dispositivo de 2.
2. Desactiva la caché y recarga la página de producto de forma forzada. Espera a que la red esté inactiva para que los widgets de carga tardía se hayan estabilizado.
3. No cierres nada. No hagas scroll. Haz una captura del viewport.
4. Comprueba que el botón entero, incluido su borde inferior, está dentro de la captura y que la etiqueta dice qué ocurre al tocarlo.
5. Repite con el producto de tu catálogo que tenga más opciones de variante, y con un producto agotado.
6. Repite con el banner de cookies en su estado por defecto de primera visita.
7. Repite en un teléfono real en Safari con la barra de direcciones y la barra de herramientas inferior visibles, porque ahí la altura útil es menor de 667 px.

Si el botón falla, corrígelo en este orden. Las soluciones baratas van primero y normalmente te llevan a superar la regla sin necesidad de barra fija.

• Limita la altura de la galería principal a 400 px o 60vh en móvil. Recorta las imágenes verticales a cuadrado o 5:4 para la imagen principal y conserva el recorte completo para la vista de zoom.
• Compacta los selectores de variantes. Muestras de color en una sola fila desplazable. Tallas en un desplegable cuando haya más de seis opciones.
• Elimina las migas de pan en móvil. Integra la barra de anuncios en la cabecera o hazla cerrable y recuerda que se cerró.
• Mueve el resumen de reseñas y cualquier banner de pago en cuatro plazos por debajo del botón. Apoyan la decisión; no son la decisión.
• Reserva espacio para los widgets de carga tardía con un min-height fijo para que no puedan desplazar el botón después del primer renderizado.

Cuando el diseño aun así no cabe, añade una barra fija de añadir al carrito. Bien hecha, supera la regla por sí sola; mal hecha, crea problemas nuevos. La barra debe estar presente al cargar, medir entre 56 y 64 px de alto, anclarse a la parte inferior con relleno para el área segura en teléfonos con notch, y mostrar el precio actual junto al botón. El área táctil del botón debe medir al menos 44 por 44 px. WCAG 2.2 fija un mínimo de 24 por 24 px en el nivel AA y de 44 por 44 en AAA en sus criterios de tamaño del objetivo, y en una pantalla que se maneja con el pulgar te interesa la cifra más alta.

La barra también tiene que conocer el estado de las variantes. Si se requiere una talla y no hay ninguna seleccionada, tocar el botón fijo debe abrir el selector de talla con una indicación visible. Un botón fijo que no hace nada en silencio, o que lanza un error en rojo en algún lugar fuera de pantalla, puntúa peor en nuestras auditorías que no tener barra fija.

Una razón más para prestarle atención. Los agentes de compras con IA basados en visión con los que hacemos pruebas toman una captura del tamaño de un teléfono y buscan un control de compra, más o menos como hacemos nosotros. Cuando el botón no está en esa primera captura, algunos agentes hacen scroll y lo recuperan, otros informan de que el producto no se puede comprar. Dale también al botón un nombre accesible de "Añadir al carrito", para que los agentes basados en el DOM lo encuentren sin necesitar la captura. La misma disciplina da frutos más adelante en el embudo, y por eso la comprobación del pliegue reaparece entre los errores de checkout móvil que puntuamos, y por eso PDP-002 figura junto al resto de las 115 reglas con las que auditamos.

Preguntas frecuentes

¿Debe estar el botón de añadir al carrito en la primera pantalla en móvil?

Sí. El comprador dedica la mayor parte de su atención a la primera pantalla, y una página de producto cuya primera pantalla no ofrece nada que tocar ha desperdiciado esa atención en una foto que el comprador a menudo ya ha visto en el anuncio o en el listado. PDP-002 exige que el botón completo sea visible a 375x667 en el primer renderizado, ya sea integrado o en una barra fija presente al cargar, y la ponderamos como regla de severidad alta porque se sitúa en el momento exacto de la decisión.

¿Una barra fija de añadir al carrito cuenta como superado?

Cuenta como superado si es visible en el momento en que carga la página, contiene un botón con etiqueta clara y un área táctil de al menos 44 por 44 px, y al tocarlo añade el artículo o abre el selector de variantes requerido. Cuenta como parcial si solo aparece después de que el comprador haga scroll, porque la primera pantalla sigue sin CTA. Puntúa como fallo si al tocarlo no hace nada en silencio cuando no se ha elegido una variante.

¿Por qué 375 por 667 y no un teléfono más grande?

Usamos 375x667 porque es el viewport más pequeño que sigue siendo habitual en el tráfico de ecommerce y porque un diseño que lo supera ahí lo supera también en cualquier teléfono más grande. Probar en un gama alta de 430 por 932 oculta el problema para una parte significativa de tus compradores. En Safari en un dispositivo real la altura útil es aún menor una vez que se dibujan la barra de direcciones y la barra de herramientas inferior, así que superar la regla a 667 px es el mínimo, no un objetivo generoso.

¿Un botón visible de "Seleccionar talla" es un fallo?

No, es un parcial. Hay algo que tocar en la primera pantalla, que es mejor que nada, pero la etiqueta describe una tarea y no el resultado que el comprador quiere. Un botón etiquetado "Añadir al carrito" que abre el selector de talla cuando no se ha elegido ninguna ofrece al comprador el mismo flujo con una promesa más clara, y supera la regla. Si tu plataforma te obliga a usar la etiqueta "Seleccionar opciones", coloca el selector de talla justo encima del botón para que ambos se vean juntos.