When we design a brand' s website, we have to do it thinking about the users and customers who are going to use it. Therefore, the simpler and more intuitive the navigation is, the more time they will spend on our page and the more likely they are to return .
do you remember the story of Hansel and Gretel? It is true that the two of them didn't succeed very well in scattering breadcrumbs so that they could follow their way back home; they didn't expect that some birds were going to eat them. However, Hansel's idea of scattering breadcrumbs along the way has served to give a name to this technique that facilitates the user experience within a website, a place where, luckily, there are no birds that are going to end up with them.
Breadcrumbs, what are they?
As we said, the design of a website has to be focused on the wellbeing of the user. After all, our objective is to offer them an experience that they are willing to repeat, so if they do not find what they are looking for, or if they get lost among the information available, we will have failed.
One of the ways to make this navigability easier for users is to show them the way. Knowing where you are on a website is essential, for example, in case you want to retrace your steps. Beyond the structure of the website itself and the different pages that make it up, it is important to bear in mind that the user may not remember exactly what steps they have taken to get to where they are. But we can find a solution.
Breadcrumbs are a secondary navigation within the website itself, offering users the option of retracing their steps, either to the home page or to another level of the website, thanks to the incorporation of internal links .
This type of navigation is built in a hierarchical way based on the structure of the website and shows the user the route they have taken from the home page to the page they are on. It is usually located at the top of the website and, although it should be easily recognisable, it should not take up too much space or overly influence the design of the website.
As we have already mentioned, this tool is named after the well-known fairy tale by the Brothers Grimm, "Hansel and Gretel". In this story, the young protagonists use breadcrumbs to follow them back home so as not to get lost. That is what its application in the virtual world consists of, to make it easier for the user to find their way back.
As we have said, the user will normally find access to this tool at the top left-hand side of the page they are on, although this is not the norm. Breadcrumbs are made up of links that allow us to go back in the navigation or move to generic categories within the contents. By clicking on the different elements that make them up, the user will retrace their steps and can go back to any point they have travelled from the main page to their current point.
Breadcrumbs establish the structural navigation route that leads to the page we are on, showing us the levels that make up the hierarchy of the web or the path that has been taken to reach a particular point. For example, imagine you are on a clothing shop website. The breadcrumbs could show the following: "Home page > women's fashion > accessories > handbags". The user can click on any of the pages that have been passed until reaching the "handbags" category, having the possibility of retracing their steps at any time.
On the other hand, the implementation of breadcrumbs on your website could benefit your search engine positioning strategy . A user-friendly website will make the user stay longer on it and explore its different parts. This will reduce the bounce rate and increase the conversion rate. In addition, for some time now, Google has been showing part of the navigation in breadcrumbs in the url line.
Types of breadcrumbs
There are different types of breadcrumbs, all of them have the same function but choosing one or the other will depend on the specific needs of the users and the type of website we are dealing with.
- Breadcrumbs based on the website structure
Indicated for websites whose elements are in a single place, so it does not depend on the path that the user has followed to get there, since there is only one possible path .
As there is only one possible way to get to the point where the user is, this structure simply informs about the place where we are in the web.
- Breadcrumbs based on the user journey
This type of breadcrumb will be used in those websites in which there is no static structure, i.e. in which there are different paths to reach the same places, thus showing the specific path followed by the user to get to the point where he/she is.
- Breadcrumbs based on website characteristics
As explained by Ryte wiki, it is used on e-commerce websites, where each product can have different tags or attributes. These tags or attributes can themselves be part of breadcrumbs. The breadcrumb allows the user to see which category the page they are on belongs to and what its attribute is. The implementation of this type is quite complex, as it has to be adapted to the website's features and possibly the database.
Use breadcrumbs correctly
Here are some tips on how to implement this element correctly on your website.
> Make the breadcrumb trail start from the homepage, so that the user can understand the structure of the page without any gaps in the page structure.
> Place the breadcrumbs at the top left of the page, so that they are visible to the user and do not obstruct their navigation or prevent them from viewing other elements.
> Make sure your website has a sufficiently elaborate structure. Search engines value this type of structure and will rank it higher than a flat website or one with few pages.
> If you have started to show a user's trail, make sure you show their path all the way to the end, so that they have the opportunity to retrace their steps at any point.
Now you know what breadcrumbs are and what advantages they can bring to your website, you just have to take the final step and start using them.
