Exemplos de Web Design Breadcrumbs e Melhores Práticas

Inspiração – Exemplos de WebsitesAndrian Valeanu – 14 de Junho de 2013 – 6 minutos LEIA

Breadcrumbs são um elemento muito importante no design de websites. Para isso, você pode implementar o pão ralado em seus webdesign. Ele aumenta o padrão do seu site e, portanto, atrai os telespectadores para o site. Basicamente, estes são links baseados em texto. Normalmente, a fonte de pão ralado é poucos pontos menor que o tamanho original do texto do conteúdo do site.

Quando você constrói um site, qual deve ser o seu foco principal? É claro, é a usabilidade do site. Seja um site educacional, um site de comércio eletrônico ou um site informativo; você não pode ignorar o significado da usabilidade do site.

Os visitantes devem aproveitar as informações do site de uma maneira simples e sem problemas. Se for um site de eCommerce então os telespectadores não devem enfrentar dificuldades para encontrar os seus produtos preferidos. Se eles acharem demorado obter informações relevantes do seu site, não hesitarão em sair do site e ir para a página de busca novamente para encontrar outro site concorrente que seja mais útil para eles. Daí a importância de tornar o site útil e eficaz para os visitantes.

Breadcrumbs, como o nome sugere, deixa um rasto para que os visitantes do site voltem ao seu destino de uma forma mais simples. O nome é retirado do conto de fadas “Hansel e Gretel”. Os Breadcrumbs são conhecidos como os links de texto geralmente encontrados em websites no topo do corpo principal da página; abaixo do cabeçalho ou/e em qualquer banner gráfico da página, mas acima do conteúdo. Breadcrumbs são planejados de acordo com a estrutura da página do seu website.

Por exemplo, se você tem uma loja de eCommerce e um visualizador está em uma página de refrigeradores, a estrutura do rastro de migalhas mostrará as categorias principais que levam à página e de volta à página inicial de acordo com a ordem correta de aparecimento da página. Assim, os telespectadores encontrarão a migalha de pão algo como “Home>Electronics Devices>Home Appliances>Refrigerators”. Esta trilha é tipicamente baseada na estrutura específica da pasta no sistema backend do site. O usuário pode ir para qualquer uma das páginas da trilha, clicando no texto. Por exemplo, se você quiser ir para a página inicial, você pode ir diretamente para lá clicando no link “home” no breadcrumb trail.

Breadcrumbs são usados principalmente como menus de navegação. Existem várias maneiras através das quais um usuário pode navegar por diferentes páginas de um site. Os menus de navegação têm de ser de fácil utilização e simples. Assim, o breadcrumb é uma ideia brilhante como menu de navegação.

Não só como menus de navegação mas também para a optimização do motor de busca isto é benéfico. Especialmente em eCommerce, onde a concorrência pode ser alta, ser classificado em alta nos motores de busca é importante. Uma vez que o breadcrumbs é baseado na estrutura de pastas do site, ele coloca palavras-chave em mais lugares em todo o site. Assim, se “woolen poncho” é um termo de pesquisa popular na sua indústria Breadcrumb criará mais um link interno para a palavra-chave relevante dentro do seu site.

No entanto, ao lidar com os menus Breadcrumb, uma coisa que precisa de ter em mente, este tipo de navegação deve ser considerado como uma funcionalidade extra para aumentar a atracção do site e não deve substituir os menus de navegação primários úteis.

Na Internet, enquanto procura os vários tipos de menus de migalhas de pão, pode encontrar menus de navegação baseados em localização, atributos e caminhos.

O componente é trabalhado na cor preta para se destacar naturalmente do fundo claro e ficar em foco. A tela texturizada colabora muito bem com o design artístico em geral. As ligações são rapidamente percebidas graças à tipografia nítida e formal e os pequenos espaços entre cada item contribuem para a legibilidade.

Ordem

