Desactiva las variantes no disponibles antes del clic: regla PDP-008

Para desactivar las variantes de producto no disponibles, muestra todas las opciones de talla y color en la página de producto, atenúa las combinaciones que no se pueden comprar, márcalas como desactivadas en el código y nunca esperes a un clic para revelar el problema. La regla PDP-008 de la auditoría de UXFix suspende cualquier tienda que muestre un aviso emergente o un mensaje de error después de que el comprador elija una combinación que nunca estuvo disponible. El comprador debe ver la restricción antes de actuar, no después.

Qué comprueba la regla PDP-008

PDP-008 es una de las reglas de página de producto del libro de 115 reglas con el que auditamos. Su definición en una línea es: las combinaciones de variantes no disponibles se desactivan antes de la selección, en lugar de notificarse como error después de ella. Está etiquetada con severidad alta, etapa de decisión, categoría de flujo, porque se sitúa en el momento exacto en que el comprador se decide por un artículo concreto.

El auditor carga un producto con dos o más ejes de variantes, normalmente talla y color. Elige una opción en el primer eje y observa qué ocurre con el segundo. Después invierte el orden, eligiendo primero el segundo eje, y observa el primero.

Para aprobar, deben cumplirse cuatro condiciones en cada combinación que no se pueda comprar:

• La opción sigue visible, para que el comprador sepa que existe en la gama.
• La opción se ve distinta de las disponibles, con algo más que un ligero cambio de color.
• La opción está desactivada en el DOM, con un atributo disabled o aria-disabled="true", para que los usuarios de teclado y de tecnologías de asistencia reciban la misma información que los usuarios de ratón.
• El motivo se indica en algún lugar donde el comprador pueda encontrarlo, como una etiqueta "Agotado", un tooltip o un mensaje bajo el selector.

Una tienda falla si alguna combinación se puede seleccionar y después produce un error, ya sea un aviso emergente, un mensaje en línea, un botón de añadir al carrito desactivado sin explicación o un cambio silencioso a otra variante. Una tienda está parcialmente afectada si las opciones están atenuadas visualmente pero siguen siendo clicables, o están desactivadas en el código pero no visiblemente, o se gestionan en un eje pero no en el otro.

¿Por qué el error tras el clic te cuesta la venta?

El comprador llega con un plan. Quiere el azul en talla M. Cuando todas las muestras se ven idénticas, asume que cada celda de la cuadrícula está a la venta y actúa según esa suposición.

Un error después del clic destruye el plan y le encarga la tarea de reconstruirlo. Ahora tiene que averiguar si la M se ha agotado en todos los colores o solo en azul, si el azul existe siquiera y cuáles de las celdas restantes puede comprar realmente. En un producto con seis tallas y cuatro colores, eso son 24 combinaciones que probar a mano.

La prevención de errores no es una idea nueva. Es una de las diez heurísticas de usabilidad de Nielsen, y la recomendación es eliminar las condiciones propensas a error antes de que el usuario actúe, en lugar de notificarlas después. La investigación de Baymard sobre páginas de producto llega a la misma conclusión para la selección de variantes: mantén la opción visible, deja claro que no está disponible y no obligues al comprador a descubrirlo a base de pruebas.

En móvil el coste es mayor. Los avisos emergentes son transitorios, así que un comprador que aparta la vista se pierde el mensaje y pulsa añadir al carrito en una variante que nunca se registró. Acaba en el carrito con el artículo equivocado o sin nada, y ese es el punto en el que vemos que se va. Tratamos el patrón general en por qué los compradores abandonan tu página de producto sin comprar.

También pierdes una señal de stock. Un comprador que no puede ver que la M azul existe no tiene motivo para pedirte que le avises cuando vuelva. Las opciones atenuadas mantienen esa puerta abierta, que es la misma lógica que hay detrás de nuestros consejos sobre páginas de productos agotados.

Falla, parcialmente afectada, aprueba: cómo se ve cada estado

Calificamos esta regla a partir de lo que el auditor puede observar en la página renderizada y en el DOM. A continuación, los tres estados con el comportamiento exacto que sitúa a una tienda en cada uno.

Falla

En una tienda que falla, el comprador ve una fila completa de botones de talla con el mismo estilo. Nada distingue las tallas que tienes de las que no. Solo después de hacer clic en M aparece un error, y a menudo el botón M incluso muestra un estado seleccionado mientras el mensaje le dice que no está a la venta.

También suspendemos tres variantes de este patrón. La primera es el error diferido, donde todas las opciones se pueden seleccionar y el problema solo aparece cuando el comprador pulsa añadir al carrito. La segunda es la sustitución silenciosa, donde hacer clic en M en rojo cambia discretamente el color a negro sin avisar a nadie. La tercera es el botón muerto, donde añadir al carrito simplemente se pone gris sin dar ningún motivo.

