Price Display

El precio es la pieza de información más decisiva de una página de producto: debe encabezar la jerarquía visual con el tamaño más grande, el peso más pesado y proximidad física al CTA y al título. Elementos secundarios (impuestos, precio por unidad, mensualidades) deben quedar claramente subordinados. Nielsen Norman Group catalogo la "ausencia de precio" como el error #1 de diseño web, y los usuarios escanean el precio antes que cualquier otro detalle del producto.

Un precio tachado de referencia debe corresponder a un precio real al que el producto se ofrecio activamente, no a un número inventado para fabricar la impresión de descuento. La FTC (16 CFR Part 233) exige que el precio anterior se haya ofrecido "de forma regular" durante un "periodo razonablemente sustancial". La Directiva Omnibus de la UE es aún más estricta: la referencia debe ser el precio más bajo de los últimos 30 días. Las demandas colectivas por referencias falsas han llegado a 197M USD en EE.UU.

Mostrar el precio original y el nuevo no basta: los usuarios calculan mal cuando escanean varios productos. Renderiza siempre el ahorro como monto ("Ahorra $30") o como badge de porcentaje ("−38%"). Para articulos bajo $100 el porcentaje luce más grande; sobre $100 el monto en dolares es más impactante. Un test A/B de 700.000 visitantes encontro un alza de conversión de 2.57% (99% de significancia, 3.61% en móvil) al mostrar el porcentaje cuando los descuentos variaban entre productos.

Los precios terminados en .99 o .95 superan a los redondos por el efecto del digito izquierdo: el cerebro ancla en el primer digito leido, así $9.99 se siente más barato que $10. El efecto es más fuerte en productos nuevos sin memoria de precio previa. En cambio, el charm pricing puede abaratar la percepción de productos premium o de lujo, donde los números redondos senalan calidad. Anderson & Simester (2003) confirmaron en campo que $39 vendio 21 unidades vs 16 a $34 (más barato y redondo).

Cuando un producto se vende en distintos tamaños de paquete, muestra siempre el precio por unidad (por pieza, kg, oz) además del total. Sin precio unitario el usuario debe dividir mentalmente para comparar valor, lo que genera fricción, errores y abandono. El precio por unidad debe ser visualmente subordinado al total pero estar presente en listado y detalle. Baymard encontro que el 86% de los e-commerce no muestran precio por unidad en multipacks, llevando a comparaciones erroneas.

Los costos extra inesperados (envio, impuestos, comisiones) revelados tarde en el checkout son la causa principal de abandono de carrito a nivel global. Donde sea posible, expon el costo total estimado, incluyendo envio e impuestos, en la página de producto o al menos en el carrito, antes de que el usuario llene dirección o pago. Baymard reporta que 48% abandona por costos extra altos y 21% porque no pudo ver el total por adelantado.

Cuando un producto tiene variantes con precios distintos (talla, material, configuración), muestra el precio más bajo con el prefijo "Desde" en tarjetas de listado y al inicio del detalle. En cuanto el usuario selecciona una variante, reemplaza el rango por el precio exacto sin recargar la página. Un rango enganosamente estrecho ("Desde $12" cuando la variante común cuesta $48) erosiona la confianza: el rango debe ser honesto sobre la dispersión real.

La mayoría de los lectores de pantalla no anuncian text-decoration: line-through ni la semántica del elemento <s>, así que un usuario ciego no recibe indicación de que un precio fue reemplazado por una oferta. El tachado visual debe complementarse con texto oculto que contextualice ambos precios ("Precio anterior: $79. Precio actual: $49"). El patrón que pasa en JAWS, NVDA, VoiceOver y TalkBack es aria-hidden="true" en el bloque visual + un div sr-only con copy en lenguaje plano. Confiar solo en CSS de tachado es una falla WCAG F87.

<div class="sr-only">
  Precio anterior: $79. Precio actual: $49.
</div>
<div aria-hidden="true">
  <s>$79</s> <strong>$49</strong>
</div>

<span style="text-decoration:line-through">
  $79
</span>
<strong>$49</strong>
<!-- sin contexto para lector de pantalla -->