Boas práticas de usabilidade no desenho de carrinhos de compras

Filipe Serrazina5 Julho 2012eCommerce Shopping Usabilidade

Um bom processo de compra online permite aos utilizadores fazerem as suas compras de forma rápida e fácil, sem que estes se sintam confusos ou sobrecarregados com esta tarefa. No entanto, é comum verificar taxas de abandono superiores a 50% em muitos sites de comercio electrónico.

Um dos primeiros passos que se deve adotar para reduzir a taxa de abandono é a implementação de um processo de compra de apenas uma página, embora existam outros fatores que podem desmotivar e afastar os utilizadores do processo de compra final.

O processo deve ser linear

Criar um vasto número de passos a efetuar ou mesmo criar passos dentro de passos, confunde e intimida os utilizadores, uma vez que quebra o modelo mental do processo de compra. Isto é crítico uma vez que, no processo mental dos utilizadores, o processo de compra deve ser linear e sequencial.

Um exemplo desta não linearidade é pedir ao utilizador dados da morada de envio numa nova página e depois fazer um redireccionamento para o passo anterior. Ver a mesma página duas vezes, faz com que a maioria dos utilizadores pense que ocorreu um erro no processo, uma vez que é este o comportamento no momento da validação de formulários.

Evitar termos como “Continuar”

Usar termos como “Continuar” são ambíguos e tendem a confundir os utilizadores.

Imagem com exemplo de Botão Continuar

Dependendo do momento, um botão “Continuar” no processo de compra pode significar uma de duas coisas:

Continuar a comprar, ou seja, o utilizador pode continuar a procurar mais produtos;
Continuar para o processo de pagamento, ou seja, quando o utilizador já tem todos os produtos e quer pagar.

Outro exemplo é o botão “Voltar”. Quererá esta ação significar voltar à página anterior ou voltar à página dos resultados?

Estes são exemplos de termos que podem ter diferentes interpretações dependendo do contexto (qual a página onde o utilizador se encontra) e também da interpretação dos utilizadores. A solução neste caso é substituir estes termos ambíguos, por palavras que não deixam dúvidas sobre a ação que está implícita, como “Efetuar Pagamento” ou “Continuar a Comprar”.

Reforçar visualmente todos os campos sensíveis na página de pagamento

O momento da introdução dos dados de pagamento é sempre o momento mais desconfortável para os utilizadores. Principalmente se o pagamento for via cartão de crédito e se a informação relativa aos dados do cartão não parecer segura. Se assim for, os utilizadores vão hesitar em finalizar a compra.

Exemplo de informação clara e destacada sobre o método de pagamento e segurança

Colocar na página ícones e texto relativos à segurança do processo, levam a que a página seja percecionada como sendo segura, enquanto que as páginas que não contemplem esses elementos inspiram menos confiança.

Tecnicamente não existem diferenças entre estes dois tipos de página. No entanto, os utilizadores não sabem como funciona um site e a única coisa que sabem é o que o seu instinto lhes diz.

Adicionar pistas visuais ao design (cor de fundo, um contorno e ícones relativos a segurança) dos campos relativos aos dados do cartão de crédito, faz aumentar a percepção de segurança e assim, encaminhar os utilizadores para a finalização do processo de compra

Adicionar descrições aos campos dos formulários

Quando os campos dos formulários não contemplam descrições estes podem tornar-se ambíguos. Esta ausência de explicação potencia que alguns utilizadores não saibam que tipo de informação se está a ser pedida.

Estes problemas podem ser resolvidos adicionando pequenas descrições e exemplos junto às etiquetas.

exemplo de descrições dos campos

Uma vez que nem todos os utilizadores precisam deste tipo de explicação, pode-se esconder a informação por detrás de um link “Saiba mais” ou reduzir o tamanho da fonte.

Esta sugestão é extensível para campos que em princípio, não levantam dúvidas, como o campo do Email. Pode aproveitar-se para informar ao utilizador o que irá ser feito com a informação. Muitos utilizadores podem querer saber o que irá ser feito com os endereços de email.

Não usar um botão de “Aplicar” no formulário

Os utilizadores desconhecem o significado que um botão “Aplicar” tem, para diferentes secções da página.

Em vez de usar o termo “Aplicar” dever-se-á usar termos mais específicos.

Em vez de usar o termo “Aplicar” devemos usar termos mais específicos

Usar esta terminologia em ações como a confirmação de um método de envio, pode fazer com que o botão nunca seja clicado, pois o utilizador pode confundi-lo com a ação de submeter o formulário.

