Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Design de temas para WooCommerce - Anyssa Ferreira

513 Aufrufe

Veröffentlicht am

Palestra apresentada no WordCamp Belo Horizonte 2016 e no WordCamp Fortaleza 2016.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Design de temas para WooCommerce - Anyssa Ferreira

  1. 1. Design de temas para WooCommerce Anyssa Ferreira WORDCAMPFORTALEZA2016
  2. 2. Anyssa Ferreira Designer gráfica e desenvolvedora web, há 10 anos. Fundadora do estúdio Haste. Professora e palestrante. Membra da comunidade WordPress de São Paulo, Organizadora do WordCamp SP e Meetups. Primeira ganhadora da Kim Parsell Scholarship da Fundação WordPress em 2015 pela contribuição com a causa da inclusão de mulheres na comunidade WordPress. @anyssaferreira hastedesign.com.br
  3. 3. Fazer design para e-commerce é projetar para converter. Como assim?
  4. 4. Quem?1.
  5. 5. Designer gráfico Designer que projeta comunicação visual em geral. Inclui, mas não se limita aos materiais impressos. Subfunção do designer gráfico, especializado em layout para a internet, incluindo sites, banners, interfaces, etc. Designer web&
  6. 6. UI Designer Designer de interfaces. Responsável por criar os elementos gráficos do site, os inputs e outputs. Designer de experiência do usuário. Responsável por criar uma interação agradável e funcional. UX Designer&
  7. 7. Como?2.
  8. 8. Temos muita tecnologia, pouca metodologia e nada de filosofia. Rodolfo Fuentes
  9. 9. Trabalhe para encontrar e aprimorar a sua metodologia Descubra quais métodos te ajudam a conseguir bons resultados. Teste, avalie e melhore. Wireframe Layout Mapa do site
  10. 10. Crie elemento modulares Reaproveite elementos visuais. A repetição causa identificação e ajuda o usuário a se sentir confortável.
  11. 11. Defina uma hierarquia clara Mostre quem manda na página. É um título? Um botão? Como os diferencio?
  12. 12. Aceite críticas e esteja atento aos feedbacks Você cria para o outro. Ouça o que ele tem a dizer, nem sempre de forma direta. Avalie criteriosamente e transforme isso em melhorias. Teste de UX são ótimos!
  13. 13. O que?3.
  14. 14. Conversão É quando um usuário executa uma ação desejada, como comprar um produto ou efetuar um cadastro. A conversão é o objetivo.
  15. 15. Taxa de Conversão É porcentagem de conversões entre os visitantes do seu site. No Brasil a média é de 1,65%.
  16. 16. O processo que leva o usuário até a conversão é o funil de vendas. Só tem um problema…
  17. 17. Porém, nem tudo que entra no funil converte. O funil sempre tem furos. Na verdade, a melhor analogia seria um balde furado que você usa para pegar água.
  18. 18. O papel do designer é de não deixar vazar, promovendo uma experiência fluida, rumo a conversão. Elimine a desinformação, dúvidas, hesitação e obstáculos.
  19. 19. Etapas do Funil 1. Consciência 2. Interesse 3. Desejo 4. Ação 1. 2. 3. 4.
  20. 20. Consciência4. 1. 2. 3. 4.
  21. 21. A consciência é a etapa onde o usuário toma conhecimento da loja e dos produtos. ● Otimização SEO (permalinks, conteúdo, estrutura HTML, sitemap, etc.); ● Anúncios e redes sociais. ● Pesquisa e filtros; ● Seções e categorias; ● Curadoria de produtos; ● Navegação e acessibilidade. ❌ Não encontrar a loja; ❌ Não encontrar o produto, e achar que a loja não oferece; ❌ Ver um produto e não conseguir achá-lo novamente; ❌ Não visualizar as opções; ❌ Receber sugestões erradas.
  22. 22. ● Facilite o acesso as categorias, busca, e outras formas de encontrar produtos. ● Exiba listas de produtos mais vendidos, mais bem avaliados, etc. Alpha Store
  23. 23. ● Coloque os filtros sempre visíveis na loja e nos resultados da busca. ● Filtre por categorias, atributos, preço, variações, tags, etc. Storefront
  24. 24. ● Navegação universal - não crie becos sem saída. ● Mostre logo de cara na homepage o que sua loja tem de melhor, e caminhos possíveis para o usuário seguir. eStore
  25. 25. ● Navegação universal - não crie becos sem saída. ● Mostre logo de cara na homepage o que sua loja tem de melhor, e caminhos possíveis para o usuário seguir. MaxStore
  26. 26. Exemplo de “vitrines”. ● Crie seções de produtos que possam ser gerenciadas. ● Ative as ferramentas de sugestões de produtos relacionados e ofereça em momentos chave.
  27. 27. Informe, mostre e oriente o usuário. Ajude-o a chegar até você e seus produtos.
  28. 28. Interesse5. 1. 2. 3. 4.
  29. 29. O interesse é a etapa onde a atenção do usuário é capturada e ele passa a analisar o produto. ● Landing pages; ● Promoções e cupons; ● Envio de email marketing; ● Páginas dos produtos - informação geral. ● Call to action visível e bem desenhado. ❌ Decepcionar, confundir ou enganar o usuário; ❌ Itens fora de estoque geram desapontamento.
  30. 30. ● Uma descrição sucinta é essencial. ● Deixe tudo as claras: preço, quantidade, condições, etc. Abelman
  31. 31. ● Imagens valem mais que mil palavras e facilitam a compreensão. ● Em vez de só dizer, mostre o que é o seu produto. Storefront
  32. 32. Prove que o seu produto é aquilo que o usuário procura e precisa Tire as dúvidas oferecendo informações, imagens.
  33. 33. Desejo6. 1. 2. 3. 4.
  34. 34. O desejo é a etapa onde o usuário já se conectou ao produto, mas precisa do estímulo racional. ● Mais fotos em outros ângulos. ● Depoimentos e reviews. ● Informações sobre suporte, entrega, devoluções, etc. ● Segurança do site. ● Informações de contato e atendimento ao cliente. ● Compra por impulso. ❌ Falta de informação gera desconfiança. ❌ Erros, bugs, e falhas. ❌ Apelar demais para o emocional. ❌ Pressionar demais o usuário.
  35. 35. ● O plugin WPB WooCommerce Custom Tab Manager adiciona mais tabs à página de produtos, permitindo a inserção de mais detalhes.
  36. 36. ● Imagens grandes, bem produzidas e em destaque despertam desejo. ● Apelar para os sentidos (paladar, por exemplo), ou sensações (fome) ajudam o usuário a decidir. Azera Shop
  37. 37. Mostre que o usuário foi correspondido e elimine a hesitação Passe segurança e credibilidade, para transformar o vínculo em conversão.
  38. 38. Ação7. 1. 2. 3. 4.
  39. 39. A ação é a etapa onde o usuário executa o objetivo a conversão, no caso, a compra. ● Desenhe um carrinho fácil de entender e manejar. ● Enfatize os botões de comprar, finalizar pedido e pagamento. ● Otimize os formulários, uma opção é o checkout guiado. ● Compra com 1 clique. ● Urgência ❌ Falta de acesso aos setores de finalização de compra. ❌ Falta de funcionalidades de manejamento e carrinho. ❌ Formulários de checkout gigantes e confusos.
  40. 40. ● O Mini carrinho deve ser visível e guiar para o checkout. MaxStore
  41. 41. ● O carrinho deve ser claro e sem distrações. ● Evite sidebars, banners, etc. ● O botão de checkout deve ter o maior “peso” visual da página. MaxStore
  42. 42. ● O plugin YITH WooCommerce Multistep Checkout cria uma timeline para a exbição de um checkout em multiplos passos.
  43. 43. Facilite as ações removendo qualquer obstáculo. Facilite o entendimento dos procedimentos e guie seu usuário para que ele não se perca nos metros finais.
  44. 44. É goool! Siga estas dicas e sua taxa de conversão será um verdadeiro 7 x 1.
  45. 45. Resumindo Projete temas para WooCommerce que foquem em conversão através de 4 passos: sejam acessíveis, confiáveis, sedutores e usáveis, para que o usuário flua rumo ao objetivo - a conversão.
  46. 46. Obrigada! Siga nas redes sociais www.hastedesign.com.br @anyssaferreira Imagens: domínio público.

×