Práticas recomendadas de UX e IU de cartões-presente

Publicados: 2022-04-18

Não é de surpreender que os cartões-presente tenham se tornado um tema quente no comércio eletrônico. Eles não são apenas ótimos para expressar gratidão e carinho, mas também são uma solução eficaz para alguns dilemas de compra quando você está ficando sem tempo para ter uma ideia inteligente para um presente.

Índice

  • ‍ ‍ Crie um caminho de compra separado para cartões-presente
  • Crie uma página de destino separada listando todas as opções de presentes
  • Forneça uma seção separada para os clientes verificarem o status do cartão-presente
  • Promova cartões-presente em vários espaços
  • Projete a jornada de compra do cartão-presente
  • Escolhendo o tipo de presente
  • Selecionando o formato do cartão
  • Escolhendo a data de entrega (opcional)
  • Escolhendo o valor do cartão-presente
  • Fornecendo informações dos destinatários
  • Personalizando o código do cartão-presente
  • Selecionando modelos de vale-presente
  • Carregar uma foto para personalizar os cartões
  • Processo de finalização de compra
  • Envie cartões para destinatários por meio de vários canais
  • Crie um design de e-mail eficaz
  • Resgatando cartões-presente‍
  • Permitir resgates parciais
  • Projete o campo de entrada do cartão-presente
  • Crie mensagens de sucesso e erro
  • Crie notificações de expiração de vale-presente
  • Resumo
Quase US $ 3 bilhões em dinheiro de cartão-presente não foram utilizados apenas em 2019. Enquanto isso, os gastos totais com cartões-presente em 2019 chegaram a US$ 98,6 bilhões. Fonte

Sabendo que os cartões-presente são uma ferramenta extremamente potente, vale a pena simplificar o processo de compra e resgate dos cartões-presente. Mas como os campos de entrada devem ser projetados? Em quais subpáginas eles devem ser promovidos? E como deve ser a compra e o resgate do cartão com base nos princípios de UX?

Esta postagem de blog coleta as melhores práticas e inspirações para projetar UX e UI de cartões-presente para sites e dispositivos móveis. Cobriremos toda a jornada do cliente, desde a promoção de cartões-presente em seu site até a conclusão do processo de compra, o compartilhamento do cartão com o destinatário sortudo e, finalmente, o resgate do cartão em sua loja.

{{EBOOK}}

{{ENDEBOOK}}

Nota: Todas as capturas de tela da área de trabalho foram feitas no Mac, Chrome.

Nota: O foco principal desta postagem são cartões-presente compráveis ​​como códigos digitais ou cartões impressos. Se você quiser saber mais sobre como usar cartões-presente como ferramentas de promoção e incentivos, recomendo que confira nosso guia de UX para cupons e promoções .

Crie um caminho de compra separado para cartões-presente

O caminho para a compra de cartões-presente pode ser muito diferente da jornada padrão do cliente, especialmente se você oferecer vales-presente digitais. É por isso que ele deve ser projetado como um módulo separado do seu site. A maioria dos caminhos de compra do cartão-presente se resume a várias etapas cruciais que precisam ser refletidas no design da interface do usuário:

  • Primeiro, encontre a seção de cartões-presente em sua loja.
  • Escolher o formato e o modelo do cartão-presente (recomendado).
  • Selecionando o valor do cartão.
  • Definindo o método de entrega e data.
  • Preenchendo as informações do destinatário e a mensagem que será enviada com o cartão.
  • Confira.

Como você pode notar, esse processo varia de compra de produto padrão, onde um produto é adicionado ao carrinho, e nenhum detalhe extra precisa ser fornecido. É por isso que você precisa desenvolver um design diferente para esta seção que seja diferente da sua página de visualização de produto padrão. Mas mais sobre isso mais tarde.

Este post foi escrito principalmente para cartões de presente eletrônico. Se você só oferece vales-presente nas lojas físicas, aqui está uma lista de práticas recomendadas de UX para cartões físicos:

  • Torne-os atraentes – o design pode decidir se um cliente os notará e considerará uma compra.
  • Embrulhe-os – coloque os cartões em envelopes e forneça um espaço para os clientes escreverem uma mensagem personalizada ou votos de felicidades.
  • Coloque-os em exibição – coloque-os em todos os lugares e torne-os impossíveis de serem esquecidos (por exemplo, na mesa do caixa).
  • Torne-os compatíveis com dispositivos móveis – garanta resgates móveis e permita que os clientes resgatem cartões-presente exibidos em um dispositivo móvel. Por exemplo, usando códigos QR ou códigos de barras que podem ser digitalizados e salvos em um dispositivo móvel.

No entanto, se você se tornou digital, aqui estão algumas das principais diretrizes para garantir que sua jornada de vale-presente seja projetada adequadamente a partir das perspectivas de UX e UI.

Crie uma página de destino separada listando todas as opções de presentes

Agora que você sabe sobre a necessidade de investir um pouco mais de tempo no design do seu módulo de presentes, fica claro que você também precisará de uma landing page. A página de destino do cartão-presente deve explicar claramente as opções de cartão-presente disponíveis. Ele deve mostrar diferentes designs de cartão (se você oferecer muitos) e apresentar diferentes opções de entrega de cartão (se você fornecer e-mail e impressão). Também é recomendável colocar algumas perguntas frequentes ou T&C para oferecer informações adicionais aos potenciais compradores.

Exemplo:

Zalando tem uma página de destino dedicada para promover seus cartões-presente. A partir dessa visualização, os compradores em potencial podem ver todas as opções de personalização possíveis e escolher entre cartões padrão e caixas de presente.

Opções de personalização de vale-presente Zalando em sua página de destino

A Winc, uma empresa de comércio eletrônico de vinhos, incluiu uma seção de perguntas frequentes em sua página de destino do cartão-presente com uma cópia inteligente.

Seção de perguntas frequentes do Winc sobre cartões-presente

Você pode usar a página de destino não apenas para mostrar sua oferta, mas também para permitir que os clientes verifiquem o saldo atual do cartão. Algumas empresas também usam esse espaço para permitir que os usuários recarreguem os cartões que já possuem.

Forneça uma seção separada para os clientes verificarem o status do cartão-presente

Não importa se você oferece cartões-presente como incentivo ou produto comprável, ainda é recomendável fornecer um espaço separado para que os usuários verifiquem o status do cartão. Você pode permitir que os clientes verifiquem a validade do cartão, saldo atual ou até mesmo recarregue o cartão ou transfira créditos para outro cartão.

Exemplo:

Shein tem um pequeno widget em sua seção de cartões-presente que permite que os clientes verifiquem o saldo do cartão-presente, tornando este espaço o local ideal para qualquer coisa relacionada a cartões-presente.

Seção Shein para verificar o saldo do cartão-presente

A Starbucks permite que os usuários verifiquem o saldo, transfiram o saldo, relatem quaisquer problemas ou recarreguem cartões em uma seção separada da página.

Página de destino da Starbucks com várias opções de cartões-presente

Promova cartões-presente em vários espaços

Além de criar uma página de destino para seus cartões-presente, você deve tornar essa parte da sua loja facilmente acessível para qualquer cliente em potencial. Você não verá muita receita fluindo de presentes se os clientes não conseguirem encontrar facilmente cartões em seu site. As informações sobre vales-presente devem ser colocadas na barra de navegação da página e no rodapé. Se os cartões-presente são algo novo ou uma temporada de presentes está prestes a começar, você pode considerar o lançamento de uma campanha promocional especial com um desconto nos cartões-presente para aumentar a conscientização do cliente.

Exemplo:

A Home Depot, além de uma barra de navegação, possui também uma barra superior com serviços adicionais. Eles decidiram usar este espaço para promover vales-presente. Ele segue boas práticas de UX, pois os clientes sempre verão essa oferta no topo da página.

Promoção Home Depot do cartão no banner superior

Eles também incluíram cartões-presente no rodapé.

Rodapé do HomeDepot

Zalando informa sobre vales-presente tanto na barra de navegação quanto no rodapé. No entanto, neste caso, os cartões-presente foram listados na categoria Acessórios, tornando-os mais difíceis de encontrar do que no The Home Depot.

Cartões-presente Zalando na barra de navegação

Além da navegação no site ou aplicativo móvel, você também pode adicionar cartões-presente ao rodapé de seus e-mails. Além disso, você também pode incorporá-los em etapas específicas da jornada do cliente. Por exemplo, você pode mencionar cartões-presente no e-mail de agradecimento pós-compra para incentivar os compradores a levarem um cartão-presente para sua loja, pois eles já gostaram de comprar com sua marca. Outra ideia seria adicionar cartões à seção de itens recomendados perto da visualização do carrinho.

Por falar em e-mails, você também pode enviar mensagens separadas para promover cartões-presente em determinadas épocas do ano. Por exemplo, direcione feriados como Natal ou Dia das Mães com mensagens de e-mail dedicadas sobre as possibilidades de presentes em sua loja.

Exemplo :

Winc enviou um e-mail separado para lembrar os assinantes sobre o Dia das Mães e promover cartões-presente.

Promoção por e-mail Winc de cartões-presente para o Dia das Mães


A Alloy Apparel lançou uma campanha de desconto em todos os cartões-presente físicos no dia anterior ao Natal para dar aos clientes a chance de comprar os cartões de última hora.

Promoção de cartões de presente Alloy Apparel para o Natal

Projete a jornada de compra do cartão-presente

Escolhendo o tipo de presente

Agora que sabemos como garantir que os clientes encontrem nossa oferta, podemos projetar o melhor caminho possível para a compra. É claro que seu caminho até a compra pode ser diferente daquele que abordarei abaixo.

Exemplo:

PrettyLittleThing oferece apenas um tipo e formato de presente. É por isso que a jornada do cliente começa com a seleção de modelos de vale-presente.

Coisinha bonita escolhendo design de cartão-presente

Vamos começar selecionando o tipo de cartão-presente. Existem muitas opções de presentes disponíveis, desde vouchers digitais individuais até cartões corporativos e presentes em grupo. O design para esta fase varia muito dependendo da variedade de cartões-presente que você deseja oferecer. Certifique-se de que não importa quantas opções existam, todas estão listadas de forma legível – é altamente recomendável manter sua arquitetura de informações plana, a menos que você queira enfatizar apenas uma opção de presente.

Exemplo :

A Home Depot oferece várias opções de presentes. Os cartões individuais são promovidos no banner superior acima da grade de opções de bônus igualmente importantes, tornando o layout compreensível para o usuário e todas as opções visíveis de relance.

Seleção de tipo de cartão-presente Home Depot

Zalando também oferece mais opções de personalização, mas optou por um layout vertical onde os clientes precisam rolar para baixo para ver todas as opções disponíveis. Como Zalando oferece apenas cartões individuais, eles não precisam de um layout plano. Em vez disso, eles usam a página para mudar o foco para diferentes modelos e opções. A opção extra (caixas de presente) é oferecida na parte inferior da página, deixando claro que não é o produto principal.

Opções de vale-presente Zalando

Selecionando o formato do cartão

Se você oferece vales-presente digitais e físicos, a próxima etapa no caminho até a compra deve ser a escolha entre essas duas opções. Observe que esta e as etapas a seguir devem ser apresentadas em uma única página. Direcionar os usuários para novas páginas para concluir o processo de compra provavelmente prejudicará a experiência e fará com que eles desistam.

A seleção entre os métodos de entrega deve ser clara. Você pode tentar usar cores ou ícones contrastantes para sublinhar a diferença entre as duas opções. Também é recomendável usar uma cópia clara – o contraste entre “Enviar por e-mail” e “Enviar por correio” deve ser suficientemente transparente. Você também pode oferecer a opção de ter design para impressão (um PDF anexado ao e-mail) além do formato totalmente digital caso o presenteado receba por e-mail mas queira trazê-lo impresso para a loja. Você também pode incorporar um código QR de presente no e-mail para que possa ser digitalizado rapidamente no PDV.

Exemplo:

A Victoria's Secret inicia a jornada do cliente com a escolha entre os métodos de entrega. A interface do usuário dá a mesma importância a ambas as opções. No entanto, eu recomendaria CTAs mais contrastantes – “Enviar por e-mail” e “Enviar por e-mail” podem ser confusos, especialmente para falantes não nativos de inglês.

