Nesta seção você encontra todas as informações necessárias para otimizar a experiência de compra no checkout utilizando seus componentes. Isso permitirá uma navegação simples, fluida e objetiva, contribuindo ainda mais para a conversão de vendas.

A escaneabilidade ajuda a navegar visualmente na tela e entender as diferentes seções e instâncias dela. Há elementos que você pode adicionar para facilitar a escaneabilidade e fornecer contexto para o usuário:

Mantenha os dados agrupados por tema e forneça contexto ao usuário sobre as etapas a serem seguidas para concluir sua transação. Isso ajudará na escaneabilidade e fará com que o usuário se sinta mais seguro ao compartilhar suas informações. Para isso, recomendamos que você use:

• Títulos: use-os para agrupar tematicamente os dados necessários e informar o usuário sobre a seção em que está.
• Subtítulos: servem para contextualizar ou explicar qual ação deve ser realizada.
• Textos explicativos: fornece explicações ou aprofunda informações, sempre que necessário, para evitar dúvidas.

Trata-se de uma barra de progresso que indica ao usuário em qual etapa ele está. É possível segmentá-la em partes iguais, indicando cada etapa do checkout. Dessa maneira, seu usuário poderá acompanhar em qual passo está e quanto falta para concluir o processo de pagamento.

Os bullets são uma lista com diferentes elementos. Use bullets para criar listas que facilitem a leitura da informação. Uma lista causa menos esforço cognitivo do que um parágrafo de texto.

Os highlights são textos sublinhados ou destacados. Use highlights para destacar palavras-chave ou frases importantes que agreguem valor, fazendo com que seja mais fácil de escanear a página.

Recomendamos o uso de formulários para coletar os dados de usuário. Os formulários são conjuntos de inputs, relacionados entre si e com um objetivo comum, como aqueles em que são solicitados dados pessoais.

Os inputs, por sua vez, são campos onde as informações exigidas devem ser preenchidas ou editadas. Eles devem seguir uma ordem lógica dentro do formulário, sendo necessário diferenciar os campos obrigatórios dos opcionais. Além disso, devem ter um tamanho que permita que o usuário enxergue a informação que preencheu e possa revisá-la e editá-la facilmente.

Para facilitar o preenchimento dos dados e evitar que o usuário não conclua a ação:

• Use poucos inputs por formulário, só os indispensáveis.
• Elimine qualquer pedido de informação que não seja essencial para o processo de compra.
• Evite redundância e solicite cada dado apenas uma vez.

As labels são os nomes de cada input e indicam qual dado deve ser inserido. Elas devem estar sempre visíveis para que o usuário possa escanear o texto e preencher o formulário mais rapidamente, já que elas servem para orientar e evitam que o usuário precise ficar se lembrando do que precisa preencher.

Os placeholders são os textos que aparecem dentro de cada input que exemplificam o dado que o usuário deve inserir. Aproveite esse espaço para incluir exemplos de formato ou de acionáveis.

É importante saber que o placeholder desaparece quando o usuário coloca o cursor do mouse no input ou preenche o dado exigido. Leve esse recurso em consideração e evite usá-lo como única referência para sua entrada, assim, o usuário não precisa se esforçar para lembrar qual dado deve preencher em cada input ou apagar o dado inserido caso queira confirmá-lo.

Tanto as labels quanto os placeholders devem ser curtos, diretos e claros para evitar que o usuário cometa erros.

Os helpers são textos que vão embaixo dos inputs e fornecem mais informações sobre o dado e por que ele está sendo pedido. Use-os para justificar a solicitação de dados sensíveis ou dar informações relevantes sobre o campo em questão.

As tooltips são notificações que oferecem informações adicionais quando apenas o helper não é suficiente. Use-as para incluir definições, informações complementares ou acionáveis através de links.

As mensagens de sucesso ou erro validam as informações inseridas nos inputs. Para dar mais ênfase, é possível destacar as mensagens de sucesso com a cor verde e as de erro, com a cor vermelha.

Inclua mensagens de sucesso caso seja necessário dar uma confirmação ou se o dado inserido agregar valor (por exemplo: frete grátis ou desconto). No caso de erro, é importante esclarecer qual foi o problema e indicar a solução para o usuário, para que a pessoa não repita o erro e acabe se frustrando. Se o input vier acompanhado de um helper, este deve ser substituído por uma mensagem de erro.

Os Call to action (CTAs) são chamadas para o usuário realizar uma determinada ação. Eles permitem que as ações principais e secundárias de uma tela sejam realizadas por meio de alguma ação pré definida. Essas chamadas podem ser aplicadas com diferentes estilos, como botões, ícones ou links, com diferentes hierarquias e em diferentes locais, como cartões e dicas, entre outros.

Confira algumas dicas:

• Adote cores contrastantes para que os CTAs tenham destaque e se diferenciem do fundo da tela.
• Procure redigi-los de forma clara e direta para dar contexto.
• Use botões para as ações principais e escreva-os no infinitivo.
• Inclua links para ações secundárias que agreguem contexto e procure usar textos auto-explicativos, que façam referência para onde o usuário será redirecionado ao clicar ali.

Em um checkout, o usuário deve escolher entre diferentes opções ao longo do processo de pagamento, como tipo de entrega, formas de pagamento, número de parcelas, entre outras. Nesse processo, a conversão pode variar de acordo com diferentes fatores e o contexto de cada um.

Por isso, ofereça opções que incluam as diferentes variáveis possíveis e organize-as de forma decrescente, levando em consideração aquelas que são mais usadas ou vantajosas para seus clientes. No entanto, recomendamos oferecer apenas os mais comuns, caso contrário, isso pode tornar o processo de escolha confuso e poluído.

• Use radio buttons quando houver poucas opções e você só puder escolher uma delas.
• Ofereça dropdowns quando houver várias opções e você não quiser ocupar tanto espaço na tela.
• Use cards quando se trata de opções visuais, entre outras.

Além disso, você pode adicionar as propostas de valor mais destacadas em cada opção para ajudar o usuário a ter mais informações para tomar uma decisão.

Evite pedir dados repetidos ou que não sejam necessários para concluir a compra. Para isso, aproveite as etapas em que os dados obrigatórios são exigidos para conseguir mais informações que serão necessárias posteriormente. Por exemplo, use as informações pessoais e de envio para pegar os dados de faturamento. Assim, você evita incluir um formulário extra, o que atrasaria o processo de pagamento.

Você também pode usar checkboxes o caixas de seleção que deduzem informações de etapas anteriores ou exibem um formulário caso o usuário queira carregar informações diferentes.

Adicione um componente de resumo fixo ou um acesso direto ao carrinho de compras, mostrando o preço total a pagar de acordo com as ações que os usuários forem executando.

Apesar da maioria dos usuários revisarem a compra no passo final, eles se sentem mais seguros quando podem controlar as etapas pelas quais passam durante todo o processo.

Além disso, antes da conclusão da compra, permita que os usuários possam revisar todo o processo e o preço final. Para isso, inclua uma página de confirmação ou revisão, antes de o usuário concluir o pagamento. É importante dar a possibilidade de o usuário editar qualquer dado ali mesmo, sem precisar voltar às etapas anteriores.