11 maneiras Breadcrumbs Bolster UX Design
Breadcrumbs do site melhorar a experiência do usuário Incentivar os usuários a se aprofundarem na hierarquia do seu site, além de dizer aos visitantes exatamente onde eles estão em qualquer página. Do Google esquema de breadcrumb é outro motivo valioso para configurar o breadcrumbs. Mas o fator de design é sempre complicado, por isso ajuda a estudar exemplos e a reunir ideias.
Estes são alguns dos meus estilos de breadcrumb favoritos e eles devem fornecer um bom ponto de partida para novos projetos de design.
1. Wayfair
O site da Wayfair faz muito certo e todo o seu UX é fenomenal página a página. Uma coisa que eu realmente gosto é o seu estilo breadcrumb porque não é muito grande, mas também não muito pequeno e não intrusivo também.
Você encontrará essas migalhas nas páginas de produtos e páginas de categoria então eles te seguem pelo site todo. Isso permite que você salte uma ou duas categorias de qualquer página detalhada.
E a barra de navegação ganha sua própria pequena seção sob a navegação com uma cor BG diferente. Não intrusivo, mas não é difícil de encontrar também. Um grande estilo de design e um dos meus favoritos pessoais.
2. Suporte do Google
Outra menção óbvia é o Google, uma vez que são conhecidos por incrível trabalho de UX . Você encontrará breadcrumbs na maioria dos produtos do Google com páginas em camadas e um dos melhores é o Suporte do Google local.
Suas páginas de suporte oferecem conselhos sobre tudo, desde o esquema até a análise e a ferramenta Search Console. Cada página tem migalhas de pão e essas migalhas ocupam um espaço semelhante ao título da página, de modo que são claramente visíveis.
Novamente observe como esses links se misturam bem sem sair da página. Eles se sentem muito naturais no design e isso sempre deve ser o objetivo com suas migalhas de pão.
3. Docs do MSDN
Há um recurso de breadcrumb exclusivo e real no Documentos do MSDN que eu realmente gosto. Ele tem todos os recursos típicos de design, como ícones de seta e links categóricos, mas o link final na cadeia tem um menu suspenso personalizado com páginas extras.
Eu nunca vi isso antes em qualquer projeto de breadcrumb, mas é incrivelmente valioso para o usuário. Normalmente, seria necessário outro menu de navegação para acessar esses links, mas com um site como o Microsoft há tantas páginas para percorrer.
Sem mencionar que a documentação pode ser bastante complexa, por isso não é o material mais fácil de criar migalhas de pão. Essa técnica é brilhante e vale a pena usar se você tiver uma hierarquia complexa em seu site.
4. Apple
No site da Apple, vi toneladas de migalhas de pão em muitas páginas, como as páginas de lojas on-line e as páginas de produtos. Mas um pequeno detalhe que chamou minha atenção é o área de ligação do rodapé com um pequeno breadcrumb acima de seus links inferiores.
A Apple é uma grande empresa com muitas páginas e recursos. Este breadcrumb valeria a pena adicionar ao topo da página também, mas certamente não faz mal estar perto do fundo.
Eu encorajaria os designers a experimentar e ver como funciona. Rodapés de rodapé certamente não são a norma, mas ajudam na navegação visual.
5. TechRadar
A maioria dos breadcrumbs que eu encontro são geralmente em sites de empresas ou lojas de comércio eletrônico. Mas os blogs geralmente têm suas próprias migalhas de pão também e um bom exemplo é o Página de artigos do TechRadar .
Cada breadcrumb é bem pequena, apresentando um link diretamente para a categoria head e uma cópia do título do artigo. Para esse tipo de blog, é difícil justificar os breadcrumbs porque não há muita hierarquia.
Mas isso funciona bem se você não tiver outro lugar para adicionar a categoria do artigo à página.
6. TutsPlus
Para um projeto de migalhas de pão muito mais detalhado, Blog do TutsPlus . Cada artigo apresenta um pequeno breadcrumb no topo da página, incluindo as categorias primária e secundária.
Eu gosto muito desse design porque ele se mistura naturalmente ao título da página. Então, em vez de duplicar o título em um breadcrumb e em uma tag de título, isso combina tudo em um elemento para que o
o cabeçalho faz parte do breadcrumb.
Observe que isso não usa o esquema do Google adequado para que ele não apareça com migalhas de pão na pesquisa. Mas, considerando que isso dificilmente afeta a CTR, eu valorizo muito mais o design e a usabilidade na página do que os benefícios de SEO (ou a falta deles).
7. Coolspotters
Tradicional breadcrumbs geralmente ficar com alguns símbolos de texto como a barra ou o suporte de seta para a direita (>). Isso funciona porque eles são usados há décadas e os usuários estão familiarizados com eles.
Mas eu sempre gosto de ver outras tendências de design de breadcrumb como Coolspotters . Eles usam links de trilha de navegação personalizados com setas embutidas nos elementos de link.
Você pode encontrar muitas estilos de breadcrumb de código aberto Assim como estes para o seu próprio site. É uma ótima maneira de incrementar esse elemento de página muito tradicional.
8. MarketWatch
Voltando ao básico é o site de notícias online Observação do mercado . Todos os seus mensagens internas recurso breadcrumb navs com direito seta apontando ícones bastante pequeno texto.
Nesse caso, acho que o texto pequeno funciona bem. Não é exatamente difícil usar as migalhas de pão, mas elas parecem menores e menos significativas do que o restante da página.
Blogs e sites de notícias funcionam melhor com breadcrumbs menores, porque o foco real é o conteúdo. Ainda é bom encaixá-los em algum lugar e esse design é um ótimo exemplo.
9. Amazônia
Todo mundo adora a Amazon por seu estoque enorme e frete grátis. Mas eles também têm um site fantástico e não há como eu passar o design de migalhas de pão.
Muitos páginas de produtos tem um conjunto de breadcrumbs perto da navegação superior. Isso é sempre super longo porque as categorias da Amazon são profundas. Isso é valioso para os consumidores verem quais categorias podem valer a pena serem visitadas e valiosas para designers / webmasters estudarem a estrutura maciça de produtos da Amazon.
Mas se você rolar para baixo em cada página do produto, você encontrará uma seção de "informações do produto" ou "detalhes do produto" com as listagens dos melhores vendedores.
Esse recurso usa links de breadcrumb para mostrar onde o produto vendeu melhor e incentiva os visitantes a clicar nessas categorias relacionadas.
Os breadcrumbs da Amazon são admiravelmente longos, então vale a pena estudar se você tiver um site com uma hierarquia muito profunda.
10. Etsy
O enorme site de ecommerce online DIY / artesanato Etsy está constantemente avançando seu design. Foi fundada em 2005 e olhando para o site agora você pode ver que eles fizeram algumas grandes mudanças nos últimos 10 anos.
Se você verificar qualquer página de categoria você encontrará pequenas migalhas de pão no canto superior esquerdo. Estes não são tão proeminentes em comparação com a navegação da barra lateral que realmente parece a principal maneira de pesquisar.
Mas um bom efeito adicionado é a listagem total de itens dentro da categoria. O Etsy lista quantos itens totais estão à venda em cada subcat enquanto você se aprofunda no site.
Uma coisa que vou reclamar é a falta de migalhas de pão nas páginas dos produtos. Isso parece ser um verdadeiro descuido para a interface do usuário e espero que eles adicionem isso daqui para frente.
11. LinuxInsider
Esse design de breadcrumb não é particularmente bonito, mas tem um recurso que chama minha atenção.
Você notará um link "Próximo artigo" próximo ao topo de cada Postagem do LinuxInsider . Isso aparece diretamente ao lado do breadcrumb, então parece parte da navegação.
Os usuários que interagem com breadcrumbs geralmente querem se aprofundar nessas categorias de migalhas, então esse link extra faz sentido. Qualquer pessoa interessada no software Linux pode querer ir direto para o próximo artigo dessa categoria.
