Práticas recomendadas e exemplos de navegação do Breadcrumb

A navegação de breadcrumb é frequentemente ignorada no processo de design e desenvolvimento. Algumas pessoas podem vê-lo como desnecessário, enquanto outros podem sentir que é muito grande para o que vale a pena. Fato é que, a navegação de breadcrumb aumentará muito a usabilidade de um website.

As trilhas de navegação oferecem aos usuários um método alternativo de navegação, permitem que eles vejam onde estão na hierarquia de um site e reduzirão o número de etapas necessárias para navegar para um nível superior em um site..

Aqui estão descritos os diferentes tipos de navegação de breadcrumb usados ​​atualmente, por que eles são importantes e como devem ser implementados melhor online. Também incluído aqui para sua referência são mais de 30 exemplos de como os breadcrumbs estão sendo usados ​​on-line hoje.

Lembre-se de que, embora seja provável que a navegação do breadcrumb não crie nem quebre um site, isso proporcionará um benefício adicional aos usuários, aumentando a usabilidade geral e a funcionalidade do seu website..

Tipos de Breadcrumb

Caminho

Os breadcrumbs baseados em caminho indicam as etapas ou o caminho que um usuário levou para chegar à página atual de um website. Além disso, os usuários verão links para as páginas que visitaram anteriormente para acessar a página atual. Dos três tipos de navegação de trilha de navegação, a navegação de trilha de navegação baseada em caminho é menos popular on-line. Razão sendo, a navegação de trilha de navegação baseada em caminho fornece a funcionalidade semelhante à “frente” e “De volta” botões em um navegador. Para a maioria dos sites, a navegação breadcrumb baseada em localização e baseada em Atributo oferece melhor funcionalidade.

Localização

Os breadcrumbs baseados em localização indicam ao usuário onde a página atual está na hierarquia do site. Esse tipo de navegação é mais comum em sites com mais de dois níveis de profundidade ou conteúdo. Ao avançar para um site, os usuários recebem links para páginas, ou categorias, que atuam como “pai” ou um nível acima da página que estão visualizando no momento. Por exemplo, um usuário pode estar no “Falar” página, no entanto, o “O que nós fazemos” página é um pai do “Falar” página enquanto o “Casa” página é um pai do “O que nós fazemos” página.

Clearleft Ltd

Atributo

Os breadcrumbs baseados em atributos indicam ao usuário os atributos ou categorias atribuídos à página atual em um website. Frequentemente vistos em websites de comércio eletrônico, os produtos podem não apenas se enquadrar em uma categoria, mas também sob certos atributos. Por exemplo, um veículo pode ser categorizado como um SUV e, em seguida, ter os atributos de ser a cor preta e lançado no ano de 2010..

Cars.com

Por que usar pão ralado?

• Ótima Usabilidade

  Breadcrumbs fornecem um meio adicional pelo qual os usuários podem facilmente navegar em um site. Se um usuário acessar uma página interna em seu site a partir de outra fonte, os breadcrumbs permitirão que o usuário veja exatamente onde eles estão na hierarquia do site. O usuário também tem a oportunidade de se deslocar para um nível mais alto do site a qualquer momento, sem qualquer aborrecimento.

• Fácil de retroceder

  Navegações primárias não são projetadas para serem seguidas de trás para a frente. Desde backtracking é extremamente popular on-line fornecendo uma pequena ajuda adicional pode percorrer um longo caminho.

• Eliminar cliques adicionais

  Breadcrumbs permitem aos usuários saltar de um nível de um site para o outro sem ter que usar o “frente” ou “para trás” botões no navegador. Além disso, os breadcrumbs eliminam a necessidade de os usuários recorrerem continuamente à navegação principal.

• Mostra a hierarquia de usuários

  A navegação primária de um site não refletirá a hierarquia de todas as páginas do site. Dar aos usuários breadcrumbs permitirá que eles vejam a hierarquia de uma página dentro de um website.

• Visualmente agradável

  Não apenas os breadcrumbs oferecem aos usuários uma usabilidade adicional, eles o fazem sem ocupar muito espaço ou espaço na página. Os breadcrumbs são fáceis de implementar no design visual do seu site e proporcionam um grande benefício aos usuários.

• Fornece ajuda adicional

  É totalmente possível que alguns usuários não entendam como funciona a navegação primária de um site e, em alguns casos, os usuários podem nem saber o que estão procurando. Dar aos usuários breadcrumbs permitirá que eles vejam o progresso geral e a estrutura de um website, permitindo que eles naveguem melhor no site.

