PDP-001: precio visible en la parte superior de la página en escritorio y móvil, sin desplazarse ni tocar

El precio de una página de producto está en la parte superior de la página cuando resulta legible en la primera pantalla que ve el comprador, tanto en escritorio como en móvil, sin necesidad de desplazarse, tocar, pasar el cursor, seleccionar una variante ni iniciar sesión. La regla PDP-001 de UXFix comprueba exactamente esto. Está clasificada como Crítica porque el precio es la cifra que decide si el comprador sigue leyendo o se va, y un precio oculto falla de la misma manera a los compradores humanos y a los agentes de compras con IA.

Qué comprueba realmente la regla PDP-001

Cada regla de nuestro libro de 115 reglas tiene un ID, una severidad, una categoría y un método de detección. PDP-001 es la primera regla de página de producto porque nada más en la página importa hasta que el comprador sabe cuánto cuesta el artículo.

La definición de una frase con la que puntuamos: PDP-001 se aprueba cuando el precio de venta actual del producto por defecto se muestra como texto legible dentro de la ventana inicial tanto en escritorio como en móvil, antes de que el comprador se desplace, toque, pase el cursor, seleccione una variante o inicie sesión.

"Decisión" es la categoría que asignamos a las reglas en las que el comprador no puede tomar la decisión de compra sin esa información. La fecha de entrega, el estado del stock y las devoluciones también son reglas de Decisión. El precio encabeza el grupo porque es el único dato sin el cual nadie sigue adelante.

"Visión" es el método de detección. No nos limitamos a buscar un símbolo de moneda en el HTML. Cargamos la página en dos ventanas fijas, tomamos una captura antes de cualquier interacción y comprobamos si hay un precio legible en los píxeles. Un precio que existe en el DOM pero está bajo un acordeón plegado, detrás de un modal o 900 píxeles más abajo cuenta como oculto, porque está oculto.

Las dos ventanas son de 1440 por 900 para escritorio y de 390 por 844 para móvil. No son las únicas pantallas que usan tus compradores, pero se acercan a la mediana de cada tipo de dispositivo, y si el precio no está en la primera pantalla a esos tamaños, no está en la primera pantalla para la mayoría de la gente.

¿Por qué un precio oculto te cuesta la venta?

La primera tarea del comprador en una página de producto es decidir si el producto merece más de su atención. No puede tomar esa decisión sin un precio, así que cada segundo en que el precio falta es un segundo dedicado a buscarlo en lugar de mirar el producto.

La investigación con seguimiento ocular de Nielsen Norman Group sobre desplazamiento y atención descubrió que los usuarios pasan alrededor del 57% de su tiempo de visualización en la primera pantalla, y que la atención cae de forma pronunciada con cada pantalla posterior. Todo lo que coloques por debajo compite por menos de la mitad de la atención del comprador. Si eso es el precio, has convertido la cifra más importante de la página en la más difícil de encontrar.

El Baymard Institute informa de que el 48% de los compradores que abandonan en el checkout lo hacen porque los costes adicionales eran demasiado altos. Esa cifra suele citarse a propósito de envíos e impuestos, y tratamos esa parte en Por qué los compradores abandonan el checkout por comisiones ocultas y costes sorpresa. La versión de la página de producto es más silenciosa. Cuando el precio base está oculto, cada cifra posterior es una sorpresa, y los compradores sorprendidos se van.

Hay también un coste en confianza difícil de cuantificar, así que no lo haremos. En las sesiones de auditoría vemos a compradores llegar a una página sin precio visible y sacar la misma conclusión: si no lo muestras, debe de ser alto. No siempre es cierto, pero el comprador ya se ha ido antes de que puedas explicarlo.

Aprobado, parcial y suspenso, con ejemplos

Puntuamos PDP-001 en una escala de tres niveles. Así es cada nivel en una página real, descrito tal como nuestros revisores anotan las capturas de pantalla.

Aprobado

Móvil, 390 por 844. La cabecera y la barra promocional ocupan los 100 píxeles superiores. El título del producto está justo debajo de la cabecera, y el precio, 68,00 £, justo debajo del título en una fuente al menos tan grande como el texto del cuerpo, con el precio de comparación tachado al lado. La galería empieza debajo del precio. No se ha tocado nada. Eso es un Aprobado: la cifra es legible en los píxeles de la primera pantalla.

Escritorio, 1440 por 900. Galería a la izquierda, título y precio en la parte superior de la columna derecha, botón de añadir al carrito visible sin desplazarse. También Aprobado. Los aprobados en escritorio son habituales. Donde la regla se pierde es en móvil.

Parcial

Un Parcial significa que el precio está técnicamente presente pero el comprador aún tiene trabajo que hacer, o que la regla se aprueba en un dispositivo y suspende en el otro. Los casos que vemos con más frecuencia:

• Solo rango. "Desde 49 £" en un producto configurable sin variante por defecto con precio. El comprador conoce el mínimo, no el coste.
• Condicionado a la variante. El área del precio dice "Selecciona una talla" hasta que se toca una opción. Un toque sigue siendo una interacción.
• Solo escritorio. El precio está claro a 1440px pero queda bajo una galería a pantalla completa a 390px.
• Bajo contraste. El precio está en la ventana pero en gris claro sobre blanco, por debajo de la relación 4,5:1 del criterio de éxito 1.4.3 de WCAG 2.1. Si un comprador con visión normal a la luz del día tiene que entrecerrar los ojos, lo penalizamos.
• Cifras ambiguas. Dos precios sin tachado ni etiqueta, de modo que el comprador no sabe cuál pagará.

Suspenso

Un Suspenso significa que no hay un precio actual legible en la primera ventana en al menos un dispositivo, o que hacen falta más de una interacción para que aparezca.

• "Añade al carrito para ver el precio" o "Inicia sesión para ver precios" sin mostrar ninguna cifra.
• Precio solo en una barra fija que aparece deslizándose después de que el comprador se desplace.
• Precio dentro de un acordeón "Detalles" plegado.
• Precio incrustado en una imagen en lugar de como texto.
• Una imagen principal a 100vh que empuja título, precio y botón por debajo de la primera pantalla en todos los dispositivos.
• Precio inyectado por un script externo de precios o personalización que se resuelve dos o más segundos después del primer renderizado. Nuestra captura espera a que la red esté inactiva, pero si el script falla o está bloqueado la página se sirve con un hueco vacío.

El diseño anterior es el Parcial más frecuente que registramos. Nadie decidió ocultar el precio. Un tema venía por defecto con una galería cuadrada, alguien añadió una barra promocional y el precio se salió de la pantalla sin que nadie lo notara.

Donde se pierde la regla es en móvil

Una ventana de 390 por 844 te da 844 píxeles verticales. La interfaz del navegador en iOS Safari se queda con unos 140 antes de que tu página muestre nada, y quedan alrededor de 700. Una cabecera fija de 60px y una barra promocional de 40px dejan 600. Una galería cuadrada de 390px deja 210. Ese es el espacio que tienes para el título, el precio y el inicio del botón de compra, y no es mucho.

Esta aritmética es la razón por la que recomendamos uno de estos tres diseños para páginas de producto en móvil:

1. Título y precio encima de la galería. El comprador lee el nombre y la cifra, y luego desliza las fotos. Es el diseño con más probabilidades de aprobar PDP-001 sin ningún otro cambio.
2. Galería más baja. Una imagen 4:3 o 3:2 a todo el ancho mide entre 290 y 260 píxeles de alto en lugar de 390, lo que suele devolver el precio a la primera pantalla.
3. Precio superpuesto en la galería. Una pequeña etiqueta de precio de alto contraste en una esquina de la primera imagen. Aprueba la comprobación visual pero es frágil: depende de que cada foto de producto tenga una esquina despejada.

Una barra fija de añadir al carrito con el precio es una buena práctica y la valoramos en una regla aparte. Por sí sola no cuenta para PDP-001 cuando solo aparece tras el desplazamiento, porque la regla trata de la primera pantalla, no de la décima.

Los avisos de cookies merecen una nota. Los cerramos antes de capturar, porque todas las tiendas de la UE tienen uno y la regla perdería sentido. Cualquier otra cosa que se interponga entre el comprador y la cifra cuenta en tu contra: modales de newsletter al cargar, interstitials de descarga de la app, selectores de región que bloquean la página. Si el comprador tiene que tocar para que aparezca el precio, es una interacción.

El otro fallo en móvil que vemos es la acumulación de barras promocionales. Barra de envío gratuito, más barra de cuenta atrás de rebajas, más barra de "descarga la app", y 150 píxeles desaparecen antes de la cabecera. Deja una sola barra, o ninguna, en las páginas de producto.

Cómo encuentran tu precio los agentes de compras con IA, o cómo lo pasan por alto

Los agentes de compras con IA llegan a las páginas de producto de dos maneras, y PDP-001 afecta a ambas.

Los agentes basados en texto descargan el HTML y lo analizan. Buscan una Offer de schema.org, luego recurren a microdatos y luego a expresiones regulares sobre el texto visible. Si tu precio lo carga un script en el cliente, o solo existe en una imagen, un agente de texto puede no encontrar nada o encontrar la cifra equivocada. Documentamos los modos de fallo en Por qué los agentes de compras con IA leen mal tus precios.

Los agentes basados en visión, que es como funcionan ahora la mayoría de los agentes que manejan un navegador, toman una captura y le preguntan a un modelo qué ve. Ven exactamente lo que ve una persona en esa ventana. Un precio por debajo de la primera pantalla es invisible para ellos hasta que decidan desplazarse, y muchos agentes están configurados para abandonar una página tras una o dos pantallas sin precio. Un precio condicionado a la selección de variante es peor: el agente puede elegir la primera opción y citar esa cifra, o citar por error el precio tachado.

La solución para ambos tipos de agente coincide casi por completo con la solución para las personas. Coloca el precio actual como texto real en la primera ventana y respáldalo con datos estructurados. La Offer de schema.org mínima que buscamos es breve:

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Merino Crew Sweater",
  "offers": {
    "@type": "Offer",
    "price": "68.00",
    "priceCurrency": "GBP",
    "availability": "https://schema.org/InStock"
  }
}

Aquí importan tres cosas. El precio debe ser un número simple sin símbolo de moneda. La moneda debe ser un código ISO. Y el valor debe coincidir con el precio que ve el comprador en la página. Cuando los datos estructurados dicen 68.00 y la página visible dice 54.40 porque un script de rebajas lo reescribió, los agentes detectan la discrepancia y algunos se negarán directamente a recomendar el producto.

Nuestra puntuación de agentes para PDP-001 comprueba primero la captura de pantalla y después los datos estructurados. Una tienda puede aprobar la comprobación humana y suspender la de agentes si la Offer falta o es incorrecta, y por eso la ficha de la regla muestra dos puntuaciones en tu informe.

La lista de comprobación de PDP-001

Haz esto con tus tres productos más vendidos, en un teléfono real y un portátil real, antes de tocar nada más de la auditoría.

• Carga la página de producto desde una pestaña en frío. No te desplaces. No toques nada.
• ¿Puedes leer el precio de venta actual sin forzar la vista? Anota la posición en píxeles desde arriba en ambos dispositivos.
• ¿Es una única cifra concreta para la variante por defecto, no un rango ni un texto provisional?
• Si hay una rebaja, ¿queda claro cuál es el precio actual, con el antiguo tachado?
• ¿El precio se muestra como texto seleccionable? Intenta resaltarlo.
• ¿Sigue apareciendo con JavaScript desactivado, o al menos con tus scripts de personalización bloqueados?
• ¿El precio de la Offer de schema.org coincide con el precio visible hasta el último céntimo?
• Repite con la barra promocional, el aviso de cookies y cualquier modal en su estado por defecto, y luego otra vez con todos cerrados.

PDP-001 es una de las doce reglas de página de producto y una de las 115 en total. La lista completa está en Las 115 reglas de UX de checkout ecommerce con las que auditamos, y el conjunto más amplio de razones por las que los compradores abandonan una página de producto se trata en Por qué los compradores se van de tu página de producto sin comprar: 12 soluciones. Si esta semana solo tienes tiempo para una solución, es esta, porque todas las demás reglas de página de producto dan por supuesto que el comprador sigue en la página.

Preguntas frecuentes

¿Debe estar el precio en la parte superior de la página en móvil?

Sí, y en móvil es donde aplicamos la regla con más rigor porque es donde falla la mayoría de las tiendas. Nuestra auditoría captura a 390 por 844, cierra el aviso de cookies y comprueba los píxeles antes de cualquier desplazamiento o toque. Si el precio actual no es legible en esa primera pantalla, la regla obtiene Parcial cuando escritorio aprueba y Suspenso cuando ambos fallan. Una galería más baja o mover el título y el precio por encima de la galería resuelve la mayoría de los casos en una tarde.

¿Qué se considera visible sin interacción?

El precio debe poder leerse en la primera pantalla renderizada sin desplazamiento, toque, cursor, clic, selección de variante ni inicio de sesión. Los avisos de cookies se cierran antes de comprobar porque todas las tiendas tienen uno. Todo lo demás cuenta: un modal de newsletter, un selector de región, un interstitial de app o un texto "Selecciona una talla" que solo se convierte en cifra cuando el comprador elige. La prueba es si una persona que carga la página y no hace nada puede leer el precio.

¿"Desde 49 £" aprueba PDP-001?

No, obtiene Parcial. Un rango le dice al comprador el mínimo, no lo que pagará, y quien quiere el artículo tal como está configurado en la página sigue teniendo que esforzarse para encontrar la cifra. Define una variante por defecto, muestra su precio concreto y, si quieres conservar el rango como contexto, ponlo en texto más pequeño junto a la cifra real. Los agentes de IA basados en texto también tienen problemas con los rangos y a menudo citarán la cifra más baja, lo que genera una discrepancia cuando llegan al checkout.

¿Cuenta una barra fija de añadir al carrito con el precio?

No para esta regla, si la barra solo aparece después de que el comprador se desplace. PDP-001 trata de la primera pantalla. Una barra fija que muestra precio y botón cuando el comprador ya está más abajo es una buena práctica y se valora en una regla aparte, pero el precio también tiene que estar en la ventana inicial. Si tu barra fija está presente desde el primer renderizado y no tapa otro contenido de decisión, puede mostrar el precio para la comprobación en móvil.