Otimizando a utilização dos Breadcrumbs

Qual breadcrumb utilizar? Caminho, localização ou atributo?
Basicamente podemos destacar duas funções básicas dos breadcrumbs:

  • Possibilitar a navegação entre diferentes níveis de informação, diminuindo etapas e agilizando o acesso ao conteúdo.
  • Localizar os usuários dentro da arquitetura de informação do site, representando a página em que ele se encontra, mostrando sua profundidade em relação a pagina inicial

Vamos definir rapidamente os 3 tipos de breadcrumbs mais utilizados:

Breadcrumbs de localização: É a forma mais simples e mais utilizada de navegação estrutural justamente por ter uma implementação extremamente simples. Mostram aos usuários sua atual localização em determinada página e em relação a estrutura do website, mas não como eles chegaram até lá.



Breadcrumbs de caminho
: É a representação mais adequada do nome “Migalhas de Pão”, em virtude da metáfora da história de *João e Maria. O texto da navegação estrutural é necessariamente o caminho percorrido pelo usuário, e não uma representação pré-determinada de um possível caminho.

Em outras palavras, resultados iguais encontrados por caminhos diferentes possuem Breadcrumbs tão precisos quanto às últimas páginas visitadas. Esta forma de suporte a navegação só é possível em sites dinâmicos, dotados de páginas resultantes de uma programação mais elaborada. As aplicações devem obter os dados fornecidos pelos usuários (neste caso, as páginas já visitadas) e enviar a informação correspondente para a estrutura de Breadcrumbs. Sua apresentação é idêntica à forma dos Location Breadcrumbs, mas poderíamos ter diferentes “Migalhas de Pão”para páginas idênticas, como por exemplo:

Breadcrumbs de atributo: São as Migalhas de Pão que não representam toda a página, mas atributos dela. Representam informações de caminho, com formatação de Breadcrumb Trail, que normalmente se encontram na base da página. Esta representação possui a peculiaridade de não oferecer zonas de salto em cada item da estrutura, mas sim um link simples para a página procurada. Este tipo de recurso é muito encontrado em sites de e-commerce, e fazia parte da estrutura de busca do Google

Convenção de posicionamento: Pesquisas indicam que por convenção, o melhor posicionamento é na parte superior da tela, logo baixo da marca da empresa, na horizontal.

Utilizando o separador: O sinal “>” é caractere mais utilizado para separar os níveis. O importante, no entanto, não é utilizar exclusivamente o sinal “>”, mas sim qualquer elemento que demonstre continuidade.

Abaixo, podemos ver o resultado da pesquisa de Heidi P. Adkisson que mostra diferentes elementos usados em sites de comércio eletrônico.

Dicas de utilização

  • Não corte seu breadcrumb no meio.  Caso o caminho não se encaixe em uma única linha, utilize uma segunda linha, mantendo o caminho completo
  • Sempre que possível, as etiquetas devem coincidir com o título de suas páginas
  • Inclua o título da página atual na última etiqueta na trilha
  • Destaque o último nível (negrito) mas não o utilize como rótulo para a página
  • Não posicione o breadcrumb muito abaixo da interface, elas podem entrar em conflito com a navegação primária
  • Coloque hyperlink em todos os rótulos na trilha, exceto a última (que corresponde ao título da página atual.)
  • Os links do  breadcrumb devem manter o mesmo estilo (css), independentemente de terem sido visitados ou não
  • Permita que os níveis do breadcrumb sejam acessados via com a tecla Tab
  • Use uma tipografia em corpo pequeno, pois,  é importante que fique bem claro que se trata de uma navegação de menor importância, como um acessório.

Quando NÃO utilizar o breadcrumb? Felipe Memória sugere que os breadcrumbs só devem ser utilizados, em sites que tenham certo nível de complexidade, com uma arquitetura com no mínimo quatro níveis de profundidade. Ele afirma que sites com arquitetura simplificada e com pouca quantidade de páginas, eles provavelmente serão ignorados.

Particularmente acredito que se bem empregado, o item funcionará como uma navegação complementar, mesmo em sites com níveis de navegação terciária.

*“O nome Breadcrumb não é preciso para todos os casos de sua ocorrência, pois os usuários não percorrem necessariamente o caminho que os arquitetos da informação consideram ideal para chegar a determinadas páginas, o que torna o conceito de “Migalhas de Pão”, da fábula João e Maria, errôneo.”

Quer saber mais?

Breadcrumb navigation deployment patterns in retail web Sites
Exemplos de Breadcrumbs

Location, Path & Attribute Breadcrumbs
http://instone.org/files/KEI-Breadcrumbs-IAS.pdf
http://instone.org/files/KEI-3Breadcrumbs.pdf
http://instone.org/breadcrumbs-blogtopic

 Referencias:  Yahoo Developer Network / Webdesignparcices / Felipe Memória / Peter Krug

Anúncios

3 comentários em “Otimizando a utilização dos Breadcrumbs

  1. Parabéns pelo post que trata de um assunto tão importante. É como você mesmo foi feliz ao dizer que o breadcrumb será utilizado se for aplicado de forma inteligente, auxliando a navegação dos usuários.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s