Design para e-commerce: estética ou conversão?

Não adianta ser lindo e não ter conteúdo, principalmente na área de Otimização da Taxa de Conversão (CRO), e todo site que tem como foco aumentar a taxa de conversão de leads ou vendas deve entregar um design voltado para a conversão. Por isso, quem faz o design de um site tem o desafio de unir a estética a uma experiência fluida e que faça sentido, ou seja, que coloque o usuário no centro e se preocupe de verdade com a usabilidade. 

Para te ajudar a entender melhor como funciona um design para conversão, listaremos 3 princípios de um bom design para e-commerce. É importante ressaltar que não se trata de regras, afinal, não existe isso no CRO. São apenas direcionamentos que você pode utilizar para criar uma boa experiência para o seu usuário.

O ideal é sempre testar para entender quais são as melhores decisões de design. Além disso, é preciso implementar uma rotina de experimentação que permita encontrar bons formatos e testar ideias para o convencimento da sua audiência.

1) Hierarquia do site

Consiste na forma de apresentação do site para os consumidores e é um dos fatores mais importantes do layout. Afinal, através da hierarquia, você indica como o usuário deve se orientar.

A estrutura do site é importante, principalmente, pela sua maior probabilidade de sucesso em termos SEO. Ou seja, quando no design para e-commerce há uma boa hierarquia do site, torna-se mais fácil ser indexado e reconhecido pelos motores de busca como algo que faz sentido. E isso poderá privilegiá-lo nos resultados de pesquisa, causando desvantagem aos outros. 

Além disso, se há uma boa hierarquia no site, o usuário consegue navegar por ele com maior facilidade, encontrando o que procura de forma mais rápida. Como o cliente deve estar sempre no centro de sua estratégia, a experiência dele é muito valiosa. 

Existem vários elementos que definem a hierarquia do site, e para estabelecê-los é necessário saber onde você quer que o usuário clique. É exatamente por isso que você deve atuar também com um copywriting de qualidade.

Visualização da página

De forma geral, usuários tendem a utilizar dois padrões de visualizações, que são "F” e ”Z”. O padrão F, geralmente é aplicado em páginas com mais textos, como artigos ou posts de blog. 

Contudo, o nosso foco é a conversão na hierarquia do layout do seu e-commerce, certo? Portanto, você deve utilizar o padrão Z, que é utilizado nas páginas de sites, anúncios e banners.

Os olhos do leitor irão visualizar a sua página, primeiramente no topo, dirigindo-se para baixo, no canto ou posto na diagonal e segue olhando em linha reta na parte inferior da página, para concluir sua análise inicial. Por isso, você deve se atentar ao posicionamento dos elementos mais importantes nesses pontos, para conseguir os convertê-los.

Tamanho das fontes

A regra primordial sobre o tratamento das fontes é simples: os usuários leem as coisas grandes primeiro. Isso significa que uma palavra de tamanho maior pode ser localizada no canto superior direito da tela, sendo a primeira coisa que o usuário irá ler. 

Dessa forma, considere que o tamanho do texto pode dar ênfase ao conteúdo, levando a mensagem para o seu cliente de forma mais clara e significativa.

Tipografia

A escolha das fontes essenciais para definir uma boa hierarquia do site. Entre as características mais relevantes, está o peso. Ou seja, a largura dos traços que compõem uma letra e o estilo, além de outros atributos como itálico negrito que também podem ser significativos.

Cores

Não podemos deixar de mencionar as cores, que podem ser utilizadas para chamar atenção do usuário. Elas também podem auxiliar o leitor a entender o seu nicho de mercado e o clima do site. Por exemplo:

• Vermelho: agressividade (chamar atenção);
• Amarelo: intensidade (demonstrar expressividade);
• Verde: natureza (passa sensação de calma).

2) Regra dos três terços

É o recurso de composição no design para e-commerce que te permite organizar elementos de uma imagem de forma visualmente agradável e atrativa. Significa que a imagem deve ser dividida em 9 quadrantes iguais, através de duas linhas horizontais e verticais semelhantes.

Esse é um ótimo artifício para utilizar no design para e-commerce. Ele faz com que o cliente possa contextualizar a oferta, no entanto, a imagem deve ser atraente e explicativa. 

O objetivo é concentrar um ponto de atenção na imagem no cruzamento das linhas. Em todo caso, as guias também podem ser aplicadas como linhas de composição e organização. Assim, torna-se uma imagem chamativa para atrair clientes e convertê-los, sem abrir mão da estética.

3) Espaços brancos

Significa a parte de uma página que fica em branco, possibilitando que o usuário entenda melhor o significado de cada elemento, além de evitar a sobrecarga de informação.

Você já ouviu a famosa frase "fiquei entediado, tinha informação demais"? Bom, essa frase também pode trazer um sentido muito forte no design para e-commerce. É importante saber que, hoje em dia, os usuários podem rapidamente sair do seu site e procurar outros que sejam de fácil visualização.

Dessa forma, você perde chance de conversão, e o pior, até mesmo para uma empresa concorrente. Por isso, a grande importância do "respiro" para interfaces de alta conversão, além de que não é apenas uma tese de embranquecer um espaço, mas também de dar ênfase em gráficos, imagens, títulos, cores, entre outros elementos. 

Uma página extremamente cheia, provoca aparência desorganizada e de difícil leitura. Ainda que você acredite, incluir espaços em branco no design para e-commerce pensando em conversão não quer dizer que você esteja reduzindo conteúdo. Ao contrário, significa deixar o seu conteúdo mais rico e evitar que seu site seja ignorado, causando desinteresse nos usuários.

4) Dicas Bônus: Lei de Hick

Como bônus, resolvemos destacar a Lei de Hick, que consegue "furar a bolha" do design para e-commerce, alcançando todas as frentes de criação de uma interface. Ela estabelece quais e quantos produtos serão necessários colocar, qual será o tamanho do conteúdo, além da quantidade de imagens que você pretende incluir. 

Sendo assim, segundo a Lei de Hick, quanto mais opções um usuário tiver à disposição, mais será o tempo de conversão. Portanto, não deixe de fazer um esforço pelo usuário e deixe menos escolhas à vista.

Inclusive, este é um princípio da análise heurística, atividade que integra a rotina de CRO e que tem foco em atender os principais problemas e uma interface, que compõem o conjunto de instruções para melhorar a conversão.

Seja lá qual for o princípio de um bom design para e-commerce que você deseja escolher para ajudar na conversão de clientes, esses exemplos citados podem oferecer bastante inspiração para você. Não é necessário decidir entre estética e conversão, você pode incluir esses dois elementos em seu site e vender muito mais!