Introduction: In the process of designing the website, the design at the beginning will encounter navigation design, such as breadcrumb navigation; however, for many designers, breadcrumb navigation is often directly copied, and rarely pay attention to or even ignore its existence. In today's diversified product design, what kind of website is suitable for navigation with breadcrumbs? This article will explore this, I hope it helps you.
Speaking of crumb navigation, I'll share with you a fairy tale: two children, in order not to get lost in the forest, sprinkled crumbs along the way as markers to help themselves return the same way.
The concept of crumb navigation (hereinafter uniformly expressed as "crumbs") comes from this fairy tale; crumb navigation functions like crumbs, helping users to see the path they are in the website, and can quickly find other websites and functions of the same type.
<h1 toutiao-origin="h2" > </h1>
In layman's terms, breadcrumbs are a way to navigate as an aid and complement, allowing users to know where they are on a website or app and easily returning to their original site.
Most of them look like this: a level 1 page > a level 2 page > a level 3 page or a level 1 page / a level 2 page / a level 3 page.
<h1 toutiao-origin="h2" >2. </h1>
In general, there are three types of breadcrumbs: location-based crumbs, attribute-based crumbs, and path-based crumbs.
<h2 toutiao-origin="h3" >1</h2>
This kind of breadcrumb navigation is one of the most common types of breadcrumb navigation, this type of breadcrumb navigation can be a good indication of the current page and the entire site hierarchy; it can be that the user knows where they are, and can find the page they want to reach faster, and this type of breadcrumb navigation is mainly used in websites with multi-level navigation (usually with two or more navigation).
<h2 toutiao-origin="h3" >2</h2>
Attribute-based breadcrumb navigation lists the categories of a particular page.
This kind of breadcrumb navigation can be a good way to point out other attributes or categories of the product in the current page, this breadcrumb navigation can help users understand the connection between products, through a variety of different attributes of the search results; this type of breadcrumbs often appear in websites with a large number of categories of products and services, such as our common e-commerce sites, online teaching services, etc., Amazon, Tencent Classroom is a typical example.
For a product, there is often more than one attribute, there are large attributes, there are small attributes; like this path of subordination, navigation through this breadcrumb can give users a more intuitive understanding.
<h2 toutiao-origin="h3" >3</h2>
This type of crumb navigation is the least common, and this crumb navigation and the above-mentioned fairy tale type would love to show links to web pages that visitors visited before arriving at the page.
There is no obvious hierarchical relationship between the breadcrumbs, and their function is somewhat similar to the forward and back buttons.
<h1 toutiao-origin="h2" > three, when is it suitable to use breadcrumbs? </h1>
Let's first look at the role of breadcrumbs, which are manifested in the following aspects:
The location of the current page is located on the surface, which is convenient for positioning and navigation, and assists users in finding paths;
It is convenient to jump to the previous page, tell the user "where are you", and reduce the number of operations;
In general, it complements the main navigation, occupies little screen space, is less noisy, and has a temporary nature.
So when is it appropriate to use breadcrumbs for navigation?
Let's look at the typical role of breadcrumbs: information localization and user path presentation.
Based on these two typical characteristics, breadcrumbs are well suited for use in the following two scenarios:
<h2 toutiao-origin="h3" >1</h2>
Since the breadcrumb navigation path is linear, the website content must be very clearly divided to ensure that it is independent and does not intersect.
Otherwise, the path of breadcrumb navigation is not unique, and the same classification may appear in different paths, confusing the user and reducing the user experience.
<h2 toutiao-origin="h3" >2</h2>
Breadcrumb navigation is suitable for deeper levels of websites, if there is only one level of classification, through the main navigation can play a role in rapid positioning; for example, the structure of the e-commerce website is the hierarchical structure, and it contains a hierarchical structure of good groups, and the pages inside contain a large number of product pages that are grouped by category.
The best way to determine if a website is suitable for breadcrumb navigation is to draw out the structure of your site or present it in the form of a chart, and then analyze whether using breadcrumb navigation will help users more easily switch to different types of pages. Have you learned?
<h1 toutiao-origin="h2" >4, what should I pay attention to when using breadcrumbs? </h1>
Above we have talked about the definition, type and situation of breadcrumbs and what is suitable for use, let's take a look at the points of attention when using breadcrumbs:
<h2 toutiao-origin="h3" >1. Don't replace top-level navigation with breadcrumb navigation</h2>
Breadcrumbs complement the main navigation in general and should not play a dominant role in the page. Breadcrumbs are visually smaller or less prominent than the main navigation, and the page footprint is quite small; in terms of color, it is mainly black and gray, it basically exists in the form of linked text, and usually only one line.
Usually appears horizontally at the top of the page, usually below the title/header or above the content area.
<h2 toutiao-origin="h3" >2. Do not add links to the navigation text of the current page</h2>
The last level of breadcrumb navigation can represent either the current page or the level up to the current page.
But if it is to represent the current page, remember not to add a link, because the user is already on this page, and then add a link to the current page, which is equivalent to two plates with a fish - redundant Ha.
<h2 toutiao-origin="h3" >3</h2>
Separators: The most concise separator in breadcrumb navigation is the greater than sign ">". The greater than sign is typically used for location-based breadcrumb navigation, representing hierarchical relationships between navigation items in the form of "parent class > subclasses".
In addition to the greater than sign, you can use the right arrow "→", the double greater than sign ">>" and the slash "/", which one to use depends on the type of navigation and visual effects.
<h1 toutiao-origin="h2" >5</h1>
The purpose of breadcrumb navigation is to make it easier for users to access your website.
In terms of user experience, it is an "important small role", which must be seen clearly by users and cannot be eye-catching; it seems simple, but it can optimize the user experience very well and increase user stickiness.
Author: WOWdesign, research on design value maximization, involving user experience, brand experience, space experience.
This article was originally published by @WOWdesign and everyone is a product manager. Reproduction without permission is prohibited.
The title image is from Unsplash and is based on the CC0 protocol