O papel do wireframe na otimização de conversão (CRO)

O processo de design se beneficia muito do uso de wireframes. De acordo com um estudo da consultoria Nielsen Norman Group, 71% profissionais de User Experience utilizam esses “rascunhos” para apresentar e testar suas ideias.

Wireframe é uma espécie de desenho de sites e landing pages que apresentam de forma rápida, barata e fácil a proposta de estrutura de uma interface. É uma ferramenta para clientes, equipes e outros envolvidos em um projeto de criação de interface visualizarem as ideias e fazerem alterações e alinhamentos. Um wireframe se parece com isto aqui:

Exemplo de telas de wireframe. Na verdade, existem muitos tipos de wireframe, o que vou tratar também neste artigo.

O objetivo do wireframe é analisar e otimizar o produto em favor da experiência do usuário. O ideal, na verdade, é aplicar pesquisas e estudos sobre o comportamento de quem utiliza ou vai utilizar o site antes de desenhar qualquer elemento. Essa iniciativa faz parte do processo de CRO, ou Otimização da Taxa de Conversão, que se concentra em criar páginas e sites com alto potencial de converter visitantes em leads.

Neste artigo, vou falar mais sobre a metodologia de CRO e o papel do wireframe dentro dela.

O que é wireframe

Wireframes são como plantas da construção civil. Eles demarcam a estrutura de páginas, apps e outras interfaces indicando seu conteúdo e suas funcionalidades. Gráficos, cores, imagens, a identidade visual – tudo isso fica de fora e só é feito depois que o wireframe está pronto, estudado, avaliado e aprovado.

Além disso, wireframes também são importantes para:

• Evitar que o time se comprometa com uma solução cedo demais. Construir todo o layout e só depois perceber que aquela não era a melhor saída é dispendioso.
• Permitir planejamento e validação de uma estrutura sem perder tempo discutindo elementos visuais de estilo.
• Facilitar a comunicação entre todos os envolvidos no processo a fim de criar momentos de discussão e brainstorming que contribuem para um produto final ainda melhor.

Você pode utilizar vários tipos de ferramenta para criar um wireframe, até mesmo um quadro branco e pincéis. Aqui na Supersonic, utilizados o Adobe XD. O importante é que seja fácil de editar, mudar, comentar e escrever em cima. No entanto, nem todos os wireframes se propõem a ter o mesmo nível de complexidade.

Dependendo dos objetivos do projeto, será necessário criar wireframes mais fiéis à ideia do produto final. No caso do processo de CRO, que visa otimizar páginas para torná-las mais capazes de gerar conversões, muitas vezes, é preciso criar wireframes mais elaborados.

Essas entregas seriam o que chamamos de “wireframes de alta fidelidade” e apresentam um pouco mais do que apenas a visão geral sobre uma interface. A ideia é trazer características do que seria a página final, como disposição, tamanhos e, principalmente, textos.

O CRO envolve muito mais do que apenas o design de uma interface. Além disso, a metodologia é baseada em análises e testes. Com isso, criar um produto mais elaborado do que um rascunho contribui para comunicar melhor o que queremos fazer e, especialmente, o porquê das escolhas que fizemos.

O wireframe no processo de CRO

Para entender melhor o papel do wireframe no processo de CRO, vamos listar o que ele envolve. 

O primeiro passo de qualquer projeto com foco em otimizar conversões é o diagnóstico. Esse momento é crucial e é aqui que profissionais de otimização analisam todos os pontos da interface, suas vulnerabilidades, métricas e oportunidades, além do comportamento do usuário.

Essa etapa leva bastante tempo e nela já começam a ser formadas as primeiras hipóteses. Por que uma página converte mais que a outra? Em que ponto os visitantes mais costumam abandonar um site? Isso tudo ainda é complementado com informações sobre a própria empresa: objetivos, contexto atual, possíveis ideias que já tenham surgido, etc. 

Aqui também podem acontecer pesquisas com o usuário para entender suas dores, necessidades e as dificuldades que enfrenta ao acessar a interface. Isso depende das especificidades do projeto.

Quando o site ou a landing page não existe ainda, essa etapa consiste apenas no estudo do negócio e quais são os objetivos da interface que será criada. O ideal, então, é rodar testes posteriormente, quando tudo já estiver implementado.

