O breadcrumb é uma navegação interna da loja virtual e mostra a localização da página que você está acessando.
Ele também pode ser conhecido pelo termo Migalha de Pão como na história João e Maria, onde as crianças utilizam desse artifício para não se perderem e para voltarem com segurança.
Esse é o conceito do breadcrumb, facilitar a navegação e melhorar a usabilidade do cliente. O breadcrumb é o guia do cliente.
No design das lojas virtuais eles ficam no topo, logo abaixo da navegação principal. Por essa razão, ele é conhecido como navegação secundária, são exibidos como links, tem um design simples e muito eficaz.
Exemplo:
Home > Categoria XYZ > Página Atual
Como mostrado no exemplo, o breadcrumb é utilizado em páginas de categorias, subcategorias, hotsites e nos produtos. São páginas que deixam trilhas pelo caminho, são duas 2 páginas ou mais de navegação.
Páginas únicas como Fale Conosco, Newsletter, Quem Somos e outras que são específicas e que não existem hierarquias, elas não precisam de breadcrumb.
Veja 4 dicas e um super BÔNUS!
Dica 1: Comece com a Página Inicial (Home)
O breadcrumb começa com a Home, ela é o ponto de partida, através da Home o cliente consegue se aprofundar na navegação visitando categorias e produtos. O menu sempre vai ter links e levará o usuário de volta para o ponto inicial.
Dica 2: Alinhamento à esquerda
O alinhamento do breadcrumb deve ficar a esquerda e no topo. Esse é um padrão universal e baseado na regra do Diagrama de Gutenberg e o Padrão-F (F-Patterns).
Dica 3: Links
Cada etapa do breadcrumb precisa ser clicável para facilitar a navegação, exceto a página atual que o cliente está no momento. O cliente não precisa clicar na página que se encontra, mas vai precisar clicar nas páginas anteriores para voltar e recomeçar a navegação.
Dica 4: Muito Grande
Tome muito cuidado com o tamanho do breadcrumb, muitos itens na navegação podem virar um problema. No desktop eles podem ser mostrados em uma única linha, mas ao acessar na versão Mobile, o breadcrumb quebra em múltiplas linhas, aumentando o espaço e prejudicando a usabilidade. Além do mais, ele não ilustra como um breadcrumb deveria ser, uma estrutura em cadeia, ou seja, um menu ao lado do outro.
BÔNUS
No Fastcommerce o breadcrumb da sua loja virtual é indexado!
Através dos Dados Estruturados disponibilizamos como a navegação da loja virtual é estruturada, essa informação é obtida pelo Google de forma automática.
A vantagem de fornecer essa informação, é mostrar para o Google como funciona a estrutura da loja virtual. O Google pode mostrar o breadcrumb nos resultados e tornar seu link mais atraente para os usuários.
O Google o define como um dos fatores de aprimoramento que podem influenciar positivamente o posicionamento da sua loja virtual.
Como vimos no artigo, o breadcrumb é uma navegação secundária, ela não vai substituir a navegação principal da loja virtual. É um recurso para que os usuários saibam onde estão e quais são os próximos caminhos, use com sabedoria.
Bons negócios!
Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.
Postar um comentário