Breadcrumbs are a very important element in websites design. In order to
do so, we can implement the breadcrumbs in
our web designs. It augments the standard of our website and hence attracts the
viewers to the site. Basically, these are text-based links.
Breadcrumbs (or breadcrumb trail) are a secondary navigation system that
shows a user’s location in a site or web app. The term came from the Hansel and
Gretel fairy tale in which the main characters create a trail of breadcrumbs in
order to track back to their house.
Normally, the font of breadcrumbs is few points smaller than the
original text size of the content of the website.
When we build a website; what should be our prime focus? Of course, it
is the usability of the site. Be it an educational site, an e-Commerce
website or an informational site; we cannot ignore the significance of
usability of the website.
Visitors
must avail the information from the site in a hassle-free manner. If it is an e-Commerce
site, then the viewers should not face difficulties to find out their preferred
products.
If they
find it time-consuming to get relevant information from your site, they will
not hesitate to leave the site and go to the search page again to
find out another competing website that is more useful for them. Hence it is
important to make the site useful and effective for the visitors.
Why use Breadcrumbs?
Great usability:
Breadcrumbs
provide an additional means by which users can easily navigate a website. If a
user lands on an internal page on our website from
another source, breadcrumbs will allow the user to see exactly where they stand
within the site’s hierarchy.
User is also
given the opportunity to move up to a higher level of the website at any given
time without any hassle.
Easy to back-track:
Primary navigation are not designed to be followed backward where breadcrumbs are. Since
back-tracking is extremely popular online, providing a little additional help can go a
long way.
Eliminate
additional clicks:
Breadcrumbs allow
users to jump from one level of a website to the next without having to use the
“forward” or “backward” buttons on the browser. Additionally, breadcrumbs
eliminate the need for users to resort to the main
navigation continually.
Provides
additional Help:
It is entirely
possible that some users may not understand how a website’s primary navigation
works, and in some cases, users may not even know what they are looking for.
Giving user’s
breadcrumbs will allow them to see the overall progress and structure of a website,
thus allowing them to navigate the site better.
Lower
Bounce Rates:
Typically, breadcrumbs
will provide more detailed navigation than the primary navigation. In doing so,
users will be given more options on how to navigate a website. Allowing them to
back-track a few levels within the site quickly will lower your bounce rate.
Builds
interest:
When a user lands on
an internal page of a website, odds are present, in which they are already on a
page of interest. Breadcrumbs may provide links to additional pages and
information of which the user is also interested in without making them start
from square one.
Breadcrumbs—Examples:
Here, now we will take
a look at some widely used examples for breadcrumbs in website design. These
are:
Breadcrumbs in canvas:
The component is crafted in black
color to naturally stand out from the light background and get into focus. The
textured canvas nicely collaborates with the overall artistic design. The links
are quickly perceived thanks to sharp and formal typography and small gaps
between each item contribute to the readability.
Breadcrumbs by Rob Dozier magnetizes
with an extremely elegant, clean and fresh appearance. Although the navigation
is made in a light color scheme, yet it still catches the eye.
The subtle shadow provides
arrow-shaped boxes with extra visual weight thereby helping them stand out from
the noised background. To clearly indicate the current position, the last item
is presented as a simple inscription.
Order:
While all the items of UI are
marked by subtle gradients, the breadcrumbs, on the contrary, sticks to more
clean flat outward and monochrome backdrop. Nevertheless, it goes quite well
with the others and complements the aesthetics thanks to similar coloring.
The home button adds a classic
appeal. Bright tones are used to delineate titles more effectively.
Breadcrumbs/Error:
Breadcrumbs/Error by Jason Mayo is
a streamlined navigation bar with no gaps or impressive features. It
harmoniously blends with the composition, becoming an essential detail of the
UI. However, an embossed effect saves the day. It supplies each block and title
with clearer and sharper appearance.
Violet that is a part of the
primary color palette is applied to highlight the actual page.
Design Fundamentals in
breadcrumbs:
It is defined in two ways:
1.
Allison House ditches all the classic arrow-shaped details and just goes
for more simplistic and elegant features. Thus, the component looks natural and
intuitive and has a strong educational style that is required for the project.
Each block includes a title that is bolstered by an accompanying icon.
2. Michael Vasuki arranges all the links into a row abandoning graphic
details in favor of typography. Items are separated by tiny minimalist
arrows that due to blue color unobtrusively show the direction.
However, since the
element is seamlessly integrated into the design and grey color does not stand
in stark contrast to the backdrop it can be easily lost out of sight.
Image
Gallery Management:
The breadcrumbs
navigation gives off sleekness and clarity. It has a clean and detailed look
that is obtained from crafty work with typography, white-space, and background.
The last item has bolder letter forms in contrast to others in order to direct
the attention to the relevant page.
Although the navigation
maintains a simplistic feel, yet it has charm and fits like a glove here.
Aaron Moody, in image gallery management, has vigilantly created the front-end
of the website where the breadcrumbs take its rightful place and have a neat,
sophisticated and trendy appearance.
The navigation
complements the overall design and catches the mood of the project. Dark
coloring with a splash of warm orange shade outlines the component and evokes
positive emotions.
Breadcrumbs—Best
Practices:
Now, here are some of
the best practices of breadcrumbs to improve our web designing working capabilities:
1. Attributes vs.
Pathing:
There are two primary styles of breadcrumbs.
The first is based on attributes, meaning the breadcrumbs are made up of
information such as specs, brands, sizes, and colors. Essentially we’re taking
typical filter options and listing them in our breadcrumbs. This is often used
in e-commerce stores where the products are easily discerned by their
attributes.
Pathing, on the other hand, takes a more
hierarchical approach, where categories funnel down to the right.
2. Page and
Content Categorization:
Implementing breadcrumbs also requires us to
ensure our pages and content are organized in a logical manner. Go through
pages, services, and items to ensure the final page – the page where a user can
purchase the product, read reviews, see photos, etc. – does not fall under
multiple categories.
Depending on how large your database of
products is, a situation can easily arise where products are being
cross-referenced for categories that “kind of make sense” but inevitably confuse
users.
3. Plan
Categorization Based on Searcher Intent:
One of the most vital aspects of breadcrumbs
is their relationship with search engine optimization. Due to the
implementation of breadcrumbs, we’re forcing ourselves to strategically
categories every product for users and for searchers.
This means our categories and products are
also comprised of the keywords we want to rank for in search engines.
4. Stylize
Breadcrumbs easily:
We want our breadcrumbs
to be seen; however, we do not want them to be the focal point. We also want to
make it apparent that our breadcrumbs are not part of the main content to a page, only
additional support to it. Find a happy medium where our breadcrumbs are
noticeable, however, not overbearing.
5. Categorize pages
clearly:
If we have pages that
fall into two or more categories, we may not want to use breadcrumbs on our
website. Trying to place a page under two or more categories will likely only
produce unclear breadcrumbs and puzzle the user.
Make sure our website
has an organized hierarchy and is displayed accordingly through our
breadcrumbs.
6. Single out the current page:
Use a different style
on the last item of a breadcrumb list to establish that it is the current page
being viewed. We can accomplish this by making the item bold, changing its color, or emphasizing it.
7. Do not make the
current page a link:
There is no need to make the last item of
a breadcrumb list a link because it is the current page being viewed. Creating
a link here will only confuse users, especially when they click on it and are
not taken to a new page.
8. Do not use breadcrumbs as a page heading:
Using the last item of
a breadcrumb list as the heading of a current page is ineffective. If we choose
to use breadcrumbs, do so with the addition of a page heading as well.
9. Breadcrumbs do not replace primary navigation:
Breadcrumbs are only
to be used as support to the primary navigation, never to replace the primary
navigation altogether. You should always provide users with primary navigation
from which they can navigate a website before using breadcrumb navigation.
All that breadcrumbs
do is make it easier for visitors to move around the site, assuming its content
and overall structure makes sense. It’s one of the few simple things that
enhances website experience and fosters user comfort.
And that’s sufficient
contribution for something that takes up only one line in the design.
Written by - Sakshi Chauhan
0 Comments