Como Melhorar a Navegação do Site (Com Exemplos e Razões sobre Porque Você Deve Fazê-lo)

A navegação no site é algo que muitos criam como um pós-pensamento depois de páginas e conteúdos. Num inquérito recente, apenas 50% dos utilizadores da Internet conseguiram prever onde os conteúdos relevantes seriam baseados na estrutura padrão de navegação do website.

Se metade dos seus visitantes não consegue encontrar a página que procura, isso é um gigantesco problema UX.

Isto conduzirá a taxas de ressalto mais elevadas, a um menor tempo no local e a taxas de conversão mais baixas.

Se está a gerenciando uma loja de comércio eletrônico, uma má navegação também pode afetar negativamente os seus resultados e receitas.

Neste post, eu cubro a navegação do site de A a Z. Isto significa que você vai aprender as melhores práticas, diferentes tipos de navegação e exatamente o que você deve fazer para criar a navegação perfeita para o seu site.

Vamos começar!

O que é a Navegação do Website?

A navegação na Internet é o processo de navegação de páginas, aplicações e sites na Internet. A tecnologia por trás dela é chamada de hipertexto ou hipermídia.

Hipertexto ou mídia são páginas web baseadas em texto que utilizam hiperlinks para conectá-las a outras páginas da Internet. Um hyperlink é um link que leva o seu navegador web a um URL.

O URL indica a que ficheiro o browser deve aceder a partir do servidor e descarrega e torna os dados para que o utilizador os possa ver.

As ligações internas levam a páginas diferentes no mesmo domínio. Os links externos levam a páginas diferentes noutro domínio, um website e um servidor completamente separados.

A navegação no site utiliza menus com links internos que facilitam aos visitantes encontrar a página que procuram. Uma boa navegação é um elemento essencial de um site de fácil utilização.

O que é um Menu de Navegação de Website?

O menu de navegação de um website é um conjunto de links, normalmente para páginas internas, que está organizado em um menu. A maioria dos websites, incluindo o nosso, apresenta um menu no topo do seu website.

Esta seção é chamada de “cabeçalho” de um website em web design e desenvolvimento. Algumas das páginas mais comuns ligadas a estes menus são:

• Sobre nós.
• Blog.
• Contato.
• Características.
• Planos/Preços.

O menu também pode, naturalmente, incluir links para outras páginas.

Qual é a estrutura de navegação de um Website?

A estrutura de navegação de um site descreve como as diferentes páginas do seu site estão organizadas e ligadas entre si.

Por exemplo, algumas páginas e conteúdos só podem ser alcançados visitando uma página específica. Os designers and web developers costumam planear a estrutura de navegação ao fazer um novo website.

Neste exemplo, as páginas Sobre, Planos, Contacto e Blog estão ligadas a partir do menu inicial. Para aceder às páginas Missão e Equipa, necessita de visitar primeiro a página Sobre.

Porque é que a navegação é importante num Website?

Na introdução deste post, ficou a saber que 50% dos utilizadores da Internet não são capazes de utilizar corretamente um menu padrão. Imagine como poucas pessoas conseguiriam encontrar o conteúdo certo sem qualquer tipo de navegação.

Com a abordagem correta à navegação e aos menus, é possível trazer a percentagem abaixo dos 50%. Isso reduzirá as suas taxas de salto, aumentará o seu tempo médio no local e levará a mais tráfego, leads e clientes.

Tipos de Navegação Web

Existem três tipos principais de navegação no website. São eles:

Quando combinados corretamente, ajudam os seus visitantes a navegar no seu website e a encontrar o seu destino sem problemas. Vamos dar uma vista de olhos a cada um deles.

1. Navegação Global do Website

Com a navegação global no website, o menu e os links são idênticos em todas as páginas do website. Muitos menus modernos são concebidos desta forma, incluindo o menu do nosso próprio site aqui na Kinsta: se percorrer a página para baixo, o menu “segue”.

Na imagem do ecrã, pode ver o nosso menu de cabeçalho simples e fácil de compreender. É o mesmo em todas as nossas páginas e conduz a algumas das nossas páginas e conteúdos mais importantes.

