Animação de mascote no checkout: pagamentos, pedidos e e-mails

Qual estado combina com cada evento do checkout e do pedido?

Cada linha tem um texto que funciona sozinho: o valor, o número do pedido, a data de entrega. O mascote reforça o tom; ele nunca carrega as informações. Isso importa para leitores de tela e para quem rola a página sem olhar para o personagem.

Como evitar que a animação deixe o checkout mais lento?

Trate a velocidade do checkout como um limite rígido. Na pesquisa do Baymard Institute, 18% dos compradores online nos EUA tinham abandonado um pedido no último trimestre por causa de um "processo de checkout longo / complicado demais" (Baymard). As diretrizes de movimento da Apple dizem o mesmo no nível da interação: "não faça as pessoas esperarem uma animação terminar para poderem fazer qualquer coisa" (Apple HIG).

• Nunca condicione nada à animação. A página de confirmação mostra os detalhes do pedido imediatamente; a reação de success toca junto, não antes.
• Loading significa carregando. Inicie o loop quando a requisição de pagamento começar e pare quando a resposta chegar. Sem tempo mínimo de reprodução.
• Carregue por último. Busque o runtime e os arquivos de animação depois que o formulário de pagamento estiver interativo, com um pôster estático no lugar.
• Fique fora do formulário. Nenhum personagem ao lado dos campos do cartão, do preenchimento automático de endereço ou do texto do botão Pagar.

Para o tempo dos loaders em geral, veja como adicionar uma animação de carregamento.

Como o mascote deve se comportar quando um pagamento falha?

Ele não deve reagir. Um pagamento recusado pode ser constrangedor ou preocupante, e um sobressalto de erro ou uma cara triste fazem tudo parecer uma bronca. Esconda o personagem ou deixe-o parado, e deixe que um texto calmo faça o trabalho.

A documentação da Stripe ajuda com o texto. Ela observa que os emissores de cartão classificam a maioria das recusas como genéricas e, por motivos de privacidade e segurança, só discutem os detalhes com os próprios titulares (Stripe). Para alguns códigos, como o de cartão informado como perdido, a Stripe diz que o motivo específico "não deve ser informado ao cliente" e deve aparecer como uma recusa genérica (Stripe).

Uma boa tela de falha no pagamento:

• diz com clareza que o pagamento não foi concluído,
• mantém o carrinho e os dados já preenchidos,
• oferece outra forma de pagamento e sugere entrar em contato com o banco,
• evita culpar o comprador, o que o NN/g também recomenda para mensagens de erro em geral (NN/g).

Não prometa "você não foi cobrado" a menos que seu provedor de pagamento confirme; autorizações podem aparecer como pendentes no extrato.

Dá para colocar um mascote dentro da Shopify ou de um checkout hospedado?

Normalmente não dentro da etapa de pagamento em si. As extensões de UI do checkout da Shopify "rodam em um sandbox isolado, separado da página de checkout", dentro de um Web Worker sem acesso ao DOM, e são "limitadas a componentes de UI e APIs específicos expostos pela plataforma" (Shopify). Um runtime do Rive ou do Lottie não consegue rodar ali.

Onde você pode adicionar um:

• Páginas do tema: produto, carrinho e carrinho lateral, por meio de uma seção personalizada. Adicionar animação à Shopify aborda vídeo, Rive e GIF em temas.
• Extensões de checkout e da página de agradecimento: o componente de imagem da Shopify aceita a URL de uma imagem; vale testar na prévia da sua loja se um GIF animado toca ali antes de contar com isso.
• E-mails e página de status do pedido: veja a próxima seção.

Checkouts hospedados por provedores de pagamento geralmente oferecem configurações de marca, como logo e cores, e não animação personalizada, então mantenha o mascote nas suas próprias páginas ao redor deles.

Como animar e-mails de confirmação de pedido e de envio?

Use um GIF e planeje para os clientes de e-mail que não vão reproduzi-lo. O Can I email indica que o Outlook para Windows, das versões 2007 a 2019, não suporta GIFs animados, e observa que o Outlook com uma conta do Office 365 toca a animação três vezes, depois para e mostra um botão de play (Can I email). O Gmail e o Apple Mail reproduzem GIFs.

• O primeiro frame carrega o significado. Para pedido confirmado, comece na pose de success, não em um frame neutro antes dela.
• Curto e leve. Uma reação de success dura poucos segundos; um GIF de 480 px exibido com cerca de metade dessa largura continua nítido em telas de alta densidade.
• Texto alternativo. "Pedido confirmado" ou o nome e a pose do mascote, para que o e-mail continue fazendo sentido com as imagens desativadas.
• Hospede o arquivo. Referencie o GIF a partir da sua CDN ou do armazenamento de arquivos da sua loja com uma tag de imagem no template.

Notificações push seguem a mesma ideia. No iOS, um anexo pode ser um GIF de até 10 MB (Apple); envie um quando o pedido for despachado e quando for entregue, não a cada mudança de status.

Qual arquivo vai em cada parte de uma estrutura de e-commerce?

O Charmotion faz isso a partir de uma imagem do seu mascote ou logo: 17 animações, incluindo loading, success, attention, happy e sleeping, com MP4, vídeo 9:16, GIFs, o .riv e WebM e MOV transparentes (planos pagos, a partir de US$ 20/mês). O que ele não faz: poses segurando os seus produtos, um personagem carregando uma caixa ou dirigindo uma van de entrega, ciclos de caminhada ou uma barra de progresso. A interface de rastreamento de pedidos continua sendo um componente seu, com o personagem ao lado.

Perguntas frequentes

A página de checkout deve mostrar uma animação de carregamento durante o pagamento?

Sim, enquanto a requisição de pagamento estiver de fato em andamento, ao lado de um botão Pagar desativado com um rótulo de texto curto. Inicie a animação quando a requisição começar, pare no instante em que a resposta chegar e nunca imponha um tempo mínimo de reprodução. O Baymard associa checkouts longos e complicados a pedidos abandonados.

Posso usar um GIF animado nos e-mails de confirmação de pedido do Shopify?

Sim. Hospede o GIF e referencie-o com uma tag de imagem no template de notificação, depois faça um pedido de teste. Crie o primeiro frame de modo que ele diga sozinho que o pedido foi confirmado, porque o Outlook para Windows, das versões 2007 a 2019, mostra só esse frame.

O mascote deve comemorar antes de o pagamento ser confirmado?

Não. Toque a reação success só depois que o seu servidor confirmar o pedido, nunca quando o cliente tocar em Pagar. Comemorar cedo e depois mostrar uma recusa é pior do que não ter animação nenhuma. Mostre loading durante a requisição, success após a confirmação e nada em caso de falha.

Respostas rápidas deste guia

• Como o mascote do checkout deve reagir a um pagamento recusado?

Fontes

• Cart abandonment rate statistics, Baymard Institute
• Motion, Apple Human Interface Guidelines
• Card declines, Stripe Docs
• Decline codes, Stripe Docs
• Checkout UI extensions, Shopify Developers
• GIF image format support in email clients, Can I email
• Error-Message Guidelines, Nielsen Norman Group
• UNNotificationAttachment, Apple Developer Documentation