Cómo escribir los precios en un e-commerce

Ilustración de una persona con una calculadora gigante y monedas.
Ilustración: Polina Golubeva.

Cómo escribir los precios en un e-commerce es más importante de lo que pueda parecer a priori. Cómo se escribe un precio, su color, su colocación respecto a otros elementos de la interfaz, etc., afecta a la experiencia de las usuarias y usuarios, y a las ventas.

Aunque creamos que nuestras decisiones son racionales y lógicas, no lo son. La percepción es compleja. Esto significa que todos los elementos de los productos digitales están sujetos a detalles que no somos conscientes que influyen en nuestras decisiones. El precio de un producto o servicio puede parecernos más o menos aceptable dependiendo de factores que no tienen nada que ver con el precio en sí.

Cómo escribimos los precios

Captura de pantalla de Amazon del producto Fire TV Stick con un precio de 39,99 €.
Página de producto de Amazon.

Como UX writers, lo fundamental es qué y cómo escribimos. ¿Escribimos los precios con puntos? ¿Añadimos decimales?

Una de las estrategias más usadas en marketing es terminar los precios de los productos en «,99», como explica este artículo de Shopify. La razón de usar 39,99 en lugar de 40,00 es, principalmente, que los occidentales leemos de izquierda a derecha. Ver de entrada un 39, en lugar de un 40, nos hace pensar que el precio es más bajo de lo que realmente es.

Entre 39,99 y 40,00, hay exactamente la misma diferencia que entre 39,98 y 39,99. Sin embargo, percibimos más diferencia en el primer caso, porque el número de la izquierda cambia. La razón no es simplemente que leamos de izquierda a derecha, tiene también que ver con sesgos que provocan que ignoremos, sin darnos cuenta, los céntimos.

El sesgo principal por el que sucede esto se llama sesgo de anclaje. Básicamente, lo que explica el anclaje es que nos fijamos más en la primera información que recibimos. Nos «anclamos» en el número de la izquierda, en lugar de en el precio completo. Nielsen Norman Group tiene un buen artículo sobre este sesgo en relación a la experiencia de usuario: The Anchoring Principle.

Para más información sobre los «precios psicológicos», esta introducción de Hubspot es un buen comienzo: Qué son los precios psicológicos: 6 consejos para usarlos. No obstante, tenemos que recordar que muchas de las estrategias clásicas del marketing responden a estudios contradictorios hechos antes de la era digital, o incluso a mitos nunca probados.

Aunque es verdad que las ventas suelen aumentar al usar la estrategia del «,99», hay que tener en cuenta otros detalles. En 2012, el Journal of Consumer Psychology publicaba un estudio titulado Comma N’ cents in pricing que desaconsejaba usar decimales en los precios. Su teoría es que percibimos como más bajos los números con menos sílabas. Si prescindimos de las comas inútiles, los usuarios pueden sentirse más tentados a comprar un producto que cueste 6 (seis) que uno que cueste 5,99 (cinco coma noventa y nueve).

Ya os decía al principio que la percepción es compleja… La cuestión de la simplicidad aparente no afecta solo a los céntimos, también a los millares. 6 nos parece menos que 6,00, y un televisor que cuesta 1649 € nos parece más barato que uno que cuesta 1.649 €. Al sacar el punto, somos menos conscientes de que la cifra supera los mil euros.

Página de producto de MediaMarkt.

Fíjate que en la página de producto de MediaMarkt pasa otra cosa curiosa. No hay ningún símbolo de euro que deje claro que 1649 es un precio. Eliminar el símbolo (€) o el nombre de la moneda (euro) hace que seamos menos conscientes de que eso es dinero. Está estudiado que eso nos empuja a gastar más. Personalmente, esta me parece un práctica problemática. Quizá no es un engaño, pero es poco claro y me parece ambiguo a nivel cognitivo, por lo que no estoy a favor. Somos UX writers, claridad ante todo.