Escolha do formato de cartão da Victoria's Secret

Escolhendo a data de entrega (opcional)

Para aumentar o UX de seus vales-presente, você pode adicionar um pouco mais de personalização aos seus cartões digitais, permitindo que os usuários escolham quando exatamente o cartão deve ser enviado. Faz sentido do ponto de vista da usabilidade, pois os cartões geralmente são enviados como presentes – é uma droga enviar um presente de aniversário cinco dias antes da grande data, certo?

Exemplo:

PrettyLittleThing torna necessário que o usuário defina a data e hora de entrega desejada. Eles usaram uma lista suspensa simples. Eu recomendaria usar um seletor de data do calendário, que dá aos usuários uma visão melhor da data que eles selecionaram (por exemplo, dia da semana).

Escolhendo a opção de entrega Prettylittlething

Escolhendo o valor do cartão-presente

Na próxima etapa, você deve permitir que os usuários selecionem o valor do cartão-presente. A combinação de valores sugeridos e clicáveis ​​e campos de entrada personalizados funciona melhor. Dessa forma, você dá aos usuários uma pista de qual deve ser o valor do presente e facilita a seleção, e ao mesmo tempo oferece um campo para personalização caso o cliente queira adquirir um valor de cartão fora do padrão.

Exemplo:

Saatchi Art, um mercado de arte online, usa valores sugeridos e um campo de entrada personalizado para não impor limites. Se o usuário exceder o valor máximo do vale-presente, ele receberá uma mensagem de erro informando sobre os detalhes do erro na parte superior da página.

Saatchi Art escolhendo o valor do cartão
Arte Saatchi escolhendo o valor do cartão

Zalando impõe limites ao valor do cartão presente colocando os valores possíveis entre 50 e 100 GBP. Essa abordagem pode fazer sentido do ponto de vista econômico. No entanto, limita drasticamente a flexibilidade de seus vouchers e pode levar os usuários a sair do seu site se quiserem obter um cartão-presente mais caro.

Valor mínimo e máximo do cartão-presente Zalando

A Tiffany & Co. não oferece valores de cartões personalizados. Em vez disso, eles fornecem valores de cartão predefinidos. O que vale a pena notar é que o valor padrão do cartão é de $ 500, embora valores mais baixos estejam disponíveis. Dessa forma, a Tiffany & Co. consegue direcionar os clientes a focar em cartões de maior valor e torná-los mais desejáveis ​​e percebidos como o preço padrão.

Valor padrão do cartão-presente da Tiffany Co.

Fornecendo informações dos destinatários

Esta é uma etapa crucial do processo de design, especialmente no contexto de vouchers digitais. Você deve cobrir pelo menos dois campos de entrada aqui – o endereço de e-mail do destinatário e a mensagem do cartão-presente que o e-mail deve conter. Algumas empresas também oferecem opções de personalização de linha de assunto para tornar a entrega do cartão ainda mais personalizada. O principal é exigir apenas as informações necessárias (nome do destinatário e endereço de e-mail). Não inclua muitos campos extras.

Outra coisa é a mensagem do cartão – é melhor fornecer uma mensagem pré-escrita para tornar mais fácil para os clientes enviarem os cartões mais rapidamente. Você deve, no entanto, permitir que os usuários alterem ou personalizem as mensagens se eles não gostarem do texto pré-escrito. Além disso, torne o campo de mensagem opcional.

Exemplo :

A Starbucks oferece uma interface de usuário simples para informações do destinatário e do remetente.

Starbucks adicionando informações do destinatário

A Amazon oferece aos usuários uma mensagem pré-escrita simples para fornecer uma ideia de como a mensagem pode ser.

Mensagem pré-escrita do cartão-presente da Amazon

Personalizando o código do cartão-presente

Se os cartões-presente são uma grande parte do seu negócio, você pode pensar em aumentar ainda mais seu potencial de personalização. Seu software de cartão-presente deve permitir que você personalize o código do cartão-presente para corresponder ao primeiro nome do destinatário ou incluir a ocasião especial à qual o cartão está conectado (por exemplo, FELIZ DIA7593). Este truque simples tornará o cartão mais memorável. O padrão exclusivo também facilitará a aplicação do código do cartão no checkout devido à exclusão de caracteres confusos ou comprimento adequado. Acesse aqui para obter mais detalhes sobre como melhorar a experiência de validação de código.