Muito bem. Com essa etapa feita, teremos base para criar a priorização de hipóteses. Sempre que utilizamos testes A/B para aumentar a taxa de conversão de uma interface, nos concentramos em uma mudança de cada vez. Dessa forma, fica bem mais claro o que ocasionou aquela variação nos resultados. 

E é aqui que o wireframe entra. Depois de priorizar e escolher o que será alterado ou definir como deve ser a nova interface, passamos para sua criação. O wireframe dentro do processo de CRO deve conter textos, elementos de interação e cores que permitam observar a hierarquia e outras características que ainda não correspondem ao layout, mas são um bom indicativo.

Em caso de testes baseados em páginas que já existem, nem sempre é necessário criar um wireframe. Já falei por aqui do passo a passo para criar um teste e citei o Google Optimize, que permite a configuração sem necessidade de qualquer atividade de desenvolvimento ou programação.

Veja um exemplo de wireframe e o que a página se tornou depois:

Depois de tudo isso, a interface é desenvolvida e colocada no ar. No entanto, os testes devem continuar. O processo de CRO não tem fim e deve fazer parte do seu dia a dia. Afinal, enquanto a taxa de conversão não atingir o número utópico de 100%, há espaço para melhorias.

Como criar um wireframe

Agora você já sabe onde o wireframe entra no processo de CRO. Vamos aprofundar um pouco no que consiste o processo de criação do wireframe em si. Apesar de exigir habilidades de designer, você não precisa ser um para construir o wireframe.

Comece sempre por um rascunho bem simples, que sirva para colocar a ideia no papel. Passe essas ideias então para uma ferramenta – sugeri acima o Adobe XD. É nesse produto que você e seu time vão trabalhar: definindo textos, posição dos elementos, etc. Tudo com base nas análises feitas anteriormente. Depois disso, é feito o layout. 

Algumas dicas que podem ser úteis para você criar seus wireframes:

• Comece por um wireframe focado em dispositivos móveis. O que chamamos de “mobile first” é a prática de criar primeiro em telas pequenas e só depois expandir para as maiores. O mobile só ganha mais adeptos e é muito mais simples adaptar um conteúdo “pequeno” em uma tela maior do que o contrário. Entenda melhor esse conceito e como aplicá-lo aqui.
• Wireframes são feitos para discutir as ideias do layout que será criado, então, faça isso. Não tente agilizar demais o processo. O ideal é reservar um tempo na análise e debate dos elementos enquanto eles ainda estão apenas no wireframe e não no layout completo. Assuma que o primeiro wireframe quase nunca estará “correto”.
• Aplique o copywriting real na construção do wireframe. Mesmo que seu objetivo não seja construir com alta fidelidade, é importante incluir os textos reais e fugir do “lorem ipsum”. Dessa forma, você consegue visualizar os tamanhos e os encaixes. Além disso, o copy é a parte mais importante do CRO, o que convence o usuário a executar tarefas, portanto, precisa de uma construção cuidadosa. Confira 7 técnicas de copy aqui.
• Sempre teste as interfaces que criar. Já falei sobre isso acima, mas não custa reforçar. Todo produto digital precisa passar por testes e ser otimizado. Só assim você alcança os objetivos propostos e garante que aquilo foi mesmo criado para o público em questão.

Wireframes + CRO = resultados impressionantes

Como você pode observar neste artigo, o wireframe é um item essencial do processo de CRO, seja para criar novas interfaces ou para alterar o que já existe. Utilizando os wireframes dentro de um contexto completo de CRO, você garante resultados muito melhores.

Se você ainda não tem muita certeza sobre o CRO, recomendo que faça o download do nosso e-book: 30 dicas para aumentar as conversões hoje mesmo. Trata-se de um compilado com exemplos e motivos para você testar dezenas de ideias na sua interface. Escolha uma delas e aplique no seu site, seguindo os preceitos que comentei aqui e o passo a passo para rodar um teste A/B. Depois, conte para nós o que achou e como foi a experiência. 

Preencha o formulário abaixo e faça o download gratuitamente.

E antes de ir embora, que tal fazer um teste para descobrir se o CRO é a estratégia certa para você? Descubra em 1 minuto: