Breadcrumbs (ou trilha de navegação) é um sistema de navegação secundário que mostra a localização de um salario de digitador em um site ou aplicativo da web. O termo veio do conto de fadas de João e Maria, no qual os personagens principais criam uma trilha de migalhas de pão para voltar para casa.

Da mesma forma que em um conto de fadas, os visitantes precisam saber sua localização na estrutura hierárquica do site. Neste artigo, vamos explorar como usar a localização atual em sites e discutir algumas práticas recomendadas para aplicar trilhas de localização atual em seu próprio site.

Por que a navegação breadcrumb é tão valiosa

Breadcrumbs servem como um auxílio visual eficaz, indicando a localização do usuário dentro da hierarquia do site. Esta propriedade torna a navegação estrutural uma grande fonte de informações contextuais para os usuários e os ajuda a encontrar respostas para as seguintes perguntas:

Onde estou? Breadcrumbs informam os visitantes de sua localização atual em relação a toda a hierarquia do site.

Onde eu posso ir? Breadcrumbs melhoram a localização das páginas do salario de digitador. A estrutura do site é mais facilmente compreendida porque é apresentada em uma migalha de pão. O usuário não precisa clicar no menu para descobrir as opções de navegação disponíveis. Como resultado, as migalhas de pão incentivam a navegação. Por exemplo, o visitante do site de comércio eletrônico pode acessar a página de um produto, o produto pode não ser uma boa correspondência, mas o visitante pode querer visualizar outros produtos da mesma categoria) e isso reduz a taxa de rejeição do site.

E aqui estão dois outros benefícios do uso de breadcrumps:

Ocupe o mínimo de espaço

Um mecanismo compacto que não ocupa muito espaço da página – é apenas uma linha de texto com links. O benefício é que eles têm pouco ou nenhum impacto negativo em termos de peso visual e sobrecarga de conteúdo.

Os usuários estão familiarizados com este padrão

O padrão de breadcrumps existe desde o início da Internet e as pessoas não têm problemas para operá-los.

Quando você deve usar breadcrumbs?

Uma ótima maneira de determinar se um site se beneficiaria com a navegação estrutural é construir um mapa do site ou um diagrama que representa a estrutura de navegação do site e, em seguida, analisar se a localização atual melhoraria a capacidade de navegação do usuário:

Você deve usar breadcrumbs quando tiver uma grande quantidade de conteúdo organizado em estrutura hierárquica com categorias definidas (várias seções que podem ser divididas em mais subseções). Um excelente exemplo é o site de comércio eletrônico, no qual uma grande variedade de produtos é agrupada em categorias lógicas.

Você não deve usar breadcrumbs para sites de nível único que não têm hierarquia ou agrupamento lógico. Se você tem um blog pessoal, provavelmente não deveria usar breadcrumbs.

Tipos de migalhas de pão

A localização atual pode ser baseada em: localização, caminho e atributo.

salario de digitador

Com base na localização

A localização atual é uma representação da estrutura de um site. Eles ajudam os visitantes a compreender e navegar na hierarquia de seu site, que tem vários níveis (geralmente mais de dois níveis). Esse tipo de localização atual é muito favorável para visitantes que entram no site em um nível mais profundo de uma fonte externa (por exemplo, resultados de mecanismos de pesquisa).

No exemplo abaixo (da BestBuy), cada link de texto é para uma página que está um nível acima da sua direita.

Com base no caminho

A localização atual baseada no caminho (também conhecido como “trilha do histórico”) mostra todo o caminho percorrido pelo usuário para chegar em uma página específica. Este tipo de link breadcrumb é gerado dinamicamente. Às vezes, migalhas de pão baseadas em caminhos podem ser úteis, mas na maioria das vezes não são muito úteis – os visitantes tendem a pular de uma página para a outra e a trilha que eles criam pode ser caótica. Um botão “Voltar” disponível no navegador é mais útil. Por fim, uma trilha de história é inútil para os visitantes que chegam diretamente a uma página nas profundezas do site.

Abaixo está um exemplo de links de trilha de navegação baseados em caminho que mostram dois caminhos para navegar até a página de destino.

Baseado em Atributo

A localização atual baseada em atributos lista as categorias para a página específica ou o produto mais frequentemente – já que esse tipo de localização atual é útil para sites de comércio eletrônico. Esse tipo de breadcrumbs ajuda os visitantes a entender a relação dos produtos e oferece uma abordagem diferente.

Hierarquia ou história?

Uma regra geral para breadcrumbs é mostrar a hierarquia do site, não o histórico do usuário. Portanto, use breadcrumbs baseados em localização / atributos, não baseados em caminhos.

Práticas recomendadas de navegação breadcrumb

salario de digitador

Ao projetar uma navegação estrutural, lembre-se do seguinte:

Não use breadcrumbs como um substituto para a navegação primária

A navegação breadcrumb é um recurso extra que ajuda a navegação, mas não deve servir como um substituto para os menus de navegação primários. Pense na localização atual como uma forma alternativa de navegar pelo seu site.

Não inclua link para a página atual na navegação

O último item na trilha de navegação (localização do usuário atual) é opcional – se você quiser exibi-lo, certifique-se de que não seja clicável. Como os usuários já estão na página, não faz nenhum sentido adicionar o link da página atual à navegação breadcrumb.

Use separadores

O símbolo mais reconhecível para separar links em trilhas de navegação é o símbolo “maior que” (>). Normalmente, o sinal> é usado para denotar hierarquia, como no formato de Categoria pai> Categoria filho. Outros símbolos usados ​​são setas apontando para a direita (→), aspas em ângulo reto (») e barras (/). A escolha depende da estética do local e do tipo de breadcrumb usado:

Selecione um tamanho e enchimento adequados

Pense cuidadosamente sobre o tamanho do alvo e o preenchimento ao projetar. Deve haver espaço suficiente entre os diferentes níveis, caso contrário, as pessoas podem achar difícil usá-los. Mas, ao mesmo tempo, você não quer que sua localização atual domine a página, portanto, eles devem ser menos proeminentes do que o menu de navegação principal.

Não torne isso o ponto focal do design

Uma regra a seguir ao dimensionar e estilizar sua trilha de navegação é que ele não deve ser o primeiro item a chamar a atenção do usuário ao acessar uma página. A trilha de localização atual no exemplo abaixo não é ruim, mas é muito atraente e pode desviar os visitantes da navegação primária e do conteúdo principal.

Conclusão

As migalhas de pão facilitam a movimentação dos visitantes pelo site. Esse padrão de navegação melhora a usabilidade e torna a interação com um site mais confortável para seus visitantes.