Selecionando modelos de vale-presente

Como os cartões-presente geralmente são enviados como presentes, é melhor torná-los visualmente agradáveis ​​e relacionados à ocasião. Por exemplo, imagine receber um cartão de aniversário todo cinza e sem desejos de aniversário. Esse não seria o melhor presente, seria? É por isso que é recomendável oferecer pelo menos vários modelos de vale-presente.

Exemplo:

A Amazon oferece muitos modelos de cartões e os usuários podem comprar por ocasião, simplificando o caminho do cartão até a compra. Seu mecanismo de cartão de presente oferece presentes para muitas ocasiões. Além disso, com designs múltiplos e diversificados, faz com que um cartão pré-pago pareça um presente sob medida.

Modelos de cartão da Amazon

Carregar uma foto para personalizar os cartões

Uma vitória rápida de bônus do UX seria permitir que os usuários fizessem upload de suas fotos para personalizar o cartão. Observe, no entanto, que adicionar esse recurso exige que você crie termos de uso para fotografias para se proteger de violar quaisquer direitos de propriedade intelectual de terceiros.

Exemplo:

Zalando permite que os usuários criem seus designs de cartão. No entanto, para garantir que tudo seja resolvido pelo lado legal, Zalando exige que os usuários cumpram seus termos de uso.

Zalando escolhendo a entrega do cartão

Processo de finalização de compra

Quando os usuários preencherem todas as informações necessárias, passe para a etapa de checkout, projetada como seu checkout padrão. Certifique-se de que os usuários possam corrigir rapidamente as informações fornecidas ou fazer alterações no cartão sem excluir toda a cesta e começar do zero sempre que fizerem uma alteração. Também é recomendado ajustar os detalhes do cartão nesta visualização. Você pode usar um texto expansível oculto por padrão e apresentado quando os usuários clicam em um ícone designado ou passam o mouse sobre o cartão.

Exemplo :

PrettyLittleThing é um exemplo de UX de checkout de cartão-presente ruim. Depois que os usuários adicionam o cartão à cesta, não há uma maneira simples de atualizar os detalhes do cartão, como as informações do destinatário ou o valor do voucher. A única maneira é retirar o cartão do carrinho e iniciar todo o processo novamente.

Experiência de check-out ruim de PrettyLittleThing

O Winc permite que os usuários atualizem o valor do cartão enquanto ainda estão na visualização da cesta.

Alterar o valor do cartão no Winc

Envie cartões para destinatários por meio de vários canais

Existem várias opções para compartilhar cartões com os destinatários. Aqui estão alguns deles:

  • Enviar por mensagem de e-mail.
  • Envie para o comprador como um PDF imprimível que pode ser compartilhado fisicamente com o destinatário.
  • Entregue cartões físicos por correio ao comprador ou destinatário.
  • Envie via mídia social, por exemplo, Messenger, Whatsapp.

No que diz respeito ao design da interface do usuário, nos concentraremos nos cartões digitais enviados por mensagem de e-mail ao destinatário. Se for a primeira vez que os destinatários ouvem sobre sua marca, você pode implementar vários sinais de confiança em seu e-mail. Aqui estão algumas dicas sobre como não acabar no spam:

  • Uma identidade clara do remetente é um importante marcador de confiança – você pode considerar incluir o nome do remetente na linha de assunto do e-mail com o cartão-presente anexado para aumentar a confiança. Por exemplo, use a linha de assunto “Katie acabou de enviar um presente para você!”
  • Aproveite a personalização – se você tiver o nome do destinatário, deve adicioná-lo ao seu e-mail para melhorar a UX e tornar a mensagem mais confiável.
  • Não exagere no valor do cartão-presente na linha de assunto – tente evitar usar frases como “voucher”, “código”, “oferta” ou valor numérico do cartão na linha de assunto. O provedor de e-mail do destinatário pode tratar sua mensagem como spam ou colocá-la na guia Promoção da caixa de correio.

Crie um design de e-mail eficaz

