Facilitando a adição de produtos a postagens e páginas com o bloco Produtos para Gutenberg

O bloco Produtos representa o primeiro estágio de um projeto que chamamos carinhosamente de “Wootenberg” – a preparação do WooCommerce para a chegada do editor Gutenberg.

Gutemberg?

Se você perdeu, Gutenberg é um editor de conteúdo novinho em folha, orientado visualmente, sendo construído para WordPress e programado para inclusão na versão 5.0. Leia tudo sobre isso e baixe a versão mais recente do plug-in de recursos do Gutenberg.

O que é o bloco Produtos?

Essencialmente, o bloco Produtos é uma versão moderna do shortcode Produtos, criado para o mundo Gutenberg para o qual todos nós vamos nos mudar em breve.

O bloco Produtos fornece uma interface de usuário intuitiva para inserir produtos de várias fontes e, em seguida, fornece uma visualização precisa de como essa seleção ficará quando publicada. Você também poderá ajustar a aparência desses produtos ajustando o layout e a ordem.

Com o bloco Produtos, você pode adicionar produtos a postagens e páginas de maneira rápida e fácil, incluindo:

• Produtos individuais, escolhidos a dedo
• Produtos de categorias específicas
• Produtos em destaque
• Venda de produtos
• Produtos com atributos ou termos específicos
• Mais vendidos
• Produtos mais bem avaliados

Ou simplesmente adicione todos os seus produtos.

Dê uma olhada neste pequeno vídeo para ver como o bloco Produtos funciona:

Uma melhoria dramática em relação à experiência de código de acesso existente, você não acha? Nós fazemos!

Obter bloco de produtos

Um plug-in de recurso

Neste momento, o bloco Produtos é um conceito novo e dependente de Gutenberg. Como o próprio Gutenberg ainda é um plug-in de recursos, também estamos lançando o bloco Produtos como um plug-in de recursos. Dessa forma, podemos criar o recurso rapidamente, independentemente do núcleo do WooCommerce - leia mais sobre plugins de recursos. O melhor de tudo é que ele fornece uma maneira conveniente de instalar e brincar com ele.

Quando estivermos satisfeitos com a estabilidade do design e do código. mesclaremos os recursos no núcleo do WooCommerce para que sejam acessíveis a todas as lojas WooCommerce. Nesse ponto, você pode desativar e remover o plug-in de recurso e todos os blocos de produto inseridos com o plug-in de recurso permanecerão ativos.

Nossa abordagem

Gutenberg cria muitas possibilidades interessantes para um plugin grande como o WooCommerce. Por enquanto, era importante para nós limitar o escopo de nossa exploração inicial para garantir que construíssemos uma base sólida com os padrões de design de Gutenberg e a base de código em rápida evolução, antes de passar para tarefas mais complexas, como adicionar um produto. Acontece que mesmo nosso projeto de escopo menor descobriu oportunidades que não esperávamos.

Pesquisa

Antes de entrar no design, fizemos algumas rodadas de pesquisa para garantir que estávamos na direção certa. Isso incluiu passar muito tempo brincando com o Gutenberg, conversando com a equipe de design e vendo o que outros membros da comunidade WordPress estão fazendo com o Gutenberg no momento.

Como estávamos focados no código de acesso dos produtos, analisamos seu uso em 10.000 sites WooCommerce. Aprendemos que as aplicações mais populares do shortcode são para exibir produtos específicos, categorias de produtos e produtos em destaque. Curiosamente, poucas lojas pareciam usá-lo para exibir produtos com melhor classificação, produtos mais vendidos ou produtos com atributos específicos.

As aplicações mais populares do shortcode de produtos eram para exibir produtos específicos, categorias de produtos e produtos em destaque.

É fascinante ver como as pessoas estão realmente usando um recurso, e esse insight foi fundamental para nos ajudar a descobrir quais fluxos são mais importantes. Também desafia nossas suposições, para que possamos tomar decisões informadas sobre o que abordamos na próxima fase do projeto.

Teste moderado, primeira rodada

Nossa primeira rodada de designs explorou as maneiras pelas quais o proprietário da loja pode exibir produtos em uma página ou postagem. Entrevistamos construtores de lojas e proprietários/gerentes de lojas, criamos alguns cenários de teste para incorporar produtos e, em seguida, pedimos a eles que experimentassem o plug-in e falassem sobre suas reações e feedback.

Capturar esse feedback no início do processo de design, antes de iniciar o desenvolvimento, informou a próxima iteração de designs para melhor alinhar com a forma como os clientes esperavam inserir e exibir seus produtos. Isso nos deu confiança para avançar com a primeira versão do plug-in de recursos para testes adicionais.

Nossa principal conclusão dessa rodada de testes foi que, embora nossos fluxos fossem muito bons, as pessoas tiveram problemas quando se tratava de interagir com as configurações do bloco. Isso foi parcialmente um problema de descoberta, mas também resultado da sobrecarga de configurações. Então, removemos algumas opções (como alternâncias de visibilidade de dados do produto - algo que em breve poderemos lidar melhor com o núcleo do Gutenberg) e movemos outras (como o seletor de escopo de produtos) para a seção de configurações do bloco principal, tornando-as visíveis imediatamente após o bloco está inserido.

Teste moderado, segunda rodada

Assim que o plug-in de recursos estava pronto e atualizamos nossos designs, organizamos uma segunda rodada de testes de usabilidade. Desta vez, preparamos um ambiente de teste ao vivo para que os participantes do teste pudessem interagir com a interface real do Gutenberg, em vez de protótipos. Ver as pessoas usarem o produto real foi revelador – e inestimável.

Duas das principais lições não foram especificamente sobre o bloco Produtos, mas sobre o próprio Gutenberg. Cada participante do teste (a maioria dos quais nunca havia usado o Gutenberg antes) ficou preso ao adicionar um bloco e teve problemas para localizar as configurações avançadas. Compartilhamos os resultados de nossos testes com a equipe do Gutenberg, uma correção já foi implantada para o segundo problema e atualmente estamos explorando opções de design para resolver o primeiro.

Quanto ao próprio bloco Produtos, fizemos alguns ajustes finos, como remover uma etapa irrelevante ao exibir produtos que não exigem mais informações do usuário durante a seleção - se você optar por exibir produtos em destaque, não precisamos de um ação para confirmar isso ao selecionar categorias. Também notamos que não havia um fluxo consistente para alterar o escopo dos produtos em exibição e os participantes do teste procuraram em lugares diferentes para essas configurações, então adicionamos mais caminhos de volta às configurações iniciais do bloco.

O resultado? Este plug-in de recurso está disponível para download hoje.

Obter bloco de produtos

Interessado em testar protótipos WooCommerce conosco?

Se você estiver interessado nos desenvolvimentos mais recentes do WooCommerce, inscreva-se no nosso Grupo de feedback de design para que você possa moldar o futuro do WooCommerce. Periodicamente, contatamos os membros para ajudar a pesquisar novos projetos e testar nossos protótipos e MVPs.