Blog da Loja Integrada

Como aumentar sua conversão através do Layout

Lembra que a Loja Integrada fez uma votação para saber que tema relacionado ao e-commerce você gostaria de aprender no Blog da Loja Integrada? Caso não lembre, só clicar aqui. 

Pois bem, hoje falarei de layout. Com dicas práticas, você já vai dar um tapa no visual da sua loja e entender como o layout pode fazer a diferença no seu negócio. 

Com simples alterações por meio do painel administrativo da Loja Integrada, será possível aumentar a sua conversão ao melhorar a navegação de seus clientes.

Nesta primeira aula, iremos trabalhar em: Administração > Minha Loja > Visual da Página.
Imagem do menu

1 – Disposição do Layout

A escolha e definição do layout é uma das principais preocupações que se deve ter antes de abrir um e-commerce. Devemos levar em consideração que esta parte é a disposição dos “móveis” da sua loja, ou seja, se a sua escolha for bem feita, seus clientes terão facilidade para encontrar o que procuram.

Então vamos para o que interessa:

Tamanho do layout: Recomendo que usem o tamanho médio (1180px largura) por 2 fatores:

  •  A maioria dos usuários (cerca de 80%) no Brasil usam uma resolução acima de 1180px de largura, assim quando um dispositivo que use tais resoluções acessar seu loja virtual, a tela será preenchida com seus banners e produtos.
  • O layout da loja Integrada é responsivo (significa que ele se adapta ao tamanho do monitor do cliente), portanto, irá se adaptar à várias resoluções inferiores à 1180px largura.

Disposição do Logotipo: em vários estudos realizados com softwares especializados como o clicktale, percebemos que o primeiro ponto a ser observado pelo usuário em qualquer site, é o canto superior esquerdo, e logo após o centro do topo. Por isso, na maioria das lojas, o logo está no canto superior esquerdo. Viu, como tudo tem uma explicação?

Disposição dos Itens da loja + Coluna Lateral:  antes de mais nada, você deve fazer uma boa pesquisa em seus concorrentes, e procurar observar como eles organizam os produtos, banners, menus, etc, e em cima desta pesquisa procurar fazer algo semelhante.

Momento, você pergunta: Calma, mas eu não estaria copiando meus concorrentes?

Não não, fique tranquilo, primeiramente estamos vendo como é a DISTRIBUIÇÃO de seu e-commerce. Sempre que vamos em um supermercado (seja ele em qualquer lugar do mundo), os produtos estarão dispostos em prateleiras e separados por setores, se for em uma loja de roupas por exemplo, tudo vai estar em cabides e prateleiras, e separados por masculino, feminino, camisetas, calças… O que devemos notar aqui é que cada nicho de mercado já tem uma certa “cara” no e-commerce brasileiro, e que não devemos fazer uma mudança muito brusca, pois isto pode dificultar a busca do cliente por produtos em sua loja virtual.

Veja, na imagem abaixo, disposições diferentes por setores distintos. É importante saber como seu público costuma procurar os produtos.

img1

2- Cor Principal + Estilo do Tema:

Antes de escolhermos a cor principal, devemos definir as cores do site. Geralmente usamos 2 ou 3 cores para o layout de um e-commerce, a fim de mantermos um layout limpo fugindo da poluição visual, que é tão característica nos pequenos e-commerces. As cores se dividem em 1 (uma) cor principal e 1 (uma) ou 2 (duas) cores secundárias.

Momento, você pergunta: Ok, mas quais cores devo usar?

A maioria das marcas escolhem o conjunto de cores que lembram sua própria marca. Por exemplo, se minha marca é vermelha, amarela e branca, meu layout também vai ter tons de cores próximos a esses. Sabia também que cada ramo tem suas cores? Sim, porque cada cor gera um tipo de sensação diferente. Vermelho é muito usado em redes de fastfood, restaurantes e lanchonetes pois realçar a fome. Pesquise o sentimento que as cores podem passar, e as use corretamente no seu negócio.