Quando se trata do conteúdo do e-mail, ele precisa cobrir vários pontos:

  • Inclua o valor do cartão.
  • Inclua um link para T&C específicos ou informações adicionais sobre limitações de resgate de cartão (se houver).
  • Código de cartão-presente que é fácil de copiar para uma área de transferência, de preferência com um clique.
  • Um CTA que leva o destinatário à sua loja.

Lembre-se de que os usuários podem ler seus e-mails em computadores e dispositivos móveis. Para garantir que seus cartões-presente sejam compatíveis com dispositivos móveis, você pode incluir links diretos no CTA para garantir que os usuários acessem seu aplicativo de comércio eletrônico com o código de presente já adicionado à carteira digital. Se você decidir apenas pelo formato de e-mail, certifique-se de incluir um código de barras facilmente ampliável ou código QR com uma alta taxa de contraste para garantir que o dispositivo de digitalização no PDV possa resgatá-lo.

Exemplo:

Watsi, uma organização de assistência médica de caridade, marca todas as caixas de seleção quando se trata de design adequado de e-mail de cartão-presente.

E-mail do cartão-presente Watsu

A Amazon trata os cartões-presente como crédito da loja que pode ser mantido na conta. Em sua mensagem de e-mail, eles incluíram um link direto que leva os usuários diretamente ao site ou aplicativo da Amazon (dependendo do dispositivo) que aplica automaticamente os créditos à conta do destinatário.

E-mail da Amazon com o cartão-presente

Resgatando cartões-presente

Como sugerido por Kim Salazar, a utilidade dos cupons e vales-presente é diretamente proporcional à sua facilidade de uso na loja online.

Você deve evitar impor quaisquer limites ao resgate do vale-presente, como o valor mínimo do pedido. Outra boa prática geral de UX é lembrar que os destinatários do cartão-presente serão mais sensíveis às informações de entrega e custo do produto. Esse cliente configura o conteúdo do carrinho com mais atenção do que o normal. Isso se deve ao medo de que a diferença entre o valor nominal do cartão e o valor do pedido possa ser perdida. É por isso que você também deve dar uma olhada na jornada do usuário como um todo e introduzir correções para oferecer a melhor experiência possível ao usuário.

{{CLIENTE}}

{{CLIENTE FINAL}}

Permitir resgates parciais

Você pode tratar os cartões-presente como uma forma de pagamento, não como um voucher promocional. Essa opção é ótima se você usar cartões-presente recarregáveis, como no caso da Starbucks. Em seguida, o saldo do cartão é calculado dinamicamente e os créditos são usados ​​como forma de pagamento. Semelhante a um cartão de crédito ou débito. Se optar por esta solução, deve certificar-se de que os cartões-presente não têm data de validade (ou muito longa). Isso pode tornar seus cartões-presente muito atraentes, mas, ao mesmo tempo, exige uma infraestrutura de alta qualidade para manter o cartão resgatável para sempre.

Exemplo:

Comprar com um vale-presente Zalando é fácil, mas começar pode ser um desafio para o usuário. Para usar o cartão-presente conforme pretendido, o destinatário precisa configurar uma conta e encontrar "Seu guia de vouchers" e colocar o código do cartão-presente no campo de texto designado para resgatá-lo. Após o resgate, o dinheiro carregado no cartão é tratado como créditos Zalando e pode ser usado como método de compra.

Resgate do cartão Zalando

O problema com essa abordagem é que os usuários podem não saber que precisam configurar uma conta para resgatar o cartão e ver seu saldo. O resgate do cartão também é possível no checkout, colocando o código do vale-presente no campo do voucher. O valor do voucher é então aplicado ao valor total no carrinho de compras. Eu recomendaria deixar ambas as possibilidades claras para o destinatário do cartão.

Projete o campo de entrada do cartão-presente

Os destinatários do cartão-presente querem usar seus presentes o mais rápido possível. Para atender a essa necessidade, você deve fornecer um campo de entrada de voucher no início do processo de compra, preferencialmente no carrinho antes da finalização da compra. Essa abordagem permite que os clientes verifiquem antecipadamente se o cartão é válido antes de inserir informações pessoais.

