Dicas de design da Shopify e práticas recomendadas de UX

Publicados: 2022-03-11

Shopify capacita mais de meio milhão de empresas de comércio eletrônico em 175 países. Desde 2012, o número de comerciantes na plataforma Shopify cresceu em média 74% ao ano, e esses comerciantes alcançaram mais de US$ 55 bilhões em vendas como resultado de Shopify ser uma das plataformas de comércio eletrônico mais conhecidas e fáceis de usar atualmente.

Projetar para Shopify pode ser muito lucrativo para designers.

Com Shopify cuidando de domínios, hospedagem, todo o back-end e algumas funcionalidades de front-end, mais tempo, dinheiro e recursos podem ser gastos no design de UX. Até 2021, espera-se que as vendas de comércio eletrônico em todo o mundo atinjam um novo recorde de US$ 4,9 trilhões, e com o design de UX abaixo do padrão sendo um dos maiores contribuintes para checkouts abandonados, é mais do que claro que a implementação das melhores práticas de comércio eletrônico continuará sendo altamente eficaz.

Neste artigo, exploraremos as principais dicas de design da Shopify.

Quais recursos o Shopify possui?

Shopify é fornecido com todos os recursos que você esperaria de uma plataforma de comércio eletrônico de primeira linha:

Integração com gateways de pagamento externos, como Stripe e PayPal
Acesso ao Shopify Payments, com taxas zero em comparação com opções externas
A capacidade de permitir o pagamento por cartão-presente ou crédito na loja
Uma página de checkout personalizável (apenas para clientes Shopify Plus)
A opção de contas de usuário ou checkout de convidado
Páginas estáticas (por exemplo, Política de Privacidade ou Termos e Condições)
Landing pages com conteúdo promocional
Acesso por senha para lojas em desenvolvimento
Variantes de produtos com uma variedade de opções personalizáveis
Coleções inteligentes para automatizar a categorização de produtos
Funcionalidade de pesquisa e marcação para ajudar na descoberta de produtos
Funcionalidade de blog com a capacidade de incorporar produtos em postagens
Uma API para ajudar os desenvolvedores a criar sites dinâmicos e aplicativos móveis

Impulsionando a descoberta de produtos de comércio eletrônico

Da mesma forma que as lojas físicas são organizadas por departamento para que os clientes possam localizar itens específicos perguntando a um membro da equipe, os compradores on-line precisam da capacidade de navegar, filtrar e pesquisar para que possam encontrar o que estão procurando com facilidade e rapidamente .

40% dos clientes de comércio eletrônico abandonam sites que levam mais de 3 segundos para carregar, o que sugere o quão impacientes eles são quando se trata de descoberta de produtos. Felizmente, Shopify possui vários recursos que facilitam a criação de navegação personalizada, a organização de produtos e categorias e a implementação da funcionalidade de pesquisa.

Navegação personalizada

Apresentar ao cliente muitas opções pode causar paralisia de análise (quando há muitas opções disponíveis para tomar uma decisão com eficácia resulta em frustração e abandono). Ao projetar uma navegação personalizada, podemos priorizar produtos e "coleções" que convertem com mais eficiência - por exemplo, exibindo visivelmente a coleção "Desk" se os produtos de mesa forem os mais populares. Essas navegações personalizadas também podem ser editadas no Shopify CMS para permitir testes A/B casuais.

Visualmente falando, os temas Shopify com melhor conversão exibem o título da coleção de forma clara e usam espaço em branco suficiente para ajudar o usuário a identificar facilmente o que está procurando entre todos os produtos, coleções e páginas oferecidas.

Dica de design da Shopify: considere usar navegações personalizadas — Loja Shopify da Grovemade, fazendo uso de navegação otimizada.

Coleções

Uma coleção é um grupo organizado de produtos similares. Os produtos podem ser classificados em coleções manualmente ou podem ser classificados automaticamente com base em critérios correspondentes (por exemplo, se o título do produto contém uma determinada palavra-chave, recebeu uma determinada tag ou está dentro de uma determinada faixa de preço). As coleções também podem ser temporárias (ou seja, sazonais ou para uma venda por tempo limitado), garantindo que os designs do site da Shopify sejam sempre relevantes, oportunos e, acima de tudo, de alta conversão.

Embora essas coleções sejam definidas nos bastidores, é útil que os designers de comércio eletrônico estejam cientes dessa funcionalidade ao projetar para Shopify.

Etiquetas de produtos

As tags exibidas/visíveis ajudam os clientes a encontrar produtos semelhantes e, como mencionado acima, também podem ser usadas internamente para criar coleções. No entanto, o maior benefício das tags reside no fato de que elas podem ser usadas para criar uma pesquisa facetada , permitindo que os clientes filtrem produtos com base em um atributo definidor marcado como "Amarelo".

Dica de design da Shopify: usando o sistema de tags da Shopify — Atribuir tags a produtos na plataforma Shopify.

Lembre-se destas dicas de design da Shopify:

Para esclarecimentos adicionais, mostre quais filtros são aplicados.
Permita que os clientes removam filtros para ampliar sua pesquisa.
Trunque filtros para mostrar apenas os mais populares à primeira vista.

Melhor design do site Shopify com tags e filtros truncados — Filtragem eficaz de produtos usando tags. Loja Shopify da Pure Cycles.

Procurar

A funcionalidade de pesquisa é útil para clientes que sabem exatamente o que estão procurando e é especialmente importante para compradores móveis que consideram a navegação e a filtragem frustrantes devido ao constrangimento natural de interagir em um dispositivo móvel.

Estas são as práticas recomendadas da Shopify a serem consideradas ao projetar experiências de pesquisa:

Nunca esconda a caixa de pesquisa; reduzir o atrito, tornando-o imediatamente disponível.
Coloque a pesquisa onde os clientes esperam que ela esteja (ou seja, no canto superior direito ou centralizada).
Mostre a caixa de entrada inteira, não apenas o ícone de pesquisa.
Incorpore a funcionalidade de preenchimento automático para ajudar os usuários a pesquisar mais rapidamente.
Projete para erro humano usando resultados sugeridos e autocorreção.
Salve pesquisas de usuários e envie e-mails de acompanhamento se nenhuma venda for feita.

Melhore o design da loja Shopify projetando melhores experiências de pesquisa — Uma pesquisa abrangente, mas bem estruturada, da Sunday Somewhere.

Práticas recomendadas da Shopify para páginas de produtos

Shopify oferece todos os recursos necessários para atrair compradores de comércio eletrônico e orientar os usuários fluentemente direto para o checkout. Se combinarmos esses recursos com as práticas recomendadas de comércio eletrônico, podemos empurrar o número de checkouts abandonados abaixo da estatística média.

Use imagens de produtos cativantes

O que faz um bom site de comércio eletrônico são as imagens que cativam os usuários emocionalmente. Para esse fim, Shopify permite que várias imagens e variantes de produtos sejam carregadas. No entanto, como prática recomendada da Shopify, exiba pelo menos uma dessas imagens de produtos em escala (ou seja, cercada por outros objetos para ilustrar o tamanho do produto) para definir as expectativas.

Os clientes desejam realizar uma investigação completa do produto antes de se comprometerem a comprá-lo para garantir que todas as imagens do produto sejam vívidas, de alta qualidade e com zoom.

Dica de design da Shopify: Lojas da Shopify com imagens fantásticas convertem melhor — Uma página de produto visualmente cativante da Hardgraft.

Exibir informações claras do produto

Um número chocante (mas não surpreendente) de clientes de comércio eletrônico abandonam seus carrinhos de compras devido à falta de informações sobre o custo real. 60% dos clientes citam custos inesperados (por exemplo, frete, impostos, taxas) como motivo para o abandono do carrinho e 23% não conseguem calcular o custo total antecipadamente. A falta de transparência é uma maneira infalível de aumentar as conversões em sites de comércio eletrônico, portanto, lembre-se dessas dicas e truques da Shopify:

Use técnicas de divulgação progressiva para estruturar as informações com clareza.
Exiba um detalhamento completo dos custos antecipadamente.
Comunique a proposta de valor explicitamente.
Torne o botão comprar agora/adicionar ao carrinho visualmente distinto.