Conhecemos a informação crucial que um potencial cliente quer saber sobre uma empresa de acolhimento antes de tomar uma decisão. É por isso que facilitamos aos potenciais clientes encontrar os nossos planos, características e contactar-nos. E, para os utilizadores existentes, temos a opção de login para os deixar entrar no seu painel de controlo MyKinsta.

O nosso menu de rodapé é também global e destaca seções essenciais do nosso website e alguns conteúdos em destaque.

Os menus globais são o padrão para a maioria das soluções CMS out of the box.

Cada tema do WordPress permite apresentar diferentes tipos e áreas para os menus de navegação. Se precisar de mais, pode usar um plugin de menu para ter mais opções disponíveis.

2. Navegação Hierárquica do Website

A navegação hierárquica significa que os menus mudam em função do contexto de cada página.

A maioria dos jornais e websites puramente baseados no conteúdo apresentam uma navegação hierárquica. Por exemplo, se visitar a página superior de um jornal, normalmente verá links para as principais categorias de notícias no menu do cabeçalho.

Se o menu fosse global, permaneceria o mesmo depois de clicar numa categoria diferente. Mas por ser hierárquico, revela novos links que levam a subcategorias da página da categoria que visitamos.

Na página Science do New York Times, você não vê o menu de nível superior. Em vez disso, vê ligações para diferentes subseções da investigação científica e artigos.

Esta alteração é o que separa este menu de um menu global regular que se encontra na maioria dos sítios mais pequenos.

3. Navegação do site local

Ao contrário da navegação hierárquica e da navegação global, a navegação local no website refere-se a ligações internas que estão incluídas no próprio conteúdo. Normalmente, são dadas ao utilizador opções ao mesmo nível de hierarquia ou a um nível mais profundo, ou links para navegar para outras páginas relevantes.

Um bom exemplo são os sites de revistas, que frequentemente utilizam links para ajudar os leitores a explorar o contexto mais profundo de um determinado artigo. Se mencionarem um incidente que tenham coberto no passado, estabelecerão um link para esse artigo, em vez de o explicarem em profundidade.

Mas não está reservado apenas a revistas e sites de notícias. As lojas de comércio electrónico contam fortemente com este tipo de menu de navegação para mostrar produtos da mesma categoria.

A ligação interna é também um aspecto crucial do SEO em geral, e mais especificamente do SEO WordPress, por isso é agora uma prática comum para quem gere um website.

Exemplos de Navegação do Website

Em vez de nos embebedarmos em teoria, vamos mergulhar fundo em alguns exemplos. Vou cobrir um site de notícias e o Twenty Twenty WordPress theme.

Site de notícias: New York Times

Num relance, pode parecer que o New York Times está a utilizar principalmente um único menu de cabeçalho global das suas categorias.

Mas não é aí que termina. O NYT utiliza todos os tipos de navegação nas suas centenas de páginas de categoria e milhões de artigos.

Tipos de navegação utilizados:

• Hierárquico.
• Global.
• Local.

Vejamos os diferentes cabeçalhos de navegação para cada página.

Página inicial

Na seção do cabeçalho do seu site, inclui dois menus, um menu global expansível acima do logotipo e um menu hierárquico abaixo do cabeçalho. Na sua essência, é como um menu de cabeçalho e um menu de subtítulo.

Se expandir o menu de hambúrgueres de cabeçalho, este transforma-se numa barra lateral do lado esquerdo, onde existe uma ampla margem com as resoluções mais modernas.

Não esbate/utiliza uma sobreposição para esconder qualquer conteúdo do site.

Página inicial (Móvel)

Examinemos a mesma seção do cabeçalho sobre a mobilidade. A maioria dos utilizadores da Internet acede a sites de notícias através dos seus smartphones, pelo que a experiência móvel pode ser mais importante do que a do ambiente de trabalho.

O menu de subtítulos da categoria de notícias não faz parte da página inicial no telemóvel. Em vez disso, apenas tem disponível a opção expansível.

Quando expandido, torna-se um menu de ecrã completo e cobre completamente todo o conteúdo da página inicial.

Inclui todas as opções do menu principal dos computadores de secretária e as ligações estão organizadas por categorias.

Categoria Página

Na página de categorias, abaixo do menu de hambúrgueres de cabeçalho, você vê um link para um outro subconjunto de categorias.

Facilita às pessoas que apenas estão interessadas numa área específica dentro de um tema mais vasto a procura de artigos que possam estar mais alinhados com os seus interesses.

Categoria Página (Móvel)

No móvel, estas páginas de categoria incluem o mesmo menu de hambúrgueres de cabeçalho e estrutura que a versão desktop. O menu de cabeçalho secundário não é de todo escondido para facilitar a navegação e a descoberta de conteúdos.

Outra razão pode ser que muitas experiências móveis começam através da pesquisa ou das redes sociais, em vez de visitar diretamente a página inicial do NYT.

Artigo único

Para artigos individuais, o cabeçalho flutuante indica a seção em que se encontra atualmente, mas apenas apresenta o menu global expansível (juntamente com a caixa de pesquisa).

Artigo único (Móvel)

Na navegação móvel, a navegação limpa é mantida, pois o único menu é o menu de hambúrgueres de cabeçalho.

Rodapé

O menu de rodapé do NYT é o mesmo em toda a página inicial, páginas de categoria e artigos individuais.

Rodapé (móvel)

No telemóvel, o menu de rodapé mostra apenas cinco itens de menu, todos eles se expandem em subseções depois de clicados.

Por exemplo, se clicar na seção de Artes, poderá navegar através destas subseções:

Como o site usa JavaScript para carregar dinamicamente mais conteúdo à medida que se desloca para baixo, pode parecer que o rodapé não existe de todo.

É um truque limpo que pode ajudar com o tempo no site e levar os leitores a ler mais artigos, mas torna o site um pouco mais difícil de navegar.

Layout do conteúdo

Alguns poderiam argumentar que a principal ferramenta de navegação que os jornais e blogues em linha utilizam não é apenas o menu. É o próprio layout do jornal que fornece a espinha dorsal de navegação para NYT e outros sites similares.

Todos os elementos destacados são clicáveis e conduzem a diferentes páginas internas dentro do site do New York Times.

A disposição do conteúdo é outro elemento-chave da navegação do website que eles implementam através da sua página inicial e das suas páginas de categoria.

O Tema dos Twenty Twenty WordPress

Mais um ano, outro tema padrão do WordPress. Desta vez, são Twenty Twenty, e vamos mergulhar fundo e ver o que mudou com a navegação.

Vou examinar se há algo diferente na forma como os criadores decidiram abordar os menus e as ligações internas com esta mais recente instância do WordPress.

Menu de cabeçalho

Tal como qualquer tema padrão do WordPress, a nova versão oficial tem um menu sem frisos na seção do cabeçalho. Pode selecionar diferentes locais de visualização e é assim que a opção Menu Horizontal do Ambiente de Trabalho fica:

Por outro lado, a opção Menu Expandido do Ambiente de Trabalho irá adicionar a possibilidade de expandir as ligações do seu menu numa barra justificada no lado superior direito.

A área de conteúdo principal é matizada com um cinzento escuro, conduzindo o foco do utilizador ao menu nos links.

Rodapé

No rodapé, não existem links para navegação interna, excepto um simples link “Para o topo” que o leva de volta ao topo da página.

O que faz uma boa navegação no site?

Uma boa navegação no website é sempre concebida tendo sempre em mente o utilizador. Utiliza uma linguagem clara e fácil de compreender, e links para as páginas mais importantes.

Faz uso de amplo espaço branco, mudanças de cor ou outras técnicas de desenho para se separar claramente do conteúdo principal. Além disso, é mais fácil de ler e utilizar em todos os dispositivos (móveis e de secretária).

A navegação orientada para o utilizador também significa que é contextual. Tem em consideração a experiência e as expectativas do utilizador. Essa pode ser uma razão pela qual os jornais em linha ainda não conseguem escapar ao seu design “apinhado”.

No contexto da leitura de um jornal, é isso que os seus utilizadores e potenciais clientes esperam, o que inclui os seus extensos menus de categorias e subcategorias.

Na próxima seção, irei abordar as bases de como criar uma boa navegação para o vosso site.

8 Princípios para uma Melhor Navegação do Website

Mesmo que seja um principiante completo, você poderá navegar no seu site seguindo as dicas abaixo.

