Mejores prácticas de cupones, descuentos y promociones UI y UX

“A los compradores les encantan las ofertas, ya sea en forma de ofertas en todo el sitio, artículos seleccionados en oferta o cupones. Sin embargo, para que los usuarios tengan éxito en el uso de las promociones, un sitio web debe hacer dos cosas bien: debe comunicar estas diversas promociones de manera efectiva en todo el sitio y también debe facilitar que los usuarios obtengan las ofertas que se comunican”. Kim Salazar, especialista sénior en experiencia de usuario de Nielsen Norman Group

Esta publicación recopila las mejores prácticas e inspiraciones para diseñar la interfaz de usuario y la experiencia para promocionar códigos de cupón y promociones aplicadas automáticamente en su sitio web o plataforma móvil. Cubriremos todo el viaje del cliente, desde los mensajes promocionales y las rebajas de precios en el sitio web hasta la validación y aplicación de cupones y promociones al finalizar la compra y, finalmente, el canje. Escribimos esta publicación en función de la interfaz de usuario y la experiencia de usuario de nuestros clientes, la interfaz de usuario de las plataformas de comercio electrónico DTC con mejor desempeño en términos de ingresos y varios estudios de experiencia de usuario.

Nota: Todas las capturas de pantalla de escritorio se realizaron en Mac, Chrome y todas las capturas de pantalla móviles se realizaron con la resolución de iPhone X en Chrome.

Esperamos que esta guía lo ayude a rediseñar su plataforma para incluir cupones y promociones a nivel de carrito o para mejorar su experiencia actual de cupones para clientes. Si tiene alguna pregunta o desea obtener más información sobre Voucherify, nuestro motor de promociones, no dude en comunicarse con nosotros.

Kit de interfaz de usuario de cupones y promociones

Logre un tiempo de comercialización más rápido con los componentes de cupones y promociones listos de nuestro kit de interfaz de usuario de cupones y promociones disponible en Figma. Aprende más.

Tabla de contenido:

Consejos generales sobre UI y UX promocionales:

• Indique claramente el marco de tiempo de la promoción.
• Aplicar automáticamente cupones disponibles públicamente.
• Ofrezca una página de compilación de ventas.
• Habilite el filtrado en su categoría de ventas.
• Ofrezca una cabina de cliente.
• Enumere los artículos con descuento en la sección Ventas, así como en las categorías correspondientes.
• Comunique las promociones de todo el sitio a nivel mundial.
• Sea claro acerca de las restricciones de promoción por adelantado.

Mejores prácticas de UX de cupón en una página específica:

1. ‍ Página de inicio:

• Tipos de promociones anunciadas en la página de inicio.
• Enlace a las páginas de ventas.

2. ‍ Páginas de categorías.
3. ‍ Ventanas emergentes.
4. ‍ Cinta superior de la página.
5. ‍ Pie de página.
6. ‍ Página del producto:

• Deje la etiqueta de precio anterior.
• Indique claramente las reglas de las promociones de paquetes.

7. ‍ Carrito de compras:

• Incluya campos de código de cupón como parte central tanto del carrito de compras como de las páginas de pago.
• Para las promociones de gasto mínimo, haga los cálculos para los usuarios y ayúdelos a alcanzar el objetivo de gasto.
• Recuerde a los usuarios sobre las ofertas especiales disponibles para las que pueden calificar en el carrito de compras.
• Mencione cualquier condición o restricción especial.

8. Página de pago:

• Incluya un campo de código de cupón.
• Muestra un mensaje de éxito si el código se aplica con éxito.
• Muestra un mensaje de error en el caso de un código de cupón no válido.
• Deje claro si el cliente puede agregar más de un cupón de descuento.
• Ayuda a los usuarios a encontrar sus descuentos.
• Reflejar los descuentos recibidos.
  

Los conceptos básicos de los códigos de cupón UI y UX

Cubriremos algunos consejos generales aquí que se aplican a la mayoría de los diseños, ubicaciones y promociones de cupones de descuento y promociones. Más adelante, pasaremos a las ubicaciones específicas de cupones y promociones de carritos en el sitio web mientras destacamos la mejor solución de diseño desde el punto de vista de la experiencia del cliente. Recuerde que nunca es suficiente simplemente lanzar una campaña de cupones, también debe encargarse del diseño, la ubicación, la validación y el proceso de canje de cupones para que su campaña sea un éxito rotundo.

