info 7

A importância do Layout

O layout não é só o que o cliente vê mas também o que ele sente. Este layout tem que estar em sintonia com a estética e a interação do cliente com o site e a loja virtual. Para garantir que nossos clientes tenham uma boa experiência de navegação em seu site ou loja, devemos prestar atenção na disposição do layout que foi desenvolvido. É uma responsabilidade que esta interação seja agradável e simples.

 

1. ESTUDOS E ATITUDES DO CLIENTE E PÚBLICO ALVO QUANTO A USABILIDADE.

 

Velocidade de Navegação

 

Atualmente vivemos a era dos Smartfones, estes cada vez mais avançados tecnologicamente e com hardwares poderosos para atender usuários cada vez mais exigentes. Tendo em vista essa informação a motivação de melhorias tanto em velocidade quanto em funcionalidade aumenta cada dia mais.

O blogueiro Henrique Carvalho afirmou em seu site Viver de Blog que no ano de 2013, até o mês de julho, os usuários de smartphones e tablets foram responsáveis por 17% da navegação web. O mesmo nos afirma que 16% deste tipo de usuário faz compras online e 27% deles não estão satisfeitos. O motivo dessa insatisfação são os problemas nos layouts dos sites, que em muitos casos ainda não estão preparados para este tipo de consumidor, o que causa problema na navegação e lentidão, sendo a lentidão como problema numero um apontado pelos usuários mobile.

Testes feitos em vários sites demonstram que o cliente está disposto a esperar no máximo 8,6 segundos antes de abandonar uma página que não carrega. Contudo mesmo com a informação citada acima, 40% dos usuários abandonam sites que demoram mais que 3 segundos em seu carregamento.

A influência das cores

Segundo Wilson Garcia da agência Neticom Brasil o estudo da Programação Neurolinguística demonstra que seres humanos são susceptíveis ao campo visual e as cores. Diversos outros estudos mostram que as cores podem agir diretamente sobre as emoções.

É estritamente necessário fazer a combinação de cores corretas para atingir o público alvo na internet, pois é necessário que o layout do site possua cores agradáveis, que aproximem o usuário e que lhe traga confiabilidade enquanto navega ou quando compra algo online.

Uma pesquisa do site Viver de Blog revela que 84,7 dos consumidores avaliam a cor como item decisivo na escolha de um produto

 Infográfico – [Infográfico] A Psicologia das Cores no Marketing e no Dia-a-Dia.

Figura 1: (Parte do) Infográfico – [Infográfico] A Psicologia das Cores no Marketing e no Dia-a-Dia.
Fonte: Carvalho (2013)

Se for analisado o dia a dia de cada um, pode se perceber o quanto as cores fazem a diferença em escolhas. As cores influenciam na leitura, na aprendizagem e na compreensão. Os anúncios coloridos tendem a ser 42% mais eficientes que os em preto e branco.

Após visualizar um produto, o subconsciente leva em média 90 segundos para que use esta informação para subjugar um produto e essa informação está ligada a de 80% das pessoas afirmarem que as cores influenciam na credibilidade de uma marca.

(Parte do) Infográfico – [Infográfico] A Psicologia das Cores no Marketing e no Dia-a-Dia.

Figura 2: (Parte do) Infográfico – [Infográfico] A Psicologia das Cores no Marketing e no Dia-a-Dia.
Fonte: Carvalho (2013)

Segundo a grande empresa no ramo de desenvolvimento de sites de todos os nichos, a WIX, a cor branca simboliza pureza, integridade e clareza, e por isso é uma cor muito usada na maioria dos sites de e-commerce. Um bom uso dele é incluir espaço em branco (vazio) em torno de seu conteúdo, fazendo com que os clientes não se sintam “encaixotados”.

Layouts Responsivos

Apesar de estarmos vivenciando a era mobile como citamos acima, ainda encontramos por ai sites e e-commerces despreparados, muitos não possuem layouts responsivos. E isso é um dos grandes, senão o maior motivo, para usuários desistirem destes sites.

