eCommerce UX – Estratégias e Princípios Essenciais de Design

À medida que o cenário geral do varejo continua a evoluir e as cadeias de tijolo e argamassa lutam, o mercado de comércio eletrônico está pronto para crescer. Até 2021, as vendas globais de comércio eletrônico devem crescer para mais de 4,48 trilhões de dólares, o que é mais que o dobro dos números de 2017.

Os varejistas e designers de comércio eletrônico que prestam muita atenção à experiência do usuário e aderem a um conjunto padrão de princípios de design de UX de comércio eletrônico para o fluxo de compras do cliente podem capitalizar esse crescimento do mercado e obter retornos financeiros tangíveis.

O fluxo de compras é uma jornada geral do usuário que, quando implementada corretamente, resulta em mais compras por impulso, menos abandono de carrinho e maior conversão geral.

A jornada do usuário inclui:

• Descoberta de sites
• Pesquise e navegue por produtos
• Página do produto
• Carrinho
• Confira
• Confirmação

Este artigo aborda esses pontos-chave da jornada do usuário e como os designers de comércio eletrônico podem tornar a experiência do cliente agradável, direta e sem complicações.

Descoberta de sites

Posicione a marca com clareza

Os visitantes formam as primeiras impressões de um site em apenas 50 milissegundos. Um site de comércio eletrônico precisa atrair a atenção do usuário, mostrando de forma clara e rápida o que vende e onde se encaixa no mercado geral.

Por exemplo, o site de um varejista de joias de luxo provavelmente teria uma aparência muito diferente de um site para uma loja grande com orçamento limitado. A varejista de eletrônicos de ponta Bang & Olufsen transmite a qualidade de sua marca usando fontes elegantes, uma paleta de cores sofisticada e imagens de produtos elegantes.

Mostrar apelos à ação relevantes

Quando o usuário chegar à página inicial, cumprimente-o com conteúdo oportuno e chamadas para ação (CTAs) específicas. Uma imagem de banner grande que corresponda à temporada atual ou a um evento específico, juntamente com um CTA apropriado, ajuda o usuário a passar para a próxima etapa do processo de compra. Ao criar CTAs, evite frases genéricas como “começar” que não dizem claramente ao usuário o que vem a seguir.

A Polaroid criou um CTA eficaz durante as festas de fim de ano ajudando os usuários que estavam comprando presentes. Em vez de usar uma frase genérica, a Polaroid usou “Shop Gifts”, deixando claro que o usuário seria levado a uma área do site com sugestões de presentes.

Adapte as Landing Pages para SEO

Ao conectar os termos de pesquisa do usuário de mecanismos de pesquisa como o Google a páginas de destino específicas, os varejistas de comércio eletrônico podem capturar usuários que têm a missão de encontrar um produto específico.

Quando um usuário pesquisa algo, há uma boa chance de que ele queira comprá-lo. Criar uma página de destino personalizada para termos de pesquisa de produtos comuns aumenta a chance de um varejista conseguir uma venda (e talvez um novo cliente). A empresa de papelaria Papier faz isso bem com uma página criada especificamente para convites de casamento que aparece nos resultados de pesquisa do Google.

Pesquisa e navegação de produtos

Fornecer pesquisa no local

Embora possa parecer bastante básico, muitos sites ainda não oferecem uma pesquisa geral em todo o site ou, se o fizerem, ela não está otimizada adequadamente. Mas a pesquisa no site é fundamental para uma sólida experiência de compra de comércio eletrônico.

Segundo a Invesp, 60% das compras online não são impulsivas. As pessoas geralmente sabem o que estão procurando e digitar sua consulta em uma barra de pesquisa em um site de comércio eletrônico - como o nome do produto ou o número do modelo - é muito mais rápido do que vasculhar as opções do menu.

Recursos adicionais, como pesquisa preditiva ou preenchimento automático, ajudam os usuários a ver as opções rapidamente. A Apple usa essa tática com um campo de pesquisa que é atualizado dinamicamente com links rápidos para produtos e pesquisas populares sugeridas.