Indique claramente el marco de tiempo de la promoción.

Debe informar a los clientes sobre la duración del cupón o la promoción a nivel del carrito para evitar que los clientes insatisfechos sepan en el momento de la compra que la oferta ya no es válida. También ayuda a crear una sensación de urgencia y empuja ligeramente a los compradores a completar sus pedidos. Si no lo hace, la experiencia del usuario se romperá y los clientes abandonarán su sitio.

Puede hacerlo mencionando el marco de tiempo (fechas u horas) de la promoción o agregando un temporizador de cuenta regresiva. La mejor práctica es agregar siempre el marco de tiempo de la promoción en cada banner y anuncio, no solo en los términos y condiciones, para garantizar que los clientes conozcan la fecha de vencimiento de la promoción.

Ejemplos de IU:

Pomelo Fashion está utilizando un temporizador de cuenta regresiva para mostrar claramente cuándo vencen sus ofertas.

Shein informa a los clientes junto al banner o categoría promocional sobre la duración de la oferta con una cuenta regresiva. También muestran el número de piezas que quedan, para inducir una sensación de urgencia.

También informan a los clientes sobre la duración de la oferta en la página del producto para mejorar aún más la experiencia promocional.

E incluyeron el temporizador hasta en el carrito de la compra.

Así es como se ve la pantalla en su aplicación móvil:

Pretty Little Thing tiene una cuenta regresiva de promoción en el banner de la página principal, disponible también en la resolución móvil:

Aplique automáticamente cupones disponibles públicamente para brindar la mejor experiencia posible

Si se ofrece un código de descuento o cupón en el sitio, puede simplificar el proceso de redención al permitir que los usuarios lo apliquen automáticamente a su carrito al hacer clic en el código de descuento o, al menos, copiarlo automáticamente al hacer clic en él, para que no tienen que recordar el código. Esto aumentará el uso de la promoción al facilitar que los usuarios la apliquen a sus carritos. También puede aplicar automáticamente códigos de descuento únicos enviados a través de varios canales (correo electrónico, SMS y otros) si el cliente hace clic en el enlace que ha recibido. Aprenda cómo corregir la UX de validación de cupones siguiendo esta publicación.

Si la oferta está disponible públicamente, siempre considere cuidadosamente si podría ser solo un descuento aplicado automáticamente a nivel del carrito en lugar de un código de cupón público. Simplifica el proceso de pago para los clientes y puede generar mayores tasas de conversión de la promoción.

Otra buena práctica de UX es hacer que el código de cupón se pueda copiar (colocarlo en el sitio web o en la aplicación móvil como texto, no incrustado en una imagen).

Ejemplos de IU:

Vanity Planet aplica automáticamente códigos de cupón públicos en pedidos elegibles en el carrito. Después de pasar por caja, el total del pedido se vuelve a calcular para reflejar el código de descuento.

Incluso agregan un producto gratis al pedido, si el pedido califica para ello, nuevamente aplicando automáticamente el código de descuento:

Aquí puedes ver el mismo flujo, en resolución móvil:

Si hace clic en el botón "Mostrar resumen del pedido", se muestra el contenido del carrito, incluida la información sobre las promociones y los códigos de cupón aplicados al pedido.

Ofrecer una página de compilación de ventas

Recopilar todas las promociones a nivel de carrito y cupones de descuento disponibles públicamente en una página es una excelente manera de facilitar que los clientes los encuentren. De esta manera, también puede mostrar las promociones a clientes nuevos o que no hayan iniciado sesión, en lugar de usar solo cabinas de clientes para mostrar todas las promociones. A menudo, las empresas muestran todos los banners promocionales simplemente en la página de inicio, lo que puede ocultar diferentes elementos de la página y afectar la experiencia del cliente.

Ejemplos de IU:

Victoria's Secret presenta todas las ofertas disponibles en una interfaz de usuario clara en un sitio. Observe cómo la arquitectura de la información en el sitio usa el tamaño para enfatizar o restar énfasis a las ofertas seleccionadas.

Habilite el filtrado en su categoría de ventas para una mejor UX

