Práticas recomendadas para imagens heroicas: 6 coisas a serem consideradas

A imagem do herói é o banner principal do site, geralmente colocado de forma destacada, acima da dobra – na frente e no centro.

A imagem principal é a primeira imagem que seu público verá ao entrar no universo do seu site. Portanto, a tarefa de obter e selecionar sua imagem de herói não é uma tarefa a ser tomada de ânimo leve.

Neste post, destaquei alguns dos aspectos mais cruciais e práticas recomendadas que você deve considerar ao escolher uma imagem de herói.

1. Use imagens relevantes

Enquanto passamos mais tempo online do que nunca, nossa atenção está diminuindo rapidamente. Um estudo da Universidade Técnica da Dinamarca conclui que nossa atenção coletiva está diminuindo (sciencedaily.com). Embora o tempo médio gasto em uma página, em todos os setores, seja de 62 segundos, mais de 50% dos visitantes gastaram menos de 15 segundos ativamente em uma página (time.com).

Sua imagem de herói deve amplificar sua proposta de valor – o que você está tentando comunicar. Pergunte a você mesmo as seguintes questões:

• Que emoções você está tentando desencadear?
• Como sua imagem se conecta ao seu USP/ESP?
• A imagem contextualiza o conteúdo do site?

Reunimos alguns exemplos abaixo para mostrar como uma imagem de herói pode fazer isso.

HubSpot: Usando uma ilustração como plano de fundo do herói, o HubSpot exemplifica tanto o aspecto de crescimento quanto o atendimento a pequenas e médias empresas e empresas corporativas.

Save the Children: Usando uma foto de uma criança em seu histórico de herói para exemplificar uma das muitas crianças que eles estão tentando salvar – e assim (espero) criando uma conexão emocional com o público.

Riverford Organic Farmers: Um bom exemplo de como aproveitar uma imagem autêntica de vegetais orgânicos relacionada a produtos. A imagem está intimamente relacionada aos produtos e à USP.

2. O contraste é fundamental

Os elementos de design devem se destacar para destacar o elemento mais importante. Portanto, além de escolher uma boa imagem, você também deve considerar como essa imagem pode funcionar em relação à cor de fonte desejada, call to action e esquema de cores da marca.

Usar uma sobreposição simples geralmente pode fazer uma enorme diferença, fazendo com que seu texto se destaque. Além disso, otimizar a saturação, temperatura e contraste com uma ferramenta de edição pode dar vida à sua imagem.

3. Use o formato certo

Não use imagens de baixa qualidade. Fotos pixeladas ou borradas podem arruinar a primeira impressão. No entanto, como o visual do herói é um elemento CX crítico, você deve garantir que a imagem seja renderizada o mais rápido possível.

Use imagens com largura entre 1500 e 2500 pixels e comprima sua imagem para reduzir o tamanho do arquivo e, assim, aumentar a velocidade de carregamento.

Como o formato PNG geralmente produz um tamanho de arquivo pesado, recomendamos que você use esse formato apenas se tiver linhas nítidas e áreas claramente separadas de cores planas e texto.

Várias ferramentas online podem ajudá-lo a compactar sua imagem:

• Tinyjpg.com: até 20 imagens, no máximo 5 MB cada.
• Compressor.io: Suporta jpg, png, gif, svg, webp. Máximo de 10 MB
• Imagify.io: limite de upload de tamanho de arquivo de 2 MB
• Shortpixel.com: Até 50 arquivos e máximo de 10 MB.

4. Crie uma conexão emocional

Um estudo recente publicado na Frontiers descobriu que imagens emocionais influenciam mais as pessoas do que palavras emocionais. Assim, ao escolher uma imagem com alto nível de emotividade, você pode desencadear uma reação emocional no espectador.

Quando observamos uma expressão facial de emoção, muitas vezes a imitamos. De acordo com um artigo publicado na revista Trends in Cognitive Sciences, não são apenas nossos sorrisos ou sorrisos, mas todas as nossas expressões faciais que são contagiosas.

Na verdade, o cérebro processa imagens 60.000 vezes mais rápido que o texto, e 90% das informações transmitidas ao cérebro são visuais (t-sciences.com). Somos criaturas visuais e, aproveitando estímulos emocionais, incluindo rostos emocionais e imagens evocativas, podemos desencadear não apenas sentimentos e associações positivas, mas também ajudar seu público a decodificar sua mensagem desejada com mais rapidez e precisão.

5. Seja autêntico e realista

Os consumidores estão sobrecarregados com estímulos, anúncios e ruídos. A autenticidade da marca pode ajudar a superar o barulho e fazer você se destacar. Mensagens genuínas e imagens realistas ressoam mais poderosamente com as pessoas e ajudam você a criar uma conexão mais forte com seu público.

Mais empresas estão usando “pessoas reais” para comercializar seus produtos. A Dove iniciou sua 'Campanha pela Real Beleza' em 2004, celebrando as diferenças físicas naturais personificadas por todas as mulheres. Além de conquistar inúmeros prêmios, a marca criou uma forte conexão emocional com seu público-alvo, resultando em um aumento significativo nas vendas.

Marcas como Dove e depois Target usaram com sucesso 'pessoas reais' em sua publicidade no ano recente e por um bom motivo: vale a pena ser autêntico.

Isso não significa que você mesmo tenha que tirar todas as fotos, nem que deva usar imagens e vídeos com baixa resolução. Você deve, no entanto, usar fotos de pessoas, lugares e experiências reais e transmitir uma história de maneira real, em vez de usar imagens que parecem encenadas.

6. Teste e Otimize

A escolha de uma (nova) imagem de herói não deve ser considerada o estágio final, mas sim o início do seu processo de otimização. Como dito anteriormente, a imagem do herói é talvez um dos elementos de design mais importantes no site e pode ter um impacto significativo no seu desempenho geral.

Para certificar-se de que sua imagem de herói está funcionando conforme o esperado, você deve implementar o rastreamento de desempenho adequado antes de defini-la ao vivo. Para isso, considere usar uma ferramenta de teste A/B para testar variantes alternativas e testar sua variante original em relação à sua nova imagem.

Em um teste implementado pela Crazyegg, a versão vencedora aumentou as vendas dos compradores globais em 29,7%. No passado, usei as seguintes ferramentas para testar variações de imagem:

• Otimização do Google (Gratuito)
• Otimizar
• Ovo Maluco

Lembre-se, o fracasso é o primeiro passo para o sucesso e não tentar é pior do que tentar e falhar. Você pode não acertar na primeira vez – mas teste, experimente novas variações e continue otimizando – e você será recompensado de acordo.