UX de disponibilidad de stock en la página de producto: cómo puntuamos la regla PDP-006

La UX de disponibilidad de stock en la página de producto se reduce a una regla: toda página de producto debe indicar, en texto claro y junto al precio y al botón Añadir al carrito, si la variante seleccionada está en stock, tiene pocas unidades o está agotada. UXFix lo audita como la regla PDP-006, con severidad alta. Un comprador, o un agente de compras con IA que actúa en su nombre, nunca debería tener que pulsar Añadir al carrito para averiguar la respuesta.

Qué comprueba la regla PDP-006 y cómo la puntuamos

La PDP-006 dice: la página de producto indica el estado de stock o disponibilidad de forma explícita, como texto, para la variante seleccionada en ese momento, antes de que el comprador actúe. La calificamos con severidad alta porque está en la ruta de decisión. Un comprador que no puede saber si el artículo está disponible no puede decidir comprarlo, y tampoco puede hacerlo un agente de compras que trabaje en su nombre.

La categoría es decisión y el método de comprobación es dom. Decisión significa que la regla determina si el comprador se compromete, no lo agradable que resulta la página. Dom significa que nuestro rastreador lee el documento renderizado en busca de un nodo de texto que nombre el estado, en lugar de inferirlo del color de un botón, del estilo de una muestra de color o de una imagen.

Buscamos tres cosas, en este orden. ¿Existe algún estado? ¿Está en el mismo viewport que el precio y el botón Añadir al carrito? ¿Y cambia cuando el comprador cambia de talla, color o cantidad del pack? El veredicto es uno de tres resultados.

• Aprobado: un estado en texto claro (en stock, stock bajo con un número, agotado o pedido pendiente con fecha) aparece junto al precio y al botón, y se actualiza por variante.
• Parcial: existe un estado, pero solo está implícito (un botón en gris, un punto de color), o solo aparece tras elegir una variante, o está por debajo del pliegue, o no distingue entre stock bajo y en stock.
• Fallo: no hay ningún estado en la página antes de Añadir al carrito, así que el comprador descubre la verdad en el carrito, en el checkout o en un correo posterior al pedido.

En la práctica, el rastreador carga la página sin ninguna variante elegida, registra lo que puede leer, y después selecciona cada opción por turnos y vuelve a leer. Una página puede aprobar con la variante por defecto y fallar con la tercera talla, y el resultado más bajo es el que cuenta. Es deliberado. Tu comprador no compra la variante por defecto. Compra su talla.

La PDP-006 es una de las 115 comprobaciones de nuestro libro de reglas, y está estrechamente relacionada con las reglas de gestión de productos agotados más adelante en el embudo. La lista completa está en Las 115 reglas de UX de checkout ecommerce contra las que auditamos. Este artículo trata de esta única regla, porque es la que las tiendas dan por aprobada con más frecuencia sin que sea así.

Los tres estados y el texto que aprueba

Hay tres estados que le importan al comprador, más uno que se comporta como un cuarto. Cada uno necesita palabras distintas, y cada uno tiene una forma habitual de salir mal.

En stock es el estado que todo el mundo se salta. El argumento es que el botón está activo, así que es obvio que el artículo está disponible. Ese argumento se cae en cuanto un comprador se ha llevado un disgusto en otra tienda, y la mayoría lo ha vivido. La palabra no te cuesta nada y elimina una pregunta de la cabeza del comprador antes de que alcance el botón.

La forma más fuerte de la línea de en stock añade una promesa de envío: 'En stock, pide antes de las 15:00 para envío hoy'. Responde a la segunda pregunta, cuándo lo recibiré, en el mismo vistazo. También es la línea que vemos con más frecuencia en tiendas que aprueban además el resto de reglas de la página de producto, lo cual no es casualidad. Una tienda que ha conectado su inventario a la página suele haber conectado también las horas de corte de sus transportistas.

Stock bajo es el estado que más trabaja para la conversión y el que más se abusa. Un número es la forma honesta. 'Solo quedan 3' dice al comprador algo cierto y concreto. 'Se vende rápido' no le dice nada que pueda comprobar, y se lee como presión. Si tu sistema de inventario no puede dar un recuento fiable por variante, muestra 'Stock bajo' sin número en lugar de un número que no puedes respaldar.

Agotado tiene que responder a la pregunta siguiente: ¿y ahora qué? Un simple 'Agotado' aprueba la PDP-006 porque el estado es explícito, pero deja al resto de la página sin hacer nada. La sección sobre productos agotados, más abajo, explica qué debería hacer el resto de la página.