• Taxas de rejeição mais baixas

  Normalmente, os breadcrumbs fornecem uma navegação mais detalhada do que a navegação principal. Ao fazer isso, os usuários receberão mais opções sobre como navegar em um site. Dar a eles a oportunidade de voltar facilmente a alguns níveis dentro do website reduzirá sua taxa de rejeição.

• Constrói interesse

  Quando um usuário acessa uma página interna de um site, as chances são de que ele já esteja em uma página de interesse. Os breadcrumbs podem fornecer links para páginas e informações adicionais das quais o usuário também está interessado, sem fazê-las começar da primeira linha.

Práticas recomendadas de breadcrumb

• Use Breadcrumbs no topo de uma página

  O posicionamento mais comum e instintivo dos breadcrumbs está no topo da página. Isso permite que os usuários encontrem os breadcrumbs de maneira descomplicada e façam uso deles de acordo.

• Use Breadcrumbs Consistentemente

  Se você decidir usar breadcrumbs, certifique-se de usá-los em todo o site. Dar aos usuários breadcrumbs em algumas páginas e não em outras só irá confundi-las e frustrá-las. (Um excelente exemplo disso é a Amazon, pois remove os breadcrumbs das páginas de produtos individuais.)

• Breadcrumbs deve degradar graciosamente

  Os breadcrumbs devem sempre começar com a home page e degradar a página atual. Ao fazê-lo, o seu pão ralado precisa ir do nível mais alto para o nível mais baixo, um passo de cada vez..

• Estilize as Breadcrumbs Apropriadamente

  Você quer que suas migalhas de pão sejam vistas, mas você não quer que elas sejam o ponto focal. Você também deseja tornar aparente que seus breadcrumbs não fazem parte do conteúdo principal de uma página, apenas suporte adicional a ele. Encontre um meio feliz onde suas migalhas de pão são perceptíveis, mas não arrogantes.

• Categorize as páginas claramente

  Se você tiver páginas que se enquadram em duas ou mais categorias, talvez não queira usar breadcrumbs no seu site. Tentar colocar uma página em duas ou mais categorias provavelmente produzirá migalhas de pão pouco nítidas e confundirá o usuário. Certifique-se de que seu website tenha uma hierarquia organizada e seja exibido de acordo com suas migalhas de pão.

• Separar claramente cada nível

  Certifique-se de que os usuários consigam distinguir a diferença entre cada nível de breadcrumb. O separador mais comum entre níveis é o caractere 'maior que' (>). Outros bons separadores incluem cotações em ângulo duplo direito (»), barras (/) e setas (→). Se estiver usando um caractere de texto sem formatação, use apenas um. (»É mais atraente e eficaz do que >>)

• Solte a página atual

  Use um estilo diferente no último item de uma lista de breadcrumb para estabelecer que é a página atual que está sendo visualizada. Você pode conseguir isso fazendo o item negrito, mudando sua cor, ou enfatizando isto.

• Não faça da página atual um link

  Não há necessidade de tornar o último item de uma lista de breadcrumb um link porque é a página atual que está sendo visualizada. Criar um link aqui só confunde os usuários, especialmente quando eles clicam nele e não são levados para uma nova página.

• Não use Breadcrumbs como título de página

  Usando o último item de uma lista de breadcrumb como o título de uma página atual é ineficaz. Se você optar por usar breadcrumbs, faça isso com a adição de um cabeçalho de página.

• Breadcrumbs não substituem a navegação primária

  Os breadcrumbs devem ser usados ​​apenas como suporte para a navegação primária, nunca para substituir totalmente a navegação primária. Você deve sempre fornecer aos usuários uma navegação principal a partir da qual eles podem navegar em um site antes de usar a navegação de navegação detalhada.

Excelentes Exemplos de Breadcrumbs

Vitra Direct

Bikes Trek

Illy

SiteInspire

Mia e Maggie

Intridea

Design por seres humanos

Roxy

Blik

SitePoint

Alvo

Walmart

1-800-Flowers

Melhor compra

Amazon.com

Barns & Noble

Fim das terras

maçã

Google

correr atrás

AbsolutePunk.net

Littman Bros. Iluminação

Guardian.co.uk

ÁREA 17

Wufoo

Escoteiras do Tennessee médio

O Coletivo de Glasgow

Primogênito

Bell Canada

Grooveshark

Devlounge

sobre o autor - Shay Howe é um web designer profissional e designer de interface que atualmente vive em Chicago, IL. Ele escreve sobre web design em seu próprio blog sobre o site letscounthedays e adoraria ouvir de você no Twitter. Por favor, sinta-se livre diga-lhe olá!