Breadcrumbs: guia completo com exemplos e melhores práticas

Em sites com muitas páginas e níveis hierárquicos, o breadcrumb pode aumentar consideravelmente a maneira como os visitantes encontram seu caminho e navegam pelo site. Em termos de usabilidade, breadcrumbs reduzem o número de ações que um visitante precisa tomar para chegar a uma página de nível superior e melhora o nível de encontrabilidade de seções e páginas. Os breadcrumbs também são uma ajuda visual eficaz que indica a localização do usuário dentro da hierarquia do site, tornando-se uma grande fonte de informação contextual.

O que é um breadcrumb?

Breadcrumb no delicious

Um breacrumb (também conhecido como “migalhas de pão” ou “trilha de migalhas de pão”, em alusão à história de João e Maria) é um tipo de esquema de navegação auxiliar que revela a localização do usuário em um site ou aplicação web. Assim como no conto, breadcrumbs do mundo real oferecem aos usuários uma maneira de “rastrear” o caminho de volta e/ou ter uma visão geral e estruturada de em que ponto se encontra dentro da hierarquia em que se encontra.

Breadcrumbs geralmente são encontrados em sites que possuem uma grande quantidade de conteúdos organizados de forma hierárquica. Também é possível vê-los em aplicações web que têm mais de uma etapa, com uma função semelhante a de uma barra de progresso. Na sua forma mais simples, é disposto horizontalmente, em links de texto separadas por um símbolo de “maior que” (>), que indica o nível daquela página relativamente aos links das outras páginas na hierarquia do site.

Quando breadcrumbs devem ser usados?

É indicado usar navegação por breadcrumb para sites grandes e sites que possuem páginas organizadas hierarquicamente. Um cenário excelente são sites de comércio eletrônico, nos quais uma grande variedade de produtos são agrupados em categorias lógicas.

Não é aconselhável usar breadcrumb em sites que não têm agrupamento ou hierarquia lógica. Uma ótima maneira de determinar se um site se beneficiará com a navegação por breadcrumbs é construir um mapa do site ou um diagrama representando sua arquitetura de navegação e analisar se o recurso melhora a capacidade do usuário de navegar dentro e entre as categorias.

Breadcrumbs devem ser considerados como um recurso extra e não deve substituir o menu principal do site ou aplicativo. É uma característica de conveniência, um regime navegação secundária que permite aos usuários determinar onde estão e é considerado e deve ser usado como uma forma alternativa ou um auxiliar de navegação.

Tipos de breadcrumbs

Existem diversos tipos e diversas classificações para os breadcrumbs. Se todos os sistemas de classificação e ordenação fossem aqui listados, este artigo ficaria imenso! Portanto, para facilitar a abordagem do tema, será considerado que existem 3 tipos de breadcrumbs.

Breadcrumb de Localização

Breadcrumbs de Localização mostram ao usuário em qual ponto se encontra dentro da hierarquia do site. Eles são normalmente utilizados para sistemas de navegação em que se tem vários níveis (normalmente mais de dois). No exemplo abaixo (retirado do site SitePoint), cada link é para uma página que está um nível superior ao da sua direita.

Breadcrumb de Atributo

Breadcrumbs de Atributo servem para exibir os atributos de uma determinada página, em particular. Por exemplo, na Newegg o breadcrumb mostrar os atributos dos itens exibidos em uma página, em especial.

Esta página exibe todos os cases de computador que têm as características de serem fabricados pela Lian Li e ter uma MicroATX Mini Tower.

Breadcrumb de Caminho

Mostram aos usuários os passos que tomaram até chegar a uma página específica. Breadcrumbs de Caminho são dinâmicos e mostram as páginas que o usuário visitou antes de chegar na página página em que se encontra atualmente.

Em relação ao Breadcrumb de Localização e ao Breadcrumb de Atributo, o Breadcrumb de Caminho não é tão “popular” e não é tão utilizado em web sites e sistemas virtuais.

Benefícios de se usar breadcrumbs

Existem diversos benefícios em se valer dos breadcrumbs como sistema auxiliar de navegação em um site, dentre os quais:

• Conveniência para os visitantes. Breadcrumbs são usados principalmente para dar aos usuários um meio secundário de navegar em um web site. Ao oferecer um breadcrumb em um grande site multi-nível, os visitantes podem navegar para as categorias de nível superior com mais facilidade.
• Redução de cliques. Ao invés de usar o botão “Voltar” do navegador ou a navegação principal do site para voltar à página de nível superior, os usuários podem usar o breadcrumb para realizar a mesma ação com um menor número de cliques.
• Ocupam pouco espaço. Geralmente os breadcrumbs são em sentido horizontal e de estilo “clean”, portanto não ocupam muito espaço na página. A vantagem é que eles têm pouco ou nenhum impacto negativo em termos de sobrecarga de conteúdo.
• Redução de Taxa de Rejeição. Breadcrumbs podem ser uma ótima maneira de atrair visitantes pela primeira vez para examinar um site depois de ter visto a página de destino . Por exemplo, digamos que um usuário chega a uma página através de uma pesquisa no Google, vendo um breadcrumb, este pode “seduzir” o visitante para as páginas de nível superior para visualizar os tópicos relacionados ao seu interesse. Isso reduz a Taxa de Rejeição (Bounce Rate) do site.

Erros na implementação de breadcrumbs

Usar breadcrumbs é uma questão bastante simples e há apenas algumas diretrizes a considerar antes de tomar a decisão de implementá-lo em um site. Vamos dar uma olhada em alguns erros comuns que devem ser evitados.

Usar breadcrumb quando não é preciso

Um erro comum é usar breadcrumbs em ocasiões em que não trazem nenhum benefício aos visitantes.

No exemplo acima, o site Slicethepie corre o risco de sobrecarregar os usuários com opções de navegação demais: (1) navegação primária; (2) breadcrumb; e (3) navegação secundária; estão muito próximas umas das outras. O breadcrumb, neste aplicativo, não acrescenta nada aos visitantes, já que a navegação secundária para as páginas de nível inferior fica logo abaixo dele. Além disso, clicando no link de segundo nível no breadcrumb (“Music”), isso leva de volta à primeira aba (“Listen”), que sugere erroneamente que a primeira guia está em um nível mais elevado do que os outros dois (“Search” and “Artist hall of fame”).

Usar breadcrumbs como navegação primária

Como já comentado anteriormente, breadcrumbs devem ser usados como elemento de navegação auxiliar.

No exemplo acima, Mefeedia não oferece um menu de navegação primário para a visualização de vídeos. Embora exista a navegação textual no rodapé, não há menu de navegação no corpo das páginas, tornando-se difícil de navegar para outras seções do site.

Se um visitante chega em uma página de vídeo diretamente – por exemplo, através de um resultado de pesquisa do Google – sua única opção de navegação é o breadcrumb. Ou já estiver navegando nas páginas do site e acessar uma página que não exiba o menu de navegação principal, é preciso usar o botão “Voltar” do navegador para acessar o menu principal.

Usar breadcrumbs quando a página tem múltiplas categorias

Breadcrumbs têm uma estrutura linear, então, usá-los vai ser difícil se as páginas do site não podem ser classificadas em categorias puras. Decidir se se deve usar breadcrumb depende de como a hierarquia do site foi projetada. Quando uma página de nível inferior é (ou pode ser colocada) em mais de uma categoria-mãe, breadcrumbs são ineficazes, imprecisos e confusos para o usuário.

Considerações sobre o design da navegação por breadcrumb

Ao projetar um sistema de navegação por breadcrumb, é preciso ter em mente várias coisas. Vamos dar uma olhada em algumas questões que podem surgir quando você está trabalhando com breadcrumbs.

O que deve ser usado para separar os links do breadcrumb?

O mais comumente aceito e reconhecido símbolo para separar links em breadcrumbs é o “maior que” (>). Normalmente, o sinal é usado para denotar hierarquia, como no formato “Categoria Mãe > Categoria Filha”.

Outros símbolos utilizados são setas apontando para a direita, as marcas de ângulo direito de citação (») e barras (/).

A escolha depende da estética do site e do tipo de breadcrumb usado. Por exemplo, para um Breadcrumb de Caminho, no qual as ligações não têm necessariamente uma relação hierárquica entre si, usar o símbolo “>” não transmite sua relação apropriadamente.

O quão grande um breadcrumb deve ser?

Você não quer que o seu breadcrumb “domine” a página. O breadcrumb tem a função de ser um auxiliar aos visitantes; seu tamanho deve transmitir esta função aos usuários e, portanto, deve, pelo menos, ser menor ou menos importante do que o menu de navegação principal.

Uma boa regra a seguir para decidir o tamanho de um breadcrumb é que ele não deve ser o primeiro item a chamar a atenção do usuário quando ele entra em uma página do site.

Onde deve ser a localização do breadcrumb?

Breadcrumbs geralmente são exibidos na metade superior da página – abaixo do menu de navegação principal se um esquema de menu horizontal é usado.

Alguns poucos sites costumam repetir o breadcrumb próximo ao rodapé, no final do conteúdo de cada página, mas isso não é muito comum.

Resumo das características de breadcrumbs

Porque usar breadcrumbs:

• São excelente recurso de usabilidade
• Eliminam cliques adicionais
• Mostram a hierarquia para usuário
• São visualmente agradáveis
• Fornecem ajuda adicional
• Diminuem a Taxas de Rejeição do site
• Estimulam o interesse e curiosidade dos visitantes

Melhores práticas de breadcrumbs:

• Usar breadcrumbs no topo da página
• Usar breadcrumbs consistentemente
• Estilizar (design) os breadcrumbs apropriadamente
• Separar claramente cada nível do breadcrumb
• Destacar (normalmente com negrito) o último item do breadcrumb (página atual)
• A página atual (último item do breadcrumb) não deve ser link
• Breadcrumbs não devem substituir a navegação principal

Exemplos de breadcrumbs

Muita coisa foi vista neste guia completo sobre breadcrumbs e, como não poderia deixar de ser, uma listagem com exemplos  de breadcrumbs se faz necessária. Para não pesar muito o tamanho da página nem tornar o artigo muito extenso, seguem links com exemplos variados de breadcrumbs para análise, observação e inspiração:

• Know where you are – Breadcrumbs Inspiration
• Breadcrumb Inspiration for Designers
• 11 cool Breadcrumbs for user friendly navigation
• Inspirational and creative Breadcrumbs for web design
• Pattern Tap Breadcrumbs Collection