Ao considerar elementos individuais de um site que também contribuem positivamente para a experiência do usuário, o logotipo é fundamental e merece uma análise própria. Neste artigo, gostaria de compartilhar algumas dicas da nossa prática na agência sobre como garantir uma alta experiência do usuário para seus usuários de site ao lidar com o logotipo do seu site.

O logotipo do site substitui o botão da página inicial

O logotipo geralmente é colocado na barra de navegação e SEMPRE deve estar vinculado à página inicial. Os usuários esperam hoje em dia que ao clicar no logotipo sejam levados de volta à página inicial. Assim, o logotipo também substitui o link do menu "Início", que ainda é visível em alguns sites para vincular à página inicial. Um link "Início" como um item de menu separado na navegação é desnecessário. Além disso, economiza-se espaço valioso.

A cidade de Waren (Müritz) no norte da Alemanha, onde nossa empresa está localizada, decidiu oferecer ao usuário um ícone de casa como uma maneira de retornar à página inicial. Provavelmente, isso foi feito por duas razões: por um lado, outro logotipo foi colocado ao lado do logotipo principal, o que poderia reduzir a taxa de cliques no logotipo. Por outro lado, talvez se pressuponha que os usuários deste site sejam menos familiares com a internet. Honestamente, esse ícone de casa aumenta a experiência do usuário apenas marginalmente, pois este site possui várias deficiências notáveis em termos de arquitetura de informação, interfaces de usuário e acessibilidade (especialmente contrastes para a leitura de links e textos). Assim, o site da cidade de Waren (Müritz) continua sendo um exemplo negativo.

Logotipo responsivo: Adaptação do logotipo de acordo com a resolução do dispositivo

Enquanto nas visualizações de desktop há muito espaço disponível e, portanto, o nome da empresa ou slogan pode ser incluído no logotipo, na visualização móvel o logotipo deve ser colocado de forma mais reduzida por questões de espaço e atenção.

Assim como nos sites, nos logotipos o conceito de adaptação ao tamanho, meio e ambiente foi estabelecido há anos. Isso é chamado de Logotipo responsivo, o que significa que o logotipo leva em conta as características do ambiente e se apresenta de forma perfeita até mesmo em dispositivos menores, onde talvez precise ser apresentado de forma um pouco diferente. Ao contrário de logotipos rígidos que parecem iguais em todos os dispositivos e tamanhos de tela, os logotipos responsivos se adaptam às exigências individuais e oferecem assim uma experiência do usuário consistente e otimizada em diferentes dispositivos. Nesse processo, o logotipo se redimensiona apenas em sua forma, mas não em sua mensagem de marca.

Um exemplo positivo é fornecido pela empresa suíça Victorinox. Na visualização inicial, o usuário vê o grande ícone. Único ponto negativo: O logotipo está incorporado como um arquivo PNG em vez de SVG.

Ao rolar, apenas o elemento de imagem é exibido. Ao fundo, é possível ver uma montanha, destacando a origem suíça. Na primeira visualização, a formação da marca é importante. O usuário deve entender. Você está no lugar certo na Victorinox. Ao rolar para baixo, o foco passa a ser o conteúdo. O logotipo se reduz na exibição e dá mais espaço aos conteúdos principais. A navegação permanece fixada no topo, o que também é muito útil em termos de usabilidade.

Um outro abordagem é seguida pelo site da Guinness: O logotipo é posicionado com o nome da empresa. Ao rolar, o logotipo é um pouco reduzido e a navegação permanece visível. Quando um usuário começa a rolar para cima, o logotipo e a navegação aumentam novamente, já que é esperado que o usuário queira visitar mais páginas.

A Commerzbank não resolveu de forma ideal em seu site. O logotipo é exibido com o nome da empresa e está como SVG, o que é uma boa solução. No entanto, ele compete fortemente com os pontos de navegação ao lado. Ao rolar, a navegação desaparece completamente e o usuário precisa rolar para cima novamente para ver a navegação. Seria melhor se a navegação aparecesse imediatamente com o início do rolamento para cima, como foi feito, por exemplo, no site zeit.de.

Muito bem resolvido em termos de otimização de conversão é a grande imagem da Commerzbank com o direcionamento visual das duas pessoas. Elas olham na direção do botão, o que automaticamente direciona o olhar do visitante para o botão. Esses direcionamentos visuais para a chamada à ação são muito eficazes. Bem feito, Commerzbank!

Vai tornar-se interessante quando olharmos os exemplos na variante móvel.

Na variante móvel, o logotipo da Victorinox é exibido ainda menor e no centro, a fim de estruturar melhor as possibilidades de interação para o usuário. A Guiness posicionou o texto à direita do logotipo em vez de abaixo. Isso dá mais espaço para a harpa e a linha de navegação superior não fica muito grande. Por outro lado, o Commerzbank simplesmente oculta o texto na resolução do smartphone.

O papel dos logotipos responsivos na experiência do usuário é importante, pois ajudam a manter a consistência visual e a identidade da marca, independentemente da forma como os usuários acessam o site.

Se um logotipo não responde às resoluções em mudança, ele pode chamar muito a atenção do usuário. No exemplo a seguir, o logotipo muito presente do Hypovereinsbank concorre fortemente com o call-to-action posicionado à direita - especialmente na visualização de smartphone. Os pontos de navegação em cinza médio são facilmente ignorados na visualização de desktop. Em geral, este site também apresenta mais alguns erros de UX.

Portanto, os designers devem fornecer várias adaptações de logotipo para garantir logotipos responsivos. O logotipo também deve funcionar bem em diferentes fundos, e em diferentes tamanhos. Portanto, à medida que a resolução diminui, a detalhes do logotipo são reduzidos. No entanto, ele não deve perder a essência da marca. Esta é a grande arte ao usar logotipos responsivos. Assim, ao lançar um novo posicionamento de marca, pense antecipadamente nesse requisito ao usar seu próximo logotipo.

O formato de arquivo do logotipo do site

O uso de logotipos responsivos faz sentido, pois o tamanho certo é carregado de acordo com a resolução. Em resoluções menores, como em um smartphone, apenas a imagem menor é carregada. Isso economiza tempo de carregamento. No entanto, o maior impacto em seu tempo de carregamento será obtido quando você:

1. incorporar o logotipo na resolução correta (também com informações sobre altura e largura). Muitas vezes os logotipos são incorporados com uma resolução muito alta e então são redimensionados para a visualização.
2. incorporar o logotipo no formato vetorial SVG em vez de PNG ou JPG.

Usar o logotipo do site como favicon

Use também a forma reduzida do seu logotipo como um favicon. Evite textos ou outros elementos pequenos que não são reconhecíveis na pequena resolução do favicon.

Enquanto o site da Guiness do exemplo acima usa bem o logotipo de forma responsiva para o site, não é ideal como favicon. O pequeno texto branco da Guiness não é reconhecível e, como favicon, reduz a impressão geral. O contraste é baixo. A impressão seria melhor sem texto e focada apenas na harpa do logotipo. Isso foi melhor resolvido pelos outros exemplos deste artigo do que pela Guiness.

Se você está procurando uma agência que se concentre em logotipos responsivos, entre em contato conosco. Nós da 4eck Media somos profissionais de Experiência do Usuário.

Se uma posição profissional é importante para você, talvez também estejam interessados nos seguintes Pacotes de Ícones e Modelos de Design Corporativo: