Como usar a navegação Breadcrumb da maneira correta

Breadcrumbs nos leva de volta ao velho conto de fadas que você pode ter lido em seus anos de jardim de infância. Duas crianças Hansel e Gretel são forçadas a sair de sua casa na floresta quando Hansel decide deixar um rastro de migalhas de pão para rastrear seu caminho de volta para casa. Embora as migalhas de pão sejam comidas pelos pássaros irritantes da floresta, elas conseguiram deixar uma impressão muitos anos depois que a história foi escrita.

No web design, as migalhas de pão servem a um propósito semelhante ao que Hansel tinha em mente. Breadcrumbs servem como uma navegação secundária na navegação do seu site para ajudar os visitantes a não se perderem depois de passar de uma página para outra. Como o antigo conto de fadas, ajuda a mostrar ao usuário onde ele desembarcou e qual foi sua última localização.

Uma vez que as migalhas de pão são integradas na estrutura hierárquica do site, os usuários podem ir fundo nas categorias de produtos e navegar de volta para onde começaram sem entrar em um frenesi de botão “Voltar”.

Breadcrumbs também servem como um elemento de controle gráfico para ajudar os visitantes menos experientes a navegar em sites de comércio eletrônico. Para esses sites, a estrutura interna deve ser projetada de forma inteligente. Com o breadcrumbs, torna-se imperativo que as plataformas de compras online não apenas forneçam facilidade de uso aos visitantes, mas também evitem que clientes em potencial abandonem suas páginas como resultado de se perderem.

Navegação por trilha

As migalhas de pão são um meio eficaz de orientar os visitantes, determinando sua localização atual e os lugares que visitaram no caminho. Eles servem como auxílio visual dentro da hierarquia do site. Mas em termos de experiência do usuário do cliente, as migalhas de pão os ajudam a responder a essas 3 perguntas.

1. Onde estou?

   Breadcrumbs mantém os usuários informados sobre seu paradeiro no site iniciando sua jornada.

2. Onde eu posso ir?

   Serve como uma ajuda para os usuários, sugerindo-lhes para onde ir em seguida. Como a estrutura já está na frente deles, os usuários não precisam mais pesquisar e encontrar categorias ou seções do site.

3. Devo ir lá?

   Breadcrumbs ajudam a promover uma melhor navegação e exibir valor de conteúdo para o usuário. Por exemplo, se um cliente acessa uma página da Web em busca de um produto, ele pode encontrar outros produtos que podem ser uma boa combinação para suas necessidades. Isso ajuda a reduzir a taxa de rejeição do site.

Benefícios

Reduz as ações

Para alcançar uma página de nível superior, as migalhas de pão ajudam a reduzir o não. de ações exigidas pelo visitante do site para chegar lá. Os visitantes podem simplesmente usar breadcrumbs para navegar de volta em vez de usar incessantemente o botão "Voltar" ou a navegação principal do site.

Requer Espaço Mínimo

Leva apenas uma linha horizontal preenchida com links de texto. Isso facilita uma estrutura de web design saudável, ocupando um espaço mínimo e permitindo que outros elementos do site respirem. Isso também ajuda a obter melhores velocidades de carregamento para o site.

Todo usuário sabe como operar migalhas de pão

É fácil de entender e não requer nenhum conhecimento técnico para interagir com eles. O texto explica onde o usuário estava, está e pode ir. É um sistema de navegação autoexplicativo universal para a compreensão de todos os usuários.

Quando usar farinha de rosca?

Construir um mapa do site para exibir a estrutura de navegação do seu site é um dos melhores meios para determinar se o seu site pode se beneficiar das migalhas de pão. Você pode então analisar por avaliação e testar se a navegação de trilha está ajudando os usuários através do conteúdo do seu site ou não.

• Breadcrumbs são melhor usados ​​quando há conteúdo substancialmente maior que precisa ser organizado em categorias e em uma estrutura linear limpa. Na maioria dos sites de comércio eletrônico, o mesmo critério é usado para agrupar uma grande variedade de produtos em categorias lógicas.
• Breadcrumbs não deve ser usado para sites que não possuem hierarquia lógica para agrupamento de conteúdo ou produtos.