Si ofrece una categoría de ventas que recopila todos los artículos a los que se aplica una determinada promoción de carrito o código de descuento, debe permitir que los usuarios naveguen y filtren esa categoría. Algunos visitantes solo querrán ver productos en oferta y nada más, por lo que las categorías de ventas separadas deberían permitirles ver todas las ofertas y navegar a través de esta sección con facilidad. Las opciones de navegación filtrada deberían permitir a los compradores ordenar y filtrar dentro de las secciones de ventas para reducir la selección de manera efectiva. Sin filtros, las compras de ventas pueden ser un trabajo duro y pueden provocar que los clientes abandonen su sitio.

Ejemplos de IU:

Pomelo Fashion ofrece filtros de categoría de venta por tipo de producto y tamaño.

Fashion Nova ofrece filtrado de categorías de venta por punto de precio o compartimentos:

Ofrezca una cabina de cliente

Mostrar todas las promociones del carrito y los códigos de descuento a los que puede acceder un determinado cliente en una cabina dedicada al cliente ayuda a los clientes a comprender qué promociones están disponibles específicamente para ellos. También le permite mostrar cupones de descuento únicos y personales, tarjetas de regalo, saldo de puntos de fidelidad u otras recompensas, a diferencia de una página de ventas que muestra solo las promociones disponibles para el público, no las personalizadas.

Ejemplos de IU:

H&M ofrece una cabina de clientes, donde los clientes pueden encontrar su saldo de puntos de fidelidad, promociones y descuentos disponibles, cupones únicos y un programa de referencia.

Cabina del cliente en resolución móvil:

Enumere los artículos con descuento en la sección Ventas y en las categorías correspondientes

No limite la exhibición de artículos de venta a una sección de Ventas dedicada del sitio. Para una mejor visibilidad, es mejor enumerar los artículos con descuento tanto en la página de categoría adecuada como en la sección Ventas. Algunos usuarios navegan directamente a las secciones de Ventas cuando están motivados para encontrar una ganga, pero otros no buscan específicamente las secciones de Ventas. Los usuarios que buscan un artículo en particular generalmente navegan según la categoría. Los sitios que muestran artículos en oferta junto con artículos de precio completo ayudan a los usuarios a descubrir descuentos dentro de su área de interés.

Ejemplos de IU:

Pretty Little Thing enumera los artículos de venta en artículos de venta y categorías de productos para que se puedan encontrar en ambos.

Comunique las promociones de todo el sitio a nivel mundial para evitar la mala prensa

Si el sitio ofrece envío gratis u otros descuentos o cupones para todo el sitio, muestre estas ofertas en cada página del sitio. Los recordatorios de descuentos constantes pueden ayudar a los usuarios a encontrar artículos dentro de su presupuesto y alentarlos a comprar. Nuevamente, retratan su marca como una que brinda beneficios a los compradores. Al mostrar solo promociones de todo el sitio en áreas seleccionadas, corre el riesgo de que no todos los usuarios las descubran. Además, si los cupones no se anuncian en todas las páginas, las personas pueden suponer que se ocultaron intencionalmente para evitar su uso, lo que en última instancia se refleja negativamente en la marca.

Las posibles ubicaciones de descuento incluyen:

• Anuncios promocionales en el espacio principal de la página de inicio.
• Banners en la parte superior de cada página con los detalles de la promoción del carrito o el código de cupón, incluso en la página del carrito de compras o en la página de pago donde se debe ingresar el código de cupón.
• Textos destacados promocionales dentro de la página de listado de productos o en el carril derecho.
• Banners en la parte inferior de la página, en o cerca del pie de página.

Ejemplos de IU:

‍Pomelo Fashion comunica su cupón en todo el sitio en el banner de la página de inicio, la cinta de la página superior y las páginas de categoría.

PrettyLittleThing les recuerda a los clientes los cupones de descuento en todo el sitio, incluso en las páginas de productos, un gran movimiento desde el punto de vista de UX.

Así lo presentan en el diseño móvil:

Pretty Little Thing anuncia su promoción a nivel de carrito en el banner de su página principal y en la cinta de la página superior:

Ofrecen una página de ventas que muestra todos los artículos con descuento:

También muestran el descuento en la página del producto:

Sea claro acerca de las restricciones en las promociones por adelantado