Enquanto todos os itens de UI são marcados por gradientes sutis, o pão ralado, pelo contrário, cola-se a um fundo mais limpo, plano e monocromático. No entanto, vai bastante bem com os outros e complementa a estética graças a uma coloração semelhante. O botão home acrescenta um apelo clássico. Tons brilhantes são usados para delinear títulos de forma mais eficaz.

Breadcrumbs by Rob Dozier magnetiza com uma aparência extremamente elegante, limpa e fresca. Embora a navegação seja feita em um esquema de cores claras, ainda assim chama a atenção. A sombra subtil proporciona caixas em forma de seta com um peso visual extra, ajudando-as assim a destacar-se do fundo ruidoso. Para indicar claramente a posição atual, o último item é apresentado como uma simples inscrição.

Breadcrumbs/Error by Jason Mayo é uma barra de navegação simplificada, sem lacunas ou características impressionantes. Ela se mistura harmoniosamente com a composição, tornando-se um detalhe essencial da IU. No entanto, um efeito em relevo salva o dia. Ela fornece a cada bloco e título uma aparência mais clara e nítida. Violeta que faz parte da paleta de cores primárias é aplicada para destacar a página real.

Design Fundamentals

Allison House abandona todos os detalhes clássicos em forma de seta e apenas vai para características mais simplistas e elegantes. Assim, o componente parece natural e intuitivo e tem um forte estilo educativo que é necessário para o projecto. Cada bloco inclui um título que é reforçado por um ícone que o acompanha.

Muito parecido com o exemplo anterior, Michal Vasko organiza todos os links em uma linha abandonando os detalhes gráficos em favor da tipografia. Os itens são separados por minúsculas setas minimalistas que, devido à cor azul, mostram a direção de forma discreta. Entretanto, como o elemento é perfeitamente integrado ao desenho e a cor cinza não fica em contraste com o fundo, ele pode ser facilmente perdido de vista.

JomSocial Template

JomSocial Template é outra questão. A navegação do pão ralado tem um grande peso visual devido ao seu tamanho relativamente grande e coloração brilhante. Atinge os olhos sem sobrecarregar os utilizadores. Mohd Izuddin Helmi manipula com caracteres distintivos, sombra interna, botão home sólido e alguns gradientes suaves para alcançar um resultado impressionante.

Este é um exemplo bastante básico, mas tem o direito de existir. É a maneira mais simples de mostrar aos usuários seus movimentos através do projeto. Embora seja privado de uma bela aparência e necessite de um solitário, no entanto, serve bastante bem o seu papel. Ele inclui todas as características comuns: títulos, setas para direção e até mesmo destaque de cores, proporcionando assim aos visitantes um assistente de navegação viável.

Administração de Galeria de Imagens

A navegação de pão ralado proporciona elegância e clareza. Tem um visual limpo, e detalhado que é obtido a partir de um trabalho artesanal com tipografia, espaço em branco e fundo. O último item tem formas de letra mais arrojadas em contraste com outros, a fim de direcionar a atenção para a página relevante. Embora a navegação mantenha uma sensação simplista, ainda assim tem charme e cabe como uma luva aqui.

Gamerscouch.com redesign

Aaron Moody criou vigilantemente o front-end do site onde o pão ralado toma o seu devido lugar e tem uma aparência limpa, sofisticada e na moda. A navegação complementa o design geral e capta o humor do projeto. Coloração escura com um salpico de tonalidade laranja quente delineia o componente e evoca emoções positivas.

Conclusão

Como uma ajuda de navegação opcional que não só suporta o menu principal mas também revela a hierarquia e mostra o caminho para a secção actual, o breadcrumbs é um poderoso instrumento para melhorar a experiência do utilizador.

No entanto, infelizmente, muitas vezes continua a ser esquecido em termos de design, embora deva ser tratado como qualquer elemento comum da IU. Os exemplos listados acima estimulam os usuários a criarem lindas e intuitivas migalhas de pão que irão cumprir sua missão, assim como não serão uma ‘ovelha negra’ no design.