Dados do site Viver de Blog informam que em 2013, de todas as vendas realizadas pelo varejo 15% delas foram provenientes de dispositivos móveis.

(Parte do) Infográfico – [Infográfico] Mobile Marketing: O Futuro do Marketing Através dos Aparelhos Móveis

Figura 3: (Parte do) Infográfico – [Infográfico] Mobile Marketing: O Futuro do Marketing Através dos Aparelhos Móveis.
Fonte: Carvalho (2014)

O mesmo autor descreveu que 61% dos possíveis clientes deixam de acessar sites que não estão adaptados a dispositivos móveis.

A agência IO Comunica simplifica a definição do layout responsivo como um quebra cabeça que precisa ser ajustado ao tamanho do espaço permitido para ser montado.

Design Responsivo a arte de montar os blocos

Figura 4: Design Responsivo a arte de montar os blocos.
Fonte: IO Comunica (2014)

 

2. O MERCADO DE E-COMMERCE, AS GRANDES LOJAS DE DEPARTAMENTOS E AS VENDAS DE ELETRODOMESTICOS.

Os clientes do mercado de eletrodomésticos estão cada vez mais interessados na unificação de lojas online e offline. Gigantes do mercado web como a Amazon e o Ebay estão deixando de ser exclusividade no mercado web e criando lojas físicas e muitas lojas físicas estão expandindo seus negócios criando lojas virtuais e atrelando sua marca a elas.

Como era de se esperar não há a possibilidade de iniciar outro capitulo em um trabalho voltado ao layout de e-commerce sem falar mais uma vez dos dispositivos móveis. Um exemplo de como anda o mercado das grandes lojas de departamentos as quais vendem eletrodomésticos, é o abordado pelo site Crowdtask que usa o caso de sucesso da grande loja britânica John Lewis como exemplo a ser seguido.

A John Lewis expôs os números de 2013 onde analistas se espantaram ao perceberem que 3/4 do trafego do site no natal veio de dispositivos móveis. A partir deste dado foi analisado que a loja em questão trabalhou bem o layout de seu site para atender clientes de todos os dispositivos, agregando experiências agradáveis aos usuários onde por exemplo, permite que o mesmo, adicione seu departamento favorito a tela inicial do site, comparadores de preços e um serviço simplificado de serviço de atendimento.

site da loja John Lewis em dispositivo móvel.

Figura 5: site da loja John Lewis em dispositivo móvel.
Fonte: CrowdTask(2014)

Novamente segundo Henrique Carvalho do Viver de Blog, demonstra em um dos infográficos que a Amazon aumentava 1% da receita total a cada 100ms de melhoria na velocidade de navegação de seu site.

(Parte do) Infográfico – [Infográfico] Otimização de Sites: Como Subir Para o Topo do Google, Aumentar Conversões e Vender Mais.

Figura 6: (Parte do) Infográfico – [Infográfico] Otimização de Sites: Como Subir Para o Topo do Google, Aumentar Conversões e Vender Mais.
Fonte: Carvalho (2014)

 

3. LAYOUT E MODELOS DE PÁGINAS.

Após analisarmos os dados citados em capítulos anteriores podemos chegar a conclusão que inicialmente é estritamente necessário quem se utilize um layout responsivo

info 7

Figura 7: Exemplo de Layout Responsivo

Outro ponto a ser escolhido são os elementos da loja, os quais são muito bem abordados pela Agência Tray Commerce.

Customização dos elementos da loja

Figura 8: Customização dos elementos da loja.
Fonte: Tray Commerce (2014)

Mais uma etapa importante para definir em um e-commerce é o Topo e o Rodapé do site, onde no topo ficaram as informações mais importantes como a logomarca da empresa, a opção de pesquisa dentro do site, o carrinho de compras alguns menus secundários e o rodapé é onde se encontra menus de navegação, contatos, informações sobre o tipo de pagamentos, um pequeno mapa do site como exemplo na Figura 9.

Topo e RodapéFigura 9: Topo e Rodapé.
Fonte: Tray Commerce (2014)

Menus personalizados e atrativos, de fácil navegação e os mais usuais possíveis para atender até os clientes com maior dificuldade.

