Dê mais estilo ao seu formulário de comentário no WordPress

Uma das coisas mais interessantes que podem acontecer quando você tem um blog e escreve nele regularmente é receber comentários dos leitores. Mas, para que isso aconteça, o conteúdo que você escreve deve ser interessante e o formulário de envio de comentários deve ser visível e atraente o suficiente para que o visitante o preencha e envie.

Neste post que pertence à série do teste do mês vamos tentar destacar o formulário de comentários do nosso blog dando-lhe um pequeno redesenho para ver se funciona melhor que a versão atual.

Como sempre, testaremos as alterações usando a técnica de teste A/B. É a melhor maneira de ver com dados reais dos visitantes do seu site se as alterações que você faz funcionam ou não.

Melhorando o design do formulário de comentários do WordPress

Nosso formulário de comentários é bem simples. Por padrão o WordPress adiciona um campo para inserir o site do visitante que comenta, mas acreditamos que este campo não agrega nenhum valor. Pelo contrário, a única coisa que atrai são os comentários de spam de bots que querem obter um link a todo custo. Por esta razão, nós a removemos de nossa forma original.

Na comparação a seguir, você pode ver a versão original do formulário de comentários do nosso blog e a variante com as alterações que fizemos. Lembre-se de deslizar a alça que aparece no centro de um lado para o outro para ver as duas versões:

Basicamente, fizemos três alterações no formulário de comentários:

1. Adicionamos alguns emojis ao título para destacar a área de comentários e incentivar os visitantes a escrever. Agora parece que estamos acenando e incentivando-os a escrever com o emoji da saudação e a escrita à mão. As pessoas gostam de emojis. Vamos ver se isso ajuda a ter mais comentários.
2. O texto legal em que explicamos onde são armazenados os comentários ao preencher as informações usa uma fonte menor . Tem que estar lá por razões legais, mas não queremos dar tanta relevância.
3. Giramos o botão de envio do formulário para uma cor laranja que se destaca. Como vimos anteriormente, as cores são importantes.

Agora que temos o novo design pronto, o que temos que fazer é testá-lo.

Criando um teste A/B de estilos CSS

Para testar essa mudança de design no formulário de comentários do nosso blog no WordPress, o mais simples é usar um teste A/B de regras CSS. A versão A do nosso site é aquela com o formulário original, enquanto a versão B conterá as regras CSS adicionais para alcançar as três mudanças no design do formulário que antecipamos anteriormente.

Com o Nelio A/B Testing, criamos um novo teste A/B de CSS. A próxima imagem mostra a tela de edição desse teste:

Nomeamos o teste (“Formulário de comentários de destaque”, no nosso caso) e a variante (“Formulário de comentários redesenhado”). Também podemos adicionar uma descrição ao teste no campo correspondente na barra lateral direita. Na captura de tela anterior você pode ver a descrição que adicionamos, que serve como referência para qualquer usuário que vá ver o teste no futuro.

Também reduzimos o escopo do teste para URLs que contêm https://neliosoftware.com/blog/ , para que o teste se aplique apenas a postagens em nosso blog.

Como ação de conversão estabelecemos o clique no botão enviar do formulário. Sempre que um visitante clicar nesse botão, contaremos uma conversão no teste para a variante que o visitante está visualizando.

Antes de terminar, temos que editar a variante B do teste. Passamos o mouse sobre esta variante e a opção de editá-la aparecerá. Ao clicarmos nele, um editor de CSS com uma visualização é aberto, como você pode ver na captura de tela a seguir:

Como você pode ver, na barra lateral esquerda temos o editor CSS no qual você pode escrever as regras específicas que fazem as mudanças no design que vimos antes. Além disso, no lado direito você pode navegar em seu site para visualizar o resultado dessas alterações. Com apenas seis regras CSS simples para redesenhar nosso formulário de comentários.

Ao terminar, salvamos e voltamos ao editor de teste A/B para iniciá-lo. Agora só esperamos os visitantes visitarem nossos postos. Cada visitante verá a versão original do formulário ou a versão com a reformulação. Isso é feito pelo Nelio A/B Testing sozinho, sem que você precise fazer nada.

Analisando os resultados do teste A/B

Fizemos o teste por cerca de seis semanas, analisando quase 20.000 visitantes do nosso blog (uma boa amostra da população). Você pode ver os resultados completos do teste A/B na captura de tela a seguir:

O número total de conversões que o teste recebeu não é espetacular. Nesse período, nosso blog recebeu 27 comentários (por isso há 27 conversões nos resultados do teste).

Mas o que se deve notar é que a variante com o redesenho do formulário de comentários conseguiu dobrar o número de conversões da versão original. Portanto, é a opção vencedora do teste A/B, com alto valor de confiança estatística.

Como você vê, pequenas mudanças nos designs, que podem ser alcançadas com poucas regras de CSS, podem ter um impacto direto nos resultados do seu site. Aplicamos essa variante em nosso site adicionando as regras CSS adicionais em nosso tema.

Um design mais elaborado incentiva a interação

O design é fundamental para modificar o comportamento dos visitantes do nosso site. Obter um design que funcione melhor que o atual não precisa consumir muitos recursos. Aqui vimos que com algumas regras simples de CSS podemos fazer mudanças que nos dão resultados rapidamente.

Aplicar alterações no design do nosso site é algo que devemos fazer com cuidado. É por isso que usamos um teste A/B. Graças a esta técnica, podemos verificar com dados reais de nossos visitantes se as alterações funcionam ou não. Caso contrário, não saberemos se escolhemos o caminho correto de melhoria ou se estamos retrocedendo.

Imagem em destaque de Jason Leung no Unsplash.