Contente
Este artigo apareceu originalmente na edição 216 da revista .net - a revista mais vendida do mundo para web designers e desenvolvedores.
Quando o site da revista .net foi relançado, com um novo design e conteúdo atualizado com mais regularidade, um dos requisitos era que o novo site apresentasse melhor os artigos para estimular o click-through. Mas qual formato seria o melhor?
Uma abordagem típica é o estilo de blog, em que você tem uma lista linear dos artigos mais recentes. Pode haver uma miniatura, um título e uma breve descrição do artigo. No entanto, a equipe estava interessada em usar um layout de grade que tivesse menos texto e, potencialmente, fosse mais fácil de digitalizar.
É aí que entramos na Nomensa. Já havíamos feito alguns testes de usabilidade nos primeiros wireframes da página inicial e podíamos estar bastante confiantes de que as pessoas ficariam felizes com a visualização em grade. O layout deve encorajar a digitalização e facilitar as decisões, pensamos. Um layout de grade ocupa menos espaço vertical e, como todos sabem, as pessoas não lêem online de qualquer maneira. O layout de grade graficamente mais rico deve ser incrível, certo?
Havia um sentimento mesquinho de que poderia não ser, então precisávamos encontrar uma resposta. Perguntar às pessoas não ajudaria muito aqui; não é uma questão de preferência, é uma questão de desempenho. Também é um caso em que pedir a alguém para pensar sobre sua preferência pode mudar isso.
Precisávamos de um método quantitativo que rastreasse muitas pessoas e avaliasse suas decisões para duas versões diferentes. Portanto, decidimos usar o teste A / B de duas visualizações diferentes, a lista e a visualização em grade.
A próxima etapa foi usar o Google Analytics para discernir qualquer diferença entre as visualizações de lista e grade. Há um recurso específico do Analytics que o torna um excelente companheiro para GWO: segmentos avançados.
Aplicar um segmento avançado é como filtrar os dados analíticos de uma determinada variável. Existem muitas opções. Por exemplo, você pode querer visualizar apenas as sessões que vieram do Twitter ou apenas as sessões que duraram mais de dois minutos. Você pode então ver as taxas de rejeição, tempo no site, páginas médias e todas as métricas usuais.
Acompanhamento com Analytics
Os segmentos que queríamos criar baseavam-se na página de destino que as pessoas veriam, portanto, pudemos usar os mesmos URLs usados para a configuração da otimização. Um segmento foi criado para a visualização padrão, onde o URL da página de destino era simplesmente uma barra. O segundo segmento foi para a visão alternativa, localizada em / home / lista.
Depois de um dia, tínhamos mais de 600 pessoas em cada condição e, para cada medida numérica no Google Analytics, não havia diferença significativa. Depois de toda aquela configuração, parecia (à primeira vista) que não havia diferença. Em seguida, examinamos os principais caminhos de navegação da página de destino. Ao olhar para a visualização em grade, as próximas páginas mais populares foram divididas igualmente entre a navegação principal e a leitura de um artigo. Para a visualização de lista, mais pessoas selecionariam um artigo do que olhariam para a navegação.
Não era uma grande diferença, mas havia uma chance 15 por cento maior de que as pessoas selecionassem um artigo na visualização de lista. Para efeito de comparação, todos receberam a visualização de grade padrão na popular página de Tutoriais e o efeito foi embora.
Intrigante, mas é difícil saber como é possível generalizar esse efeito. Ajudaria saber por que a visualização de lista encorajava visualizações de artigos, então optamos por um método mais qualitativo.
Rastreamento ocular
O rastreamento ocular é popular na pesquisa do usuário, fornecendo uma visão direta sobre para onde as pessoas estão olhando. Tem havido alguma controvérsia na comunidade de experiência do usuário sobre a utilidade do rastreamento ocular, especialmente quando é usado por padrão. Em muitos casos, uma configuração de usabilidade padrão fornecerá a mesma resposta que uma configuração com rastreamento ocular, por isso é difícil justificar o custo extra do equipamento.
Para o site .net, porém, estávamos tentando entender como as pessoas escaneavam o design, de modo que o rastreamento ocular poderia fornecer algumas pistas importantes.
A configuração do teste foi curta e agradável. Cada participante foi convidado a olhar para a nova página inicial da revista .net e selecionar um artigo que gostaria de ler. Metade dos participantes viu primeiro a visualização em lista, antes de fazer a mesma tarefa na visualização em grade. O outro conjunto de participantes viu primeiro a visualização em grade.
A imagem do eye tracking mostrou a grade da página inicial e, inicialmente, isso não forneceu muitas pistas. Poderíamos dizer que os títulos dos textos atraíram a maior parte do olhar, mas isso era o mesmo para as versões de grade e lista.
A diferença era aparente apenas quando você observava as trilhas do olhar se acumulando. Com vários participantes, ficou claro que examinar a lista era mais previsível, geralmente um de cada vez.
Quando as pessoas estavam digitalizando a versão em grade da página inicial, a ordem não era o padrão ‘F’ conhecido. Você pode esperar que as pessoas examinem a grade da esquerda para a direita, linha por linha. O padrão real era muito mais disperso, às vezes descendo no meio e ramificando-se para os dois lados.
Existem várias explicações possíveis para esse padrão de olhar menos previsível. Pode ser que:
- As pessoas estão simplesmente mais acostumadas com a versão linear, portanto, estão mais acostumadas a digitalizar essa apresentação
- A natureza linear da versão da lista é consideravelmente mais fácil de verificar
Faz diferença que as pessoas usem uma abordagem aleatória para escanear a versão em grade? Talvez não
para todos os sites, mas os artigos são o principal motivo para as pessoas visitarem a revista .net. Se as pessoas são mais propensas a chegar a um artigo quando a visualização de lista está disponível, essa é uma consideração importante para a página inicial e as páginas de seção.
Com mais participantes, podemos descobrir que o conteúdo guia o olhar das pessoas. Por exemplo, palavras-chave ou imagens específicas podem chamar a atenção de mais pessoas. Outra possibilidade é que existam áreas de baixo tráfego do ponto de vista da varredura. O quarto e o sexto artigos (segunda linha à esquerda e à direita) não foram examinados tanto quanto o quinto artigo.
A resposta
Para fazer uma afirmação geral sobre a utilidade dos layouts de grade, precisaríamos executar este teste com muito mais participantes e usar uma ordenação de conteúdo aleatória. No entanto, para o propósito do site da revista .net, podemos estar bastante confiantes em dizer que mudar para uma visualização de lista aumentaria a quantidade de pessoas que acessam diretamente um artigo.
Porém, há uma advertência. Depois que um site está no ar e é usado regularmente, as pessoas criam hábitos em
como eles o usam. O Facebook é provavelmente o exemplo mais famoso, onde mudanças na interface causaram reclamações e até mesmo criaram campanhas online sobre a mudança. O site .net está no ar desde março, então pode ser que as pessoas tenham se acostumado com a visualização atual.
Alguns comentários do teste de usabilidade sugeriram que as pessoas gostariam de escolher o estilo de layout, portanto, o novo site .net sempre forneceu a opção de mudar o estilo de layout com um clique.
Não estou preocupado com uma reação negativa, mas será interessante ver quantas pessoas fazem um
escolha consciente sobre isso.
Teste A / B com Otimizador de website
O Otimizador de website do Google (GWO) permite que você configure um teste A / B simples ou um teste multivariável mais complexo. Há momentos em que o teste multivariado é necessário, como determinar a ordem mais eficaz para três ou mais itens em uma página. No entanto, para comparar uma exibição de lista a uma exibição de grade, o estilo de experimento A / B é perfeito.
Para configurar o teste A / B com GWO, você precisa de três coisas:
- Uma página inicial, geralmente a página atual ou padrão que você tem agora.
- Uma página alternativa, que varia de uma maneira que você acha que afetará os usuários.
- Uma página final, que o GWO usará para calcular a conversão.
Depois de configurar ou identificar essas páginas, você pode colocá-las no GWO e isso lhe dará três blocos de JavaScript para incluir em cada página.
É vital que você possa adicionar o JavaScript no topo do código-fonte de cada página, porque esse é o mecanismo para atribuir pessoas às diferentes condições.
Quando um usuário acessa a página inicial, o JavaScript os atribui aleatoriamente a uma das condições, A ou B. Se o usuário for atribuído a B, eles são encaminhados imediatamente para o
página alternativa.
NB: Se um usuário não tem JavaScript habilitado ou ele está sendo retirado no caminho, eles não contam nos resultados ou estatísticas. Em seguida, você inicia o experimento e as pessoas começarão a ser atribuídas a cada versão da página. O que você deve fazer é aguardar conversões suficientes para que ele se torne estatisticamente válido. No entanto, neste caso, não temos uma página final para conversão porque é um site de artigos em vez de uma jornada definida - qualquer artigo é bom! Tivemos que colocar uma página final no GWO, mas não precisaremos usar a métrica de conversão.