Otro factor a tener en cuenta es que hay personas más emocionales que otras, y no todos los días nos sentimos igual. Cuando somos más racionales, tendemos a comprar productos con precios con céntimos, porque parecen cifras más exactas y baratas. Cuando somos más emocionales, tendemos a comprar productos sin decimales o con cifras redondas, porque hacen pensar menos. En un supermercado, es mejor incluir los céntimos, en Gucci, no.

Página de producto de Gucci.

Por otro lado, en una web o aplicación destinada a varios países distintos el asunto de los puntos y las comas en los precios es complejo. No en todos los países se escriben igual los numeros. Lo que en España es 1.000 (mil), en Gran Bretaña, por ejemplo, significaría uno con tres decimales. 1.000 en inglés es 1,000. Sobre este tema, hay muchos artículos de este tipo: Commas and Periods (Full Stops) with Numbers (UK and US).

En resumen, cómo escribir los precios en un e-commerce, a nivel de redacción pura y dura, depende de varios factores que pueden no tener siempre la misma respuesta. Lo obvio sería optar por un lenguaje claro, buscar lo más simple tanto a nivel visual como de lectura. No obstante, dependiendo del tipo de producto y público, los pequeños detalles varían. No es lo mismo vender pañales que alta costura.

En caso de duda, la salvación es hacer un test A/B. Lo que no es aconsejable hacer jamás, bajo ningún concepto, es no poner el precio. Aunque en e-commerce destinados al gran público no suele pasar, hay sitios web B2B que ocultan los precios.

Cómo colocamos los precios que escribimos

Cuando redactamos para interfaces, las palabras son importantes, pero también cómo están colocadas. Empecemos por la tipografía, que es el aspecto visual más relacionado con el texto.

Si el tamaño de la fuente es pequeño, el precio nos parece más bajo. Esto puede sonar a tontería, pero minucias tan tontas como esa afectan a nuestra percepción de los precios. Obviamente, no puedes poner los precios a tamaño piojo, pero ten en cuenta que el precio va a parecer más bajo si está a 34 px que si está a 55 px. Para más detalles, puedes leer estudios como Size Does Matter.

Recuerda que la accesibilidad también es importante. En general, para web se recomienda que el texto mida al menos 16 px y se pueda ampliar a un 200%. Puede haber detalles escritos a tamaños más pequeños, pero nunca a menos de 9 px porque a ese tamaño ya no son legibles en algunas plataformas. Un artículo en el que se resume bien este tema es Font Size on the Web.

Páginas de producto de Zalando y Yoox.

Estos dos pantalones tienen prácticamente el mismo precio. Sin embargo, a simple vista, el tamaño mayor de la página de Zalando hace que la diferencia parezca más considerable. Llama también la atención que Yoox no use la estrategia del «,99». Fíjate que en Yoox, aunque ponen los céntimos, los precios son cifras redondas. Yoox es una tienda con un aura más de lujo que Zalando, por eso no usa el truco del «,99». ¿Y la negrita? También afecta, claro. Si el precio de Yoox no estuviese en negrita, nos parecería menor.

Un tema visual más curioso es que percibimos como más bajos los precios si están colocados a la izquierda. La explicación es que tendemos a crear una línea numérica imaginaria en la que los números más bajos estarían a la izquierda y los más altos a la derecha. Ojo, en los países en los que no se lee de izquierda a derecha, esto no es verdad. La cultura también influye en nuestra percepción.

Captura modificada de página de producto de Women’secret.

A la izquierda, una página de producto con el precio a la izquierda. La mente tiende a crear una secuencia de números en la que el precio del producto es el más bajo. A la derecha, lo que pasaría si el precio estuviese en el otro extremo.

Otro tema relacionado es si el precio está colocado en una posición más alta o más baja que el producto. Como ya te puedes imaginar, percibimos como más baratos los precios ubicados en posiciones bajas. Para este tema en concreto, puedes consultar el estudio The Upside of Down.

Galería de productos real de Spartoo (izquierda) y con el precio encima (derecha).