Lo que registra el auditor: el clic en M/Rojo devuelve un aviso de error, el elemento M no tiene atributo disabled ni aria-disabled, el elemento M es enfocable y accesible por teclado, y el mismo error se reproduce con cualquier orden de ejes.

Parcialmente afectada

El estado parcial es lo más habitual que vemos en las auditorías. La tienda ha hecho la mitad visual del trabajo y se ha saltado el resto. Las tallas no disponibles se ven más claras, así que un usuario de ratón con visión recibe una pista, pero el elemento sigue siendo un botón activo.

Al hacer clic, o bien se selecciona y después da error, que es el comportamiento de fallo disfrazado, o bien no hace nada, lo que deja al comprador preguntándose si la página está rota. Los usuarios de teclado llegan directamente a él con el tabulador porque nada en el árbol de accesibilidad indica que está inactivo. Los usuarios de lector de pantalla oyen "M, botón" sin ninguna indicación de que está agotado.

También marcamos como parciales las tiendas en las que el estado desactivado es correcto en un eje y falta en el otro. Una tienda que atenúa las tallas después de elegir un color, pero permite elegir cualquier color después de elegir una talla, solo ha resuelto la mitad de la cuadrícula. Mismo resultado si las opciones desactivadas son correctas pero no hay etiqueta, tooltip ni nota en ningún sitio que explique al comprador qué significa el estado atenuado.

Lo que registra el auditor: cambio de opacidad o color presente, elemento aún enfocable y clicable, sin atributo disabled, y sin explicación o con explicación en un solo eje.

Aprueba

En una tienda que aprueba, la restricción es visible antes de que el comprador actúe. Las tallas no disponibles permanecen en la fila para que se entienda la gama, pero un tachado o una trama rayada las hace inconfundiblemente distintas de las disponibles. Al pasar el cursor o enfocar una, aparece "Agotado en rojo", y una nota bajo la fila lo repite en texto plano.

El elemento lleva aria-disabled="true", y hacer clic en él no lo selecciona ni lanza un error. El resto de la cuadrícula sigue accesible: el comprador puede cambiar a negro y ver cómo la M se activa de nuevo, o mantener la M seleccionada y ver qué colores están tachados. Ambos ejes se actualizan mutuamente.

Lo que registra el auditor: opciones no disponibles visibles y visualmente distintas, disabled o aria-disabled presente, el clic no produce selección ni error, explicación presente, comportamiento simétrico en ambos ejes.

Ocultar, desactivar o mostrar error: ¿cuál elegir?

Los dueños de tiendas nos lo preguntan constantemente, normalmente porque su plataforma usa por defecto una de las tres opciones. Así puntúa cada una y lo que cuesta.

Ocultar sí aprueba la regla. Aun así, lo desaconsejamos para cualquier producto en el que la opción que falta sea temporal, porque pierdes la captación del aviso de reposición y el comprador no puede distinguir "agotado" de "nunca fabricado". Reserva la ocultación para opciones descatalogadas de forma permanente.

En el lado técnico, el patrón es corto. Cada opción necesita un estado visual y un estado programático que coincidan, más un motivo en texto.

<button
  type="button"
  class="variant-option variant-option--unavailable"
  aria-disabled="true"
  aria-describedby="size-m-note"
>M</button>
<span id="size-m-note" class="visually-hidden">Sold out in Red</span>

Usar aria-disabled en lugar del atributo nativo disabled mantiene la opción enfocable, de modo que un usuario de lector de pantalla puede llegar a ella y oír por qué no está disponible. Cualquiera de los dos enfoques aprueba PDP-008 siempre que el clic no haga nada y el estado se anuncie. Si usas el disabled nativo, pon la explicación en texto visible bajo la fila para que no se pierda para los usuarios que no pueden enfocar el elemento.

Un detalle sobre el contraste: el criterio de éxito 1.4.3 de WCAG 2.1 exime a los controles inactivos de la relación mínima de contraste. Eso es permiso para que la opción parezca inactiva, no para que sea ilegible. El comprador sigue teniendo que leer la letra M en un botón tachado para saber qué talla falta, así que mantén el texto legible y deja que el tachado o la trama transmitan el significado de desactivado.

Por último, la disponibilidad debe recalcularse con cada cambio en cada eje. El error habitual es una página que desactiva las tallas cuando cambia el color, pero no los colores cuando cambia la talla.