ps.: muitas vezes usamos uma escala de cinza para acentuar detalhes, não necessariamente o contando como uma cor, mas sim como base para acabamento de qualquer layout. Confira o exemplo abaixo.

img2

Podemos notar que a cor principal é o rosa (usada na logo) e as cores secundárias são o preto e o branco. Notamos também que o cinza é usado para os detalhes, ajudando a dar destaque ao branco. Para este site de exemplo, foi usado o ROSA como cor principal e CORES CLARAS para o estilo do tema.
Escolha um tema para seu site (claro ou escuro) e sua cor principal, geralmente será a cor da sua logo.

3 – Backgrounds (significa “fundo” em português)

Temos aqui a ferramenta administrativa mais importante para personalização da Loja Integrada, a qual pode ser fantástica, deixando seu layout maravilhoso, como também pode ser um desastre e um show de horrores, espantando seus clientes. Então muita cautela e cuidado na hora de utiliza-la.

img3

Background para toda a loja: neste, geralmente se usa apenas cor, conforme o tema escolhido (um cinza claro para estilo de tema CORES CLARAS, cinza escuro para estilo de tema CORES ESCURAS), mas caso você queira usar imagem, deve ser algo bastante sutil.

Background Topo: você deve levar em consideração a disposição dos elementos do topo para poder fazer uma imagem e aplicá-la no contexto, podendo dividir e dar maior fluidez ao seu layout. Aconselho medir e testar bem a imagem a ser usada, até chegar ao tamanho adequado, colocando ela para se repetir horizontalmente.

Background rodapé: Podemos aplicar os mesmos conceitos do fundo do cabeçalho para o rodapé, mas lembre-se sempre, muitas vezes, menos é mais, então veja bem qual cor ou imagem vai usar para tal personalização.

4 – Fontes:

Este menu é dividido em Fonte Primária e Títulos.

Fonte primária: Pode ser utilizada a Arial ou Verdana, que são facilmente interpretadas por diferentes navegadores.

Fonte dos títulos: Aqui você pode dar um bom toque de personalidade para o seu site, escolhendo alguma fonte diferente, selecionando ela bem fina ou bem grossa, e também deixando todas letras (apenas títulos) em maiúsculo. Faça o teste e confira os resultados.

img4

5 – Listagem de produtos:

Quantidade de produtos por linha: Recomendo usar 3 produtos por linha se usar menu lateral ou 4 se não usar menu lateral.

Tipo de listagem: Esta opção é muito boa e serve muito bem para o seu marketing diário.

Os produtos disponíveis na página inicial são considerados sua VITRINE, e aí vai um conselho, mude sua vitrine TODOS os dias, isso mesmo, assim você torna seu site mais ativo, e sempre com “novidades” para o cliente. Recomendo usar o produtos em destaque como configuração, para ficar mais fácil essa troca diária.
Uma boa dica também é trocar seus banners pelo menos uma vez por semana.

Sim, vai dar trabalho, mas é uma forma de deixar sua loja virtual atrativa sempre. Vai valer a pena 😉

Pra você ter uma ideia, grandes e-commerces mudam seus banners 1, 2 ou 3 vezes ao dia.

Quantidade: Vai muito do gosto do cliente, mas a média nacional varia entre 9 e 20, dependendo da quantidade de itens por linha.

img5

Pronto! \o/

Agora você já tem boas noções de como o Layout pode influenciar nas suas vendas! Que tal se aprofundar um pouco mais no assunto? A internet é um universo enorme de conteúdos. Se aplique! Seu e-commerce depende de seus conhecimentos.

E lembrando sempre: a conversão (quantidade de compras divida pela quantidade de clientes que acessam sua loja) é resultado de inúmeros fatores além do layout, como o preço, produtos, marketing, condições de pagamento, entre outros. Imagine que e-commerce é com um avião, é um conjunto de vários fatores que fazem o avião decolar. Ajuste todos eles, e faça a diferença no mercado.

Leia mais

Artigo anterior

Dicas de como tirar boas fotos de produtos

Leia mais

Próximo artigo

Importância do Certificado SSL para sua loja virtual

Deixe seu comentário