Não é segredo que todo site de uma empresa tem quatro objetivos principais: fomentar a fidelidade à marca, aumentar o tráfego, reduzir as taxas de rejeição e aumentar as taxas de conversão em leads ou vendas! Muito aqui depende de quão confortáveis os usuários que visitam seu site se sentem.
Portanto, no nosso artigo de hoje falaremos sobre o que é a navegação no site, graças à qual se cria um "ambiente aconchegante". Ou melhor, sobre os erros mais comuns cometidos durante seu desenvolvimento.
Erro nº 1: estilo personalizado
Acontece que os usuários estão acostumados a ver a navegação do site na parte superior ou esquerda da página, então você não deve forçá-los a vagar pelo site em busca, pois eles podem não gostar desses jogos de esconde-esconde, que afetará negativamente as taxas de conversão e aumentará a taxa de rejeição.
Sim, no desenvolvimento de páginas / sites, uma abordagem criativa é sempre incentivada, mas a navegação no site claramente não é o caso em que você deve dar asas à sua imaginação. Com tais experimentos, você distrai a atenção dos usuários, que serão obrigados a estudar um novo estilo de navegação, e não o conteúdo principal do recurso.
Erro nº 2: rótulos genéricos de itens de menu
Outra regra de ouro de como fazer a navegação no site é que os rótulos do menu de navegação devem ser informativos. Assim, por exemplo, o uso dos itens de menu "Produtos" ou "Serviços" é comum a todas as empresas, e esses nomes significam pouco para os usuários. Aqui está outro exemplo: "O que estamos fazendo" - a mesma frase sem rosto.
Nesse caso, como melhorar a navegação no site? Tente encontrar os rótulos mais precisos para cada ícone no menu de navegação e você verá como eles falam com os usuários. Os visitantes do site vieram até você em busca de uma resposta para suas perguntas, portanto, não os ignore frases modelo e palavras.
Concorde que seus clientes não estão procurando "Produtos" ou "Serviços" abstratos, e a navegação com tais ícones não afetará a promoção do site nos resultados Procurar Resultados... Você se reconheceu? Então é hora de melhorar! O menu do site e sua estrutura como um todo devem ser otimizados para motores de busca e falar em uma linguagem compreensível para o público-alvo. Depois de ler nosso artigo até o fim, você verá quantas empresas resolvem um problema semelhante.
Erro # 3: menu suspenso
O menu suspenso se tornou extremamente popular como elemento de navegação, mas há dois bons motivos pelos quais você deve ter cuidado ao usá-lo.
Muitos de vocês provavelmente tiveram que pegar literalmente um menu suspenso. Um movimento estranho - e foge de você! E agora você, tendo reunido suas forças, pesquise novamente, clique e pronto - uma surpresa! - outra lista de opções de ação. Essas conversas são terrivelmente irritantes! Pense nisso, talvez você não deva abanar seus clientes em potencial mais uma vez?
Outro motivo para desativar o menu suspenso: baixo atendimento páginas seguintes local ou profundidade de visualização. Se você tiver um problema com baixo tráfego da página nível superior, é possível que o motivo esteja no uso do menu suspenso. Mas sempre há exceções à regra. Nesse caso, as exceções são válidas para sites grandes com muitas seções, pois aqui, usando esse menu, a usabilidade do site é significativamente melhorada.
Erro # 4: muitos itens de menu
Era assim antes, mas você não deve aderir a essa tradição hoje sem necessidade urgente, porque às vezes até 8 pontos são demais. Tente se limitar a menos deles, não excedendo 5: quanto menos pontos secundários, menos os usuários tropeçarão neles e mais alto os mais importantes falarão.
Essa regra também funciona para todo o conteúdo do site, não apenas para a navegação. Cada elemento removido torna os restantes mais visíveis. A navegação concisa também é importante para o SEO. Como na maioria das vezes os usuários seguem o link para pagina inicial, não em páginas internas site, por isso é "autorizado" para os motores de busca. Quando sua navegação é sobrecarregada com links, a página inicial do site se torna menos confiável em comparação com as internas.
Erro # 5: colocação inadequada do item de menu para fazer o pedido
Pesquisas no campo da psicologia mostraram que o primeiro e últimos elementos qualquer lista, em vez de elementos de seu meio. Uma ação semelhante ocorre com os usuários. Este fenômeno é chamado de "Curva de Posição Serial" e é claramente expresso na forma de um gráfico:
A concentração da atenção é muito maior no início da lista (efeito de primazia) e no final (efeito de novidade). É por isso que é correto organizar ao máximo pontos importantes no início da navegação, menores - no centro. O item de menu "Contato" deve ser colocado no final da navegação SUPERIOR no canto direito.
Dica bônus: links para sempre, botões nunca!
Caso você esteja 8 anos atrás das tendências de web design e ainda use botões de navegação gráfica em vez de links de texto, aqui estão 5 razões para reconsiderar seus hábitos:
- O texto do botão não é visível para os mecanismos de pesquisa.
- Atualizar botões é mais difícil do que atualizar links de texto.
- Os botões carregam mais lentamente, o que os torna inaceitáveis para aplicativos móveis.
- Os botões não podem ser lidos por navegadores de voz e texto.
- Os botões são desnecessários, mesmo se você quiser usar fontes não padrão, por exemplo, com ferramentas como o TypeKit.
E agora, como prometemos: 5 exemplos de navegação no site sem erros.
Navigation - aspecto crucial qualquer site. Se o usuário será capaz de encontrar informações relevantes por si mesmo e se deseja retornar, depende da eficácia de sua navegação na web.
A navegação não é regulada por nada: pode ser transparente e intuitiva ou multinível e não padronizada.
Como tornar a navegação no site o mais eficiente possível e qual design é o certo para você?
Em uma empresa de desenvolvimento webexistem respostas para todas as suas perguntas.
Mas primeiro as coisas mais importantes.
O QUE É NAVEGAÇÃO?
Navegação no site ou navegação na webÉ um sistema de softwares e ferramentas visuais que auxiliam o usuário a navegar pelo site e encontrar as informações de que necessita.
PLANEJANDO A NAVEGAÇÃO
A navegação na web mais eficaz é baseada em 3 pilares:
- Estrutura
- Concisão
- Projeto
- Estrutura:a navegação começa com um estudo detalhado arquitetura de informação (IA), que permite criar um acesso otimizado ao site e estruturar o conteúdo do ponto de vista do usuário. Idealmente, o IA do site consiste em um mínimo de camadas de navegação e fornece ao usuário acesso à seção desejada em apenas alguns cliques. Ao mesmo tempo, a própria divisão das seções é clara, lógica e previsível.
- Concisão:a navegação prática na web é sempre simples e intuitiva. Inclua no menu do site apenas os elementos necessários para uma comunicação eficaz. A chave do sucesso é um menu que consiste em um número mínimo de seções equivalentes que não deixam chance de erro.
- Projeto:Ao escolher um design, concentre-se na legibilidade, consistência e consistência. Dê preferência a elementos de navegação comuns. Sistema intrincado Ícones, botões e rótulos personalizados são uma má ideia e podem impactar negativamente a usabilidade e usabilidade do seu site. Quanto menos elementos ativos desnecessários, mais usuários satisfeitos.
TENDÊNCIAS DE DESIGN DE NAVEGAÇÃO NA WEB
O design de navegação na Web é incrivelmente versátil, mas alguns de seus elementos ganharam mais popularidade do que outros. A Umbrella IT selecionou 10 exemplos dos designs de navegação na web de maior sucesso que funcionam tanto individualmente quanto em combinação uns com os outros. Cada um deles tem suas próprias vantagens e desvantagens, e qual é o melhor depende de você.
1. NAVEGAÇÃO HORIZONTAL
A navegação horizontal é um design clássico que combina conveniência com funcionalidade.
Prós:
- Uma solução orgânica para a orientação de tela padrão da maioria dos monitores;
- Todos os elementos do menu de navegação estão ativos e disponíveis ao mesmo tempo;
- Possibilidade de expandir a lista de seções usando o menu suspenso ao passar o mouse ou clicar.
Desvantagens:
- Um grande número de seções e um menu suspenso volumoso podem sobrepor conteúdo importante;
- Adicionar novos itens de menu é difícil.
2. NAVEGAÇÃO VERTICAL
A navegação vertical é uma alternativa direta à navegação horizontal - um menu localizado na coluna esquerda da página.
Prós:
- Facilidade de edição e expansibilidade ilimitada do menu é uma ótima opção para serviços multifuncionais complexos e e-commerce;
- Ideal para diferentes dispositivos.
Desvantagens:
- Expandido pode sobrepor o conteúdo;
- Os elementos de navegação inferiores são quase imperceptíveis.
3. CUT OUT MENU
Um menu suspenso ou menu de slides é uma maneira de preservar a funcionalidade total e o espaço da tela. O menu fica escondido atrás da borda esquerda da tela e aparece ao clicar ou tocar.
Prós:
- A forma mais compacta de organizar um site;
- O design pode ser responsivo, o que, em combinação com o ícone do hambúrguer, é uma excelente opção para a interface da versão mobile do site;
- O menu oculto permite que você coloque uma forte ênfase no conteúdo;
- Acesso conveniente ao menu de qualquer lugar do site.
Desvantagens:
- A navegação oculta dificulta o acesso ao menu;
- Quando expandido, o menu se sobrepõe ao conteúdo.
4. DESEMBARQUE
A página de destino é um site de uma página com rolagem longa ou infinita, otimizado para fins específicos.
Prós:
- Rolar mais rápido do que clicar - uma opção adequada para serviços de notícias, lojas online e sites que atualizam conteúdo em tempo real;
- A rolagem infinita mantém a atenção do usuário;
- Permite postar uma grande quantidade de informações visuais;
- Interface conveniente para plataformas móveis.
Minuses:
- Liberdade limitada do usuário: é impossível controlar a ordem das informações e a forma como o conteúdo é apresentado;
- Incapaz de usar rodapé;
- Aumenta a carga nos servidores;
- Reduz as métricas de SEO.
5. MENU FIXO
A navegação fixa ou "fixa" encaixa estaticamente a barra de menu em uma parte específica da página, dando ao usuário acesso permanenteàs opções do menu.
Prós:
- Acesso confortável a todas as seções de qualquer lugar do site - o máximo solução ótima para sites de uma página;
- Permite fortalecer o conhecimento da marca com um logotipo fixado corretamente no cabeçalho;
- Melhora a análise, aumentando o número de páginas visualizadas por visita ao site.
Desvantagens:
- Um cabeçalho sobrecarregado e intrusivo torna a navegação na web difícil e sobrepõe o conteúdo.
6. MENU HAMBURGER
O menu de hambúrguer é um menu de navegação desenvolvido originalmente para smartphones, mas cada vez mais aparecendo nas telas dos laptops. É um ícone que esconde um amplo leque de opções e categorias. O nome do menu vem da semelhança do ícone com um hambúrguer - três barras de menu horizontais simbolizam as três camadas do famoso sanduíche.
Prós:
- O ícone de hambúrguer pode ser acessado de qualquer lugar do site com um clique ou toque;
- Permite que você coloque um número ilimitado de opções;
- Economiza espaço tanto quanto possível e é idealmente exibido em dispositivos móveis;
- Ajuda a colocar opções secundárias de maneira compacta (por exemplo, histórico e configurações) sem sobrecarregar a tela ou o usuário.
Desvantagens:
- Apesar de sua prevalência, os menus ocultos nem sempre são fáceis de encontrar;
- Hamburger é um menu padrão implícito na plataforma Android, e usá-lo em iOs resulta em um colapso dos elementos básicos de navegação e uma sobrecarga da barra de navegação.
7. NAVEGAÇÃO ADAPTATIVA
A navegação responsiva é um design variável que se ajusta automaticamente a diferentes larguras de tela e plataformas móveis.
Prós:
- Plataforma cruzada: o site foi originalmente projetado para exibição de alta qualidade em computadores e dispositivos móveis;
- URL único: com a navegação responsiva, você não precisa criar uma versão móvel do site, e a ausência de redirecionamentos aumenta a otimização do mecanismo de pesquisa.
Desvantagens:
- Elementos ativos típicos para versões de sites para desktop (mapas incorporados, vídeo, animação) diminuem o carregamento do site em dispositivos móveis;
- A versão móvel do design pode ficar ilegível e sobrecarregada devido ao fato de que os usuários de dispositivos móveis, via de regra, usam uma funcionalidade de site mais restrita;
- Ausência alternativas: no caso de independentes versão móvel sempre há a oportunidade de voltar a versão completa local. Design adaptativo Isso não é possível: se o layout adaptado for inconveniente ou ocultar um elemento importante de navegação, a única opção é procurar um laptop ou acessar o site de um concorrente.
8. MEGA-MENU
O Mega Menu é uma extensa barra de navegação que aparece ao passar o mouse ou clicar. O mega-menu não apenas estrutura o conteúdo em grupos e colunas em formato de texto, mas também usa ativamente vários recursos visuais.
Prós:
- Todas as opções estão disponíveis ao mesmo tempo: o direcionamento mais rápido possível do usuário é uma grande vantagem para as lojas e sites online com uma ampla gama de opções, categorias e serviços;
- Expande e oculta ao passar o mouse, clicar ou tocar sem comprometer o conteúdo.
Desvantagens:
- a violação do princípio de organização pode complicar a navegação;
- difícil de implementar em dispositivos móveis.
9. FOOTER AVANÇADO
O rodapé ou "rodapé" de um site é o rodapé da página. O rodapé padrão geralmente contém informações adicionais: contatos, links, aviso de direitos autorais e botões redes sociais... Além desses dados, o rodapé estendido contém um menu de navegação completo que pode ser usado como um sistema de navegação primário ou alternativo. Um rodapé estendido é uma maneira fácil de ir além do design padrão e aprimorar a funcionalidade do seu site.
Prós:
- Fornece uma alternativa ou menu extra para quem não encontrou o conteúdo de que precisava na página principal;
- Permite que você coloque conteúdo importante, mas não se encaixa no conteúdo das páginas principais;
- Opções adicionais no rodapé clássico (contendo apenas Informações de Contato) permitem que você expanda sua base de clientes;
- Enfatiza a atenção a certas informações.
Desvantagens:
- Um usuário comum geralmente não lê o rodapé.
10. NAVEGAÇÃO EM TELA CHEIA
Ao contrário de todas as opções de design apresentadas aqui, a navegação em tela inteira não visa economizar espaço na tela. Em contraste, a navegação em tela inteira usa a página de introdução 100 por cento, combinando texto com gráficos.
Prós:
- Fornece uma estrutura de site clara;
- Abre amplas oportunidades para design visual;
- Devido ao congestionamento pagina inicial as subseções principais contêm apenas conteúdo, o que economiza significativamente espaço na tela;
- Implementação simples em plataformas móveis;
- Ideal para sites altamente especializados.
Desvantagens:
- Possível diminuição na velocidade de download;
- Escolha irracional para sites com um mapa de navegação complexo.
E o bônus tradicional da Umbrella IT, que está sempre pronta para lhe oferecer mais - opção 11 - ELEMENTOS DE NAVEGAÇÃO ANIMADOS .
Uso racional de elementos animados como básicos ou fundos adicionais a navegação permite diversificar o design conservador e atrair a atenção dos usuários.
Prós:
- Chame a atenção dos usuários;
- Estruture o menu;
- Eles melhoram a usabilidade do site e orientam o usuário.
Desvantagens:
- A desordem visual excessiva dificulta a navegação no site;
- Pode diminuir a velocidade de carregamento do site.
Na fase de escolha e desenvolvimento de um design de navegação web, é difícil prever qual opção será a vencedora. O sucesso de cada caso particular depende de uma série de fatores: do propósito do negócio, das metas e objetivos do site, da natureza do conteúdo, do público-alvo e de suas preferências pessoais.
Os exemplos apresentados são apenas uma pequena parte do que permite a implementação de um web design moderno.Ainda tem dúvidas?, E nós vamos ajudar a transformar seus projetos mais ousados em realidade.
Olá queridos assinantes!
Acabei de terminar o trabalho no próximo projeto. Além do menu principal, também continha navegação... E achei que seria bom mostrar como esse tipo de coisa pode ser feito em apenas algumas linhas de código. E isso é feito exclusivamente por meio de html e css.
Essa navegação geralmente é colocada no lado esquerdo do site. Não há nada complicado em seu desenvolvimento. Cada item de navegação é colocado em uma tag
…
... Um link é colocado nele.Maquete PSD deste item para treinamento pode ser baixado.
Esta lição também está disponível em versão de vídeo que pode ser baixado aqui:
Bem, em geral, tudo! Vamos dar uma olhada no código e tudo ficará claro finalmente.
SOBRE O CENTRO
GALERIA DE FOTOS
LISTA DE PREÇOS
CONTATOS
Faremos o resto com estilos.
Para a classe .bar-menu, são atribuídos estilos necessários com base na localização dos blocos adjacentes. No meu exemplo, não há nada além dessa navegação na página, então irei apenas definir a largura dela.
Como o texto está centralizado, a maneira mais fácil de centralizá-lo é definindo a tag
alinhamento central do texto.
As fotos estão cortadas, vamos começar a escrever código css para navegação. Mais precisamente para links de navegação! Já temos o resto dos estilos.
família da fonte: Tahoma;
intensidade da fonte: Negrito;
E o que vamos ver?
Por que é que? O fato é que imagem de fundo posicionada no link exatamente enquanto o texto permitir. Ou seja, a largura e a altura do link são determinadas pelo texto nele contido. A propósito, este é um sinal claro tags inline... Vamos definir a largura e a altura:
fundo: url (images / bg-menu-main.jpg) center center;
família da fonte: Tahoma;
intensidade da fonte: Negrito;
largura: 190px;
altura: 27px;
Ainda nada mudou.
fundo: url (images / bg-menu-main.jpg) center center;
família da fonte: Tahoma;
intensidade da fonte: Negrito;
display: bloco;
Parece que a navegação começa a assumir a forma que precisamos:
Adicione preenchimento na parte inferior de cada um dos links. Também adicionamos padding-top para cada um dos links e, inesquecivelmente, subtraímos da altura:
fundo: url (images / bg-menu-main.jpg) center center;
família da fonte: Tahoma;
tamanho da fonte: 10px; cor: # 056e04;
intensidade da fonte: Negrito;
altura: 21px;
margin-bottom: 10px;
acolchoamento superior: 6px;
Nós temos o que precisamos:
Bar-menu h2 a : flutuar{
plano de fundo: url (images / bg-menu.jpg) center center;
família da fonte: Tahoma;
cor: #ffffff;
intensidade da fonte: Negrito;
margin-bottom: 10px;
acolchoamento superior: 6px;
decoração de texto: nenhum;
Este é o nosso menu de navegação:
Espero que você ache este tutorial útil. Andrey estava com você. Obrigado pela sua atenção. Te vejo nas próximas lições!
Um bom sistema de navegação o ajudará a navegar. É extremamente importante que bom sistema a navegação ajudou você a navegar pelos objetos de rede (sites :)) sem dor de cabeça. Embora existam algumas exceções, a maioria dos sites quebraria ou desapareceria completamente sem um gerenciamento preciso de páginas.
Você tem um plano de seu site em mãos? Vamos fazer uma coisa desagradável. Retire em janela separada e mantenha a janela aberta enquanto você lê este artigo. É hora de colocar seu sistema de gerenciamento de página sob escrutínio. Vamos descobrir se você está perdendo usuários em potencial, desorientando e enganando.
Preparar? Vamos testar seu site respondendo a algumas perguntas fundamentais.
Questões importantes
Quanta preocupação é preciso para encontrar o estilo de navegação correto para o layout das páginas do site? Ao discutir a usabilidade de um site na web, você provavelmente ouvirá que um sistema de gerenciamento eficaz deve responder a uma série de perguntas básicas que um usuário pode ter:
''Onde estou?''
Para o visitante médio do site, essa pergunta vem em primeiro lugar. Parece, talvez, por um milésimo de segundo, já que todos, seguindo o link, primeiro tentam encontrar seu caminho. Portanto, uma das principais tarefas sistema de navegação Chame a atenção para o local da página do site onde se encontra a resposta a esta pergunta.
Se o sistema de navegação não consegue orientar o visitante, seu constrangimento põe em causa a idoneidade do site.
Uma pergunta para quem tem um site aberto agora: A página atual está marcada nos itens do seu menu?
A maneira mais fácil de saber a localização do usuário é marcar o item de menu correspondente ou destacar o botão com uma cor diferente.
A repetição faz maravilhas!
Mesmo se em pagina atual há um título, alterar graficamente o item de menu correspondente não será supérfluo, pois a repetição faz maravilhas.
‘’ Onde eu estive? ’’
A descoloração ou escurecimento dos links visitados nem sempre é o único e mais A melhor maneira marcar as páginas visualizadas.
Migalhas de pão executar perfeitamente a tarefa, para que o visitante possa determinar de forma fácil e rápida sua localização atual no site.
O site Wufoo os usa de forma mais eficaz em suas páginas de passeio:
Com a navegação hierárquica, é fácil adicionar uma nova camada de página. Ele simplesmente se encaixa no final da corrente. Muito provavelmente, você não se comprometerá a escrever um site usando este tipo de sistema de navegação por conta própria. Breadcrumbs são mais uma ferramenta de orientação do que a navegação pelos objetos do site. Use-os como um elemento adicional, mas para algo menos dinâmico, saia do sistema de navegação principal.
'' Onde eu posso ir? ''
O usuário precisa saber para onde pode ir a partir da página atual. Isso se torna especialmente importante se o visitante estiver procurando por algo especial. E é uma decepção que é a maneira certa de afastar o visitante do site.
‘’ Por que devo seguir este link? ”’
Simplesmente especificar itens de menu nem sempre é suficiente. informação adicional a cada item do menu irá perguntar ao usuário sobre o conteúdo da página. Os detalhes adicionais podem ser na forma de subtexto ou na forma de uma linha de dica que aparece quando o cursor é movido para qualquer item do menu.
Um exemplo é SimpleBits.com. Quero observar que, se não houvesse nenhuma assinatura de “entradas recentes” no item SimpleBits, dificilmente teria imaginado que este link abre blogs:
Como Steve Krug escreve no livro Não me faça pensar (não me faça pensar) que a usabilidade nem sempre implica esclarecimento excessivo. Ele também observa que o usuário médio da Internet não precisa mais escrever "" Enter aqui palavra-chave"" quando ele precisa usar o campo de pesquisa. É aqui que ela se manifesta trabalho conjunto padrões e acordos.
Evite qualquer confusão
A navegação Mystery Meat depende de designs de menu ambíguos ou obscuros. Da mesma forma que o volante gira, várias direções no projeto de sistemas de navegação também estão se desenvolvendo. E essa tendência também apareceu por um motivo. Ao usar o menu 'carne misteriosa' ', o usuário deve navegar por conta própria, adivinhando e experimentando. Intuição e inteligência não são necessárias de forma alguma.
Como você pode ver, você pode ser criativo continuando a seguir a tradição. Mas esse tipo de navegação está longe de ambos:
Conclusão
Dê uma outra olhada em seu site. Agora, com base em uma série de métricas específicas, você pode avaliar a utilidade do seu site. Algumas seções de uma página carecem de clareza adicional?
Espero que tenha gostado deste artigo :) e nunca criará sites como este: e :)
P.S. As imagens são clicáveis;)
No ano passado, vimos muitas novas tendências no mundo do web design. Neste artigo, vou me concentrar na navegação do site que os web designers modernos implementam para tornar o site não apenas atraente, mas também compreensível para os visitantes. Essas tendências de navegação funcionam bem para tipos diferentes sites. Além disso, esses tipos de menus são bem refletidos em diferentes formas e tamanhos de tela.
Dê uma olhada nessa variedade e encontre ideias interessantes para seus próximos projetos!
Navegação fixa
A navegação foi projetada para ajudar os usuários a navegar do ponto A a todos os outros pontos do site. E manter o menu de navegação em um local fixo permite que os usuários naveguem no site de qualquer lugar da página. Muitos sites "fixam" sua navegação principal no topo da tela. Quando o usuário rola para baixo para explorar o conteúdo, o menu está sempre na frente de seus olhos.
Isso é facilitado pelos plug-ins CSS e jQuery, e muitos temas de sites agora vêm com uma barra de navegação aderente por padrão. A navegação fixa também é ótima para usuários móveis, onde o site é mais longo e estreito.
Como eu uso isso?
Se você tem um site com grande quantidade elementos de navegação - esta opção será adequada para você. Essa é uma maneira infalível de manter os visitantes em seu site por mais tempo e aumentar as visualizações de página em geral.
No entanto, certifique-se de que a barra de navegação não ocupe muito espaço. Não deve ser tão grande a ponto de bloquear a maior parte do conteúdo da página. A US Magazine contornou esse problema encolhendo sua barra de navegação - o que a tornou menos intrusiva.
Mega menu
Os mega menus tornaram-se populares com o aumento de sites de revistas. Os mega menus são diferentes dos menus suspensos regulares e geralmente contêm várias colunas de conteúdo. Esse método funciona bem se usado com sabedoria, mas não funciona para todos os sites.
Por que usá-los?
Os visitantes podem ter uma ideia do seu blog ou site visualizando o conteúdo relacionado. Se você pode fornecer mais conteúdo no mega menu, por que não?
Essa tendência não funciona em dispositivos móveis, pois não há espaço suficiente na tela. Mas muitas pessoas ainda navegam na Internet em computadores desktop e laptops, então há um grande público para o mega-menu.
Navegação universal
Algumas empresas operam ou possuem várias marcas e incluem navegação universal em todo o site. A Disney, por exemplo, possui parques temáticos, cria jogos e produz filmes junto com programas de TV. Faz sentido manter essa navegação versátil em todas as páginas, independentemente da marca, para chamar a atenção para outros produtos Disney.
E essa tendência não se limita a conglomerados ou holdings. Às vezes, é usado em redes de sites, como os de propriedade da New York Media. Outro bom exemplo- no título do Mashable, que contém links para todos os sites internacionais da marca.
Por que usar?
Se você trabalha com uma grande rede de produtos ou marcas, pode ser útil uni-los todos para criar uma identidade de marca unificada. A navegação universal pode encorajar os visitantes a olhar para outros produtos.
Navegação Deslizante Vertical
Um número crescente de sites está usando a navegação vertical e, em alguns casos, ela realmente funciona bem. Isso é especialmente popular em sites de portfólio ou agências de criação que transcendem as fronteiras do design tradicional da web.
O exemplo AWARD acima é um caso de uso fantástico para navegação vertical. Ao mesmo tempo, sua visibilidade permanece a qualquer momento. Não há hambúrguer irritante aqui - você pode ver ícones claros ao lado. Esta é uma abordagem experimental para design de navegação, mas pode funcionar para sites com públicos-alvo criativos.
Por que usar?
Tente esta técnica apenas se você pretende usar um layout de tela inteira diferente do design tradicional.
Uma navegação vertical funcional não é fácil de criar do zero e é difícil fazê-la funcionar em projetos responsivos. No entanto, se você estiver interessado em experimentar e o desejo de experimentar novas ideias for muito forte, os menus verticais podem ser uma boa solução.
Menu Oculto
Todo web designer deve saber sobre ícones de hambúrguer e como eles são usados em designs responsivos. Mas, à medida que as pessoas se aproximam do ícone de hambúrguer, mais e mais sites estão constantemente escondendo a navegação da vista.
Um pouco estranho: o hambúrguer não facilita em nada a vida do usuário, não permite que ele abra imediatamente links para outras páginas do site. No entanto, ele limpa o espaço da tela removendo a navegação da visualização. Vários estudos indicam que menus ocultos são desencorajados pela maioria dos usuários. Mas essa tendência pode mudar com mais pessoas usando smartphones e sabendo o significado deste ícone.
Por que usar?
O melhor script para um menu oculto é um público de alta tecnologia. Esses visitantes reconhecerão o ícone de hambúrguer e saberão o que significa "clique aqui para abrir o menu". Portanto, se você estiver projetando um blog de tecnologia ou construindo uma agência on-line B2B, isso pode funcionar. Mas se não, pense bem antes de adotar essa abordagem e certifique-se de não sacrificar a conveniência em favor do estilo.
Menus responsivos
Ao desenvolver um site, não há como evitar o uso de navegação móvel - porque seu site tem 100% de probabilidade de ser visualizado em dispositivos móveis. Os designers costumam ocultar alguns links de navegação por celular para ajudar os menus a funcionarem melhor em telas pequenas.
Mas muitos sites estão seguindo a nova tendência de manter todos os itens de navegação usando menus suspensos. Isso geralmente requer um ícone de hambúrguer com ícones de alternância para links suspensos.
Você só verá essa técnica em telas móveis ou em pequenas janelas do navegador. Por exemplo, o site para celular do Politico usa sinais de mais (+) para indicar submenus ao lado de cada link.
Por que usar?
Os visitantes devem ser capazes de visualizar todo o site, independentemente do dispositivo que estejam usando. Ao manter os submenus, você pode oferecer mais opções de visualização.
Apenas certifique-se de que cada submenu esteja claramente identificado com um ícone, mudança de cor ou algo visual. Os visitantes precisam saber se o menu abre clicando em um link ou se eles são direcionados para uma nova página.
Artigos de carrossel
Essa tendência está se tornando cada vez mais popular entre os blogs e os principais sites de notícias. Muitos desses sites podem publicar dezenas, senão centenas, de novos artigos todos os dias.
Adicionar um carrossel simples ao topo da página dá aos visitantes a oportunidade de conferir os artigos mais recentes. Essas histórias podem ser atualizadas dinamicamente. Eles podem ser criados como miniaturas ou o que você quiser. Você pode ver exemplos em qualquer artigo da Vogue.
Por que usar?
Se você está desenvolvendo um blog com muito conteúdo, essa tendência ajudará a fazer milagres para o usuário. Os visitantes podem conferir os artigos mais recentes e esse menu os incentiva a explorar mais de uma história por visita. Como resultado, isso aumentará o tempo médio total no site. A maioria dos blogs que posta muito conteúdo deseja obter mais tráfego, e os carrosséis são uma ótima maneira de fazer isso.
O Google adora longreads e força os autores a publicar mais guias detalhados em quase todos os problemas. Isso funciona muito bem para conteúdo da web, mas pode arruinar a experiência de leitura. Para simplificar as coisas, use um índice - links para seções do artigo logo no início. O exemplo mais proeminente é a Wikipedia, que usa ToC desde o início.
Por que usar?
O principal motivo para usar um índice analítico é melhorar a usabilidade. Artigos mais longos estão se tornando a norma, mas o usuário pode não precisar ler todas as 5000 palavras. Eles também são úteis em classificações SERP, pois o Google pode sugerir links de referência com base no índice. Esta é uma abordagem ganha-ganha.
Links angulares
Esta é uma tendência de navegação interessante e está se espalhando rapidamente. Todas as startups e empresas profissionais parecem usar esse estilo para criar uma navegação intuitiva e simétrica.
Os estilos comumente aplicados são:
- Letras pequenas
- Fontes sem serifa
- Espaçamento horizontal adicional
- Tom branco ou muito claro
Esta tendência de design tornou-se uma identidade corporativa para uma navegação limpa, nítida e com aparência profissional.
Por que usar?
Este menu parece profissional; é perceptível e discreto e inspira um senso de confiança. Se você estiver criando um site de startup ou corporativo, essa tendência é provavelmente o melhor estilo de design para sua navegação. Mas tome cuidado: o site não deve parecer sem alma, ou como uma cópia de outros projetos.
Navegação de ponto de página única
O aumento da popularidade dos sites de uma única página gerou muitas novas tendências. Um deles é a navegação por pontos: uma série de ícones circulares localizados no lado esquerdo ou direito da tela. Cada um desses pontos representa uma seção diferente do site. E como o layout é uma página longa, esses links são destacados para indicar a posição atual do usuário. Gosto muito dessa ideia, mas a questão é se as pessoas entendem o que esses pontos significam e como usá-los.
Por que usar?
Se você estiver desenvolvendo um layout de uma página, recomendamos o uso de navegação aderente. Isso torna mais fácil ver o que cada slide é e quais informações estão na página.
Mas se você não pode (ou não quer) usar o painel de navegação superior, esses pontos também são uma boa coisa. Ou melhor ainda: combine os dois! Ou ainda inclua texto próximo aos pontos. Existem muitas opções e podem funcionar bem.
Que tipo de navegação você gosta?