Los artículos en pedido pendiente o reserva están técnicamente disponibles, pero la decisión del comprador depende de la fecha, así que la fecha pertenece a la línea de disponibilidad. Un 'Se envía en 3 a 5 semanas' revelado en el carrito llega demasiado tarde, y convierte una decisión que el comprador creía tomada en una que ahora tiene que tomar otra vez.

Si envías desde más de una ubicación, o un socio gestiona algunas referencias, el estado tiene que resolverse igualmente en una única línea honesta por variante. 'En stock en nuestro socio, se envía en 5 a 7 días' está bien. Mostrar 'En stock' porque algún almacén en algún lugar tiene una unidad, y luego indicar un plazo de tres semanas en el carrito, incumple la regla en espíritu y, normalmente, también en los datos.

Las variantes son donde la mayoría de las tiendas pierden puntos. Un producto con seis tallas puede estar en stock en cuatro, con stock bajo en una y agotado en otra. El estado que aprueba es el de la talla que el comprador ha seleccionado, actualizado en el instante en que la selecciona. Tres reglas para productos con variantes:

• Muestra un estado a nivel de página antes de que se elija cualquier variante, aunque sea 'Disponible en 4 de 6 tallas'.
• Marca las opciones no disponibles en el propio selector, con un tachado o una etiqueta 'Agotado' en la muestra, y mantenlas seleccionables para que el comprador pueda registrarse para un aviso de reposición.
• Cuando se selecciona una variante, sustituye la línea a nivel de página por el estado exacto de esa variante.

Las palabras deben coincidir con lo que tu logística puede cumplir. Si el 'En stock' de la página puede convertirse en 'pedido pendiente' en el correo de confirmación, tienes un problema de datos que ningún texto puede arreglar, y saldrá a la luz en forma de reembolso y de reseña de una estrella.

Cómo son las páginas de producto que fallan, las parcialmente afectadas y las que aprueban

Los patrones siguientes proceden de tiendas que hemos auditado, con los detalles identificativos eliminados. Cada uno está etiquetado con el veredicto que le dio nuestro rastreador y el patrón concreto que le valió ese veredicto.

Fallo: ningún estado de disponibilidad antes de Añadir al carrito

La página muestra el precio, un selector de tallas con una talla elegida y un botón Añadir al carrito activo, sin ningún texto que diga si la talla seleccionada está en stock. Es el fallo más común que registramos, y a primera vista parece correcto. Cada elemento está donde debe estar. El problema es lo que no está.

El comprador elige una talla, pulsa el botón y recibe un error en el panel del carrito que dice que el artículo no está disponible en esa talla. Desde el lado del comprador, la tienda mintió por omisión. Desde el lado del rastreador, no hay ningún nodo de texto que leer, así que el estado es desconocido y la regla falla.

Las tiendas en esta situación suelen tener los datos. El recuento de inventario está en el JSON de producto que carga la página. Simplemente nunca se renderiza en algo que un humano o un agente pueda ver, hasta que se usa para bloquear la adición.

Parcialmente afectada: estado implícito solo por color o botón

Una muestra de talla está en gris y el botón Añadir al carrito está desactivado, pero ningún texto nombra el estado. Esta tienda conoce el estado y está intentando comunicarlo. El problema es que lo comunica solo mediante el estilo.

Una muestra gris no significa nada por sí sola; en muchos sitios el gris significa 'no seleccionado'. Un comprador daltónico no puede saber qué tallas están disponibles, y un rastreador tampoco. El criterio de éxito 1.4.1 de las WCAG, Uso del color, existe exactamente para este patrón, porque el color no puede ser la única forma de transmitir información. La redacción completa está en la especificación WCAG 2.1.

Nuestro rastreador lo marca como parcial en lugar de fallo porque el DOM sí lleva una señal: un atributo disabled en el botón y una clase en la muestra. Pero un atributo no es un estado que un comprador pueda leer, y un agente que analice la página en busca de texto de disponibilidad no encuentra ninguno. La solución es una línea de texto visible: 'Talla M: agotada. Avísame cuando vuelva.'

Parcialmente afectada: indicador de stock bajo oculto bajo el pliegue

El precio y Añadir al carrito están por encima del pliegue sin ningún estado. El mensaje 'Solo quedan 2' aparece dentro de un panel de información de entrega dos pantallas más abajo. La tienda tiene el mensaje correcto e incluso la honestidad correcta. Lo ha puesto donde un comprador que decide junto al botón nunca lo verá.

