7 dicas para criar uma página de pagamento melhor
Com a temporada de férias chegando, muitos de nós farão compras online. (OK ... talvez muitas compras!) A página de check-out de um site pode tornar essa experiência inesquecível ou que você deseja esquecer.
Se você estiver criando uma página de checkout, há muitas considerações - funcionalidade, usabilidade, segurança e design. O último elemento é algo em que todo designer pode ter impacto. Uma página de checkout não deve ser projetada como uma reflexão tardia; é sem dúvida a página mais importante na experiência de compra on-line.
Torná-lo visual
Isso pode parecer uma ideia óbvia, mas a página de checkout de uma página de comércio eletrônico precisa ser visual. Muitos sites o transformam em um formulário básico.
Isto é importante por várias razões. Uma conexão visual entre as páginas de checkout e o restante do site estabelece a credibilidade da marca. Se a página de checkout parecer com o restante do site, ela parecerá segura e pertencerá ao site. Recursos visuais, de logotipos a itens no carrinho, ajudam os usuários a se lembrar por que e onde estão na web. (Lembre-se, grande parte do mundo é um grupo bastante distraído de usuários da Internet.)
Então, que tipo de visual você deve usar?
- Imagens. No mínimo, cada item deve ser acompanhado por um ícone que mostre o que o usuário está comprando.
- Logotipos. O logotipo da empresa sempre deve estar claramente visível (e clicável para voltar ao restante do site).
- Botões grandes. Faça chamadas para ações como "Adicionar ao carrinho", "Atualizar item" e "Comprar agora", grandes, coloridas e visualmente atraentes. Os botões devem ser fáceis de encontrar e fazer você clicar neles.
- Cor. Muitas páginas de checkout estão todas brancas com caixas destacadas. Não há problema em usar cores. Mantenha o esquema de cores do restante do site na página de checkout.
- Tipografia. O texto deve ser simples e fácil de ler. (As pessoas tendem a “confiar” nos tipos de letra simples com ou sem serifa mais do que em uma fonte de script ou de novidade.) Mas você também pode se divertir com elementos de texto maiores.
Incluir logotipos de pagamento e selos de segurança
Inclua recursos visuais que façam com que os usuários se sintam bem ao fazer compras com você. Embora a maioria das pessoas entenda que pode pagar com cartão de crédito on-line, ter pequenos logotipos ao lado dos botões de pagamento reforça essa idéia.
É uma sugestão visual pequena, mas reconfortante, para os usuários. Isso pode ajudar a eliminar a confusão sobre quais tipos de pagamento são aceitos.
Lembre-se de incluir logotipos para todos os tipos de pagamento. (Muitos sites lembram os logotipos dos cartões de crédito, mas esquecem o PayPal ou o Apple Pay.) Mantenha as imagens pequenas e agrupe-as de maneira organizada. (Felizmente para os designers, a maioria desses elementos é renderizada bem em formatos pequenos e com proporções similares.)
Considere projetar ou fazer o download de um kit de logotipos de interface do usuário especializado para esse fim. Você não está limitado aos logotipos de ações da empresa. Apenas não fique muito louco com o design; o objetivo é que os usuários reconheçam os logotipos em um tamanho muito pequeno na tela.
Considere ampliar imagens
As páginas de checkout que permitem aos usuários dar uma última olhada nos itens do carrinho são um ótimo bônus. Efeitos suspensos que ampliam cada item no carrinho ou pop-up podem facilitar a visualização de compras em potencial pela última vez e eliminar a frustração de ter que voltar para verificar uma cor ou tamanho.
Outra opção é criar imagens em miniatura grandes para itens na página de checkout. Essa imagem adicional pode ajudar o usuário a confirmar sua escolha de compra e a se sentir ainda melhor com a compra.
Muitos designers negligenciam a inclusão de imagens, facilitando o abandono de um carrinho. Pense dessa maneira: ter uma imagem na finalização da compra é equivalente a ficar na fila de uma loja física com um item na mão. Muitas pessoas não mudam de idéia neste momento.
Usar tabelas
As informações no carrinho precisam ser organizadas com perfeição. A maneira mais fácil de conseguir isso é projetar o carrinho na forma de uma tabela ou formato semelhante à grade.
Use colunas e linhas para exibir cada item, uma imagem, descrição, quantidade, preço e qualquer outra informação relevante. Os itens devem classificar verticalmente em colunas com outras informações na linha correspondente. Esse estilo de classificação é essencial para carrinhos com vários itens, para que os usuários não sejam forçados a se mover pelas telas em vez de subir e descer (o que é mais confortável).
Dentro de cada tabela ou grade, use alinhamento consistente. Esquerda é mais comum. Considere a maneira como os preços se alinham, para facilitar a visualização na tela. Idealmente, os preços devem estar alinhados para que os números antes e depois de um período estejam nas mesmas posições para cada item.
Pense na funcionalidade
Embora grande parte da funcionalidade geral de um design de página de checkout possa não ser a diretiva de um designer, é algo que precisa ser considerado. (Se designers ou desenvolvedores criam esses conceitos pode variar de acordo com a equipe.)
As principais preocupações de funcionalidade que precisam de elementos de design incluem:
- Capacidade e facilidade de impressão em várias telas, incluindo antes e depois da compra.
- Inclua a funcionalidade da lista de desejos ou outro método para salvar itens para compras posteriores. Torne essas informações compartilháveis.
- Muitas páginas de checkout tornam-se buracos escuros sem links para outras partes da experiência de compra. Não prenda os usuários em páginas das quais eles não podem sair.
- Permitir edição de itens no carrinho.
- Considere uma opção ou página de faturamento imprimível. Isso é especialmente importante se seus clientes incluem clientes comerciais.
- Facilite para os usuários entenderem como modificar, alterar ou atualizar pedidos. Muitas páginas de checkout incluem um contador de quantidade ao lado de cada item. Facilite a edição desse número (e ele deve ser atualizado automaticamente).
- Facilite a criação de uma conta após o checkout. Nem todos os clientes compraram com você antes. Deve ser rápido e fácil fazer uma compra e depois se inscrever em uma conta. Encobrir a venda primeiro.
Os principais ícones devem aparecer em todas as páginas
Pensando no design da página de checkout, começa no minuto em que o conceito do site começa a incluir uma opção de comércio eletrônico. Certos elementos de design precisam ser veiculados em todo o site.
Os ícones da página de carrinho e check-out devem ser transportados por todo o design. Os botões ou elementos de navegação devem ter o mesmo design (ou bastante semelhante) que os botões de ação correspondentes na página de checkout.
Lembre-se de usuários móveis
Uma porcentagem crescente de vendas está acontecendo em dispositivos móveis, e não em computadores desktop. Pense no design da sua página de checkout e na facilidade de uso desses clientes também. (Nada é mais frustrante - e muito comum - do que um site que funciona em um telefone até a página de checkout.)
Elementos de design com toque e furto em mente. Os botões devem ser maiores e mais fáceis de ver. O formulário deve incluir caixas mais profundas para facilitar o acesso sem precisar aumentar o zoom da tela.
Quando se trata de usuários móveis, manter tudo em uma única página é igualmente importante. Crie uma página de checkout que role em vez de percorrer várias telas.
Conclusão
Criar uma página de checkout pode ser uma grande tarefa para qualquer designer. A chave é algo sobre o qual falamos frequentemente na comunidade de design: seja simples. Crie um esboço simples com efeitos mínimos e foco na usabilidade e é mais provável que você encontre sucesso.
Lembre-se do usuário quando pensar em páginas de checkout. Esforce-se para criar uma página com apelo visual, logotipos para orientar e informar os usuários, muitas imagens, layout organizado, função, ícones para orientar e promover vendas e uma interface otimizada para celular.
Fotos de Stock Cortesia do mercado criativo.
