Free Press

No conto de fadas Hansel e Gretel, duas crianças deixam cair migalhas de pão na floresta para encontrar o caminho para casa.

> Agora, provavelmente não experimenta muitas experiências perdidas na floresta, mas aposto que se sentiu frustrantemente desorientado em websites mal desenhados.

No design do website, a navegação do pão ralado é uma forma de mostrar aos seus utilizadores a sua localização e como lá chegaram (semelhante ao pão ralado do Hansel). Também ajuda os usuários a encontrar páginas de nível superior mais rápido se eles pousaram no seu site a partir da busca ou de um link profundo.

Jakob Nielsen, co-fundador do Grupo Nielsen Norman, tem vindo a recomendar a navegação Breadcrumb desde 1995, e faz um ponto forte para eles: “Tudo o que o pão ralado faz é facilitar a circulação dos utilizadores pelo site, assumindo que o seu conteúdo e estrutura geral fazem sentido. Isso é contribuição suficiente para algo que ocupa apenas uma linha no design”

Se o site do seu negócio é multi-camadas, você pode considerar a implementação da navegação breadcrumb para tornar o seu site mais fácil de navegar. No entanto, como qualquer elemento do design, há uma maneira certa e errada de o fazer. Aqui, vamos explorar nove dicas e exemplos para garantir que você está criando a navegação mais eficaz para seus usuários.

Dicas e Exemplos de Navegação em categorias de pão ralado

Utilize apenas a navegação em categorias de pão ralado se isso fizer sentido para a estrutura do seu site.

Navegação em categorias de pão ralado tem uma estrutura linear, então você só quer usá-la se isso fizer sentido com a hierarquia do seu site. Se você tem páginas de nível inferior que são acessíveis a partir de diferentes páginas de destino, o uso da navegação em categorias, apenas irá confundir os leitores que continuam acessando as mesmas páginas a partir de diferentes pontos de partida. Adicionalmente, se o seu site é relativamente simples, com apenas algumas páginas, você provavelmente não precisa de navegação em migalhas.

Não torne a sua navegação em migalhas demasiado grande.

A sua navegação em migalhas é uma ferramenta secundária à sua barra de navegação primária, por isso não deve ser demasiado grande ou proeminente na página. Por exemplo, no site da DHL, a sua barra de navegação primária é grande e reconhecível, com colunas como “Express” “Parcel & eCommerce” “Logística”, etc. A navegação deles é a seção menor abaixo que diz, “DHL Global | > Logística | > Transporte de Cargas”. Você não quer que seus usuários confundam sua navegação de migalhas como a barra de navegação primária.

Inclua o caminho de navegação completo em sua navegação de migalhas.

I Googled “Elon University Non-Degree Students” para chegar a esta página de desembarque, mas Elon é inteligente para incluir o caminho de navegação completo, incluindo “Home” e “Admissions”. Se você deixar de fora certos níveis, você confundirá os usuários e o caminho de migalhas de pão não será tão útil. Mesmo que os usuários não tenham começado na página inicial, você quer dar a eles uma maneira fácil de explorar seu site desde o início.

Progressar do nível mais alto para o mais baixo.

É importante que sua navegação em “breadcrumb” leia da esquerda para a direita, sendo que o link mais próximo à esquerda é sua página inicial, e o link mais próximo à direita é a página atual do usuário. Um estudo do Grupo Nielsen Norman descobriu que os usuários gastam 80% do seu tempo visualizando a metade esquerda de uma página e 20% visualizando a metade direita, fazendo um forte argumento para o design da esquerda para a direita. Além disso, o link mais próximo à esquerda aparecerá como o início da cadeia, então você quer que seja a sua página de nível mais alto.

Calme seus títulos de migalhas consistentes com seus títulos de páginas.

Para evitar confusão, você vai querer permanecer consistente com sua página e títulos de migalhas, particularmente se você estiver visando certas palavras-chave nesses títulos. Você também quer ligar claramente os seus títulos de migalhas de pão à página. Se o título da migalha de pão não tiver um link, deixe-o claro. O Nestlé etiqueta eficazmente os seus títulos de migalhas de pão de forma a corresponderem aos títulos da página. “Áreas de impacto & compromisso”, por exemplo, lê o mesmo na navegação do botão breadcrumb que na página.

A Nestlé também faz um bom trabalho diferenciando links de não-links com cores diferentes — os links são azuis, enquanto os não-links permanecem cinza.

Criatividade com design.

A navegação tradicional do botão breadcrumb tem este aspecto: Home >Quem somos >Carreiras. No entanto, não precisa de seguir o caminho tradicional se sentir que um design diferente pode atrair mais o seu público, ou ficar melhor no seu site. Por exemplo, a Target usa a navegação breadcrumb nas suas páginas de produtos (porque quem não se perderia na secção de sapatos virtuais?), mas usa símbolos “/” e texto simples a preto e cinzento. Neste caso, a variação sutil do design faz sentido para a estética do seu site.

Keep it clean and uncluttered.

Your breadcrumb navigation is simply an aid for the user, and idealmente não deve ser notado a menos que o usuário esteja procurando por ele. Por esta razão, você não quer bagunçar a sua navegação com textos desnecessários.

Eionet, por exemplo, poderia fazer sem o seu texto “Você está aqui”. Embora seja para ser útil, o texto desordenou a página. Com o design correto, uma navegação em migalhas deve ser notada o suficiente sem uma introdução.

Considere qual tipo de navegação em migalhas faz mais sentido para o seu site.

Existem alguns tipos diferentes de migalhas que você pode usar — baseadas em localização, baseadas em atributos e baseadas em histórico. As migalhas de pão baseadas em localização mostram ao usuário onde elas estão na hierarquia do site. Migalhas de pão baseadas em atributos mostram ao usuário em que categoria sua página se enquadra. Finalmente, breadcrumbs baseados em histórico mostram aos usuários o caminho específico que eles tomaram para chegar à página atual.

Bed Bath & Beyond usa navegação baseada em atributos para mostrar aos usuários em que categoria sua página de produtos se encaixa, assim os usuários podem clicar de volta para “Cozinha” ou “Pequenos Eletrodomésticos” para ler itens similares. Este tipo de navegação de migalhas de pão é mais eficaz para Banho de Cama & Além dos clientes. Quando você estiver criando uma navegação de migalhas de pão, considere o que é mais útil para os visitantes do seu site.

Conheça seu público.

As melhores práticas em navegação de migalhas de pão incitam os web designers a colocar a navegação no topo da página — mas a Apple, uma das empresas mais valiosas de todos os tempos, desafia essa lógica colocando sua navegação de migalhas de pão na parte inferior do site. No final das contas, é fundamental que você conheça o seu público. Os clientes da Apple são tipicamente especializados em tecnologia, e provavelmente encontrariam a navegação se precisassem dela. Considere as necessidades dos seus clientes e implemente testes A/B se você não tiver certeza.

Ultimamente, a navegação em categorias é uma ferramenta eficaz para tornar o seu site mais fácil de navegar, mas você quer seguir as melhores práticas de design para garantir que você está aproveitando a utilidade da ferramenta. Para conselhos UX adicionais, confira “The Ultimate Guide to UX Design”.