Inspire os visitantes no modo Discovery

Embora muitos compradores tenham um item específico em mente para comprar, nem todos os visitantes têm a mesma certeza. De acordo com Nielsen Norman, existem cinco tipos de compradores de comércio eletrônico, um dos quais é o “navegador”. Os navegadores não estão necessariamente procurando por algo específico. Em vez disso, eles estão vagarosamente olhando ao redor para ver se encontram algo interessante.

Os sites de comércio eletrônico podem oferecer suporte ao comprador no modo de descoberta, mostrando produtos novos ou mais vendidos e permitindo que eles vejam as categorias de produtos com facilidade e rapidez.

O Etsy envolve os navegadores mostrando a eles o que é popular no momento, além de exibir claramente as categorias gerais de produtos, tanto na navegação quanto no conteúdo da página inicial.

Use filtros e pesquisa facetada

A pesquisa facetada usa filtragem e leva um passo adiante, permitindo que os usuários selecionem vários atributos ao mesmo tempo.

Ao criar filtros, em vez de limitar as opções a critérios gerais como tamanho, cor ou preço, adicione filtros específicos para categorias específicas dos produtos vendidos. Esses filtros podem ser coisas como ajuste ou tecido para roupas, fontes ou ocasião para convites e tamanho de tela ou processador para gadgets.

Depois que um usuário aplica filtros, deve ficar imediatamente aparente na interface do usuário quais filtros foram aplicados. O usuário também deve ser capaz de remover facilmente os filtros aplicados.

ASOS mostra uma gama detalhada de filtros para cada categoria e mostra claramente quais filtros foram aplicados.

Página do produto

Exibir ações primárias com destaque

O usuário nunca deve se perguntar como fazer algo importante, como colocar um produto no carrinho de compras. Exiba ações primárias como “adicionar ao carrinho” ou “compre agora” como botões e coloque-as em um local de destaque na tela em relação ao restante do conteúdo.

O varejista de artigos para o lar Lowe's permite que o usuário saiba como adicionar um produto ao carrinho com um grande botão verde como uma das coisas mais proeminentes na página.

Forneça informações detalhadas do produto

Mostre fotos profissionais de alta qualidade e descrições detalhadas para ajudar os compradores a entender o produto.

Use divulgação progressiva e hierarquia visual para fornecer ao usuário a quantidade certa de informações conforme necessário. Forneça a eles as informações mais importantes imediatamente e adicione detalhes mais abaixo na página para usuários que desejam saber mais.

Divida descrições longas em seções; por exemplo, visão geral, tamanhos/dimensões, recursos detalhados e informações de envio. Usar a navegação expandir/recolher para seções adicionais, como o Myprotein faz, ajuda a evitar que o usuário se sinta sobrecarregado.

Construir a confiança do cliente

Evite deixar os clientes adivinhando as opções de envio, a disponibilidade do produto e as políticas de devolução. Certificar-se de que todas essas informações estejam prontamente disponíveis, o que aumenta a confiança do cliente e pode ajudar a empurrar um cliente incerto para uma compra. Saber se e como eles podem devolver algo os ajuda a tomar decisões mais informadas.

A ASOS exibe claramente informações importantes de envio e devolução em cada página de produto usando um modal acessado a partir de um link sob cada nome de produto.

Adicionar prova social

A prova social é um conceito que significa que as pessoas são influenciadas pelo comportamento dos outros. O conceito faz parte dos princípios de persuasão do Dr. Robert Cialdini (um pesquisador líder na ciência da influência) e provou funcionar.

Os varejistas de comércio eletrônico podem aumentar a confiança do comprador com prova social, adicionando classificações, avaliações e comentários dos clientes. Os produtos na Amazon geralmente têm milhares de avaliações e os usuários podem classificá-los por nível de classificação por estrelas.

Carrinho de compras

Mostrar um resumo claro do pedido