A veces, las promociones de carrito o los cupones de descuento pueden estar sujetos a calificadores o restricciones. Si ese es el caso, asegúrese de que la oferta indique claramente qué restricciones se aplican. Enlace a información más detallada sobre estas condiciones si es necesario, pero no requiera que los usuarios revisen la letra pequeña para comprender las restricciones básicas. Nada es más frustrante que esperar recibir una oferta, solo para descubrir al finalizar la compra que no califica. Tenga en cuenta que el diseño de su cupón no solo debe ser llamativo, sino, lo que es más importante, funcional.

Ejemplos de IU:

Pretty Little Thing afirma directamente en el banner de su página principal que la promoción excluye artículos en oferta y artículos de belleza.

Chewy proporciona un enlace a más información sobre los detalles de su promoción (botón "Más información") que se anuncia en la cinta "ahorre un 35 % en su primer Autoenvío".

Esta es la ventana emergente que se muestra después de hacer clic en la CTA de la promoción:

En la resolución móvil, la cinta no contiene el botón, pero se puede hacer clic. Después de hacer clic en la misma ventana emergente con los términos y condiciones de la promoción, se muestra:

Mejores prácticas de UX de cupones en páginas específicas:

Página de inicio:

Tipos de promociones anunciadas en la página de inicio:

No debe anunciar todas las promociones en la página de inicio, ya que los clientes pueden sentirse abrumados con la cantidad de ofertas (y obtener la llamada ceguera de banner). Solo deben anunciarse allí las promociones de carrito o los cupones disponibles públicamente. La mejor práctica de UX es dejar los descuentos específicos de productos o categorías para las páginas de categorías o productos.

Ejemplos de IU:

Happy Socks mostraba en la cinta de la página superior y en el banner principal de la página de inicio la oferta de verano del 30 % de descuento aplicada automáticamente que era su mayor descuento público en ese momento.

Enlace a las páginas de ventas.

Si hay una promoción de cupón o de aplicación automática en curso en todo el sitio, en lugar de enumerar todos los productos y condiciones elegibles en la página de inicio, puede proporcionar un adelanto que conducirá a la página de ventas donde los clientes pueden leer todos los términos y condiciones de la promoción y navegar a través de los productos y ofertas elegibles.

Ejemplos de IU:

Chubbies Shorts muestra un banner promocional en la página principal, con un enlace a la página de colección de ventas.

Páginas de categoría:

ventanas emergentes

Las ventanas emergentes se pueden usar para anunciar cupones de descuento y promociones a nivel de carrito disponibles en la tienda, pero tienen varias desventajas de UX. Si son el único método de publicidad de una promoción, los usuarios pueden cerrarlos y olvidarse de las condiciones de descuento exactas o del código de cupón requerido. Por lo tanto, las ventanas emergentes deben usarse con otros medios de comunicación como pancartas, correos electrónicos, SMS. Otro problema de las ventanas emergentes es que son intrusivas. Cubren el contenido que los usuarios realmente querían explorar y pueden verse como molestos.

Por otro lado, las ventanas emergentes son un excelente reemplazo o complemento de los correos electrónicos cuando se asigna un descuento al cliente por una acción que acaba de realizar. Por ejemplo, si el cliente se suscribió al boletín, podría mostrar el descuento obtenido en una ventana emergente. De esta forma, el cliente lo conseguirá más fácil y antes que si tuviera que consultar su bandeja de entrada. Nuevamente, la ventana emergente y el correo electrónico podrían coexistir para que el descuento esté disponible si un cliente desea volver a él más tarde.

Una buena alternativa a las ventanas emergentes en la aplicación móvil son las notificaciones automáticas.

Ejemplos de IU:

Tula usa ventanas emergentes para comunicar una promoción a nivel del carrito, pero también se puede acceder a la ventana emergente cuando el usuario hace clic en un banner fijo con un 15 % de descuento. Eso hace posible volver a la promoción más tarde.

Cinta de la parte superior de la página:

De manera similar a la ubicación de la página de inicio, la cinta debe reservarse para promociones de cupones de descuento o carritos públicos o de todo el sitio. Es un excelente lugar para agregar un código de cupón público y hacerlo visible en todas las páginas, incluido el pago, para que el código sea fácilmente accesible cuando los usuarios revisan su carrito de compras o completan el pago.