En una sesión móvil el comprador llega a Añadir al carrito en la primera pantalla; la línea de stock bajo está en el acordeón de entrega varios cientos de píxeles más abajo. Además, no se actualiza cuando cambia la variante, porque ese bloque se renderiza una sola vez al cargar la página.

Este patrón merece mención porque quienes lo construyeron hicieron la parte difícil, la integración del inventario, y perdieron el valor en la colocación. Mueve la línea junto al precio, vincúlala al selector de variantes, y se convierte en un aprobado.

Aprobado: explícito, por variante, junto al botón

La talla seleccionada muestra 'En stock, pide antes de las 15:00 para envío hoy' directamente bajo el precio, y una talla no disponible aparece tachada en el selector y etiquetada como Agotada. Todo lo que el comprador necesita cabe en un vistazo. El estado es texto, es específico de la variante seleccionada, está entre el precio y el botón, y las opciones no disponibles están etiquetadas en el selector en lugar de ocultas.

Un comprador que cambia a la talla tachada ve que la línea cambia a 'Agotada. Se espera de vuelta el 14 de marzo. Avísame.' y el botón pasa a ser una acción de aviso.

Para el rastreador, hay un nodo de texto que contiene la palabra stock adyacente al elemento del precio, cambia al seleccionar variante, y el marcado Offer de schema.org para esa variante lleva availability InStock. Eso es un aprobado limpio.

Aprobado: agotado, tratado como una página y no como un callejón sin salida

Un producto agotado puede aprobar, y aprobar bien. Una página en esta situación indica el hecho en la primera línea bajo el precio, da una fecha de reposición, ofrece la acción de aviso donde habría estado el botón, y usa el espacio restante para mostrar alternativas en stock de la misma categoría.

Nada de esto es raro ni caro. Es la decisión de tratar la página de producto agotado como una página.

¿Por qué un estado de stock ausente te cuesta la venta?

El coste es fácil de subestimar porque rara vez aparece como un rebote en la página de producto. El comprador no se va cuando no puede ver el estado. Añade el artículo, se topa con el muro en el carrito o en el checkout, y se va desde ahí. En tu analítica parece abandono de carrito, y el abandono de carrito ya tiene muchas causas tras las que esconderse.

El agregado de Baymard de estudios sobre abandono de carrito sitúa la media justo por encima del 70 %. No todo eso es UX corregible, pero la parte causada por descubrir algo tarde en el flujo sí lo es, y la disponibilidad es una de las cosas que los compradores descubren tarde con más frecuencia. Está junto al coste de envío y la fecha de entrega en la categoría de información que la tienda tenía y decidió no mostrar.

Hay tres formas distintas en que un estado ausente o implícito te cuesta dinero.

La primera es la adición falsa. El comprador se decide por una talla, la añade y se le dice que no. Algunos eligen otra talla. La mayoría ya ha decidido que esta tienda no es fiable, y se va a comprar lo mismo a un sitio que le dijo la verdad desde el principio. Pagaste por captar esa sesión y se la entregaste a un competidor.

La segunda es el empujón que falta. Un número de stock bajo verdadero es una de las pocas piezas de información que hace que un comprador decida más rápido sin ninguna manipulación. Si te quedan tres unidades de una talla popular y no dices nada, has dejado el momento de esa decisión al calendario del comprador y no a tu inventario.

La tercera es la reseña. Un comprador que compra un artículo que la página llamaba disponible, y luego recibe un correo de pedido pendiente, no culpa al almacén. Escribe una reseña sobre la tienda. Todos los compradores siguientes la leen por encima del pliegue, que es más visible de lo que nunca habría sido la línea de disponibilidad.

Escribimos sobre la versión posterior de este problema en Por qué las páginas de producto agotado matan en silencio tu tasa de conversión. La versión corta es que una tienda honesta sobre la disponibilidad en la página de producto pierde la venta de ese artículo y conserva al comprador. Una tienda que la oculta pierde ambas cosas. La disponibilidad también aparece entre las razones por las que los compradores se van en Por qué los compradores abandonan tu página de producto sin comprar: 12 soluciones, y de las doce es la más barata de arreglar, porque los datos ya existen en tu plataforma.

Buenas prácticas para la página de producto agotado

Una página de producto agotado sigue siendo una página de producto, y el comprador que llegó a ella seguía queriendo el artículo. Tu trabajo es retenerlo, ya sea para la reposición o para otra cosa que vendas. El patrón que aprueba la PDP-006 y cumple ese trabajo tiene cinco partes.

