Navegação com guias: quando usá-la e como otimizá-la

Uma das minhas citações favoritas de UX vem de Chikezie Ejiasi, chefe de estúdio e sistemas de design do Google.

Ele escreveu: “A vida é uma conversa. Web design deve ser da mesma forma. Na web, você está conversando com alguém que provavelmente nunca conheceu, por isso é importante ser claro e preciso. Assim, uma navegação bem estruturada e organização de conteúdo anda de mãos dadas com uma boa conversa.”

A navegação por guias pode ser clara e precisa? Claro que pode, o que o torna uma forma válida de navegação e organização de conteúdo.

O que importa, como na maioria das coisas relacionadas ao UX, é como você o implementa e como o otimiza.

O que é navegação por guias?

A navegação com guias é um estilo de navegação e interface do usuário em que as informações são organizadas em guias, que separam o conteúdo em diferentes seções.

Geralmente, ao observar as guias de navegação, você notará algumas características comuns:

1. Cantos arredondados das abas;
2. Separação de tabulações, seja espaço ou uma única linha;
3. Efeitos de foco nas guias;
4. Gradiente para adicionar profundidade e dimensão às guias.

A navegação por guias é baseada na metáfora da pasta, com a qual qualquer pessoa que trabalha em um escritório ou assiste à televisão deve estar familiarizada. Assim como Mifsud, da UsabilidadeGeek, explica…

Justin Mifsud, Usabilidade Geek :

“Na terminologia de UI, as metáforas são ideias ou objetos que são usados ​​para facilitar a familiaridade entre o usuário e o aplicativo.

O uso de guias na interface do usuário é uma excelente metáfora, pois se parecem com divisores de guias do mundo real em arquivos ou guias em pastas em uma gaveta de arquivo.

Assim, fica mais intuitivo para o usuário saber que essas abas estão dividindo o conteúdo em seções e assim como na vida real, ao acessar a aba (emulada na web ao clicar em uma aba) irá mostrar o respectivo conteúdo.” (via UsabilidadeGeek)

Como a metáfora é tão comum, é importante que você tenha cuidado com a implementação. As navegações com guias têm um protótipo forte, portanto, devem parecer e funcionar exatamente da maneira esperada.

Como qualquer bom sistema de navegação, as guias permitem:

• Separe significativamente o conteúdo em seções diferentes;
• Mostre às pessoas qual conteúdo está disponível para elas e como elas podem acessar esse conteúdo;
• Mostre às pessoas, visualmente, onde elas estão em seu site.

Quando é uma boa ideia usar a navegação por guias?

Geralmente, é uma boa ideia usar a navegação por guias quando...

• Você tem entre duas e nove categorias diferentes de conteúdo.
• Os nomes das categorias são relativamente curtos e previsíveis, tanto em termos de posição quanto de cópia (ou seja, correspondem ao protótipo).
• É improvável que o número de categorias mude regularmente.
• As categorias são de natureza semelhante; faz sentido lógico que eles sejam tabulados juntos.
• As categorias se encaixam em uma única linha.

Como explica Jakob Nielsen, do Nielsen Norman Group, quando a navegação por guias se torna tão complexa que requer várias linhas, começam a surgir problemas…

Jakob Nielsen, Grupo Nielsen Norman :

“Múltiplas linhas criam elementos saltitantes da interface do usuário, que destroem a memória espacial e, portanto, impossibilitam que os usuários se lembrem de quais guias já visitaram.

Além disso, várias linhas são um sintoma claro de complexidade excessiva: se você precisar de mais guias do que cabem em uma única linha, simplifique seu design. (via NN/g)

Várias linhas também criam problemas de hierarquia visual. Quando há uma segunda linha, pode sinalizar ao usuário que as guias da segunda linha são subcategorias ou, pelo menos, menos importantes que as guias da primeira linha.

Geralmente, não é uma boa ideia usar a navegação por guias quando:

• Você quer que as pessoas comparem o conteúdo simultaneamente. Isso sobrecarrega a memória e aumenta substancialmente a carga cognitiva.
• Você se vê pensando em adicionar um link estilo “Mais…”.