Ejemplos de IU:

Chubbies Shorts usa la cinta para anunciar grandes promociones de carrito disponibles públicamente.

Pie de página:

El pie de página es uno de los lugares menos leídos del sitio web. Colocar cupones de descuento u ofertas a nivel de carrito no es la mejor idea, ya que la mayoría de los clientes probablemente no verán los descuentos. Por otro lado, el pie de página es un excelente lugar para agregar términos y condiciones de promoción. Si no necesita una página separada para los Términos y condiciones de la promoción, ya que los Términos y condiciones son muy breves, puede colocarlos en el pie de página.

Ejemplos de IU:

ThredUp usa el pie de página para mostrar los Términos y condiciones de las promociones de su carrito.

Página del producto:

Deje la etiqueta de precio anterior

Asegúrese de que sus clientes sepan cuál era el precio antes de reducirlo. Las personas toman decisiones de compra basadas en cuánto valoran la oferta, no en cuánto valoran el producto. Siempre que sea posible, proporcione a sus clientes un precio de referencia que haga que su oferta se vea bien en comparación.

Ejemplos de IU:

Shein tacha el precio anterior, coloca el nuevo precio e incluso agrega una etiqueta que indica el nivel del descuento en porcentaje.

En el móvil, muestran el porcentaje del descuento y el valor en dólares del descuento.

Indique claramente las reglas de las promociones de paquetes

Para los descuentos por paquetes, haga que las ofertas sean fáciles de ver y tome medidas en las páginas de productos para asegurarse de que los usuarios califiquen si así lo desean. Si el sitio ofrece un descuento por la compra de varios artículos del mismo producto, los usuarios deberían poder descubrir fácilmente la oferta y alcanzar el requisito mínimo.

Ejemplos de IU:

Chubbies Shorts muestra la venta "Compre 2, obtenga un descuento" justo al lado de la etiqueta de precio del producto en la página de categoría.

También muestran el descuento en el carrito de compras.

Cuando hace clic en el descuento, se selecciona y se agrega al pedido, disminuyendo el precio en $10.

Carrito de compras:

Incluya campos de código de cupón como parte central tanto del carrito de compras como de las páginas de pago.

Los usuarios que tienen un código de cupón quieren ingresarlo lo antes posible. Debe proporcionar un lugar claro para los códigos de cupón en el carrito de compras, antes del primer paso en el proceso de pago. Este enfoque de interfaz de usuario permite a las personas verificar si es válido antes de ingresar cualquier información personal y también permite que el total se actualice adecuadamente al principio del proceso.

Cuando se trata de la ubicación del código de cupón, se recomienda encarecidamente que los códigos de promoción sean una parte central del proceso de pago en lugar de un elemento de la barra lateral. Cuando las promociones se colocan en el carril derecho, tienden a confundirse con anuncios y se ignoran debido a la ceguera de los banners.

Por otro lado, si su cliente no tiene un código de cupón y ve un campo de cupón, puede sentir que se está perdiendo una posible oferta y abandonar, porque comenzará a buscar un descuento. Si no todos sus cupones están disponibles públicamente, la mejor solución es no proporcionar un campo de texto abierto visible. En su lugar, debe proporcionar un enlace de texto para exponer un campo de texto. Es menos probable que este diseño atraiga a los usuarios principales y los envíe a una búsqueda de cupones, ya que muchos compradores no lo notarán. La compensación, por supuesto, es que es menos localizable para aquellos con un código de cupón.

El cuadro del código de cupón , ya sea que se expanda automáticamente o se oculte bajo un enlace, debe ser un campo de texto. Si sus códigos de cupón tienen una cantidad fija de caracteres o un patrón determinado, también puede agregar una validación automática que le indique al usuario si agrega caracteres insuficientes, demasiados o de tipo incorrecto (numéricos, alfabéticos, signos especiales) para ayudar. ellos detectan el error antes. El campo debe ser lo suficientemente largo para acomodar los códigos de cupón utilizados en el sitio, para garantizar que los usuarios los ingresen correctamente. La mejor longitud de los códigos de cupón es de 8 a 12 caracteres. Si ofrece sugerencias de códigos de cupones, también puede mostrarlos en una lista desplegable.

