how to design a better breadcrumb navigation

no onemeetingnavigation to breadcrumbsi'm particularly excited. these tiny path fragments illustrate the current position of users in the intricate hierarchy of the website. their design looks obvious, and so is their placement on the page, and it doesn't take much innovation to look like the crumbs glowing.
it turns out that there are a lot of tiny little details that can make the crumbs messy or infinitely more useful. in this article, we will look at some of them carefully. we'll explorewhen do we really need bread crumbs，how users use them and how to better design them to speed up users’ navigation on our website.
let’s first explore how people browse the website and how exactly bread crumbs help our journey.

how to browse the website

each usability test shows that there is no single, universal and comprehensive way to browse the website. depending on the task at hand and the frequency of access, the user application is verydifferent navigation modes。on some websites, it is not uncommon to use search but dominant navigation gets a lot of attention. in other ways, the category has few clicks, but the search query is on the roof. sometimes breadcrumbs happen to be the most popular navigation choice on the entire website.

the australian postal service combines a large number of navigation modes on one page. they all have different uses and work well.
 
taking australia post as an example, various navigation needs to work together. global navigation bar, main navigation, breadcrumbs, sidebars, and tabs. users can jump between levels, they can easily move backwards with breadcrumbs, move forwards with horizontal navigation at the top, move sideways with sidebars, and switch contexts in various sections of the page using tabs.
we rarely go by onebrowse every section and rarely even notice all the navigation available on the website.for frequently visited websites such as news websites, we will usea very limited set of pagesand functions. in fact, we may not be able to remember what features and sections we clicked on, but we maymeetingremember their position in the interface.

once you land on the page, how will you understand where you are? here, bread crumbs help a lot. example: iceland postal service
 
when we log into a website we have never visited before, such as the national opera website, we first evaluate the breadth of options and features. this is usually done byscroll up and downpages implement—firstly slow, then faster—and familiar with the navigation menu. we click on the sidebar, toggle between tabs and open a large drop-down menu. we just wandered around, believing in the navigation signposts and our extremely unreliable premonition. we scan, recognize patterns and trust our intuition.
sometimes, if we can’t find what we’re after, our journey becomes a variety of pages and categoriescrazy exploration——it is often tense, chaotic, time-consuming and frustrating. if anything doesn't work as expected, we no longer use it because we no longer trust it. once we really don’t have any choice, we give up completely.

sometimes, a redesigned website can lead to a significant decline in traffic. it's not because something went wrong. instead: we meet users where they are and directly display the answers, so there is no need to visit the website.
however, when navigation and search are hardly used, it is not necessarily because of poor website design or construction. instead: the content can be so well organized that people actually go quicklyfound their needsomething – maybe even before visiting the website first, just browsing google’s search results. once they do, there isn't much reason to stay on the site.
although we often pay attentionexit rateandbounce rateand the time spent on the page, but these metrics rarely reveal the full story of what users do on the website. the fact that someone spends 4:30 minutes on a given page is not necessarily a good indicator. the fact that someone leaves in 30 seconds is not necessarily a bad thing.
to track users’ understanding and usage of navigation (and search), we need to track how successful the user is on the task at hand. you can think of it as being built and researched over a longer period of timedesign KPI 。it is worth collecting insights on user-centric metrics, such as:

• task completion rate，
• task completion time,
• the first time to share,
• customer support query,
• the ratio of negative comments,
• accuracy of submitting data

therefore, our mission is to pave the way for users to help them complete their tasks clearly, clearly and explicitly. this usually means supportthree navigation directions：forward navigation, back navigation and side navigation.

for websites with shallow navigation trees, breadcrumbs can be integrated into the title and title. that's what the craftsmanship council does.

forward navigation

we visit websites for a reason, and on some sites it can be as specific as checking a bank account or exploring large data sets. so once we finally get to the home page or dashboard, we move forward in the hierarchy of the website, from very broad pages to very specific pages to try to accomplish what we have already started.



combined with multiple navigation directions – navigating forward, backward and horizontally with main navigation, sidebar navigation, in-page navigation and breadcrumb navigation. all at once.
in terms of navigation, we move from the home page to a category, to subcategory, to further in-page navigation to find the specific features we need to click on in the end. if you’re lucky, we can skip the entire journey and get the feature earlier from the large drop-down menu or call-to-action. as designers, wethe closer the distance between intention and action，the better the user experience will be.
 