Claro, essas são apenas diretrizes básicas. Você pode combinar com todas as regras “você deve usar” e descobrir que não funciona para o seu público. Em última análise, é algo que você precisará testar.

Lembre-se, você pode usar sua análise digital para descobrir se sua navegação por guias está criando problemas para seus visitantes. A partir daí, você pode fazer alterações para corrigir os problemas ou experimentar um novo tipo de navegação.

A controvérsia

Embora as práticas de design modernas tenham muitos sites com esta aparência…

…algumas pessoas usam a navegação por guias como navegação principal.

Como Luke Wroblewski, do Google, relatou anos atrás, a Amazon realmente foi pioneira nessa tendência…

Lucas Wroblewski, Google :

“Em 1998, o site tinha duas categorias de alto nível: livros e música.

À medida que categorias adicionais foram adicionadas (como vídeo e presentes), o sistema de guias horizontais foi bem dimensionado e criou uma boa oportunidade para diferenciar as categorias de produtos por meio da cor.” (via LucasW)

Aqui está uma olhada em como a Amazon usou a navegação por guias nos primeiros dias…

À medida que o site crescia em popularidade, também aumentava o número de guias que a Amazon precisava…

Em 1999, Jakob chamou isso de “um design ruim e um abuso da metáfora da guia”:

Sustento que as guias seriam mais bem usadas para alternar entre exibições alternativas (mas relacionadas) do que para navegar para locais não relacionados.

Você deve usar guias para alternar entre visualizações dentro do mesmo contexto, não para navegar para áreas diferentes. Este é o ponto mais importante, porque permanecer no lugar enquanto as visualizações são alternadas é a razão pela qual temos guias em primeiro lugar

Jakob Nielsen

Ainda assim, muitos sites seguiram o exemplo da Amazon e a definição de navegação por guias começou a mudar da “alternância entre visualizações alternativas” de Nielsen.

Embora o uso da navegação por guias como um sistema de navegação principal esteja um pouco fora de moda, pode funcionar. Como acontece com a maioria das coisas, sua principal preocupação não deve ser o que a Nielsen diz sobre a navegação por guias, mas o que seu público diz.

Eles acham difícil de usar? Eles estão navegando em seu site corretamente? Eles podem encontrar os elementos mais importantes do seu site? Realize testes de usabilidade para ter certeza.

Como implementar a navegação por guias

A Air Canada, juntamente com a maioria das principais companhias aéreas, usa bem a navegação por guias…

Ao implementar a navegação por guias (em qualquer nível), aqui estão algumas coisas a serem lembradas:

• Primeiro, projete a arquitetura de informações (IA) do seu site para que você possa tomar decisões mais inteligentes relacionadas a guias.
• A guia inteira deve ser clicável, não apenas o nome da categoria (texto).
• Não use uma guia “inicial”, mesmo se estiver usando a navegação por guias para todo o site. Em vez disso, faça com que seu logotipo leve os visitantes à página inicial.
• A guia deve ser conectada à área de conteúdo que ela controla para que o escopo da guia fique claro.
• Os nomes das categorias devem ter uma ou duas palavras e ser escritos em inglês simples. Evite usar letras maiúsculas, pois isso dificulta a leitura das tablaturas.
• Não empilhe várias linhas de guias. Se for necessário, use subcategorias (ou seja, uma segunda barra horizontal abaixo das guias). Se você usar subcategorias, verifique se há uma conexão visual entre a guia selecionada e a barra de subcategorias abaixo. Certifique-se de que a quantidade de subcategorias que você usa não seja excessiva; condensar e simplificar.
• A guia selecionada deve ser marcada com destaque para indicar a localização atual. No entanto, as guias não selecionadas não devem ser silenciadas a ponto de serem esquecidas ou negligenciadas.
• Uma ordem de tabulação consistente deve ser mantida de página para página para que o usuário entenda completamente como as tabulações se relacionam umas com as outras.

Jakob explica por que esse tipo de consistência é importante…

1. Reconhecibilidade. Quando algo sempre parece o mesmo, você sabe o que procurar e sabe o que é quando o encontra.

2. Previsibilidade. Quando algo sempre funciona da mesma maneira, você sabe o que vai acontecer quando você agir sobre isso.

3. Empoderamento. Quando você pode confiar em seu conhecimento anterior de todos os recursos disponíveis, pode facilmente compor um conjunto de ações para atingir seu objetivo.

4. Eficiência. Não há necessidade de gastar tempo aprendendo algo novo ou se preocupando com o efeito de recursos inconsistentes.

Jakob Nielsen

Exemplos de navegação por abas bem feitas

A melhor maneira de entender a navegação por guias, especialmente porque ela pode ser usada de várias maneiras diferentes, é observar alguns exemplos.

1. Coleção de arte do álbum

Album Art Collection é um exemplo bastante popular de navegação por abas…

Duas coisas são interessantes aqui…

1. A navegação é vertical, não horizontal.
2. A navegação inclui ícones.

Normalmente, você encontrará navegações com guias apresentadas horizontalmente. Isso se deve em parte aos protótipos de design. Como é comum, as pessoas tendem a procurar as navegações no espaço horizontal abaixo do logo.

Claro, isso não significa que você está restrito a usar esse espaço para navegação. Apenas certifique-se de usar o teste do usuário. Você não deseja mover sua navegação por motivos estilísticos para afetar a facilidade de uso do seu site.

Observe que, embora a coleção de arte do álbum use ícones de navegação, eles não abandonam as descrições baseadas em texto. O teste de usabilidade de ícones é um artigo à parte, mas, na maioria das vezes, as descrições baseadas em texto são mais utilizáveis ​​do que os ícones sozinhos. Jacob Gube, da Six Revisions, explica…

Jacob Gube, seis revisões :

“Evite usar ícones para substituir o texto do controle de guia porque os símbolos podem significar coisas diferentes para pessoas diferentes – a aposta mais segura é usar texto simples para descrever as informações do painel.” (via revista Smashing)

2. A Máquina de Nota Fiscal

A Invoice Machine é a sua navegação básica por abas como um exemplo de navegação principal…

No entanto, eles incluem uma guia “Página inicial”, que é redundante. Observe como a guia selecionada é apresentada e as guias são conectadas à área de conteúdo.

3. Tampão

Buffer foi um dos meus exemplos favoritos de navegação por guias. No passado, eles tinham uma oferta para indivíduos e uma oferta para empresas, então eles usavam guias para separar seu conteúdo abaixo da dobra.

Aqui foi o início do conteúdo para indivíduos…

E aqui foi o começo do conteúdo para empresas…

Isso permitiu que eles falassem com dois públicos diferentes sem criar um site ou uma experiência totalmente separada.

Mais tarde, a página de produtos do Buffer passou por mudanças profundas, com Publish, Reply e Analyze, entre outras ofertas (todas bastante autoexplicativas). Aqui está a guia de navegação que eles usaram para suas páginas:

Além de diferentes planos de preços, essas guias baseadas em produtos exibiam um depoimento diferente, relevante para o produto na guia:

Como explica David Leggett, do UX Booth, a navegação por guias é relevante além dos níveis primário e secundário de navegação. Podem até ser usados ​​abaixo da dobra, como no caso do Buffer…

David Leggett, UX Booth :

“As guias não precisam ser limitadas aos níveis primário e secundário de navegação. Se eles fornecerem ao usuário a capacidade de alternar entre as áreas do mesmo conteúdo, eles podem ser bastante úteis.

Combinado com a tecnologia que alterna o conteúdo sem recarregar uma página, pode incutir uma sensação tangível ao usuário final que navega na página.” (via UX Booth)

3 práticas recomendadas para lembrar

Antes de experimentar a navegação por guias ou decidir que não está funcionando para você, considere estes três fatores: acessibilidade, fragmentação e velocidade.

1. A acessibilidade é importante

Você deseja que seu site seja acessível para pessoas com deficiências ou limitações. Para fazer isso com a navegação por guias, você terá que…

• Permita que as pessoas naveguem pelas guias usando a tecla "Tab" do teclado.
• Permita que as pessoas selecionem uma guia usando a tecla “Enter” no teclado.
• Indique qual guia está selecionada usando um método alternativo. Por exemplo, você pode incluir um atributo de título com a palavra “ativo”.

