Padrões essenciais de navegação em 2016
Seu menu de navegação faz ou interrompe o UX do seu website, que é o que você deve projetar principalmente em todos os momentos. Não há melhor serviço que você possa oferecer aos seus clientes como designer do que garantir que os sites criados para eles contenham uma experiência de usuário impressionante e altamente funcional.
Uma UX esplêndida garante que os sites de seus clientes recebam mais leads, visitantes e leitores, além de reter visitantes regulares. É a parte mais importante da criação de um site e você tem um ótimo controle sobre ele com base em como você cria o menu de navegação do seu site.
Infelizmente, nem todos os designers priorizam a criação de excelente navegação, o que prejudica os clientes e visitantes.
Para criar uma reputação muito credível como designer - e para ser um designer sob demanda - você precisa dominar um dos aspectos mais básicos do design da web. Isso está criando navegação estelar para os sites de seus clientes.
Veja como.
Navegação pegajosa
Navegação pegajosa é um componente essencial da navegação, pois permite que seus usuários acessem instantaneamente o menu e encontrem com facilidade o que desejam em seu site. A navegação fixa permanece bloqueada enquanto os usuários rolam uma página para baixo. Não há nada mais frustrante - especialmente no caso de páginas de rolagem longa - do que ter que rolar todo o caminho novamente para navegar para outra página no site.
Lembre-se de que, na Web, a velocidade é tudo (carregar páginas, encontrar conteúdo desejado, etc.), portanto, permitir que os usuários acessem o menu de navegação mais rapidamente é uma prática recomendada.
Ao incluir uma barra de navegação fixa, você também ajuda a reduzir a carga cognitiva em seus usuários, colocando constantemente suas opções de navegação bem na frente deles.
Imprensa alternativa apresenta um bom exemplo de como incorporar a navegação em suas páginas. Observe como todas as seções mais importantes são facilmente acessíveis e identificáveis, por contraste de cores efetivo, na barra de navegação, não importa o quão longe você desça a página.
Hipertexto óbvio
Hipertexto é qualquer referência de texto nas suas páginas em que os usuários possam clicar para obter informações adicionais, geralmente em outra página, seja no mesmo site ou fora do site. Os hiperlinks são provavelmente o exemplo mais identificável de hipertexto.
Como o hipertexto contém informações que ajudarão a experiência do usuário fornecendo mais informações, é lógico que essas referências úteis sejam muito notadas. No geral, isso aumenta a navegabilidade do site que você cria.
Eu recomendo tornar o hipertexto flagrante por dois recursos de design simples:
- Sublinhado
- Mudando a cor
Quando você destaca qualquer palavra no conteúdo da sua página - digamos que é um hiperlink para a página sobre o seu cliente - ela imediatamente chama a atenção dos visitantes do site, o que os ajuda a navegar para informações importantes com maior facilidade.
Da mesma forma, quando você faz a cor dos hiperlinks diferentes do texto e do plano de fundo de suas páginas, você o destaca novamente na página, para que os usuários possam identificá-lo facilmente e clicar nele.
Site de marketing O ovo diário usa sublinhado e cores diferentes para o hipertexto, facilitando a identificação de links pelos usuários.
Menus mega
Menus mega são uma ótima ideia para navegação, especialmente se o site que você está criando para o seu cliente tiver muitos conteúdos e categorias. Lojas de eCommerce vêm à mente. Estes são painéis suspensos essencialmente enormes que abrem camadas adicionais de navegação para ajudar seus usuários a encontrar especificamente o que eles querem mais rapidamente.
Esses menus melhoram a experiência do usuário, incluindo benefícios como:
- eliminação de rolagem;
- dicas de ferramentas;
- ordenada estruturação de conteúdo por ícones, layout ou tipografia.
Tudo dito, esses recursos tornam muito mais fácil usar o menu de navegação.
Para um exemplo sólido de um mega menu, vá para Rede de comida Do site. Observe como o menu flyout exibe uma das partes mais procuradas do conteúdo do site - as receitas - em um formato fácil de ver que permite que os usuários escolham imediatamente onde querem ir, em vez de rolar ou paginar para mais opções.
Valor padrão e idioma
Uma alternativa de padrão é usar um símbolo convencional que a maioria dos visitantes do site entenderá imediatamente, como um ícone da casa para representar a página inicial do seu site. Uma oferta de idioma é o uso explícito de uma palavra, como "casa", para esclarecer que clicar nessa guia levará os usuários à página inicial do site.
Affordances comunicam aos usuários como eles podem interagir com os elementos em seu design. Embora isso seja certamente o Design Basics 101, ainda é tão importante praticar hoje como era nos primórdios da Internet.
Um menu de navegação funcional deve ter o símbolo da casa ou a palavra "casa" posicionada na primeira guia de navegação à esquerda. Embora alguns designers possam, em vez disso, optar por incluir o logotipo de uma empresa como o ícone ou botão "doméstico", isso ainda deixa muito espaço para erros do usuário.
eTailer Armazém de quadros Demonstra este princípio de design para um tee, com o uso de "casa" para não deixar dúvidas onde essa guia levará os visitantes do site.
Tempo de carregamento rápido
Velocidade = ótima experiência do usuário. Designers de todos os estilos devem registrar isso como uma das regras de design mais cruciais que eles simplesmente não podem e não devem relegar. De acordo com a revista Wired , quase 50% dos compradores querem que a página média seja carregada em dois segundos ou menos! Dito de outra forma, se as páginas que você cria para seus clientes levar mais de dois segundos para serem carregadas, é muito provável que elas deixem os sites de seus clientes e nunca retornem, causando pesadelos graves de conversão.
Esta é uma estatística preocupante, com certeza, mas há algo que os designers podem fazer para garantir que eles estejam fornecendo desempenho de página de alta qualidade para seus clientes. Basta testar a velocidade das páginas que você projeta. Há várias ferramentas confiáveis para ajudá-lo a determinar os tempos de carregamento da página:
Para um exemplo de um tempo de carregamento de página muito rápido, vamos para o Enchanted Learning's O que é uma baleia? página. O design pode usar algum trabalho, mas a página é carregada em pouco mais de um segundo, de acordo com a barra de ferramentas analíticas do Alexa.
Ótima navegação é ótimo UX
Uma grande parte de uma ótima experiência do usuário é a navegação do seu site. É a base sobre a qual repousa toda a experiência do usuário, se você realmente pensar nisso. Quando seus usuários não conseguem encontrar o caminho do site do seu cliente com facilidade, isso se torna frustrante para eles, fazendo com que eles saiam com pressa. Assim, uma excelente navegação deve facilitar a utilização de qualquer site que você crie; esse é o benchmark de uma boa experiência do usuário.
Embora possa ser tentador dar à navegação a pouca atenção nos estágios do projeto - por causa das novas tendências de design surgindo o tempo todo - não é aconselhável. Seus usuários perceberão, assim como seus clientes. Para agradar seus clientes, você deve agradar seus usuários. Você só pode fazer isso quando você projeta para uma ótima experiência do usuário em primeiro lugar, com ênfase principal em obter a navegação desde o início.