3 Regras Essenciais para um Design de Navegação Eficaz
Projetar o seu site de navegação é como lançar as bases para a sua casa. O fracasso em planejar adequadamente a sua fundação pode colocar o seu prédio em risco de colapso, independentemente de quão bonito pareça. Se você deseja aproveitar as melhores vendas ou conversões possíveis do seu site, precisa gastar tempo planejando como o público interagirá com seu conteúdo e descobrir a maneira mais intuitiva de organizá-lo e representá-lo.
Lembre-se sempre, se você errar esta parte, corre o risco de alienar uma grande parte do seu público.
O que é navegação?
Há mais de uma maneira de ver a navegação. Você poderia dizer que é um elemento focal em seu website que permite que seus clientes encontrem o que estão procurando sem confusão ou cliques desnecessários. De igual modo, pode argumentar que é uma forma de conduzir suavemente os seus clientes para as informações mais importantes do seu site, para gerar vendas ou consultas.
As chances são de ambos.
O design de navegação é como muitas outras coisas no design: não existe um “caminho certo” universalmente acordado para fazê-lo. Cada site apresenta seus próprios desafios, que podem ser abordados de várias maneiras. A boa notícia é que existem maneiras de pensar e organizar conteúdo que minimizam o risco de falha.
70percentpure's site apresenta uma navegação simples, vertical e horizontal.
1) Finalize seu IA primeiro
O planejamento do conteúdo de um site grande é uma tarefa essencial que deve ser concluída antes de projetar sua navegação. Também conhecido como IA (Information Architecture), esta visão geral, compreensão e manipulação do seu conteúdo é o que constitui a espinha dorsal da usabilidade do seu site. Projetar sua navegação antes - ou em vez de - projetar adequadamente seu IA seria como criar um índice de livro antes de imprimir as páginas. Não é uma boa ideia.
Uma habilidade natural para ver a grande figura ajuda quando se trabalha em IA. Mais importante, você deve poder ver o conteúdo da perspectiva do usuário. Às vezes isso significa ir contra a maneira como o cliente categoriza seu conteúdo - então venha preparado para a resistência, se for o caso.
Aqui estão algumas coisas que você pode se fazer para ajudar a preparar seu esquema e justificá-lo para o cliente:
- Quais páginas são necessárias para este site?
- Cada página tem um propósito dentro do esquema mais amplo e o conteúdo é dividido em partes sensíveis e relacionáveis?
- Quais permissões devem ser feitas para adicionar conteúdo no futuro?
- Com quais grupos de usuários você está trabalhando? (por exemplo, log in / out, tipos de assinatura, anunciantes, etc.)
- Qual é o objetivo principal de cada tipo de usuário?
Responder a todos os itens acima e entender como seu conteúdo se relaciona com seus usuários é fundamental para um bom design de navegação.
2) BEIJO: Mantenha-o simples, às vezes
Todo mundo que já usou um site provavelmente concorda: uma área de navegação deve ser o mais simples possível. Esmagar o usuário com escolhas e sobrecarregar a navegação com texto é uma má ideia e prejudicará seriamente a usabilidade geral do seu site.
A navegação simples da Bloomberg desmente a complexidade das informações em seu site.
E, no entanto, a simplicidade pode ser enganadora. Aprofundar e você pode descobrir que o que é realmente bastante complexo foi habilmente empacotado de uma forma que parece simples. Isso é IA em ação.
Tome a home page da Microsoft, por exemplo. Sua navegação principal tem apenas quatro itens, o que parece não ser suficiente, considerando a sua gama de produtos. Mas as listas suspensas são divididas de maneira muito inteligente em seções e apresentadas de forma que você possa encontrar o que está procurando de maneira rápida e fácil.
As subpáginas são como mini-sites, seguindo o mesmo formato de navegação. O menu parece e se comporta da mesma forma, mas se adapta para oferecer mais detalhes quanto mais fundo você entrar no site.
É fácil de usar, previsível e consistente. Considerando sua gama de produtos e o número de páginas em seu site, isso não é uma tarefa fácil, e é obviamente o produto de muitas horas de desenvolvimento iterativo. Não apenas se sente como um de seus produtos - o que é muito reconfortante para o visitante - mas também organiza o conteúdo de uma maneira que seja boa para o cliente e para a própria Microsoft.
3) Escolha a orientação cuidadosamente
Dado que uma tela de computador é tradicionalmente usada em um formato de paisagem, a navegação horizontal faz muito sentido. A maior parte do tempo parece mais equilibrada, menos intrusiva e fácil de colocar do ponto de vista do design.
Oculus, fabricantes de headsets de realidade virtual, seria tolo se não falassem sobre suas paisagens virtuais com um menu horizontal. Não apenas carrega uma boa metáfora, mas permite que o usuário se aprofunde em seu conteúdo rolando a página para baixo.
No entanto, os menus horizontais não agregam valor em todos os contextos, e é por isso que você verá muita navegação vertical, principalmente no comércio eletrônico. Ele carrega ecos das guias coloridas que ajudam a encontrar produtos em um catálogo físico e evita a confusão de uma barra horizontal com muito texto e muitas opções.
Uma boa navegação vertical não é tarefa fácil, especialmente se você tiver muitos produtos. É por isso que gosto deste de Jack Jones.
Os ícones ao lado do texto realmente ajudam na legibilidade. As formas simples são surpreendentemente comunicativas e ajudam a manter a área de navegação focada e organizada. Clique em uma categoria, e o menu se expande para revelar as subopções, mais uma vez de uma maneira muito fácil para os olhos.
Um uso mais incomum do menu vertical pode ser encontrado no site do Squarepusher. Aqui, a navegação é usada como uma guia, ao lado do conteúdo principal, que o usuário pode simplesmente rolar e clicar. É uma abordagem muito mais linear e ecoa a natureza sequencial de uma faixa de Squarepusher.
As regras estão mudando
Como com todas as coisas na Web, novas técnicas, tecnologias, dispositivos e tendências trazem seus próprios desafios e inovações para a mesa. Web design responsivo significa que uma navegação horizontal tradicional agora também é uma navegação vertical (em telas menores). As técnicas de paralaxe vêem as áreas de navegação fluir e refluir como a maré, dependendo de onde você está na página.
Não existe uma maneira única de criar o site perfeito nav. Mas uma abordagem iterativa de criação e teste, de preferência com acesso às estatísticas e dados de conversão do seu site, provavelmente renderá os melhores resultados.
Sendo o mecanismo que impulsiona seu website, sua navegação deve ser previsível, simples, consistente e bem posicionada.