Como usar a navegação Breadcrumb da maneira correta

0

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 casa na floresta quando Hansel decide deixar uma trilha de migalhas de pão para rastrear seu caminho de volta para casa. Embora as migalhas de pão sejam comidas pelos incômodos pássaros 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 dentro da navegação do seu site para ajudar os visitantes a não se perderem depois de ir de uma página para outra. Como o antigo conto de fadas, ajuda a mostrar ao usuário onde ele pousou e qual foi sua última localização.

Depois que as migalhas de pão são integradas à estrutura hierárquica do site, os usuários podem se aprofundar nas categorias de produtos e navegar de volta para onde começaram sem entrar no frenesi do 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 on-line não apenas ofereçam facilidade de uso aos visitantes, mas também evitem que clientes em potencial abandonem suas páginas por se perderem.

Navegação em Breadcrumb

Breadcrumbs são um meio eficaz para orientar os visitantes, determinando sua localização atual e os lugares que visitaram em seu caminho. Eles servem como um 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 três 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 onde ir em seguida. Como a estrutura já está colocada à sua frente, 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 exibem o valor do 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

Corta Ações

Para alcançar uma página de nível superior, breadcrumbs ajudam a reduzir o não. de ações exigidas pelo visitante do site para chegar lá. O visitante pode 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 Breadcrumbs

É 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 auto-explicativo universal para a compreensão de todos os usuários.

Quando usar pão ralado?

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 de breadcrumbs. Você pode então analisar por tentativa e teste se a navegação breadcrumbs está ajudando os usuários através do conteúdo do seu site ou não.

  • As migalhas de pão são mais bem usadas quando há um 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 devem ser usados ​​para sites que estão ausentes de qualquer 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 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 breadcrumbs. Como mencionamos acima, um diagrama ou 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 principal. As migalhas de pão atuam como os músculos, enquanto a navegação primária é o esqueleto que os mantém unidos. Sem sua completa locomoção, a hierarquia do site não pode funcionar de forma produtiva.

Tipos de pão ralado

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

1 baseado em 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 entram em um nível mais profundo de conteúdo. Por exemplo, se você estiver procurando por um determinado tipo de produto e clicar nos resultados da pesquisa mostrados pelo Google, você se encontrará entre muitas categorias assim que entrar na página da web. As migalhas de pão o ajudarão 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 breadcrumbs baseados em localização. Um exemplo ideal é o eBay.

Baseado em 2 Caminhos

Essas migalhas de pão são importantes para a navegação na trilha do histórico de um site. Breadcrumbs baseados em caminhos mostram basicamente todos os caminhos percorridos pelo usuário para chegar à sua localização atual. Normalmente, esses links 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 mais intrigantes para a maioria dos usuários. Já que a maioria dos visitantes navega por conta própria, passando de uma página para outra. O botão “Voltar” do navegador resolve a maior parte de suas necessidades de mudança de caminho. Isso o torna inútil principalmente para o tipo de visitante que chega à página do site que já está no fundo do site.

3 Baseado em atributos

Os sites de comércio eletrônico são os que mais se beneficiam 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 breadcrumbs é extremamente útil para encorajar 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 regular, o ajuste justo ou o jeans skinny.

Práticas recomendadas de navegação de navegação estrutural

Ao projetar uma navegação de breadcrumb, certifique-se de manter as seguintes coisas em mente. A navegação estrutural é uma ajuda adicional para melhorar a experiência dos usuários em seu site.

Evite elementos duplicados

Se você realmente deseja adicionar migalhas de pão ao seu site, é melhor fazê-lo da maneira certa. Primeiro, você precisa eliminar quaisquer elementos duplicados que possam surgir entre a trilha de migalhas de pão. Infelizmente, tenho visto isso em muitos sites de alto escalão, onde as mesmas páginas se enquadram em várias categorias ou níveis de conteúdo exibidos. Isso não apenas 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 grandes recursos para sua prática de SEO. Você pode usar palavras-chave nas migalhas de pão para melhorar sua classificação nos mecanismos de pesquisa. É recomendável que você escolha nomes amigáveis ​​de 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 sejam tratados apenas como uma fonte secundária. Breadcrumbs são um recurso extra para melhorar a usabilidade do visitante e em nenhuma condição podem substituir a estrutura de navegação primária do site.

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

Embora a exibição da localização atual do visitante na trilha de navegação seja opcional, você deve garantir 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

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

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

Apresentar o tamanho e preenchimento de pão ralado

Ao projetar a trilha de navegação, você deve considerar o preenchimento e o tamanho de destino. O espaçamento entre um breadcrumb e 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 desenhe o foco no design da farinha de rosca mais do que o necessário

Nunca use cores brilhantes ou fontes sofisticadas 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 que chama a atenção. Adicionar glam à navegação 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 possível conversão 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 migalhas de pão.

Qual tipo deve ser evitado?

É um argumento controverso sobre se deve usar breadcrumbs baseados em localização/atributo ou breadcrumbs baseado em caminho para mostrar a hierarquia do site. É uma regra de ouro que breadcrumbs não deve 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 migalhas de pão baseadas em caminho. Por um lado, não ajuda no UX, pois pode causar confusão nos visitantes devido à falta de hierarquia mostrada entre os diferentes níveis. É por isso que os breadcrumbs baseados em localização e atributo são preferidos em relação aos breadcrumbs baseados 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 superiores de hierarquia sem suar a camisa. Com a ajuda de 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 acesso mais fácil às páginas de produtos e dificulta menos o processo de checkout.

Este site usa cookies para melhorar sua experiência. Presumiremos que você está ok com isso, mas você pode cancelar, se desejar. Aceitar Consulte Mais informação