Inicio
Documentação
Recursos
Certificações
Comunidade

Comunidade

Fique por dentro das últimas novidades, peça ajuda a outros integradores e compartilhe seu conhecimento.

Experiência otimizada - UX para Checkouts - Mercado Pago Developers
Qual documentação você quer buscar?

Não sabe como começar a integrar? 

Acesse os primeiros passos

Otimize sua experiência de checkout

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.

Melhore a escaneabilidade

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:

Títulos, subtítulos e textos explicativos

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.

pt aspectos generales - segmenta tu contenido

Progress indicator

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.

pt Progress indicator

Bullets e highlights

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.

pt Bullets y highlights

Facilite o preenchimento de dados

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.

pt aspectos generales optimizatusformularios dos&don't

Ofereça contexto

Labels e placeholders

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.

pt labels y placeholders dos&don't

Helpers e tooltips

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.

pt helpers y tooltips dos&don't

Mensagens de sucesso e erro

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.

pt Mensajes de éxito y error

Adicione acionáveis claros

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.

pt Agrega accionables claros

Destaque as opções

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.

pt Ofrece opciones do&don't

Pule os passos desnecessários

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.

pt Saltea pasos innecesarios

Dê visibilidade ao processo

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.

pt da visibilidad del proceso

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.

pt confrima tu compra