Tornar seu site mais fácil de usar para mais pessoas nunca prejudicará as conversões.

2. Questões de fragmentação

Com a navegação por guias, como você decide organizar e segmentar seu conteúdo é incrivelmente importante. É por isso que minha primeira recomendação de implementação acima foi relacionada à arquitetura de informações do seu site.

Justin explica por que a organização adequada é vital...

Justin Mifsud, Usabilidade Geek :

“As guias dividem o conteúdo em seções significativas que ocupam menos espaço na tela. Nesse sentido, os usuários podem acessar facilmente o conteúdo de seu interesse (em vez de ter todo o conteúdo em parágrafos).” (via UsabilidadeGeek)

Considere todo o conteúdo que você gostaria em seu site. Em seguida, agrupe esse conteúdo em quatro a cinco grupos. Provavelmente, você será capaz de repetir este exercício e terminar com dois ou três baldes diferentes. Isso é bom. Realize testes com usuários para ver quais pessoas respondem e navegam melhor.

Acima de tudo, você vai querer garantir…

1. Seu conteúdo é segmentado de maneira lógica, esperada e clara para os visitantes.
2. A ordem de suas guias é significativa e lógica.
3. Suas guias seguem os protótipos existentes. Por exemplo, os sites SaaS geralmente são segmentados de uma maneira específica, enquanto os sites de comércio eletrônico geralmente são segmentados de outra.

3. A velocidade é importante

Já escrevemos sobre a importância da velocidade várias vezes. Portanto, não deveria ser surpreendente que a velocidade também desempenhe um papel na eficácia da navegação por guias.

Jacob explica muito bem...

Jacob Gube, seis revisões :

“O objetivo de usar as guias do módulo é permitir uma apresentação rápida e interativa do conteúdo. Para isso, você deve tentar ter o conteúdo do painel inativo escrito embutido no documento HTML e, em seguida, usar CSS e JavaScript para estilizar e ocultar o painel visualmente, o que é mais rápido do que exigir o recarregamento da página ou solicitar dados de origem remota.

Evite recarregar a página ao alternar entre os painéis porque isso atrasa significativamente a navegação entre os painéis. O conteúdo carregado remotamente usando Ajax pode ser uma opção para informações de painel dinâmicas e localizadas remotamente, mas apresenta um desafio para usuários de leitores de tela que podem não estar cientes de nós inseridos de forma assíncrona por DOM na árvore do documento.” (via revista Smashing)

Este conselho não se aplica àqueles que usam navegação por guias como navegação principal, mas aqueles que usam navegação por guias como Air Canada e Buffer devem tomar nota.

Conclusão

A navegação por guias pode resultar em “uma boa conversa” com seus visitantes. Se implementado corretamente, é claro e preciso o suficiente para dizer aos seus visitantes: exatamente onde eles estão, exatamente o que está disponível para eles e exatamente como eles podem acessar o que está disponível para eles.

Com a ajuda de testes de usabilidade e otimização, essa conversa melhora ainda mais.

Como com qualquer coisa, no entanto, certifique-se de conduzir sua pesquisa (neste caso, sua pesquisa de arquitetura da informação) e testar, testar, testar.

Resumindo…

1. A navegação por guias pode ser usada como um sistema de navegação principal, bem como além dos níveis de navegação primário ou secundário.
2. Experimente a navegação por guias quando tiver de duas a nove categorias sólidas e semelhantes com nomes curtos que cabem em uma única linha.
3. Não tente a navegação por guias quando quiser que as pessoas comparem o conteúdo ou pense em adicionar um link “Mais…”.
4. Você pode seguir as melhores práticas de implementação, mas…
5. O que importa são os seus dados. Seus visitantes acham difícil navegar em seu site com a navegação por guias? Realize testes de usabilidade para descobrir.
6. Corrija os problemas que aparecerem. Ou, se houver muitos problemas caros, considere outro sistema de navegação.
7. Acessibilidade, fragmentação e velocidade são importantes quando se trata de navegação por guias, portanto, preste muita atenção.

Trabalhando em algo relacionado a isso? Poste um comentário na comunidade CXL !