Dilo primero. La línea de agotado va donde habría estado la línea de en stock: bajo el precio, encima del botón. No en un banner en la parte superior de la página, que se lee como un aviso general del sitio, ni en un tooltip que solo aparece al pasar el cursor.

Da una fecha o di que no la tienes. 'De vuelta en stock el 14 de marzo' es lo mejor. 'Se espera de vuelta en 2 a 3 semanas' está bien. 'Fecha de reposición por confirmar' es honesto y sigue siendo mejor que el silencio. Lo que falla al comprador es un simple 'Agotado' sin nada detrás, porque no puede saber si eso significa mañana o para siempre.

Sustituye el botón, no te limites a desactivarlo. Un botón Añadir al carrito desactivado se lee como roto. Un botón 'Avísame cuando vuelva a estar en stock' en la misma posición se lee como una tienda que controla su inventario. Además capta una dirección de correo con la que puedes actuar el día que llegue la entrega.

Muestra alternativas con su propio estado. Si recomiendas tres productos similares, cada tarjeta necesita su propia etiqueta En stock. Enviar a un comprador de una página agotada a otra es peor que no mostrar nada.

Mantén viva la URL. Eliminar o redirigir una página de producto agotado tira a la basura su posicionamiento en buscadores y cualquier enlace que apunte a ella. Si el producto está descatalogado de forma permanente, dilo en la página y apunta al sustituto, y conserva la página mientras siga ganando visitas.

Agotado temporalmente y descatalogado permanentemente son estados distintos y necesitan palabras distintas. 'Descatalogado. Sustituido por el modelo 2024' con un enlace mantiene al comprador en movimiento. Llamar 'agotado' a un artículo descatalogado invita a registros de aviso que nunca podrás cumplir, y cada uno de ellos es un correo futuro que no querrás enviar.

Una nota sobre el indicador de stock bajo, ya que es donde más duele la cuestión de la honestidad. La urgencia tipo cuenta atrás, un 'Solo quedan 2' que se reinicia en cada visita, es la forma más rápida de enseñar a tus compradores a desconfiar de todos los mensajes de la página, incluidos los verdaderos. También es la forma más rápida de enseñar la misma lección a un agente de IA, y los agentes recuerdan. Muestra el recuento que reporta tu sistema, limítalo a un umbral razonable (muchas tiendas muestran un número solo con cinco unidades o menos), y nunca muestres un número para un artículo fabricado bajo pedido o en dropshipping.

Por qué los agentes de compras con IA necesitan un estado de stock explícito en el DOM

Los compradores humanos infieren. Ven una muestra gris, un botón desactivado y un punto rojo, y deducen lo que significa, casi siempre correctamente. Los agentes de compras con IA no infieren bien a partir del estilo, y muchos de ellos ni siquiera renderizan la página.

Un agente que obtiene tu página de producto para responder '¿esto está en stock en talla media?' busca texto o datos estructurados que lo digan. Si el estado vive solo en una clase CSS o en un tooltip al pasar el cursor, la respuesta del agente es 'desconocido' o una suposición, y una suposición a tu favor no es lo que quieres cuando lleva a un pedido fallido y a un comprador que te culpa.

Por eso la PDP-006 se puntúa con el método dom. Comprobamos lo que hay en el documento, no lo que una persona percibiría de los píxeles. Tres cosas hacen que una página de producto sea legible para un agente según esta regla.

Primero, el estado es un nodo de texto, no un atributo ni una imagen. 'Agotado' como texto visible en el DOM aprueba. Un atributo disabled en un botón no, porque no le dice al agente por qué el botón está desactivado. Una insignia de disponibilidad renderizada como imagen sin texto alternativo es el mismo problema con otro disfraz.

Segundo, el estado está presente en el render inicial para una variante por defecto, no solo después de que JavaScript se ejecute en respuesta a un clic. Muchos agentes obtienen el HTML y ejecutan poco o ningún script. Si tu página está en blanco en cuanto a disponibilidad hasta que el comprador elige una talla, el agente ve un blanco. Renderiza un estado por defecto en el servidor y deja que el cliente lo actualice cuando cambie la selección.

Tercero, el estado se refleja en los datos estructurados. El tipo Offer de schema.org tiene una propiedad availability con un conjunto fijo de valores, y es la señal más fiable que un agente puede leer. La lista completa está en schema.org/ItemAvailability.

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Merino crew neck",
  "offers": [
    {
      "@type": "Offer",
      "sku": "MCN-NAVY-M",
      "price": "89.00",
      "priceCurrency": "GBP",
      "availability": "https://schema.org/InStock",
      "inventoryLevel": { "@type": "QuantitativeValue", "value": 3 }
    },
    {
      "@type": "Offer",
      "sku": "MCN-NAVY-L",
      "price": "89.00",
      "priceCurrency": "GBP",
      "availability": "https://schema.org/OutOfStock"
    }
  ]
}

