eCommerce UX - Princípios e estratégias de design - Design De Marca
À medida que o cenário geral do varejo continua a evoluir e luta de correntes de tijolo e argamassa , o mercado de comércio eletrônico está pronto para crescer. Em 2021, as vendas globais de comércio eletrônico devem crescer para mais de 4,48 trilhões de dólares , que é mais do que o dobro dos números de 2017.
varejistas e designers de comércio eletrônico que prestam muita atenção a experiência de usuário e aderir a um conjunto padrão de princípios de design de UX de comércio eletrônico para que o fluxo de compras do cliente possa capitalizar sobre o 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 do carrinho e maior conversão geral.
A jornada do usuário inclui:
Descoberta de site
Pesquisa e navegação de produtos
Este artigo cobre 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.
A jornada do usuário em fases design do site de comércio eletrônico .
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 chamar 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 seria muito diferente de um site de uma grande loja com orçamento limitado. Varejista de eletrônicos de última geração Bang & Olufsen transmite a qualidade da marca usando fontes elegantes, uma paleta de cores sofisticada e imagens de produtos elegantes.
Posicionamento da marca usando fonte, fotografia e cópia por Bang & Olufsen .
Mostrar frases de chamariz relevantes
Quando o usuário chegar à página inicial, cumprimente-o com conteúdo oportuno e frases de chamariz específicas (CTAs). Uma imagem de banner grande que corresponde à temporada atual ou um evento específico junto com um CTA apropriado ajuda o usuário a passar para a próxima etapa no processo de compra. Ao criar CTAs, evite frases genéricas como 'começar', que não informa claramente ao usuário o que vem a seguir.
Polaroid criou um CTA eficaz durante o período de festas, ajudando os usuários que estavam comprando presentes. Em vez de usar uma frase genérica, a Polaroid usou "Comprar presentes", deixando claro que o usuário seria levado a uma área do site com sugestões de presentes.
Polaroid mostra um CTA para comprar presentes na página inicial.
Customizar Landing Pages para SEO
Ao conectar os termos de pesquisa do usuário em 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 esteja tentando comprar. Criação de um personalizado página de destino para termos de pesquisa de produtos comuns aumenta a chance de um varejista de conseguir uma venda (e talvez um novo cliente). Empresa de papelaria Papel faz isso bem com uma página criada especificamente para convites de casamento que aparece nos resultados de pesquisa do Google.
Página de destino dedicada para papelaria de casamento por Papel .
Fornece pesquisa no local
Embora possa parecer bastante básico, muitos sites ainda não oferecem uma pesquisa geral em todo o site ou, se oferecem, não é otimizada adequadamente. Mas a pesquisa no site é fundamental para uma experiência de compra de comércio eletrônico sólida.
De acordo com Invesp , 60% das compras online são não impulsivo. 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 um nome de produto ou número de 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. maçã usa essa tática com um campo de pesquisa que é atualizado dinamicamente com links rápidos para produtos e pesquisas populares sugeridas.
Implementação de pesquisa por maçã .
Inspire visitantes no modo de descoberta
Embora muitos compradores tenham um item específico em mente para compra, nem todos os visitantes têm tanta 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 procuram necessariamente algo específico. Em vez disso, eles olham em volta vagarosamente para ver se encontram algo interessante.
sites de comércio eletrônico pode oferecer suporte ao comprador no modo de descoberta, mostrando-lhe produtos novos ou mais vendidos e permitindo que ele veja as categorias de produtos de forma fácil e rápida.
Etsy envolve os navegadores, mostrando a eles o que é popular no momento, bem como exibindo claramente as categorias gerais de produtos, tanto na navegação quanto no conteúdo da página inicial.
Etsy ajuda os usuários a descobrir o que é popular, além de exibir categorias.
Use filtros e pesquisa facetada
Pesquisa facetada usa a filtragem e dá um passo adiante, permitindo que os usuários selecionem vários atributos de uma vez.
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ões para convites e tamanho da tela ou processador para gadgets.
Depois que um usuário aplica os filtros, deve ficar imediatamente aparente na IU 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.
Filtros específicos de categoria por ASOS .
Exibir ações primárias com destaque
O usuário nunca deve se perguntar como fazer algo importante, como colocar um produto em seu carrinho de compras. Exiba ações primárias como "adicionar ao carrinho" ou "compre agora" como botões e coloque-os em um local de destaque na tela em relação ao restante do conteúdo.
Varejista de artigos de decoração 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.
Lowe's mostra a ação principal de "Adicionar ao carrinho" como um grande botão verde.
Mostre fotos profissionais de alta qualidade e descrições detalhadas para ajudar os compradores a entender o produto.
Usar divulgação progressiva e hierarquia visual para fornecer ao usuário a quantidade certa de informações conforme a necessidade. Forneça a eles as informações mais importantes imediatamente e, em seguida, adicione detalhes mais abaixo na página para usuários que desejam saber mais.
Divida as descrições longas em seções; por exemplo, visão geral, tamanhos / dimensões, recursos detalhados e informações de envio. Usando a navegação expandir / recolher para seções adicionais, como Myprotein faz, ajuda a evitar que o usuário se sinta sobrecarregado.
A descrição do produto é organizada em um conjunto de seções expansíveis em Myprotein .
Evite deixar os clientes adivinhando sobre as opções de envio, disponibilidade do produto e políticas de devolução. Garantir 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.
ASOS exibe claramente informações importantes de envio e devolução em cada página de produto usando um modal acessado por um link abaixo do nome de cada produto.
ASOS mostra as informações de envio e devolução em um modal vinculado à página de detalhes do produto.
A prova social é um conceito que significa que as pessoas são influenciadas pelo comportamento dos outros. O conceito faz parte de Dr. Robert Cialdini's (um pesquisador líder na ciência da influência) princípios de persuasão e está provado que funciona.
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. Produtos em Amazonas costumam ter milhares de comentários e os usuários podem classificá-los por nível de avaliação com estrelas.
Avaliações de produtos em Amazonas .
Mostrar um resumo claro do pedido
Antes que o comprador conclua a compra, mostre a ele um resumo do pedido claro e conciso que inclua os itens adquiridos, a quantidade e o preço de cada item e o total do pedido. Permita que o usuário edite quaisquer itens que deseje atualizar ou excluir e evite surpresas na cobrança de frete, incluindo um resumo de envio.
O modista mostra um resumo claro do pedido e um recibo. O usuário pode gerenciar facilmente os itens que selecionou (mover para a lista de desejos, remover, alterar a quantidade) e ver um resumo e uma análise detalhada de frete e impostos.
Visão geral do pedido e análise detalhada em O modista .
Permitir que os usuários façam check-out como convidados
Compras por impulso representam quase 40% de todo o dinheiro gasto em 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 convidado, uma integração simples para criar uma conta pode converter alguns convidados em usuários da conta.
Esopo permite que os usuários façam check-out facilmente como convidados, ao mesmo tempo em que oferece a opção de fazer login ou registrar-se. Fornecer várias opções em um único formulário remove potenciais bloqueadores de compra para aqueles que desejam finalizar a compra rapidamente, mas também oferece aos usuários que desejam se inscrever a chance de fazê-lo.
Esopo tela de login com a opção "continuar como convidado".
Fornece 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 ainda falta para concluir.
maçã 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.
maçã tem uma barra de progresso de verificação passo a passo.
Use métodos de pagamento comuns
Além de permitir o pagamento através dos principais cartões de crédito, adicionando outros métodos de pagamento populares como PayPal pode aumentar a conversão para compradores que não desejam fornecer suas informações de cartão de crédito.
Na Holanda, ideal é frequentemente usado para transações de comércio eletrônico e 60% dos consumidores holandeses o usaram em uma compra recente. Varejista de roupas Scotch & Soda permite que os compradores façam check-out com iDEAL e PayPal.
Diferentes métodos de pagamento em Scotch & Soda Processo de checkout.
Exibir uma confirmação detalhada do pedido após a compra
Assim que o cliente concluir a compra, forneça a confirmação que inclui o processamento do pagamento e detalhes de entrega como endereço, método de entrega e data de entrega prevista.
Este conceito de um e-mail de confirmação para a Amazon mostra o número do pedido, dá uma visão geral dos itens comprados e fornece uma data de envio e algumas recomendações para compras futuras.
Conceito de e-mail de confirmação do pedido por Drew Christiano .
Envie atualizações de pedidos e remessas por e-mail
Além da tela de confirmação, o envio do e-mail de confirmação ajuda a manter o usuário informado sobre o andamento da compra. Embora todos os clientes devam receber a 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.
Os princípios neste artigo fornecem uma linha de base dos pontos de contato da jornada do usuário que cada designer de comércio eletrônico deve seguir, mas é apenas o começo. Para obter mais informações sobre especificações mais específicas sobre a experiência do usuário do comércio eletrônico móvel, visite Comércio eletrônico para a experiência móvel ou leia mais sobre o design da página de destino Como criar páginas de destino eficazes .
O crescente mercado de comércio eletrônico representa muitas oportunidades para varejistas. Aqueles que reconhecem a importância da 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 financeiros.
Tendências proeminentes do comércio eletrônico e sua influência no design (com infográfico)
eCommerce redesenhado: como pequenas alterações geraram grandes melhorias de experiência do usuário
O que é um varejista de comércio eletrônico?
Os varejistas de comércio eletrônico são lojas online que adicionaram a capacidade dos clientes de procurar e comprar itens por meio de um site.
Quais são os benefícios de um site de comércio eletrônico?
Com o crescimento maior e projetado nas compras online, os varejistas que seguem os princípios-chave de design de UX do eCommerce podem capitalizar em um tremendo crescimento do mercado.
O que é uma frase de chamariz em um site?
As chamadas à ação do site de comércio eletrônico ajudam a orientar o comprador durante o processo de compra. Eles geralmente são exibidos como botões.