Prueba ambos órdenes y prueba el caso en que el comprador elige una combinación disponible y después cambia un eje a algo que invalida la otra selección. La selección inválida debe borrarse o la página debe indicar qué ha pasado; nunca sustituir en silencio.

Cómo gestionan los agentes de compras con IA las variantes no disponibles

Un agente de compras con IA que navega por tu página de producto trabaja con dos entradas: el DOM renderizado y los datos estructurados que expongas. No tiene la paciencia de un comprador para la prueba y error, y no lee los avisos emergentes como lo hace una persona.

Cuando el agente se encuentra con una tienda que da error al hacer clic, la secuencia es mala. Lee la fila de tallas, ve seis botones activos, hace clic en M porque es lo que pidió el usuario, y entonces o bien se pierde por completo el aviso transitorio o recibe una cadena de texto que tiene que interpretar.

Muchos agentes continúan hasta añadir al carrito, obtienen un segundo error o una variante incorrecta, y abandonan la tarea o informan de un fallo al usuario. Vemos la misma clase de bloqueo a lo largo del embudo en por qué los agentes de compras con IA abandonan el checkout en tu tienda.

Cuando el agente se encuentra con una tienda que aprueba, la secuencia es limpia. Lee la fila de tallas, ve que M lleva aria-disabled="true" y una descripción "Agotado en rojo", la omite y, o bien elige la talla disponible más cercana, o bien le dice al usuario que la M en rojo está agotada y le ofrece L o negro. Ese es un estado recuperable, y los estados recuperables son los que hacen que tu tienda sea recomendada en lugar de descartada.

Los datos estructurados ayudan a los agentes que los leen antes de hacer clic. Si cada variante es su propia Offer en tu marcado schema.org con su propio valor de availability, un agente puede descartar las combinaciones agotadas sin tocar el selector en absoluto.

{
  "@type": "Offer",
  "sku": "TEE-RED-M",
  "availability": "https://schema.org/OutOfStock",
  "price": "29.00",
  "priceCurrency": "GBP"
}

El marcado no sustituye al estado desactivado en la página. Los dos deben coincidir, porque un agente que lea InStock en los datos y después encuentre la opción desactivada en el DOM no confiará en ninguno de los dos. Mantén el feed de disponibilidad que alimenta el selector y el que alimenta el marcado apuntando a la misma fuente de inventario.

Preguntas frecuentes

¿Las variantes agotadas deben ocultarse, desactivarse o mostrarse con un error?

Desactivarse, con una etiqueta visible, para cualquier cosa que pueda volver. El comprador sabe que la opción existe, ve de inmediato que no está disponible en la combinación actual y puede pedir que le avisen o cambiar a una combinación disponible en un solo movimiento. Ocultar aprueba PDP-008, pero desecha la señal de reposición y deja a los compradores sin saber si alguna vez tuviste esa talla. Mostrar un error después del clic suspende la regla directamente, porque obliga al comprador a descubrir tu inventario a base de pruebas.

¿Atenuar una muestra cuenta como desactivarla?

No por sí solo. Un tono más claro le dice a un usuario de ratón con visión que algo es distinto, pero no le dice nada a un usuario de teclado, de lector de pantalla ni a un agente de IA, porque el elemento sigue activo en el DOM. Para aprobar, la opción necesita disabled o aria-disabled="true", un clic que no produzca selección ni error, y un motivo declarado como "Agotado" en un tooltip, una etiqueta o una nota bajo la fila. Gris más un botón clicable es el estado parcial, y en la práctica suele terminar en el mismo aviso de error que un fallo.

¿Qué debe ocurrir cuando una talla está agotada en todos los colores?

Muéstrala, desactívala antes de que se elija cualquier color y explica por qué. Si la M se ha agotado en toda la gama, el comprador debe ver la M tachada en cuanto carga la página, no después de elegir un color. La etiqueta puede ser más sencilla, "Agotado", ya que el color no es la restricción. Este es también el caso en que un enlace de "avísame" se gana su lugar, porque el comprador no tiene ninguna combinación alternativa a la que recurrir y, de lo contrario, se iría sin nada.

¿Cómo gestiono las variantes disponibles bajo pedido o en preventa?

No las desactives, porque se pueden comprar. En su lugar, dales un tercer estado diferenciado: seleccionable, marcado visualmente y etiquetado con la consecuencia en la entrega, como "Se envía el 14 de marzo". PDP-008 solo se ocupa de las combinaciones que no se pueden añadir al carrito en absoluto. La auditoría te señalará igualmente en otra parte si la fecha de pedido pendiente solo aparece después del clic o en el checkout, ya que es el mismo problema de ocultar una restricción hasta que el comprador se ha comprometido.