Dos detalles de ese ejemplo importan. Las ofertas son por variante, cada una con un SKU, para que el agente pueda responder a una pregunta específica de talla. Y el valor de availability es una URL del vocabulario fijo, no texto libre. Un agente puede reconocer InStock, LimitedAvailability, OutOfStock, PreOrder y BackOrder sin interpretación. 'Se vende rápido' en un campo de texto libre es tan inútil para un agente como para un comprador. La propiedad inventoryLevel es opcional, y solo deberías incluirla cuando el número sea real.

Los datos estructurados y el texto visible deben coincidir. Encontramos con regularidad páginas donde el marcado dice InStock para todas las variantes porque se generó una vez desde una plantilla, mientras la página visible dice agotado. Un agente que confía en el marcado recomienda un producto que el comprador no puede comprar. La próxima vez que a ese agente le pregunten por tu tienda, tiene una razón para preferir a un competidor. Explicamos cómo los agentes construyen esa imagen de una tienda en Por qué ChatGPT y Gemini no recomiendan tu tienda.

Hay una prueba práctica que puedes hacer hoy sin ninguna herramienta. Abre una página de producto, mira el código fuente en bruto en lugar del inspector, y busca la palabra stock. Si aparece solo dentro de un bloque de script, o no aparece, los agentes no pueden ver tu estado de disponibilidad y estás confiando en que adivinen. Después elige una talla que sepas que está agotada y comprueba que la línea visible, la etiqueta del botón y el marcado cambian a la vez. Si cualquiera de los tres discrepa de los demás, ese es el error que hay que arreglar primero.

Preguntas frecuentes

¿Qué debe mostrar una página de producto agotado?

Una página de producto agotado debe indicar 'Agotado' en texto claro directamente bajo el precio para la variante seleccionada, dar una fecha de reposición o un explícito 'por confirmar', sustituir el botón Añadir al carrito por una acción de avísame que capte un correo, y mostrar alternativas en stock de la misma categoría con sus propias etiquetas de disponibilidad. La URL debe seguir activa para conservar su posicionamiento en buscadores y sus enlaces entrantes, y el marcado Offer de schema.org debe llevar availability OutOfStock para que los agentes de compras no recomienden un producto que nadie puede comprar.

¿Cómo se indica el stock bajo en una página de producto?

Muestra el recuento real como texto junto al precio, en la misma posición y tamaño de letra que el mensaje de en stock: 'Solo quedan 3' o 'Stock bajo: quedan 3'. Muestra un número solo cuando tu sistema de inventario pueda verificarlo por variante, limita la visualización a un umbral como cinco unidades o menos para que el mensaje siga teniendo sentido, y nunca muestres un recuento para artículos fabricados bajo pedido o en dropshipping. Evita frases de urgencia vagas como 'se vende rápido' y cualquier contador que se reinicie entre visitas, porque ambas cosas enseñan a compradores y agentes de IA a desconfiar del resto de tu página.

¿Las variantes agotadas deben ocultarse o mostrarse en gris?

Muéstralas, etiquétalas y mantenlas seleccionables. Ocultar una talla agotada hace que los compradores se pregunten si el producto existe siquiera en esa talla, y elimina la oportunidad de captar un aviso de reposición. Una muestra en gris por sí sola es solo un aprobado parcial en la PDP-006, porque el color no es un estado que un comprador o un agente pueda leer y falla el criterio 1.4.1 de las WCAG. El patrón que aprueba es un tachado o una etiqueta 'Agotado' en la muestra, y cuando el comprador la selecciona, una línea de disponibilidad que dice 'Agotado' con una fecha y una acción de aviso en lugar de Añadir al carrito.

¿Un botón Añadir al carrito desactivado cuenta como estado de stock explícito?

No. Un botón desactivado le dice al comprador que algo impide la compra, pero no qué, y se lee como un error tan a menudo como se lee como agotado. A un agente de IA le da aún menos, porque un atributo disabled no lleva ninguna razón. Puntuamos un botón desactivado sin texto que lo acompañe como parcial en el mejor de los casos. Añade una línea de texto visible encima o en lugar del botón, como 'Talla L: agotada. Avísame', y la misma página se convierte en un aprobado.