Analisando o site da Coca-Cola

Olá, tudo bem? No vídeo de hoje iniciamos uma nova série aqui em nosso canal. Nela, analisarei o site de grandes empresas (como a Coca-Cola) e apontarei para vocês o que é legal neles e o que é interessante possuir.

O primeiro site a ser analisado é o da gigante Coca-Cola.

Análise do site

Um ponto importante a ser visto é que o menu está no canto superior esquerdo – e isso se dá por um motivo: várias pesquisas mostraram que primeiro lugar para o qual o internauta olha é exatamente esse canto esquerdo.

Já que o menu não está aberto na parte de cima e o usuário poderia ficar perdido, colocaram-no nesse local exatamente por isso.

Não sei se foi a ideia do design (acredito que sim), mas se não foi, ele acertou.

Observe que o logotipo da empresa está bem no centro e grande.

Por quê?

Para reforçar a marca da empresa Coca-Cola.

Aqui embaixo, vemos 10 artistas.

Essa é uma campanha que está sendo realizada pela Coca, em que cada artista canta sua música e os fãs dos artistas irão votar na música de que mais gostaram.

No final, teremos um vencedor.

O artista com mais votos irá gravar um clipe para a campanha da Coca – mas é claro que existem mais coisas envolvidas.

Esse site está 100% focado na campanha, por isso o menu está escondido e o foco do banner é direcionado exclusivamente a ela.

No lado esquerdo, vemos um textinho – não sei se dá para observar no vídeo, visto que está com uma baixa qualidade, para que a imagem fique mais otimizada e carregue mais rápido.

Mas acredito que um olho não treinado não notará diferença na qualidade da imagem. Nem sei se você consegue notar nesse vídeo, mas no monitor é possível ver que ela está baixa.

Observe que a foto está em preto e branco.

Por quê?

Porque o foco aqui é a marca Coca-Cola e não os artistas, por isso que as escritas da Coca estão todas em vermelho – para ficarem em foco.

É importante levar isso em conta no seu site: qual é o foco dele?

Produto, divulgação de campanha ou sua marca?

Aqui também temos um segundo banner, no qual é bem legal observarmos algumas coisas: temos esse botão vermelho grande escrito “Comprar agora”, chamado de Call-To-Action, ou seja, chamada para uma ação.

Qual a chamada para a ação aqui?

Comprar agora.

O banner estimula quem está no site a fazer a compra.

Isso é interessante: todo banner deve levar o usuário para uma ação.

Mas, João, por que esse primeiro banner não tem o Call-To-Action?

Porque aqui não é necessário que o usuário seja levado a lugar nenhum. Todas as informações estão logo abaixo: onde veremos daqui a pouco.

O segundo banner precisa.

Por quê?

Não tem muito a ver com aquela primeira campanha da Coca-Cola. Acredito que seja uma nova.

Algo bem legal é que aqui é possível realizar a ação. Por exemplo, se eu clicar em “Comprar Agora”, serei direcionado à loja da Coca-Cola, onde consigo realizar a compra de um produto personalizado.

É só digitar na caixa que aparece o meu nome. Olha que legal, a garrafa já fica personalizada com meu nome e eu consigo comprá-la.

Voltando ao banner…

Todo site deve contar com um Call-To-Action para levar o usuário a realizar uma ação. É isso que leva à conversão.

Se tivesse aqui um botãozinho pequeno e simples, ninguém iria notar – um botão GRANDE E CHAMATIVO converte mais, isso já é comprovado.

Indo para o site em si: já nos deparamos com um vídeo tamanho família.

Uma observação bem legal: meu monitor é bem grande (23”) e podemos notar que o site pega a tela toda. Ele foi desenvolvido pensando em vários tamanhos de tela.

Logo abaixo vemos o vídeo da campanha: observe que a identidade visual da Coca-Cola é mantida, tem bastante vermelho.

Descendo mais, temos a Coca-Cola FM, referente à campanha.

Aqui são tocadas as músicas, que é onde você vai votando se gostou ou não delas.

Também é possível abrir a FM em uma janela à parte, compartilhar no Twitter, no Facebook.

Por que tem esses “compartilhar” aqui?

Porque através deles, a Coca-Cola tem a ideia de viralizar essa campanha. Ela facilita o compartilhamento para que mais pessoas fiquem sabendo e que mais pessoas participem da campanha. Automaticamente, a marca Coca-Cola é mais divulgada.

Embaixo podemos notar uma integração com as redes sociais: o que é postado lá acaba aparecendo aqui.

Isso aqui não fez muito sentido para mim, porque são 5 vídeos iguais, inclusive já dei “play” neles e um nem funciona. Não sei qual foi a ideia quando o site foi desenvolvido, mas não está funcionando legal. É algo que não faz diferença para o usuário.

Por isso esse espaço poderia ter sido aproveitado melhor.

Mas enfim, vai saber qual foi a ideia, né?

Isso é um ponto importante.

Suponhamos que a ideia fosse essa mesmo, mas se o internauta acessou, ficou confuso e não conseguiu entender, é sinal de que não foi bem planejado, já que não existe ninguém para explicar o que está acontecendo – tudo deve ser intuitivo.

Mais abaixo, temos o “ver mais” e as marcas que estão debaixo do guarda-chuva da Coca-Cola.

Bom, pessoal, a análise do site em geral é essa.

PageSpeed Insights

Vamos agora ver o resultado desse site no “PageSpeed Insights” do Google, que nada mais é do que um teste realizado pelo Google para saber a qualidade do site, em velocidade e otimização.

O site mobile (a parte responsiva do site da Coca-Cola) possui nota 57/100, considerada baixa.

A maioria dos erros encontrados são de otimização de códigos de imagens, ou seja, o site não está bem otimizado.

Na versão desktop, nos deparamos com um cenário não muito diferente: nota 66/100 e com o mesmo problema – as imagens precisam ser compactadas, o código HTML, JS.

Para que?

Para que o site carregue mais rápido, fornecendo informações mais rapidamente para o usuário.

E foi por isso que a ferramenta avaliou como 66/100.

O ideal seria acima de 80 – tanto para o mobile quanto para o desktop.

Posicionamento no Google

Vamos falar um pouquinho agora sobre posicionamento.

É o seguinte: eu digitei “refrigerante cola” no Google.

Vocês observarão que o site não aparece entre os 10 primeiros resultados.

Por que estou mostrando isso?

Olha, uma gigante como a Coca-Cola não conseguiu “ranquear” o domínio principal dela na primeira página através da pesquisa de uma palavra-chave que tem mais a ver com seu negócio.

Em contrapartida, encontramos um texto do Wikipedia falando sobre a Coca-Cola, que já ficou gravado no Google.

Por quê?

Ele já entendeu que a maioria das pessoas que digita “refrigerante cola” está procurando informações sobre a Coca-Cola.

Por mais que não seja verdade, ele o considera, através de testes que devem ter sido realizados, já facilitando e trazendo aqui informação da Coca-Cola pelo Wikipedia.

Por isso é importante observarem que mesmo que a empresa seja grande, não é garantido que ela vá ficar na 1ª posição do Google – e nem mesmo na 1ª página.

Existem diversos resultados, inclusive, que nem sei se são bons ou ruins sobre ela – são várias as coisas relacionadas à Cola, mas nada sobre a Coca-Cola.

Independentemente do tamanho da empresa, se não for investido em produção de conteúdo, ranqueamento, otimização, você não irá aparecer na 1ª página.

Responsivo

Bom, pessoal, agora para finalizar vamos ver o site no modelo responsivo, que é o site da Coca-Cola para celular.

O que está aqui é uma simulação, tá?

Vou recarregar a página.

Por quê?

Porque eu só diminuí a tela do navegador.

Quando você pegar um site e reduzir o navegador para o tamanho mais ou menos da tela de um celular – se ele se adaptar, quer dizer que o mesmo é responsivo.

Notamos aqui que o banner diminuiu, o logotipo veio para o meio, o menu ficou menor, os vídeos diminuíram e as informações foram reorganizadas.

O site da Coca-Cola é responsivo e foi muito bem feito.

As informações estão corretas, não há nada quebrado, o vídeo também diminuiu.

Existem muitos sites que, no momento que vai para o responsivo, não diminuem as dimensões do vídeo.

A FM Coca-Cola ficou bonita aqui, as informações foram reorganizadas.

A parte das redes sociais, que achei inútil, também está aqui bem organizada.

E as marcas também estão.

Na tela do celular essas marcas vão para a esquerda e para a direita, apesar de eu não conseguir simular aqui.

Poderia ter sido feito de maneira diferente, mas está funcionando.

Quando você clica no menu, abre o menu grandão.

A barra de rolagem não aparece na tela do celular, tá?

Já que lá fica a parte do “touch” – você rola para cima e para baixo.

É isso, pessoal.

Espero que tenham gostado.

Deu um “bug” aqui (o logotipo ficou para o canto), mas deve ser porque estou no navegador.

Se você tem um site e deseja que eu faça a análise dele da mesma forma que fiz da Coca-Cola, deixe aqui nos comentários.

Inscreva-se em nosso canal e nos vemos no próximo vídeo.