info 10

Figura 10: Menu de navegação.
Fonte: Tray Commerce (2014)

Destaque para os principais produtos, com foco nas promoções ou novidades do mercado.

Ofertas

Figura 11: Ofertas.
Fonte: Tray Commerce (2014)

Atualmente um dos itens mais importantes é a integração com as Redes sociais e isso não pode faltar no Layout do site

Redes Sociais

Figura 12: Redes Sociais.
Fonte: Tratyvet (2014)

Quanto a página do produto é essencial que ela possua, varias fotos dos produtos com a opção de zoom para que possa ser visualizado detalhes, se possível até vídeos informativos sobre o mesmo, também é necessário uma descrição do produto em destaque, de uma forma que o cliente não tenha dúvida ao finalizar a compra. Outro fator necessário são produtos relacionados para que o cliente possa conhecer variados produtos disponíveis em sua loja. E por fim e mais importante um botão  de compra que passe confiabilidade ao cliente.

Segue abaixo a tela de um produto do Site Tratyvet cosmético animal, desenvolvido por mim, onde vários aspectos citados no trabalho foram abordados.

Produto

Figura 13: Produto.
Fonte: Tratyvet (2014)


4. CONCLUSÃO

 

Para ter um Layout eficaz, é preciso trabalho árduo e muitos testes. Usabilidade, velocidade de navegação e seguir as tendências são essenciais para conseguir agradar, leitores, clientes e compradores na internet. Ter um site, loja ou sistema responsivo deixou de ser um diferencial para ser obrigatório, devido ao crescimento da quantidade de dispositivos móveis. Se sua empresa possuí sites com layouts defasados ou que não seguem as regrinhas básicas  descritas no artigo é hora de atualizar ou criar um novo site! Pense nisso, SOLICITE UM ORÇAMENTO NA FOCA SISTEMAS e conheça nosso trabalho através do nosso portfólio.

 

 

 

5. REFERÊNCIAS

 

Carvalho, Henrique, [INFOGRÁFICO] OTIMIZAÇÃO DE SITES: COMO SUBIR PARA O TOPO DO GOOGLE, AUMENTAR CONVERSÕES E VENDER MAIS. Disponível em < http://viverdeblog.com/otimizacao-de-sites/>

Garcia, Wilson, A influência que o uso adequado das cores pode exercer sobre os visitantes de seu site. Disponível em <http://www.neticombrasil.com.br/blog/a-influencia-que-o-uso-adequado-das-cores-pode-exercer-sobre-os-visitantes-de-seu-site>

 

WIX, Usando As Cores Certas Para O Seu Site. Disponível em <http://pt.wix.com/blog/2012/12/usando-as-cores-certas-para-o-seu-site/>

 

Carvalho, Henrique, [INFOGRÁFICO] MOBILE MARKETING: O FUTURO DO MARKETING ATRAVÉS DOS APARELHOS MÓVEIS. Disponível em <http://viverdeblog.com/mobile-marketing/>

 

IO Comunica, Design Responsivo não é mais tendência e sim uma necessidade. Disponível em <http://www.iocomunica.com.br/design-responsivo-uma-necessidade/>

 

Crowdtask, Cinco lições de estratégia para e-commerce mobile da loja John Lewis. Disponível em <http://crowdtask.me/conteudo/cinco-licoes-de-estrategia-para-e-commerce-mobile-da-loja-john-lewis/>

 

Tray Commerce,Disponível em < http://www.tray.com.br/turbine-sua-loja/design/>

 

Tratyvet Cosmético Animal,Disponível em <http://www.tratyvet.com.br>

 

Me siga

fabio oliveira

Formado pela FATEC Ourinhos em Desenvolvimento de Jogos Digitais, me apaixonei por desenvolvimento de sites e sistemas para WEB. Tratava isso como um hobbie até minha esposa incentivar em me especializar e começar a lucrar com isso. Atualmente cursando especialização em Comunicação e Marketing para Mídias Digitais
Me siga

Latest posts by fabio oliveira (see all)