Antes que o comprador finalize a compra, mostre a ele um resumo do pedido claro e conciso que inclua os itens comprados, a quantidade e o preço de cada item e o total do pedido. Permita que o usuário edite quaisquer itens que queira atualizar ou excluir e evite surpresas com cobranças de frete incluindo um resumo de frete.

O Modist mostra um resumo claro do pedido e um recibo. O usuário pode gerenciar facilmente os itens selecionados (mover para a lista de desejos, remover, alterar a quantidade) e ver um resumo e um detalhamento de frete e impostos.

Confira

Permitir que os usuários façam check-out como convidados

As compras por impulso representam quase 40% de todo o dinheiro gasto no comércio eletrônico. Elimine o obstáculo extra de criar uma conta ou fazer login, permitindo que os compradores façam check-out como convidados. Durante o processo de check-out como hóspede, uma simples integração para criar uma conta pode converter alguns hóspedes em usuários da conta.

O Aesop permite que os usuários façam check-out facilmente como convidados, além de oferecer a opção de fazer login ou registrar-se. Fornecer várias opções em um único formulário remove possíveis bloqueadores de compra para quem deseja fazer o check-out rapidamente, mas também oferece aos usuários que desejam se inscrever a chance de fazê-lo.

Fornecer feedback visual durante o processo de checkout

Incluir uma barra de progresso ajuda os clientes a entender onde estão no processo de checkout e quanto falta para concluir.

A Apple mostra ao usuário cada etapa do processo e permite que ele navegue entre as etapas usando os links de progresso. O progresso é salvo, para que o usuário não perca nada ao mover-se entre as etapas.

Use métodos de pagamento comuns

Além de permitir o pagamento através dos principais cartões de crédito, adicionar outros métodos de pagamento populares, como o PayPal, pode aumentar a conversão para compradores que não desejam fornecer as informações do cartão de crédito.

Na Holanda, o iDEAL é frequentemente usado para transações de comércio eletrônico e 60% dos consumidores holandeses o usaram em uma compra recente. A varejista de roupas Scotch & Soda permite que os compradores façam check-out com iDEAL e PayPal.

Confirmação do pedido

Exibir uma confirmação detalhada do pedido após a compra

Assim que o cliente concluir a compra, forneça uma confirmação que inclua o processamento bem-sucedido do pagamento e os detalhes da entrega, como endereço, método de entrega e data prevista de entrega.

Esse conceito de e-mail de confirmação da Amazon mostra o número do pedido, fornece uma visão geral dos itens comprados e fornece uma data de envio e algumas recomendações para compras futuras.

Enviar atualizações de pedidos e envio por e-mail

Além da tela de confirmação, o envio de um e-mail de confirmação ajuda a manter o usuário informado sobre o status de sua compra. Embora todos os clientes devam receber confirmação por e-mail, isso é particularmente útil nos casos em que os usuários fizeram check-out como convidados e não têm uma conta no site para verificar seus pedidos anteriores.

Se algo mudar com o pedido, como um atraso na entrega, envie uma atualização. Assim que o item for enviado, envie uma atualização por e-mail com o número de rastreamento.

Resumo

Os princípios deste artigo fornecem uma linha de base dos pontos de contato da jornada do usuário que todo designer de comércio eletrônico deve seguir, mas é apenas o começo. Para obter mais informações sobre mais detalhes sobre UX de comércio eletrônico móvel, visite eCommerce for the Mobile Experience ou leia mais sobre o design da página de destino Como projetar páginas de destino eficazes.

O crescente mercado de comércio eletrônico representa muitas oportunidades para os varejistas. Aqueles que reconhecem a importância do UX e seguem as melhores práticas para a jornada do usuário de comércio eletrônico podem permanecer competitivos e afetar positivamente seus resultados.

• • •

Leia mais no Blog Toptal Design:

• Tendências proeminentes de comércio eletrônico e sua influência no design (com infográfico)
• UX de comércio eletrônico para a experiência móvel
• eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
• O melhor guia para design de sites de comércio eletrônico
• eCommerce redesenhado: como pequenas mudanças fizeram grandes melhorias na experiência do usuário