Uma das primeiras coisas que você faz ao iniciar um novo blog é criar uma barra de navegação ou menu. Mas quais links devem ir para lá? E, mais importante, alguns links têm melhor desempenho do que outros?
Eu mesmo passei um tempo brincando com isso e fiquei bastante surpreso com o que funciona e o que não funciona.
É interessante notar que os cinco links "tradicionais" que quase todo mundo inclui no topo, na verdade, nem sempre são os melhores.
Vamos dar uma olhada no que alguns sites estão fazendo com suas barras de navegação e que lições podemos tirar para as nossas.
A barra de navegação tradicional
Desde o início dos sites, as pessoas colocam os mesmos cinco links nas barras de navegação: Início, Sobre, Serviços, Notícias/Blog, Contato.
E tudo bem.
Mas definitivamente não é perfeito.
Hoje em dia, há muito mais que podemos fazer com esse espaço privilegiado no site. Não é mais apenas um lugar para navegar pelas seções principais – é um lugar que pode responder a diferentes visitantes, mudar para várias plataformas, exibir fotos, etc.
Poderíamos ser um pouco mais criativos.
Algumas barras de navegação excelentes da web
Vamos começar dando uma olhada em algumas das melhores barras de navegação que consegui encontrar e depois terminaremos com algumas ideias, recursos e um plano de ataque para a sua.
1. Airbnb – o menu responde ao status de login e interações
O primeiro exemplo é do Airbnb, que tem uma ótima barra de navegação superior que mostra informações diferentes dependendo se você está logado, ou se fez alguma reserva, salvou itens, etc.
Este é um recurso avançado muito legal que pode ser implementado de várias maneiras, dependendo do conteúdo que você quer que as pessoas notem mais em seu site ou blog.
Por exemplo, você pode ter uma pequena seção em seu menu que mostra aos usuários seus artigos salvos ou itens com os quais interagiram várias vezes. Você pode até ter uma seção que mostra os artigos populares no momento e permite que as pessoas os avaliem ou compartilhem nas redes sociais. Talvez haja uma ideia de plugin nisso?
2. Smart Passive Income – recursos animados
O próximo exemplo vem do Smart Passive Income, onde Pat chama a atenção para sua renda mensal usando um gráfico animado muito elegante que cresce à medida que a página carrega.
Esta é uma maneira muito inteligente de destacar uma das áreas mais importantes do seu site. Pat usa seus relatórios de renda como um construtor de marca real e como inspiração para pessoas que desejam obter uma renda passiva online, e adicionar um recurso proeminente como este ajudaria muito a atrair leitores mais a fundo, promovendo outras áreas do site, afiliados, etc.
Alguém notou e está usando o novo menu de navegação no SPI? Tenho implementado novas estratégias para uma melhor orientação com base no seu feedback.
— Pat Flynn (@PatFlynn) 9 de dezembro de 2016
O interessante é que, como Pat é Pat, ele está constantemente testando o desempenho de sua configuração. Notei este tweet sobre sua barra de navegação alguns dias depois que comecei a pesquisar e escrever este artigo.
3. Starlight – gráficos e branding na barra de navegação
A instituição de caridade infantil Starlight incorporou muito bem sua marca em seu menu. Como você pode ver, há lindas ilustrações que dão vida ao menu e o tornam mais interessante e envolvente.
Outra característica deste menu que eu gosto bastante é como o resto do site escurece para que o foco permaneça no próprio menu – meio que como uma lightbox. Isso também ajuda a chamar a atenção para os três botões amarelos, que são talvez os itens principais, em oposição à simples navegação.
Barras de navegação e menus não precisam ser apenas áreas simples. Podemos incorporar elementos de branding e design para tornar o site mais memorável e distinto.
4. Treasury of Lives – linha do tempo servindo como menu de navegação
Eu queria incluir este exemplo porque mostra que uma barra de navegação nem precisa parecer uma barra de navegação tradicional. O site Treasury of Lives coleta biografias de professores budistas do Himalaia e, como tal, é útil mostrar a era em que eles viveram em relação uns aos outros.
Se você visitar o site, notará que eles usam uma barra de navegação tradicional, mas eu estava pensando em como haveria alguns casos em que seria muito único usar esse tipo de estilo de linha do tempo para funcionar como a principal forma de se mover pelo site.
Claro, você não precisa ter uma longa história para usar este formato. Eu estava pensando, por exemplo, em fazer algo semelhante em termos de progressão de um blog e nas etapas em que você deve instalar um plugin, adicionar um tema, ajustar isso, mudar aquilo, etc.
5. Google Fonts – menu que economiza espaço
O Google geralmente faz as coisas muito bem (desculpe Google Wave, eca) e no Google Fonts você tem um ótimo exemplo de um menu que economiza muito espaço por não ser realmente visível até que você decida interagir mais com o conteúdo.
Eu gosto dessa opção porque ela deixa a ênfase no próprio conteúdo – especialmente considerando que o conteúdo deste site é interativo. Ter uma barra lateral que permite alterar a forma como o conteúdo é exibido às vezes pode ser um truque (não acho que mudar as cores de fundo seja tão útil), mas outras vezes pode ser uma maneira realmente boa de aprimorar o que está disponível (não perca meu guia completo sobre como editar sua barra lateral do WordPress).
Então, o que devo colocar na minha barra de navegação?
Depois de tudo isso, você pode estar se perguntando o que diabos colocar na sua barra de navegação!
Bem, a boa notícia é que realmente não importa – não há regras rígidas e rápidas.
A má notícia é que a única maneira de descobrir a combinação ideal é fazer alguns testes – e isso pode levar tempo. Sites como o Visual Website Optimizer podem ajudá-lo.
Ser estratégico com sua escolha
Uma coisa que você vai querer fazer é pensar cuidadosamente sobre qual conteúdo/página específico você quer que os visitantes encontrem facilmente e, em seguida, construir sua barra de navegação em torno disso, removendo tudo o que for extra.
Lembre-se, você conhece seu conteúdo melhor do que seus leitores e, como tal, deve ajudá-los a encontrar o material certo. Isso faz parte desta estratégia de blog.
Por exemplo, estou testando um botão ativado por rolagem no canto superior direito que pode enviar as pessoas para diferentes páginas que quero direcionar. Eu até removi coisas como Contato do meu menu e coloquei no rodapé porque e-mails não são uma prioridade para mim e consomem muito tempo.
Ser prestativo com sua escolha
A próxima coisa que você pode querer considerar é como melhor servir seus leitores no nicho específico em que você está.
Por exemplo, se você tem uma loja online, pode ser melhor ter um enorme mega-menu com todas as categorias, estilos de produtos, opções de envio, etc. disponíveis para que toda a loja online seja acessível em um ou dois cliques. Etsy é um exemplo disso bem feito.
Com menus mais complicados, você precisa ter certeza de que ele ainda funciona bem no celular e para usuários de diferentes tamanhos de tela, a fim de evitar qualquer confusão. Às vezes, um mega-menu no celular adiciona muitos cliques.
Ser distinto com sua escolha
A última opção sobre a qual quero falar é a ideia de simplesmente fazer o que funciona para sua marca e ajudá-la a se destacar da multidão.
Se o seu blog tem uma pequena biografia sua na barra lateral em todas as páginas, talvez você não precise vincular a uma página Sobre na barra de navegação. Ou, se o seu logotipo funciona como um botão inicial, não ocupe espaço com outro link Início. Ou, se seus serviços são um pouco mais complicados do que a maioria, pense em colocar uma página Comece ou Experimente.
O que está na sua barra de navegação?
Deixei este artigo bem aberto, pois genuinamente acho que a melhor maneira de determinar o que vai em uma barra de navegação é testá-la para cada blog ou site individual que você gerencia e ver o que funciona.
That being said, I’d love to know what is in your menu, how you decided on those links, and how they’ve been working out for you. Please leave a comment below and let me know.
Post útil. Temos uma navegação interessante quando você rola para baixo, o que você acha dela? Obrigado.
Oi John. Gosto dos ícones. Há um pequeno espaço no topo na minha tela. Isso deveria estar lá?
Você tem certeza de que há um espaço? Se for uma linha branca de 1px, é apenas o seu navegador? Ou talvez você possa mostrar uma captura de tela para que eu possa consertar
Macbook Pro 15 polegadas + Firefox mais recente: http://imgur.com/a/QeStg
Ok. Pode haver um milhão de razões para isso estar acontecendo no seu e não no meu, mas eu olhei meu código e escolhi uma solução melhor. Antes eu estava usando margin-top: pixels negativos. Pode ser um problema de resolução.
A solução muito melhor em vez de pixels negativos é top: 0;
Agora tente, por favor, me diga se está corrigido.
LOL, de novo você entrega conteúdo só para mim, com um timing quase perfeito! Estou me preparando para lançar em fevereiro (espero), e tenho pensado muito em navegação nos últimos dias…. Tenho um forte desejo de quebrar com a tradição, e há muito o que pensar aqui 🙂
Incrível! Espero que ajude!
Estas são ideias incríveis! Adoro a #2 e a #3. Minha barra de navegação é elegante e tradicional, mas a diferencio usando um tom conversacional. Exemplo:
Bem-vindo! | Deixe-me apresentar. | Olá novamente! | Você merece! | Precisa de Recursos? | Mantenha contato.
Após clicar em cada página, você encontrará os títulos típicos da página para qualquer esclarecimento necessário. (Também publiquei meu primeiro post com a ajuda do seu guia e dei um pequeno crédito a você. Obrigado!)
Oi Carmen. FYI seu comentário foi para o spam – pode ser devido ao endereço web bit.ly.
Obrigado pelo crédito! Vou dar uma olhada.
Obrigado por me informar. Desculpe por isso.
Antigamente, chamávamos isso de “navegação de carne misteriosa”. Geralmente, recomenda-se que seus links de navegação sejam claros e concisos. A maioria dos seus links não me diz o que posso esperar encontrar quando clico neles. Por outro lado, se não está quebrado…
Você me deu muito o que pensar. Eu sou definitivamente uma novata em tudo isso, e concordo. Eu prefiro muito mais ter um site claro do que visitantes confusos. Obrigado pela crítica construtiva!
Oi, Ramsay,
Mudei as coisas no meu Site de Autor recentemente. Na verdade, não tenho mais uma barra de navegação. No entanto, tenho imagens que estão vinculadas a todas as minhas informações.
O que você acha?
Jennifer
Oi Jennifer.
Gosto do conceito.
Eu sugeriria talvez usar fotos de maior qualidade e torná-las mais um destaque. Acho que você realmente quer dar o seu melhor se essa é a abordagem que você está tomando. As imagens estão bem borradas para mim em uma tela retina.
Eu também sugeriria talvez uma fonte que esteja alinhada com a marca do seu livro para que tudo seja consistente em todas as plataformas.
Última coisa! Para fins de SEO e clareza, realmente acho que você precisa de algum tipo de logotipo ou cabeçalho explicando onde as pessoas estão.
Espero que essas sugestões não sejam muito indesejadas.
Obrigado!
Ótima contribuição! Muito obrigado.
Seu conselho é sempre bem-vindo…
Jennifer
Ter as mesmas opções de navegação em todas as páginas é essencial. Se alguém acessar qualquer página que não seja a sua página inicial, não terá uma maneira (fácil) de ir para outra página.
Eu estava prestes a dormir quando recebi seu e-mail… Pensei que deveria lê-lo agora na cama ou esquecerei sobre ele…. Concordo totalmente com você que depende totalmente do que funciona para alguém… Também notei um gráfico animado no site do Pat quando o visitei e foi muito chamativo…. por que você não está usando atualizações de conteúdo em seus posts? Todo mundo está usando…
Oi Abdullah.
Não achei as atualizações de conteúdo particularmente úteis para conversões de longo prazo e elas levam muito tempo para serem elaboradas.
Apenas adicione checklists a posts de lista ou aos seus posts mais populares… eles não levam muito tempo para criar…
Obrigado por responder Ramsay..
Uma das razões pelas quais continuo voltando… você não incomoda as pessoas com upgrades de conteúdo inúteis ou pop-ups e/ou solicitações de push irritantes.
Esta é uma parte crítica de qualquer site – adotei uma abordagem deliberadamente simples, usando um tema muito simples – o menu é um texto puro, talvez eu devesse ter um visual mais bonito e legal! Estou considerando usar um tema radicalmente diferente, tudo para reflexão. Ótimo post Ramsay!
Oi Michael. Fico feliz que você tenha gostado. Eu definitivamente consideraria remover links do seu menu para que ele não ultrapasse uma linha.
Boa ideia, às vezes fico cego para meus próprios problemas de desenvolvimento! Estou ajustando agora. Obrigado Ramsay.
Na verdade, acabei de finalizar a barra de navegação do meu novo site, então este post chega em ótima hora.
Eu optei por isto: Comece Aqui, Compre, Blog, O Que Eu Amo, Trabalhe Comigo
Para minha marca (ensinar mães a ganhar dinheiro com blogs), acho que minha linha de navegação funciona.
A propósito, EU AMO o "QUEM?" na sua barra de navegação. Nunca vi isso antes. Muito criativo! E imagino que sua página de "ferramentas" seja sua página de recursos?
Boas escolhas! Sim, essa página Quem? parece funcionar bem.
Olá Ramsey,
Meu blog é simples, mas converte como louco.
Uma coisa que você apontou é ter duas páginas iniciais (logo e baseada em texto)
Quais partes convertem como louco?
Existem três páginas que convertem muito bem.
Sobre | Página de Recursos | Comece aqui.
Saúde!
Ramsay,
É um post de blog maravilhoso. Quase dois anos atrás, parei de focar em Marketing de Afiliados e Google Adsense depois que adicionei um link de texto de 'Contrate-me'…
Eu estava oferecendo meu serviço de redação freelancer. Acabou sendo um passo que mudou minha vida porque virou minha estratégia de blog de cabeça para baixo. Então, continuei testando. Consegui atrair prospects e conseguir clientes sem me preocupar com o número de visitantes.
Fico feliz que você tenha falado sobre isso.
Adorei! Parabéns.
Outra mina de ouro! Como você tem essas ideias raras de posts, eu não sei, mas vou dizer, este blog me leva ao limite. Continue o bom trabalho Ramsay!
Obrigado. Eles geralmente vêm de coisas em que estou trabalhando.
Essa é uma perspectiva única!
Frequentemente olho para os pequenos elementos dos sites e admiro sua eficácia – seja na forma de conteúdo, design do site ou ideias – eles são inovadores.
Embora eu pense em implementar alguns deles no meu blog, eu não o faço, pois ajustar meu blog sempre acaba sendo um trabalho bagunçado.
Às vezes eu estraguei tudo tentando fazer todas as coisas aleatórias por conta própria, depois das quais estou tentando mantê-lo comum.
No momento, minha barra de navegação é semelhante à que poderia ter existido na Idade da Pedra. Talvez eu consiga fazer todas as coisas legais quando for capaz de fazê-lo, até lá, vai continuar assim.
Quanto às barras de navegação em outros sites, gosto daquelas que facilitam a acessibilidade, como as barras de contato em sites como The Minimalists ou Webby Awards – elas não te redirecionam para outro lugar apenas para seguir ou curtir, o que acredito que facilita ganhar mais seguidores.
Ou quando outros elementos desaparecem em uma instância específica ao passar o cursor sobre uma determinada opção – nada de especial, mas fica legal.
Há muitas outras coisas legais com as quais as pessoas experimentaram. Aw! Não consigo me lembrar agora.
Concordo sobre os elementos desaparecendo. Eu realmente gosto do site da Vanity Fair pela forma como eles fazem isso de maneira visualmente agradável, mas que ainda tem um propósito.
Bem na hora, Ramsay. Tenho olhado meu menu pensando que ele precisa mudar. Em vez de uma barra preta entre o cabeçalho e o conteúdo, estou movendo-a para um menu secundário no topo.
Topo é bom.
Valeu, cara
Nos avise como fica!
Isso é único, Ramsay. Continue assim.
Obrigado.
Ótimo post, Ramsey! Isso é algo que eu realmente não vi outros especialistas em blogs falarem. A única coisa que eu acrescentaria é que seus itens de navegação devem ser claros e concisos. Não tente ser fofo ou esperto. A última coisa que você quer é que seus visitantes fiquem confusos ou saiam porque não percebem que "Me chame" (por exemplo) é sua página de contato.
Esse é um bom ponto – especialmente porque muitos leitores de blogs em inglês agora não são falantes nativos de inglês.
Oi Ramsay,
Você fez um bom trabalho em reunir algumas ideias excelentes para ajustar a barra de navegação. Como a maioria dos blogueiros, eu também tenho a tradicional com Contato, Sobre Mim e Categorias.
Concordo com seu ponto de vista de que precisamos adicionar alguma criatividade para atrair muitos olhares. Gosto da navegação gráfica no smartpassiveincome.
Obrigado pelas ótimas contribuições, tenha um bom dia!
Oi Ramsay,
Bom compartilhamento. Pelo menos aprendo algo novo toda vez que visito seu blog.
Obrigado por compartilhar.
E Feliz Ano Novo.
Oi Ramsay,
Trabalho como blogueiro em tempo integral há muito tempo. Sou seu seguidor e também melhorei muitas das técnicas para ganhar a vida com blogs. Tenho um longo caminho a percorrer. 2017 será o meu ano e tenho novas ideias que vou implementar.
Ramsay, me deseje sorte e obrigado pela sua contribuição.