Uma loja Shopify bem projetada — A Luxy Hair usa um design cuidadoso de apresentação do produto para esclarecer informações importantes.

Construir confiança e segurança

De acordo com o Baymard Institute, a falta de confiança é citada como a razão pela qual 19% dos clientes abandonam no checkout. Felizmente, todas as lojas da Shopify são enviadas com SSL (checkout seguro) por padrão, mas também permitem que os clientes deixem comentários como prova social.

A prova social é uma maneira inegável de aumentar as conversões, fortalecendo a confiança em sites de comércio eletrônico . De acordo com a BrightLocal, 88% dos consumidores confiam em avaliações online tanto quanto em recomendações pessoais, por isso é essencial incentivar clientes anteriores a deixarem avaliações e indicar isso na jornada do cliente. A maioria dos temas Shopify também aproveita a marcação Schema para integrar essas classificações diretamente nos resultados da pesquisa.

Uma loja da Shopify que utiliza avaliações de produtos como parte das práticas recomendadas da Shopify — Implementação de revisões de produtos. Loja Shopify por relógios MVMT.

Além da validação social, considere aumentar a confiança do cliente implementando uma solução de bate-papo ao vivo, como Intercom, Zendesk, Drift ou Kayako. Shopify permite a integração com serviços de terceiros por meio de sua loja de aplicativos e instalação manual.

Mostrar recomendações de produtos relacionados

Todas as principais empresas de comércio eletrônico aproveitam as estratégias de venda cruzada e upsell. As tags, combinadas com análises e integrações de teste A/B, como as Recomendações da Web da Optimizely, podem ajudar os designers a capacitar as empresas a melhorar as taxas de conversão exibindo itens alternativos ou adicionais nos quais os clientes possam estar interessados.

Os temas Shopify com melhor conversão usam estratégias de venda cruzada e upsell — Hardgraft usa estratégias atraentes de upsell.

Integrar a personalização da experiência de compra

Integrações como Personalizações da Web da Optimizely, em combinação com coleções e tags da Shopify, permitem que empresas orientadas por dados segmentem o público com base em seus interesses e histórico de compras anteriores e alterem o conteúdo da página de acordo.

Com técnicas de design antecipado, as lojas Shopify podem exibir conteúdo mais relevante, mantendo o público envolvido por mais tempo e, portanto, mais propensos a converter em uma venda. A personalização é a chave para impulsionar os resultados financeiros de qualquer negócio de comércio eletrônico.

Otimização de checkout

Check-out do convidado x contas do cliente

De acordo com o Baymard Institute, “o site queria que eu criasse uma conta” é o segundo motivo mais comum (35%) pelo qual os clientes abandonam o checkout sem comprar nada. A Shopify recomenda permitir o checkout de convidados (especialmente em dispositivos móveis) e, para isso, é a opção padrão desativar as contas dos clientes.

Shopify permite contas de clientes e check-out de convidados.

Identificando falhas de UX e reduzindo desistências

Tentar resolver checkouts abandonados sem análises robustas é tão eficaz quanto procurar um gato preto em um quarto escuro. A otimização das experiências do usuário e dos fluxos de checkout funciona melhor quando é um processo orientado a dados.

Os designers da Shopify podem conectar o Google Analytics à Shopify e configurar um funil de metas que, após a coleta de dados suficientes, ilustrará exatamente onde os clientes estão decidindo que não querem continuar com a compra.

Visualização do funil de metas usando o Google Analytics para analisar os temas da Shopify com melhor conversão — Visualização do funil de metas usando o Google Analytics, por Patrick Han.

Para obter melhores resultados, integre Shopify a ferramentas como Crazy Egg, Hotjar e FullStory para observar essas áreas problemáticas com mais detalhes usando mapas de calor e gravações de visitantes.

Conclusão

Para que os designers possam comunicar melhor os benefícios e recursos da plataforma Shopify e aprender quais soluções ela pode e não pode fornecer aos clientes, é melhor abrir uma loja de demonstração gratuita. Além disso, os principais designers de comércio eletrônico podem se tornar especialistas registrados da Shopify, adicionando mais credibilidade ao seu currículo como designer de sites da Shopify.

• • •