Es difícil encontrar una página con productos en los que el precio esté sobre la imagen de producto, en lugar de debajo. Aunque pueda parecer que se hace así por defecto o por costumbre, detrás de estas decisiones de diseño hay casi siempre algo más.

En esta última imagen, vemos la comparación entre el precio actual de oferta y el precio anterior, una práctica muy habitual en tiendas. Hace unos años, se publicó un estudio (The effects of physical distance between regular and sale prices on numerical difference perceptions) sobre la mejor manera de hacer precisamente esto. Hay estudios para todo…

La conclusión fue que la distancia a la que está colocado el precio actual del precio anterior afecta a nuestra percepción de la rebaja. Cuando los precios están más separados, nos parece que el producto está más rebajado, y es más probable que lo terminemos comprando. Por esta razón, webs que no hacen grandes rebajas, como Casa del Libro, separan el precio de oferta del precio antiguo.

Página de productos de Casa del Libro.

En las ofertas, también influye el tamaño al que estén escritos los precios, su color y su orientación. En Amazon, colocan el precio de oferta debajo, mientras que en Zalando lo ponen a la izquierda. Son variables de la misma estrategia. Como ya he explicado, ambos trucos ayudan a que percibamos la cifra como más baja.

Página de producto de Amazon (izquierda) y de Zalando (derecha).

Tanto en Amazon como en Zalando usan un tono rojo para resaltar la rebaja porque es el color que más capta nuestra atención. El color más apropiado para aumentar las ventas depende de varios factores, como el tipo de producto y consumidor. Una buena referencia sobre este tema es How Do Colors Affect User Choices and Purchases?.

Ten en cuenta que la mayoría de estos estudios son estadounidenses. Aunque en el mundo occidental los sesgos suelen ser compartidos, algo que está probado en EE. UU. puede no ser exactamente igual en España o Argentina. La percepción del color varía mucho dependiendo del país en el que hayas crecido. En España, por ejempo, una mezcla de rojo y amarillo tiene connotaciones que no tiene en Portugal o en Francia.

En cualquier caso, desde el punto de vista de la usabilidad, lo fundamental no es el color en sí, si no que se vea bien. Es decir, elijas el color que elijas por cuestiones de ventas, asegúrate de que el contraste respecto al fondo sea bueno. Esto se puede verificar fácilmente con un comprobador de contraste.

Cuando el producto es gratis

En las tiendas online no suelen regalar nada, al menos no productos físicos. Sin embargo, hay muchas páginas en las que se ofrecen productos gratuitos, como libros en PDF, para atraer la atención. Es una estrategia que también han usado bastante las compañías telefónicas con los móviles. Teléfonos gratis, a cambio de contratos de permanencia, claro.

Página de producto de Orange.

En este caso, estudios como Is $0 Better than Free? afirman que es mejor escribir «0 €» que «gratis». Usar el número aumenta el atractivo porque fija nuestra atención en el dinero que nos ahorramos (aunque en realidad no nos estemos ahorrando nada porque es un producto destinado a conseguir nuestros datos o a vendernos un contrato abusivo).

Para terminar, me gustaría añadir un apunte sobre accesibilidad. Es importante mencionar que existen trastornos que afectan a las capacidades aritméticas, como la discalculia. Una ayuda en ese sentido puede ser seguir las recomendaciones de una guía de estilo para la dislexia. La mayoría, son recomendaciones básicas que ayudarán a todas las personas, como usar fuentes legibles y un buen contraste.

Recalco sobre todo que la ética debe ser siempre lo más importante. Vender más a costa de trampas o prácticas abusivas no debería estar nunca en nuestra agenda. Una cosa es optimizar los precios para que queden más claros o resulten más atractivos y otra muy distinta acudir a estratagemas confusas o engañosas.

La idea de escribir este artículo surgió leyendo Design for Cognitive Bias. Al escribirlo, encontré esta otra referencia sobre precios mucho más amplia, aunque habla exclusivamente desde el punto de vista del marketing: Pricing Psychology.