Neste caso, quando o utilizador confunde o botão de “Aplicar” com o botão de submeter o formulário e ao efetuar a ação é redirecionado para a mesma página, a consequência é a frustação das suas expectativas sobre o passo seguinte da compra.

Aconselha-se também a redução da utilização de botões “Aplicar”, recorrendo neste caso ao AJAX para validação e atualização de um valor.

Usar apenas uma coluna para os campos do formulário

É muito difícil para os utilizadores relacionarem os campos em formulários quando estes estão distribuídos por duas colunas.

Normalmente podem acontecer dois tipo de erros:

Uma das colunas é ignorada ou não é relacionada com o formulário e o utilizador não preenche esses dados.
Campos não relacionados são preenchidos e submetidos, causando erros de validação.

Usar indicações de erro de forma evidente

A maioria dos utilizadores tem grandes dificuldades em encontrar e entender as mensagens de erro.

Quando um utilizador tem um problema no preenchimento de um formulário, a probabilidade de abandono do formulário aumenta significativamente.

As mensagens de erro devem ser colocadas junto dos campos que contêm erros ou corre-se o risco de estas serem ignoradas pelos utilizadores. Sem esta proximidade pode tornar-se difícil compreender as mensagens. Nestes casos, os utilizadores tendem não notar nada de errado com os campos, tentando submeter os formulários.

Se os utilizadores não compreenderem as mensagens de erro, não conseguirão resolver os problemas ou prosseguir para processo de compra. Nestes casos, o abandono é inevitável. É assim muito importante, empenhar bastante esforço para desenhar e comunicar eficazmente as mensagens de erro.

Um bom exemplo de como apresentar as mensagens de erro

Devemos assegurar que as mensagens de erro:

Estão contextualizadas (não estão apenas no topo da página, mas também junto ao campo que contém o erro);
São claras e concisas;
Distinguem-se do resto do layout (grande contraste e o uso de setas ou outros elementos visuais).

Incluir sempre um mini-carrinho de compras

Normalmente os carrinhos de compras são apresentados de duas formas: um carrinho de compras completo e funcional na página e um “mini” carrinho de compras, normalmente localizado na barra lateral. A melhor prática é incluir os dois.

O site da Amazon disponibiliza sempre um mini-carrinho

Com o carrinho de compras completo, podemos incluir mais informação e opções. Por exemplo podemos mostrar informação acerca do produto, remover/editar produtos, montante das taxas e opções de envio.

Os mini-carrinhos mostram informação dentro de um área pequena que não provoca ruído com o restante layout da página.

Destacar os botões de pagamento e de adicionar

A distinção entre botões com ações distintas como pagar ou adicionar mais produtos é de extrema importância. Para tal, é aconselhável usar botões que se distingam claramente dos restantes elementos da página.

Esta falta de distinção pode fazer com que os utilizadores não encontrem os botões para finalizar a compra e assim, nunca finalizarem a comprar!

Usar tabelas para comparação de produtos

É boa prática utilizar uma estrutura em tabela quando desenhamos uma página do carrinho de compras. A página deve disponibilizar a informação de forma eficiente e sem quebras na leitura. Devem ser utilizadas fontes standard e evitar usar fundos complexos.

Devem-se sempre usar contornos para separar as várias células. A informação no carrinho de compras deve ser de fácil leitura e sem quaisquer elementos que possam distrair ou aumentar a complexidade.

Usar a imagem do produto na página do carrinho de compras ajuda também o utilizador a relacionar os produtos que está a comprar.

Evitar usar demasiados campos

Para os utilizadores o preenchimento de formulários é uma tarefa frustrante, principalmente quando obriga ao preenchimento de campos que não são essenciais para o processo da compra.

Assim, deve-se desenhar o processo de compra da maneira mais simples possível, para que os utilizadores considerem o processo conveniente, ou será quase certo que não irão realizar uma compra através do site.

Deve-se restringir o número de campos ao mínimo, agrupar campos que se assemelhem e providenciar cabeçalhos para cada uma das secções. O uso do espaço branco também ajuda a tornar o formulário mais apelativo e organizado.

Outras dicas que optimizam o processo de compras online

Usar imagens dos produtos com qualidade;
Usar botões de “Adicionar ao Carrinho” e “Finalizar Compra” grandes para poderem ser usados em dispositivos móveis;
Evitar o uso de elementos flash que tornem o carregamento lento;
Assegurar que se fornece toda a informação ao utilizador, como por exemplo, em que passo ele se encontra e quantos passos faltam para terminar o processo.