Cuando se trata de cómo redactar la copia en torno a los cupones ofrecidos , la psicología del marketing de contabilidad mental sugiere que si sus productos tienden a caer más en la categoría de necesidades, debe decirles a sus clientes que han "ganado" cupones (imagine una ventana emergente). mensaje que dice "¡Hola! ¡Acabas de ganar un cupón de descuento de $10!"), porque el hecho de ganarlo hace que parezca una fuente de ingresos más seria. Por el contrario, si sus productos son más frívolos, debe tratar de lanzar sus cupones como una sorpresa o como si se los hubieran dado por suerte (imagine un mensaje que diga "¡Acaba de ganar un cupón de descuento de $ 10!"). Puede leer más sobre la contabilidad mental en nuestra publicación de blog.

Los códigos de cupón en sí mismos deben ser fáciles de recordar y escribir en el cuadro de cupón (a menos que los ofrezca como un menú desplegable o un botón de opción para elegir). Esto significa hacer que las combinaciones signifiquen algo para los clientes, evitando letras y números similares como O y 0 y manteniendo la longitud por debajo de los 12 caracteres. Lea más sobre la fluidez cognitiva en nuestra publicación de blog.

Ejemplos de IU:

Birchbox tiene un cuadro de código de cupón muy visible en la vista del carrito. También ofrecen un enlace para abrir un cuadro de código de cupón en la vista de pago, para aquellos que se lo perdieron en la vista del carrito de compras. Es una excelente manera de mantener la opción de agregar un código de cupón en ambos pasos, ocultando el cuadro del código de cupón en el formulario de pago, lo que ayuda a disminuir la rotación.

En la resolución del móvil, el cuadro de cupones está oculto y debe expandirse haciendo clic en él:

Nuevamente, hay un enlace al cuadro de código de promoción en la página de pago:

Para las promociones de gasto mínimo, haga los cálculos para los usuarios y ayúdelos a alcanzar el objetivo de gasto

Algunos sitios ofrecen promociones como envío gratis para compras por encima de una determinada cantidad en dólares. Estas ofertas atraen a los usuarios a gastar más tiempo y dinero para calificar para ellas.

Para las promociones de gasto mínimo, los sitios deben informar a los usuarios exactamente cuánto más deben gastar para calificar para la oferta. Una gran idea de interfaz de usuario para eso es contar directamente en el carrito de compras cuánto necesitan gastar más los usuarios para calificar para el descuento, ya sea envío gratis, % o dólar de descuento.

Si desea asegurarse de que los clientes estén motivados para gastar más para alcanzar el envío gratuito, pero no limitan sus compras para alcanzar el nivel de gasto "suficiente", poniendo un precio máximo y anclándolo al valor requerido para alcanzar el envío gratuito, puede jugar con su interfaz de usuario para mostrar el progreso hacia el envío gratuito yendo más rápido al comienzo del gasto y más lento para alcanzar el "objetivo" de volumen de pedido. Esto está de acuerdo con la idea de "velocidad de la meta", basada en la investigación. Puedes leer más sobre esto en esta publicación de blog.

Los sitios podrían ir aún más lejos, al sugerir elementos relevantes en el carrito de compras que permitirían a los compradores alcanzar el objetivo de gasto mínimo y ahorrarles el esfuerzo de hacer los cálculos ellos mismos.

Ejemplos de IU:

Tula usa la interfaz de usuario para mostrar en el carrito de compras cuánto falta para calificar para el envío gratis.

Recuerde a los usuarios sobre las ofertas especiales disponibles para las que pueden calificar en el carrito de compras

La última oportunidad para captar la atención de los usuarios y ayudarlos a descubrir las promociones de cupones y a nivel del carrito está en la página del carrito. Allí todavía pueden hacer cambios fácilmente en el pedido, así que asegúrese de incluir cualquier oferta especial para la que los usuarios puedan calificar, como envío gratis o descuentos.

Las ofertas deben ser claramente visibles para atraer la atención de los usuarios. Para atraer la atención del usuario, utilice la ubicación adecuada y el peso visual.

Estas son algunas de las mejores prácticas de UX:

• Para ofertas a nivel de producto, presente mensajes cerca del producto en sí.
• Para ofertas en todo el sitio, presente la oferta en un espacio de prioridad directamente encima de la opción para proceder al pago.
• Si el descuento se aplica al envío, puede ser apropiado ubicarlo con descuentos en todo el sitio o al lado de un total de envío.
  

No ofrezca demasiados cupones y promociones a nivel de carrito a los clientes, especialmente al momento de pagar. La sobrecarga de elección puede conducir a la rotación. Lea más sobre el valor de la variedad y la sobrecarga de opciones en nuestra publicación de blog.

Ejemplos de IU:

Chubbies Shorts muestra todos los descuentos y recompensas disponibles directamente en el carrito de compras.

Mencione cualquier condición o restricción especial

Si la promoción del carrito o los cupones tienen condiciones o restricciones especiales, menciónelo en la página de ventas, en sus términos y condiciones y en el carrito de compras, antes de que los clientes completen la compra.

Ejemplos de IU:

Shein menciona las condiciones especiales de su promoción en el carrito de compras, por ejemplo, la cantidad máxima de productos promocionales que un cliente puede comprar y que los artículos en oferta no se pueden devolver.

Página de pago:

Incluir un campo de código de cupón

Como hemos mencionado antes, es mejor incluir el campo del código de cupón tanto en la página del carrito de compras como en la página de pago si alguien olvidó aplicarlo en la página de vista del carrito de compras.

Mostrar un mensaje de éxito si el código se aplica con éxito

Muestre un mensaje de éxito y el monto del descuento para confirmar que el código de cupón se aplicó con éxito. Coloque el mensaje cerca del campo del código de cupón para asegurarse de que los usuarios lo vean y lo asocien con el código de cupón ingresado. Hacer que ese mensaje se muestre en la parte superior o inferior de la página puede resultar confuso. Asegúrese de que el mensaje de éxito no sea la única fuente de información de que el cupón se ha aplicado con éxito. Muestre el descuento agregado en los totales del pedido, en el carrito de compras y en la página de pago, preferiblemente especificando qué código de cupón ha aplicado qué descuento (especialmente, si los clientes pueden agregar más de un código de descuento al pedido).

Ejemplos de IU:

Pretty Little Thing muestra una marca de verificación y la cantidad de ahorro aplicada al pedido después de ingresar un código válido. También muestran el monto del descuento calculado en los totales del pedido, especificando qué código de descuento aplicó el descuento.

También muestran el código de cupón aplicado y el descuento relacionado en la vista móvil:

{{CTA}}

Cree su interfaz con componentes listos incluidos en nuestro kit de interfaz de usuario

Empezar a construir

{{ENDCTA}}

Mostrar un mensaje de error para códigos de cupón no válidos

Si el código no es válido o no se cumplen las condiciones de la promoción, debe mostrar un mensaje de error relevante que indique el tipo de problema con el código de cupón. No muestre el mismo mensaje de error en todos los casos, ya que no indicará al usuario qué es lo que está mal y cómo puede solucionar el problema.

Muestre el mensaje de error justo al lado del cuadro del código de cupón, no en la parte superior o inferior de la página, ya que es posible que el usuario no note el mensaje de error. Asegúrese de que el mensaje de error sea visible, por ejemplo, usando rojo u otro color de contraste.

Tipos de mensajes de error para mostrar:

• El código de cupón no es válido.
• El código de cupón ya se usó y no se puede canjear más veces.
• El importe del pedido es insuficiente o excesivo para aplicar el cupón (en ese caso, devolver la información de cuánto falta para optar al cupón o cuánto sobra en el carrito de la compra).
• El contenido del pedido no cumple con los términos de la promoción (en ese caso, mencione qué artículos deben eliminarse o agregarse para calificar).
• El cupón ha caducado.
• Otras razones: si puede imaginar otros casos, elabore un mensaje específicamente para ellos. Tenga un mensaje predeterminado para todos los demás casos en los que no podría haber pensado.

Ejemplos de IU:

Summer Salt muestra un mensaje de error si el código ingresado no es válido o si no se cumplen las condiciones de la promoción. Animan a los clientes a verificar dos veces su código. Tener los cupones públicos visibles en la cinta superior ayuda a corregir el error.

Así lo muestran en la resolución del móvil:

Deje claro si el cliente puede agregar más de un cupón de descuento o combinar promociones