Quando evitar usá-los

Onde as migalhas de pão são essenciais para a estrutura do site, também há casos em que elas devem ser evitadas. Quando há um site que consiste em uma estrutura de nível único sem qualquer indicação clara de agrupamento, é do interesse do site evitar a adição de migalhas de pão. Como mencionamos acima, um diagrama ou um mapa do site pode ser bastante útil para determinar a arquitetura de navegação do site.

Breadcrumbs só são úteis se forem suportados pela navegação primária. As migalhas de pão atuam como os músculos, enquanto a navegação primária é o esqueleto que os mantém juntos. Sem sua completa locomoção, a hierarquia do site não pode funcionar produtivamente.

Tipos de pão ralado

Existem três tipos de breadcrumbs que você deve conhecer: Localização, Caminho e Atributo.

1. Com base na localização

Breadcrumbs baseados em localização são usados ​​para exibir a estrutura básica do site. Eles permitem que os usuários naveguem em sites com vários níveis e trilhas de conteúdo abrangentes. Esse tipo de breadcrumbs é altamente útil para visitantes que acessam um site de uma fonte externa e inserem um nível mais profundo de conteúdo. Por exemplo, se você estiver procurando por um tipo específico de produto e clicar nos resultados de pesquisa mostrados pelo Google, você se encontrará entre várias categorias assim que entrar na página da web. Os breadcrumbs ajudarão você a determinar sua localização e navegar pelas possibilidades na estrutura hierárquica. Esses sites que contêm níveis profundos de conteúdo são muito adequados para migalhas de pão baseadas em localização. Um exemplo ideal é o eBay.

2. Com base no caminho

Essas migalhas de pão são importantes para a navegação da trilha do histórico de um site. Os breadcrumbs baseados em caminhos mostram basicamente todos os caminhos visitados pelo usuário para alcançar sua localização atual. Normalmente, esses links de breadcrumb são gerados dinamicamente. Embora os plug-ins baseados em caminho possam ser úteis para usuários que passam muito tempo navegando em sites, eles são intrigantes para a maioria dos usuários. Como a maioria dos visitantes navega por conta própria, passando de uma página para outra. O botão “Voltar” no navegador resolve a maioria de suas necessidades de mudança de caminho. Isso o torna inútil, especialmente para aqueles tipos de visitantes que chegam à página do site que já está profundamente dentro do site.

3. Baseado em Atributos

Os sites de comércio eletrônico se beneficiam mais das migalhas de pão baseadas em atributos. Eles ajudam a listar as categorias de acordo com a página ou produto específico. Esse tipo de pão ralado é extremamente útil para incentivar os usuários a entender a relação dos produtos entre si. Por exemplo, se o site estiver vendendo jeans, eles usarão migalhas de pão baseadas em atributos para ajudar os clientes a navegar entre o ajuste normal, o ajuste fino ou o jeans skinny.

Práticas recomendadas de navegação por trilha

Ao projetar uma navegação breadcrumb, lembre-se de seguir as coisas. A navegação por trilha é uma ajuda adicional para melhorar a experiência dos usuários em seu site.

Evite elementos duplicados

Se você está realmente disposto a adicionar migalhas de pão ao seu site, é melhor fazê-las da maneira certa. Em primeiro lugar, você precisa eliminar quaisquer elementos duplicados que possam estar entre a trilha de migalhas de pão. Infelizmente, tenho visto isso em muitos sites de alto nível, onde as mesmas páginas se enquadram em várias categorias ou nos níveis de conteúdo mostrados. Isso não só confunde o visitante, mas também reflete mal em seu site.

Compatibilidade SEO

Breadcrumbs não são apenas controles de navegação para seus visitantes, mas também ótimos ativos para sua prática de SEO. Você pode usar palavras-chave nas migalhas de pão para melhorar seus rankings nos mecanismos de pesquisa. É recomendável que você escolha nomes amigáveis ​​para SEO para as categorias do seu site, para que os mecanismos de pesquisa possam listar facilmente as migalhas de pão em seus resultados.

Use Breadcrumbs como uma navegação alternativa

Embora os breadcrumbs sejam uma excelente fonte para ajudar os usuários a navegar de um ponto a outro, é importante que eles sejam tratados apenas como uma fonte secundária. Breadcrumbs é um recurso extra para melhorar a usabilidade do visitante e em nenhuma condição pode substituir a estrutura de navegação primária do site.

É inútil vincular a página atual na navegação Breadcrumb

Embora mostrar a localização atual do visitante na trilha de navegação seja opcional, você deve certificar-se de que o link mostrado na estrutura linear não seja tocável ou clicável. Só causaria confusão para o visitante mostrar o link da página em que está atualmente.

Adicionar separadores

O uso de separadores é uma ótima prática para dar uma aparência limpa e apreciável à sua navegação de breadcrumbs. Ele evita que o texto chegue muito perto se o usuário for para níveis mais profundos e cria uma estrutura dinâmica que é fácil de entender e interagir.

Você pode usar o sinal › para denotar a hierarquia, pois normalmente é usado em formatos de categoria como Roupas › Camisas › Camisas de colarinho etc. Outros símbolos incluem setas (→), aspas em ângulo reto (») e barras (⁄).

Introduzir o tamanho e o preenchimento das migalhas de pão

Ao projetar as migalhas de pão, você deve considerar o preenchimento e o tamanho do destino. O espaçamento entre um breadcrumb para o outro deve ser perceptível, caso contrário os visitantes podem não conseguir usá-los de forma eficaz. Ao mesmo tempo, certifique-se de que o tamanho da migalha de pão não comprometa outros elementos ao seu redor para que a navegação principal permaneça inalterada.

Nunca dê mais foco ao design de migalhas de pão do que o necessário

Nunca use cores brilhantes ou fontes extravagantes para representar suas migalhas de pão. Embora a trilha de navegação seja importante para os usuários depois que eles acessam a página, ela não deve ser a primeira coisa a ser percebida. Adicionar glamour à navegação do breadcrumb pode fazer com que o usuário ignore a navegação principal do site. Isso pode distrair o usuário da real intenção de entrar na página e resultar na perda de uma conversão potencial para a loja. O Google é o melhor exemplo quando se trata disso. Com tantos níveis de conteúdo pesquisado, ele mostra uma trilha de navegação simples, livre de qualquer fonte ou cor sofisticada, para que os usuários possam localizar e interagir facilmente com as trilhas.

Qual tipo deve ser evitado?

É um argumento controverso se deve ser usado breadcrumbs baseados em localização/atributo ou breadcrumbs baseados em caminho para mostrar a hierarquia do site. É uma regra geral que os breadcrumbs não devem mostrar o histórico do usuário, mas a hierarquia do site. Em nossa avaliação e opinião, você provavelmente não deveria mais se preocupar com breadcrumbs baseados em caminhos. Por um lado, não ajuda com o UX, pois pode causar confusão nos visitantes devido à falta de hierarquia mostrada entre os diferentes níveis. É por isso que migalhas de pão baseadas em localização e atributo são preferidas em migalhas de pão baseadas em caminho.

Pensamentos finais

Breadcrumbs são tão importantes quanto qualquer outro elemento em um site. Agora que a tecnologia permitiu armazenar maiores quantidades de dados, velocidades de internet mais rápidas e tempo de carregamento ainda mais rápido, a navegação pode ser mostrada de forma mais abrangente em níveis mais altos de hierarquia sem suar a camisa. Com a ajuda do breadcrumbs, seu site não apenas produzirá uma melhor experiência do usuário, mas também gerará maiores vendas de seus clientes. Uma navegação mais suave e sem sofisticação significa um acesso mais fácil às páginas de produtos e dificulta o processo de checkout.