Teste de divisão com folhas de estilo CSS

Publicados: 2021-07-19

A maneira mais rápida de dividir significativamente o teste de um site é fazer alterações ousadas na folha de estilo em cascata (CSS) em um experimento de todo o site.

Por que as folhas de estilo CSS são importantes

O arquivo CSS principal de um site é um ponto central de referência que controla os estilos, posições e comportamentos comuns de todos os elementos em cada página da web.

No arquivo CSS principal estão as configurações de todas as fontes, margens, cores, alinhamentos e muito mais. É o arquivo mais importante na maioria dos sites modelados e pode mudar drasticamente a aparência de um site com apenas uma pequena edição.

Testes de divisão de todo o site que você deve executar sempre

Existem muitos elementos comuns em um site que desempenham um grande papel na facilidade de leitura, uso, navegação do site, destaque em frases de chamariz e mostra todas as informações importantes.

Quando um usuário está decidindo se deve fazer contato ou talvez fazer uma compra em um site, qualquer uma das opções acima pode ser um fator decisivo para interromper essa conversão. Abaixo estão algumas considerações importantes para elementos de todo o site:

Botões de apelo à ação

Todas as conversões online começam com um botão, link ou widget de call to action (CTA). O tamanho, a cor, o texto e a posição uniforme desses CTAs fazem uma grande diferença nas taxas de conversão. Certas cores de botões de CTA, por exemplo, podem se misturar muito com o plano de fundo, ou podem inconscientemente fazer o usuário clicar neles, dependendo do que eles percebem como uma cor negativa. O texto usado nos links e botões também faz a diferença. Por exemplo, simplesmente alterar o botão “ENVIAR” de um formulário para dizer “ENVIAR” produz melhores resultados, pois “enviar” é percebido como uma palavra forte. Você pode ler mais sobre isso no guia definitivo para CTAs aqui em VWO.com.

Há uma ligeira variação de verde usado para os botões "Comprar agora". A combinação 2 rendeu 1,5% mais produtos adicionados ao carrinho do que a combinação 1 original — Há uma ligeira variação de verde usado para os botões “Compre agora” (destacados). A Combinação 2 rendeu 1,5% mais usuários adicionando produtos ao carrinho do que o Controle original, a Combinação 4 foi 1,4% pior

Tamanho da fonte

Este elemento raramente testado desempenha um grande papel na acessibilidade para muitos usuários. As fontes geralmente são muito pequenas para alguns usuários lerem, então eles podem ter que usar a função de zoom se estiverem familiarizados, mas isso nem sempre é possível, ou fácil, em dispositivos móveis. Tamanhos de fonte muito grandes também podem ser prejudiciais, pois podem diminuir a velocidade de leitura, especialmente nas versões de sites compatíveis com dispositivos móveis. Leia mais sobre a ciência por trás dos tamanhos de fonte aqui em imarc.com.

Tipo de fonte

Novamente, o estilo da fonte raramente é testado em muitos sites, parece que foi decidido na fase inicial de desenvolvimento do design e depois esquecido em muitos sites. Diferentes estilos de fonte têm diferentes níveis de legibilidade. Além disso, algumas fontes estão disponíveis apenas em determinados dispositivos e algumas aparecem muito mal em determinados dispositivos em determinados tamanhos sem a rasterização de fontes. Você pode usar uma família de fontes para usar uma série de fontes, começando com a sua favorita e indo até fontes mais simples, como Arial, que estão sempre em todos os dispositivos. Novas fontes podem ser incluídas em um site por meio de JavaScript ou um serviço como Fontes do Google. Você pode descobrir mais neste post em TypeWolf.com sobre as dez principais fontes da web de 2016.

Estilo de fonte

Os estilos de fonte, como altura da linha, sublinhado, negrito, cor e margens, também afetam a acessibilidade e a legibilidade. Os links têm maior probabilidade de serem clicados quando estão em azul e sublinhados, algo que foi meticulosamente testado pelo Google e pelo eBay ao longo dos anos com o Google até mesmo testando links pretos em 2016. Se os links não se destacam claramente como links em seu site , então eles devem ser testados e você verá que muitas vezes mostram maior engajamento depois de serem alterados.

As conversões aumentaram 1,9% simplesmente mudando a fonte neste site

Cores de fundo

Freqüentemente, os sites são feitos em um fundo branco, mas se você olhar seu site de notícias favorito ou plataforma de mídia social, geralmente aparece um leve tom de azul ou cinza. As cores de fundo podem ajudar a destacar certas áreas da página da web, como uma caixa de informações ou banner de oferta especial. Além disso, a cor de fundo pode reforçar a marca ou tipo de produto mostrado e essa correlação melhora as taxas de conversão, pois o conteúdo parece mais relevante. Descubra mais sobre psicologia das cores para sites neste artigo no Jimdo.com e veja como cores como laranja significam muito (pense na Amazon) e azul significa neutralidade e tecnologia (pense no Facebook ou Twitter).

Reposicionando ou ocultando elementos

O arquivo CSS controla as margens e o preenchimento de todos os elementos comuns nas páginas da web e também permite que você remova completamente certos itens usando o comando “display: none”. Algumas maneiras de utilizar isso são tentando reduzir o espaço desperdiçado verticalmente, removendo informações desnecessárias, alterando o espaçamento entre CTAs importantes ou experimentando a remoção de certos blocos de conteúdo. Às vezes, menos é melhor em páginas da web (o princípio de manter a simplicidade e estupidez) e é uma boa prática ver quanto pode ser removido de uma página da web enquanto melhora a taxa de conversão.

O envolvimento melhorou em mais de 16% quando o conteúdo foi adicionado a esta página — O envolvimento melhorou em mais de 16% quando o conteúdo foi incluído nas páginas de categoria

Plataformas para teste de divisão de arquivos CSS em todo o site

É muito importante manter os modelos em um site consistentes para cada usuário individual quando eles vão de uma página para outra. Pode ser prejudicial (e certamente um experimento ruim) se apenas uma página for testada na divisão A / B enquanto as outras permanecem as mesmas.

Um software de teste de divisão especial é necessário para manter as alterações do arquivo CSS consistentes de página a página para cada usuário individual; infelizmente, os “Experimentos de conteúdo” gratuitos do Google Analytics não atendem a esses tipos de teste de divisão. Aqui estão algumas ferramentas que você pode querer usar:

Otimizador de website visual (VWO) - vwo.com - Descobrimos que este é o software de teste de divisão mais fácil de implementar. Ele lida com todos os tipos de testes de divisão em HTML, CSS ou JavaScript e também gera mapas de calor do usuário, se necessário. As estruturas de preços podem ser encontradas aqui
Optimizely - optimizely.com - Também lida com todos os tipos de testes de divisão em HTML, CSS ou JavaScript e pode fazer alguns testes de divisão muito avançados, se necessário. As informações sobre preços podem ser encontradas aqui

Conclusão

Configurar um teste de divisão de CSS em todo o site é fácil e eficaz, mas você pode precisar da ajuda de 15 minutos de um desenvolvedor se não estiver familiarizado com CSS.

Assim que o site tiver as fontes, estilos e CTAs corretos, você poderá se concentrar nas principais páginas de destino do site e em outros elementos de nicho. Isso aumenta as taxas de conversão e torna o site muito mais eficaz, sem a necessidade de tráfego extra.

Se precisar de ajuda com o seu, não hesite em nos contatar.