Si permite agregar solo un cupón al pedido, una vez que un cliente agregue un código de cupón válido, haga que el código de cupón desaparezca u oculte. Reemplácelo agregando un botón "cambiar mi código de cupón", ya que los clientes pueden querer cambiar el código de cupón por otro. Recuerde tener una opción para eliminar el código de cupón también. Debe indicar claramente en algún lugar de la página que los clientes pueden agregar solo un código de cupón por pedido.

Si los clientes pueden agregar más códigos de cupón, una vez que hayan agregado un código de cupón, puede mostrarlo como "agregado al pedido" y dejar que el campo del código de cupón se vuelva a cargar y quede vacío nuevamente, para que los clientes puedan aplicar otro código de cupón.

Si los códigos de descuento y las promociones del carrito no se pueden combinar, debe indicarlo claramente en los anuncios de promoción, los términos y condiciones y en la página de pago, especialmente como un mensaje de error si alguien intenta agregar un cupón encima de los artículos que ya están en oferta.

Ejemplos de IU:‍

Summer Salt agrega el cupón agregado debajo del campo de código de cupón y vacía el campo de código de cupón una vez que se aplica un cupón al pedido, lo que sugiere que los usuarios pueden aplicar más de un cupón por pedido.

Pretty Little Thing permite a los clientes aplicar solo un código de cupón por pedido. Hacen que el campo del cupón desaparezca después de aplicar el cupón al pedido y lo reemplazan con un botón de "cambiar código".

Ayude a los usuarios a encontrar descuentos para mejorar la experiencia del cliente

Junto al campo del código de cupón, debe mostrar un enlace a la cabina del cliente donde pueden ver todos los descuentos disponibles o simplemente una lista de cupones y promociones de carrito para elegir. Esto hace que sea mucho más fácil para los clientes usar sus ofertas y puede aumentar el tamaño de su carrito de compras, si ven que podrían calificar para un descuento si solo agregan algunos artículos más a su carrito de compras.

Ejemplos de IU:

Shein se vincula a la página "Mis cupones" que recopila los cupones disponibles junto al campo del código de cupón al finalizar la compra y menciona los cupones disponibles públicamente en el campo del código de cupón.

Esta es la cabina del cliente que muestra los cupones disponibles y los cupones vencidos que se abre al hacer clic en el enlace "Mis cupones".

En la aplicación móvil, muestran los cupones como una "alerta de cupón". Si hace clic en esa ventana emergente, puede ver todos los cupones disponibles y elegir cuál usar.

Reflejar el descuento recibido

Muestre cualquier descuento o restricción especial aplicada a los artículos en el carrito de compras, tanto promociones como cupones a nivel del carrito. Los códigos de cupón deben validarse y reflejarse en el costo antes de solicitar la información de pago. Los descuentos a nivel de carrito deben mostrarse a nivel de producto o pedido, según a qué se aplicaron. Es fundamental que los usuarios puedan ver los ahorros y comprender cómo se calcula el total. Lo mejor es incluso mostrar qué código de cupón y qué promoción les dio la cantidad exacta de ahorro en el total del pedido.

Las restricciones especiales sobre artículos con descuento deben comunicarse antes de que los clientes realicen su pedido.

Ejemplos de IU:

Shein muestra descuentos a nivel de producto en el nivel de producto en el resumen del carrito de compras.

Shein permite a los clientes aplicar códigos de descuento solo en la caja. In the order summary, they reflect the product discounts by showing the difference between retail price and subtotal. Then, if you apply any discount codes to the whole order, it is displayed as the “discount” of the subtotal. Note that they show both, cart-level and discount coupons savings in the order total but in different places.

On the mobile app, coupons can be selected at checkout. Then they are displayed in the order total.

Resumen

This was a long one. The key takeaway here is that coupon offers and promotions shouldn't be run for the sake of it. Besides tinkering with the offer itself, your team also needs to consider the best design, placement, and validation possible. Keep in mind that the promotional ROI won't peak if you don't make your offers easy to find and apply. Even the best offer will go unnoticed if it's not promoted properly. Always remember to clearly communicate the value of the discount and any conditions customers need to meet. Hopefully, these UX tips will get you started.

{{CTA}}

Are you ready to fix your coupon UX?

Empezar

{{ENDCTA}}