Uma abordagem ainda melhor é oferecer a possibilidade de resgatar um vale-presente o mais cedo possível no processo de compra, muito mais cedo do que durante a finalização e o pagamento do pedido.

Exemplo:

O Winc oferece um design de interface de usuário simples e permite que os usuários resgatem um vale-presente no início de sua jornada, limitando efetivamente qualquer estresse ou inconveniente relacionado à incapacidade de encontrar o campo de resgate.

Resgate de vale-presente Winc

A Birchbox, uma marca de produtos de beleza por assinatura, também permite que os usuários resgatem o vale-presente imediatamente. As informações sobre o resgate rápido do cartão são colocadas no rodapé da página.

Resgate do cartão Birchbox

Além disso, o posicionamento de entrada do voucher deve ser a parte principal do processo de checkout e ser exibido corretamente no site ou na estrutura do aplicativo. Certifique-se de torná-lo longo o suficiente para conter todo o código do voucher.

Outra boa prática relacionada aos códigos de presente é distinguir claramente entre os campos de pagamento e voucher, pois sua proximidade e semelhança podem ser uma fonte de frustração para potenciais compradores.

As diretrizes correspondem às práticas recomendadas para a interface do usuário do cupom. Se você gostaria de aprender como criar campos de entrada de vouchers, dê uma lida.

Exemplo:

Birchbox é um excelente exemplo de caixa de entrada de voucher. O nome da caixa, “Promoções e códigos de presente”, deixa claro o propósito da caixa. Muitos sites de comércio eletrônico usam “Códigos Promocionais” como o nome desta seção, o que pode confundir os proprietários de vales-presente, pois os cartões não são considerados promoções. Eles também oferecem um link para abrir uma caixa de código de cupom na visualização de checkout para quem perdeu na visualização do carrinho de compras. É uma ótima maneira de manter a opção de adicionar um código de cupom em ambas as etapas.

Caixa de resgate Birchbox

Crie mensagens de sucesso e erro

Mostre uma mensagem de sucesso e o total do pedido alterado para confirmar que o código do vale-presente foi aplicado com sucesso. Coloque a mensagem perto do campo do voucher para garantir que os usuários a vejam e associe-a ao código inserido. Fazer com que essa mensagem apareça na parte superior ou inferior da página pode ser confuso. No entanto, a mensagem de sucesso não deve ser a única confirmação que o usuário recebe. Reflete o total do pedido alterado na visualização do carrinho de compras e da finalização da compra.

Pela mesma lógica, você também deve exibir uma mensagem de erro relevante informando o tipo de problema com o cartão-presente. Não exiba a mesma mensagem de erro em todos os casos, pois isso não instruirá o usuário sobre o que está errado e como eles podem corrigir o problema. aqui estão alguns exemplos:

  • "O código do vale-presente está incorreto. Tente novamente."
  • "O código do cartão-presente expirou."
  • "Você não é o titular do cartão-presente (se você atribuir vales-presente a clientes individuais)."
  • "Seu pedido não atende às condições do cartão-presente (se você atribuir limites aos resgates do cartão)."

Exemplo:

SummerSalt exibe uma mensagem de erro se o código inserido for inválido ou se as condições da promoção não forem atendidas. Eles incentivam os clientes a verificar novamente seu código.

Mensagem de erro do Summersalt

Crie notificações de expiração de vale-presente

Se seus cartões tiverem uma data de validade, você precisará planejar um pouco mais e configurar notificações automáticas para solicitar aos usuários que usem o saldo do cartão antes que ele expire. Aqui, você deve seguir as melhores práticas de UX relacionadas ao email marketing, ou seja, tornar o visual atraente, manter a cópia inteligente, adicionar um CTA bem contrastante e evitar usar palavras que possam ser marcadas como spam (“desconto” ”negociação”, “venda”).

Resumo

Espero que esta lista de práticas recomendadas ajude você a começar a projetar seu site e dispositivos móveis para cartões-presente ou melhorar seu design de interface do usuário atual. Se você estiver procurando por conselhos gerais sobre como criar uma campanha de vale-presente, confira este guia.

{{CTA}}

Pronto para levar seus cartões-presente para o próximo nível?

iniciar

{{ENDCTA}}