1. Planeie a Estrutura e Navegação da sua Página

Antes mesmo de começar a escrever conteúdos para o seu site, planifique a estrutura e a navegação da sua página.

O planeamento é uma parte essencial do processo de proporcionar aos seus visitantes uma navegação satisfatória. Pode utilizar um criador de mapas do site para o ajudar a criar rapidamente maquetes para aquilo que pretende que seja a sua experiência no site.

Um exemplo de uma boa ferramenta de mapa do site é o GlooMaps.

Pode criar todos os documentos que necessitar gratuitamente. Cada um deles terá um URL único que poderá partilhar para recolher feedback e deixar que outros o editem. Uma vez criado, o seu URL estará disponível durante 14 dias, a não ser que seja visitado novamente. Cada nova visita prolonga a vida útil do link por mais 14 dias.

GlooMaps não é a única ferramenta que você poderia usar, há muitas mais como Octopus, VisualSitemaps, Creately, só para citar algumas.

2. Seguir as Normas Estabelecidas

Não tente reinventar a roda. A navegação no site é mais sobre a usabilidade do que sobre a criatividade.

Para elementos essenciais do design como onde colocar o seu menu, e como indicar que é expansível, siga as normas conhecidas.

Três faixas horizontais, ou o sinal “hambúrguer” ☰, é um dos ícones mais reconhecíveis para identificar um menu expansível. O outro são os três pontos que criam uma linha horizontal.

Se tentar ser criativo e desenvolver um ícone personalizado, é provável que muitos visitantes não compreendam o objectivo do seu design e tenham dificuldade em encontrar o seu menu.

3. Utilize o vocabulário dos seus utilizadores

Em vez de se limitar a ligar às mesmas páginas antigas, utilizando uma linguagem de desenvolvimento web padrão, ou uma cópia demasiado criativa, utilize uma linguagem que esteja mais próxima daquilo que os seus utilizadores utilizam e procuram e querem.

Esta abordagem é benéfica tanto para a SEO como para a usabilidade. Crie páginas que reflitam o que os seus utilizadores estão à procura online.

Pode então criar um link para essas mesmas páginas, utilizando as mesmas palavras e frases que ajudam os utilizadores a encontrar o seu site no Google.

4. Usar Menus Reagentes

Uma vez que mais de 52% de todo o tráfego em linha é agora móvel, a concepção com capacidade de resposta/primeiro telemóvel tornou-se uma necessidade absoluta.

Em vez de menus que continuam fora do quadro do navegador da Web móvel ou demasiado desorganizados, assegure-se de que implementa menus móveis expansíveis.

Tornou-se uma norma industrial por uma razão. Menus horizontais com texto minúsculo são difíceis de ler, clicar e utilizar corretamente no telemóvel.

A boa notícia é que todos os melhores temas WordPress vêm com menus e design responsivos por defeito. A menos que esteja a desenhar o seu site WordPress a partir do zero, o WordPress já o tem coberto aqui.

5. Tire Vantagem do Seu Menu do Rodapé

Os leitores que continuam a ler e a rolar até ao fundo do seu site estão mais empenhados do que o utilizador médio. Aproveite isso e utilize o espaço no fundo de cada página para destacar conteúdos valiosos.

Como o rodapé não está a comer “acima do espaço da dobra”, pode ficar granulado e incluir várias categorias, e até destacar páginas ou artigos de pedra angular vitais.

Como exemplo, vejam como lidamos com o nosso rodapé nesta mesma página. Cobrimos páginas de características essenciais, a nossa empresa, decompomos os nossos recursos, e muito mais.

O rodapé permite destacar o conteúdo que “simplesmente não conseguiu encaixar” no cabeçalho.

6. Utilizar o espaço de cor e branco para separar a navegação de outros elementos

Use cores, fontes e espaço em branco para separar os seus menus do conteúdo principal e das suas barras laterais. Deixe claro onde começa e onde termina a navegação.

Não importa a língua que utiliza nos seus menus, ou para que páginas faz o link se os visitantes do seu site não conseguem sequer encontrar o menu.

7. Evitar Menus Dropdown

Para a maioria dos sites (não todos), os menus dropdown não são necessários nem úteis. Quando os usuários vêem um link em um menu, a suposição é que ele é clicável. A menos que o design o separe de links clicáveis, pode levar a confusão.

Ter demasiados links no seu menu principal também pode ter um impacto negativo na usabilidade do seu website.

A implementação de navegação hierárquica e local em vez de menus desdobráveis pode conduzir a um fluxo de utilizadores mais suave. Também permite aos utilizadores interagir com várias páginas e passar mais tempo no seu site, em vez de navegar através de uma lista gigantesca de links.

8. Aplainar a sua estrutura

Se quiser facilitar ao máximo a exploração de todas as páginas do seu site, mantenha uma estrutura de navegação o mais plana possível.

Em vez de ligar a um punhado de páginas da sua página inicial, e depois expandir com cada vez mais sub-páginas e categorias, mantenha as coisas simples.

Certifique-se de que estabelece um link para categorias significativas a partir da sua página inicial, e estabeleça um link para uma única camada de subcategoria ou páginas de um único artigo a partir daí.

Há provas de que aplanar a estrutura desta forma tem um efeito positivo no SEO e pode levar à criação de links para sites do Google. Portanto, não deixe a estrutura do seu site ficar muito confusa!

Tendências do Menu de Navegação do Website

Embora as tendências mais amplas de web design dos últimos anos incluam coisas como elementos de design 3D e a incorporação de fotografias feitas à medida em designs criativos, os menus não tiveram um ano muito excitante.

Mas isso não significa que nada tenha mudado. Eis a nossa rápida análise de algumas das tendências mais cruciais do menu ao longo dos últimos anos.

Categorias Expansíveis em Menus Móveis em Ecrã Inteiro

Uber e outras empresas gigantes com design renovado e moderno, atualizaram os seus menus para serem mais utilizáveis.

Uma questão para estas empresas é que têm tantos produtos e categorias diferentes que pode ser impossível incluí-los num único menu de forma sensata.

Isto leva a menus móveis claros e categorizados, em vez de apenas uma lista interminável de links.

Menus de Cabeçalho Flutuante

Talvez a tendência universal para os menus nos últimos anos seja o menu de cabeçalho flutuante.

Um menu de cabeçalho flutuante é um menu que se cola ao topo da janela do seu navegador web enquanto percorre a página (como o que usamos para kinsta.com). Normalmente é parte de uma seção de cabeçalho que inclui um pequeno logótipo e talvez também uma barra de pesquisa.

É difícil argumentar contra isso, pois o acesso constante a um menu torna a navegação interna muito mais fácil. Este tipo de menu está incluído em muitos temas do WordPress e a tendência é não mostrar sinais de parar.

Menus Overlay Dropdown no Ambiente de Trabalho

Alguns dos conselhos mais básicos sobre navegação em sítios Web é manter-se afastado dos menus dropdown. E por uma razão.

Mas isso não significa que sejam intrinsecamente terríveis. Os menus suspensos são apenas complicados de implementar de uma forma que faça sentido no ecrã do computador.

Com uma sobreposição de cores sobre o conteúdo principal, podem forçar 100% da atenção do utilizador para o menu. Tem também melhores opções para as categorias expansíveis do que a apresentação de outros links no hover.

Estes fatores uniram-se para que se tornasse uma tendência crescente em 2019. De fato, muitos sites e modelos inovadores incluem menus suspensos sobrepostos no ambiente de trabalho.

Resumo

Este post deveria ter dado uma compreensão clara do que é a navegação no website e de alguns dos seus pontos-chave.

A navegação no site deve sempre ser focada na simplicidade, clareza, em vez de cores intensas e design criativo. Como a navegação e os menus do seu site precisam de ter em conta tanto os utilizadores desktop como os móveis, as coisas podem tornar-se mais complicadas e contratar um programador web pode ser uma boa escolha.

Tente sempre seguir as melhores práticas de design do menu do site para garantir que os seus visitantes e mecanismo de busca possam navegar facilmente pelo seu conteúdo.

A usabilidade e a clareza continuarão a ser prioridades a avançar. Assim, se conseguir dominar a linguagem do seu utilizador e criar uma estrutura que faça sentido para ele, será capaz de provar os seus menus no futuro.