navigate backwards

however, we don't always have a specific task. normally, ourthe goal is multifaceted，we change our minds, ignore things, make spontaneous decisions, and get distracted by flashing notifications. therefore, our digital journeyrarely strictly linear, especially when the navigation on the website is a bit complicated.
in this case, we will eventually go backwards. in fact, we retreat to reposition ourselves, choose a route to explore, and then move in the other direction. then we dance the same dance again, again and again until we fulfilled our intentions. in many ways, the process is similar to writing an article like this. there is an overarching idea that can move the article forward, but there are also stumbling blocks and reconsideration that keeps you back.
on the internet, especially when we end up in a seeminglynowhere to be found、this happens when the content is outdated, there is no page that provides much-needed functionality, or when our search queries are too vague to provide accurate and relevant results.



deutsche bank's navigation does not highlight the user's current location.
a simple test we often use is to give users a URL， and ask them to explain what part of the website they are currently in, andfind similaror related parts. in the deutsche bank example above, this will be a little difficult because there is no highlight of the current page in the navigation.



by default, the current navigation level is not highlighted in the navigation bar.
it turns out that we are at the third level of navigation. generally" spare and anlegen” it should be active and highlighted on the page, but that is not the case. only when we open a hover menu can we discover what the current page is actually. at deutsche bank, it's a bit of a hassle to navigate backwards.

horizontal navigation

it seems that walking back and forth is not enough, and sometimes we still walk sideways—jumping up and down violently between levels, sections, pages and subcategories. this usually happens when we wantexplore similar topicsor related pages, or when exploring more information related to the current page in some way.
this also happens when we browse the available options but have not yet made up our minds. basically, we explore, browse and click, trying to create a comprehensive picture in front of us.



austrian post service supports horizontal navigation, with an additional information sidebar on the right.
as we do, we need signs that guide us in the right direction. in fact, considering how much movement occurs,navigation to usit will certainly help to do consistent and predictable tracking. in fact, this is exactly what the breadcrumbs provide.
at first glance, the bread crumbs seemonlyit helps with backward navigation, but we often use them to move backwards, find a better route and move forward again. in this way, they serve navigation in all directions and do a good job.
all the options listed above do providesense of direction，but they also require quite a bit of horizontal or vertical space to do this. throughout the user journey, they need to be visible to guide the user from one page to the next. if they suddenly disappear on one of the pages, the user is likely to get lost. adding healthy doses of noise and slightly cumbersome navigation to search results, we should not be surprised by the problem users are having when looking for what they are looking for.
by comparison,bread crumbssimple, compact, concentrated, and does the job well. instead of showing navigation at all levels, they indicate where the page is located, as well as quick access to all its parents, all the way to the home page. sometimes this is exactly what we need: no more and no less.

breadcrumb list

not every breadcrumb navigation appears and works in a similar way. we have seen some very different patterns and subtle details in which the breadcrumbs are designed and implemented differently.
as usual, here is when designing better bread crumbsa general list of some important guides to consider:

• breadcrumbs always need to be supplemented with the main navigation.
• bread crumbs are the bestglobal navigation。
• they may also appear above the main title.
• the separator shouldpoint to the right（exist RTL in the interface).
• the bread crumbs should bevisible, no scrolling required。
• avoid "disable" bread crumbs and turn all bread crumbs into links.
• if the breadcrumbs are above the title, you can delete the current page.
• otherwise, include the current page in the breadcrumbs for clarity.
• on mobile devices, use the accordion to display the full path if needed.
• the parent page of the current page should always be visible.
• for your users, horizontal bread crumbsit could be a very surprising and useful discovery.

the above is the "how to design a better breadcrumb navigation" shared by suyou network with everyone. thank you very much for reading this article patiently. we will provide you with more information on reference, use or learning and communication. we can also provide you with:enterprise website construction, website imitation, website copying, imitation site, foreign trade website construction, foreign trade website construction, company official website productionfor services, our company serves customers with the service concept of "integrity, professionalism, pragmatism and innovation". if you need cooperation, please scan the code to consult, and we will serve you sincerely.

TAG label: