Todo mundo sabe: não há a segunda chance de causar a primeira impressão.Na esfera dos produtos digitais, essa verdade eterna funciona em termos de alta concorrência e incrível diversidade. Sem dúvida, algumas zonas da página da Web ou da tela do celular são particularmente importantes e eficazes nesse aspecto. Hoje vamos discutir um deles em um foco mais profundo: o cabeçalho do site. Hoje vamos olhar um pouco mais para o tópico e discutir quais são as funções de um cabeçalho e recomendações para o seu design.
No layout da página da Web, o cabeçalho é a parte superior da página da Web. É definitivamente uma parte estratégica da página como a área que as pessoas vêem antes de rolar a página nos primeiros segundos de introdução ao site. Sendo de alguma forma um sinal de convite, o cabeçalho deve fornecer as principais informações sobre o produto digital para que os usuários possam digitalizá-lo em frações de segundo. Na perspectiva do design, o cabeçalho é também a área que faz o amplo campo para soluções de design criativo que devem ser cativantes, concisas e úteis. Os cabeçalhos são geralmente chamados de “Menus do site” e posicionados como um elemento-chave da navegação no layout.
Os cabeçalhos podem incluir uma variedade de elementos de layout significativos, por exemplo:
Isso não significa que todos os elementos mencionados devem ser incluídos em um cabeçalho de página da Web: nesse caso, o risco é alto de que a seção de cabeçalho seria sobrecarregada com informações. Quanto mais objetos atraem a atenção do usuário, mais difícil é se concentrar nos vitais. Com base nas tarefas de projeto, os designers, às vezes junto com especialistas em marketing, decidem sobre as opções estrategicamente importantes e as selecionam da lista ou adicionam as outras.
Remover o óbvio e se concentrar no significativo
A primeira coisa a considerar são os modelos de rastreamento dos olhos, que mostram como os usuários interagem com uma página da Web nos primeiros segundos. Esse importante domínio de pesquisa de usuários é amplamente apoiado pelo Nielsen Norman Group e fornece aos designers e especialistas em usabilidade uma melhor compreensão do comportamento e das interações do usuário.
Em resumo, quando as pessoas visitam o site, especialmente na primeira vez, elas não exploram tudo na página com cuidado e detalhadamente: elas o examinam para encontrar um gancho que chamaria sua atenção e os convenceria a passar algum tempo no site. Diferentes experimentos que coletam dados sobre o rastreamento ocular do usuário mostraram que há vários modelos típicos ao longo dos quais os visitantes geralmente escaneiam o site. No artigo sobre 3 layouts de design, o autor Steven Bradley menciona os seguintes modelos comuns: Diagrama de Gutenberg, Padrão Z e Padrão F. Vamos verificar quais são os esquemas fornecidos para eles na pesquisa.
Padrão Z
É bastante típico para as páginas da web com a apresentação uniforme de informações e hierarquia visual fraca. Como pode ser visto no esquema que encontramos na pesquisa de Steven Bradley, ele marca quatro zonas ativas – e duas delas atravessam a área de cabeçalho típica.
o layout do padrão z segue a forma da letra z. Os leitores vão começar no topo / esquerda, mover-se horizontalmente para o topo / direita e depois na diagonal para a base / direita antes de terminar com outro movimento horizontal para o fundo / direita. O padrão z é bom para projetos simples com alguns elementos-chave que precisam ser vistos.
Padrão de Zig-Zag
Podemos estender esse padrão um pouco, vendo-o mais como uma série de movimentos z em vez de um grande movimento z.
O senso comum diria que isso é mais realista, pois o leitor continuará se movendo para a direita e depois para baixo e para a esquerda, antes de iniciar outro movimento horizontal para a direita novamente. É como nós naturalmente lemos grandes blocos de texto.
Esta série de movimentos z é por vezes referida como um padrão em zigue-zague. Se continuarmos a adicionar mais zig e zags ao padrão, acabamos por ter uma série de movimentos horizontais e esquerdos próximos da horizontal, à medida que a porção diagonal do z fica mais rasa e mais rasa.
Padrão de triângulo dourado
O padrão z também leva ao que é chamado de padrão de triângulo dourado. Se você pegar o primeiro movimento diagonal horizontal e o primeiro e, em seguida, fechar a forma, você acaba com um triângulo retângulo, cujo ângulo reto é o canto superior / esquerdo.
Essa área triangular no topo da página será a área mais vista e o padrão sugere que as informações mais importantes precisam ser colocadas dentro dela.
Layout de padrão F
Tal como acontece com os outros padrões, o olho começa no topo / esquerda, move-se horizontalmente para o topo / direita e depois volta para a margem esquerda antes de fazer outra varredura horizontal para a direita. Esta segunda varredura não se estenderá até a primeira varredura.
Varreduras adicionais movem-se cada vez menos para a direita e, na maioria das vezes, após a segunda grande varredura, o olho fica próximo à borda esquerda enquanto se move para baixo.
O padrão F sugere que:
Infelizmente, o padrão parece ser aplicado a tudo on-line, em vez de apenas conteúdo com conteúdo de texto. Se você olhar os mapas de calor originais da Nielsen abaixo, verá que o F está contido no conteúdo principal e não se estende ao design completo.
Ao aplicar o padrão F, pense em scanners e coloque o conteúdo no qual esses scanners provavelmente se interessariam ao longo do caminho. Coloque informações importantes na parte superior e informações projetadas para puxar alguém mais para baixo na página.
Em vez de tentar forçar seu design em um dos padrões descritos, decida quais informações você deseja que o espectador veja e, através de uma série de pontos focais e fluxo de design, conduza seus olhos pela sua hierarquia de informações . Esse é realmente o único padrão que você precisa usar.
Best Practices for Website Header Design – https://uxplanet.org/best-practices-for-website-header-design-e0d55bf5f1e2;
No segundo semestre de 2020, tive a oportunidade de desenvolver em parceria com a agência System...
Durante o final de 2019 e final de 2020, tive a oportunidade de desenvolver junto com a Evolutiva...
Algumas semanas atrás postei um texto chamado “Definindo Gamificação“, onde expliq...
Cupom especial válido para qualquer compra no site
