3 Tendências Essenciais de Navegação para 2015
Feliz Ano Novo a todos os nossos leitores! Hoje, vamos dar uma olhada em três principais tendências de navegação que irão dominar 2015.
Poderíamos pensar que exploramos todas as variações possíveis de navegação na Web e, no entanto, vemos uma exploração contínua dentro desse nicho muito específico. É realmente incrível quantas variações de design podem ser aplicadas a uma lista humilde de links.
Aqui eu quero considerar 3 tendências populares na área de navegação: primeiro como o uso do navicon (ou ícone de hambúrguer) está mudando, segundo uma nova abordagem usando menus em tela cheia e finalmente o que eu considero a perfeição do mega menu suspenso. Vamos mergulhar e ver essas abordagens no trabalho.
Viva a morte do navicon!
Facebook é dado crédito por popularizar o uso de navicons para ocultar as opções de navegação fora da tela, ou fora da tela. Com o surgimento do web design responsivo, a comunidade de web design estava desesperada por uma solução para a navegação. Embalar tudo em um painel de navegação que fica fora da tela, e se move ao selecionar o navicon foi uma solução atraente. Parece que a comunidade percebeu isso como uma solução fácil que parecia facilitar muito a vida do designer e do desenvolvedor. Como resultado, o navicon tornou-se uma opção para aplicativos e sites para dispositivos móveis.
Recentemente, no entanto, o navicon foi atacado. Em muitos desses debates parece que um detalhe crucial é omitido. A indústria de aplicativos móveis está se afastando facilmente da navegação fora da tela em favor das opções na tela. Isto vem como a tendência é para aplicativos focados, de propósito único. Isso torna a mudança mais razoável. Em contraste, até mesmo um site pequeno pode ser embalado com dezenas, se não centenas de links na navegação. Tomemos por exemplo um site como o sony.com, ou até mesmo este site. Esses sites têm necessidades de navegação que vão muito além do que é possível com uma faixa de guias simples. Por essa razão, parece-me que navicons e menus off screen estão aqui para ficar. Nós simplesmente temos que estar conscientes de suas limitações, potenciais problemas e assim por diante. E, claro, tenha sempre em mente o uso: é um aplicativo móvel ou um site móvel / responsivo. Porque eles não são iguais.
O site da agência de design Long Story Short é um ótimo exemplo de como alavancar o navicon de maneira significativa e restrita. Este site faz uso do navicon para esconder toda a gama de opções de navegação. Ele faz isso nas versões para celular e desktop do site. O uso de navicons na área de trabalho é na verdade toda uma sub tendência aqui. O que torna este site um excelente exemplo da abordagem é que os elementos mais críticos da navegação aparecem fora do menu . A home page é um portal para as três seções mais importantes do site. Desta forma, o menu oculto não é a navegação primária, mas sim um secundário que preenche os espaços em branco.
O site Squarespace é outro exemplo encantador de como usar efetivamente menus ocultos. Neste site, as opções de tour e login estão sempre visíveis. Enquanto aproximadamente 23 opções de menu no total estão contidas no menu deslizante. Francamente, o uso de menus ocultos para permitir que as opções de navegação mais importantes ocupem o centro do palco é nada menos que brilhante. Eu passei por uma fase em que estava realmente deprimida no uso de navicons na área de trabalho; Parecia uma falta de uso da técnica. No entanto, depois de ver como os sites estão usando para direcionar os usuários para os elementos mais críticos, não posso deixar de amá-lo.
Finalmente, se você estiver sofrendo com o uso de navicons, ou menus escondidos, não aceite a palavra de ninguém. Em vez disso, faça seus próprios testes de usabilidade para ver se está funcionando no seu site. Uma ótima regra é evitar o debate e, em vez disso, fazer o teste.
Navegação em tela cheia
A segunda tendência que eu gostaria de ver é o uso de menus de navegação em tela cheia. Estes menus são tipicamente ativados por um botão ou link de algum tipo; frequentemente um navicon. A diferença aqui é que, em vez de um pequeno painel que desliza para fora, a navegação assume a tela inteira. No celular, isso parece normal, mas na área de trabalho essa é uma abordagem nova e interessante.
A navegação neste site é realmente interessante na medida em que a sobreposição de navegação contém muitos detalhes no menu. Aqui eles têm as opções de menu esperadas, mas como é tela cheia eles também têm espaço para um formulário de contato completo, informações de contato, links de mídia social, um post recente no blog e um importante apelo à ação.
É interessante considerar que um usuário que está lançando um menu a qualquer momento está procurando orientação. Isso faz com que seja uma excelente oportunidade para orientá-los para o que você quer que eles façam. Neste caso, eles querem que o usuário entre em contato ou visite o planejador do projeto.
Neste exemplo, também vemos o padrão no trabalho, mas de uma maneira muito mais minimalista. Em vez de embalar em opções extras, optaram por simplesmente apresentar uma lista muito concisa de opções de navegação. Além disso, recebem pontos de bônus para animar o navicon em um "x" para fechar o menu.
Perfeição do menu super dimensionado
Finalmente, quero considerar o menu suspenso de tamanho super ou mega. O uso de sistemas de menu super dimensionados não é novidade. O que eu acho interessante é o conteúdo colocado dentro deles. Na minha avaliação das coisas, os designers realmente colocaram esse novo espaço para funcionar de maneira poderosa.
O site Lowes demonstra perfeitamente o que tenho em mente. Aqui você pode ver que o sistema de menus se tornou um local para o conteúdo. Este conteúdo pode ser usado para direcionar o fluxo de usuários através do site. Mais importante ainda, pode levá-los ao conteúdo mais importante. A questão torna-se, qual é o conteúdo mais importante? Talvez sejam os itens mais lucrativos da sua loja. E assim a navegação funciona como um vendedor empurrando os produtos mais lucrativos. Ou talvez seja usado para orientar os usuários para os itens mais populares.
Outro site que usa essa opção de maneira um pouco diferente é o site do New Balance. Aqui os três primeiros dropdowns são grandes por natureza, mas são essencialmente listas de links. No entanto, a última opção para criar sapatos personalizados produz o menu suspenso mostrado acima. Esta opção de menu é um link único. Eu adoro o fato de eles terem aproveitado a oportunidade para tornar este item único em uma introdução realmente atraente ao conteúdo por trás do link.
Conclusão
Essas três tendências, embora possamos discuti-las separadamente, têm muitas características em comum. Primária entre estes é como a navegação mudou ao longo dos anos. Os menus suspensos costumavam ser geralmente uma lista organizada de links. Na maior parte, eles eram um tanto neutros, pois todas as coisas eram apresentadas igualmente. Agora, descobrimos que os sistemas de navegação são uma maneira fundamental de ajudar os usuários a atingir metas desejáveis.
Para mim, o desafio é claro. Que devemos elevar nosso pensamento sobre navegação e realmente adotar a influência que ela tem na experiência de usar os sites que criamos. Muitas vezes eu acho que a navegação é um pouco de uma reflexão tardia. Quando, na verdade, deve estar entre os elementos mais considerados e refinados no design.