Web design has come a long way. Gone are the days when a collection of a few static pages would complete a website. As of now it is about the ever-growing model of content creation that exponentially increases the depth of a website. A simple website can become the go-to hub of information in only a few months time. This is when the complexity of that website increases and it becomes necessary for the webmaster to handle the same.
Reducing complexity is an art and a “breadcrumb” is one tool that designers love to use. Breadcrumbs act as the navigational device for a website visitor. When used smartly, breadcrumbs make website navigation effortless. This article will enlighten you about the basics of breadcrumbs and help you understand the importance of breadcrumbs in your upcoming web design.
Why the word breadcrumb?It has something to do with the tale of two siblings, Hansel and Gretel, who were tricked into a house made of cake and candy. They were threatened by the owner of that dream home – a witch! In that story, the kids drop breadcrumbs to create a trail from their home which they use to escape the witch and get home. Just like the real breadcrumbs that helped those kids find their way out, breadcrumbs in an application helps users trace their path back to their starting point.
If you still don’t understand what breadcrumbs are then see the image below. The navigational links that are circled are the breadcrumbs that Google uses for the navigational ease of its readers.
Why breadcrumbs?That, I agree, is a smart question! When your client (or readers) do not ask for breadcrumb navigation why should you use it?
Breadcrumbs are performers nibbling in the corner of your design. Removing breadcrumbs might leave your design unchanged but they do matter when used smartly. Please understand that it isn’t the client who will tell you if they want breadcrumbs or not. It is your genius that should decide if a particular design requires breadcrumb or not. They will make a design more intuitive for users.
Should breadcrumbs “blindly” follow the fairytale model of Hansel and Gretel?That is one question that people ask me often. In our (aforementioned story) the two kids, Hansel and Gretel, walk through the mystifying forest, dropping breadcrumbs with a hope of finding their way out.
It is often an invitation to confusion when you take metaphors too far especially in the case of user interface design. If breadcrumbs were to follow the fairytale model of Hansel and Gretel without any modifications per se then it might just add to the complexity of any app design.
Let me take the case of a regular 1WD reader:
Starts from Home Page.Clicks on the category “WordPress” from menu.Clicks on the sub-category “Showcase” from the drop down menu.Suddenly changes mind and navigates to “Freebies” category.Finally, checks the “About Us” page out of curiosity.Can you imagine the breadcrumb navigation that this will result in if the fairytale was being literally followed? Here is a quick glance at what it would look like:
Will you want the breadcrumb navigation like above? Dainis, founder of 1WD, would never want any 1WD reader to believe that Freebies is a sub-part of Showcase when it actually isn’t. Such breadcrumbs (ideally called “Dynamic Breadcrumbs” in Internet lingo) often end up confusing the user. Remember, we are trying to use breadcrumbs to help the user discover the correct path to home and not the path that they have followed.
Pros of using breadcrumbsAs already mentioned before, removing breadcrumbs from your design might not bring many visual changes to your design but they surely add up to the much wanted user experience. Here are a few advantages of using breadcrumbs:
User Experience: That is the major reason why a designer might want to use breadcrumbs in an application. They simply add up to the overall user experience of any design. You don’t have to think about the navigational structure in a design when you have breadcrumbs helping you with the same.Reduce in useless page views: Users usually use the browser back button in order to track back their paths. In such cases they hardly stay on a page that comes by while clicking the back button because their goal is some other page. Breadcrumbs reduce such views!Increases average time on website: Once a user visits an internal page of a website directly using a search engine then either he has the choice of closing the window after his job is done or navigating to other related pages of the same website. This is when breadcrumbs help the user navigate to related stuff on that website. Henceforth, the average time that the visitor spends on the website multiplies.Small in size: Usually breadcrumbs are pretty small in size and nifty to use – unless you do something very unusual with them!Cons of using breadcrumbsEverything has its dark side and breadcrumbs aren’t any different!
Dynamic breadcrumbs (explained above) add to the navigational complexity of an application.Using breadcrumbs where they aren’t required simply adds to confusion. Consider the example of 1stWebDesigner itself. This website has two menus in its header that are more than enough to help users navigate through the complete website structure. We really don’t need breadcrumbs here (hence you don’t see them!)Using breadcrumbs as the only source of navigation can lead to information hiding. Breadcrumbs help the users navigate to home page. It can never help the user navigate through every possible content present in the website. You got to have menus for that!NOTE: It is solely the choice of a designer when it comes to breadcrumbs navigation. Think first, then make your decision.
SEO and breadcrumbsI ain’t gonna skip this! You talk of adding text (in any form) to a web page and a webmaster (like me) will start figuring out the keywords that can be used to optimize the same. Well, we are webmasters and we want our websites to be featured at the top page of Google!
Breadcrumbs can be a useful way to leave keywords on a page. This enhances keyword rich internal linking which as a result might help in SERP. Before you go the extra mile and optimize your breadcrumbs with keywords, I want you to go through below points:
First think about usability and later on, if possible, use keywords in your breadcrumbs. Never miss out on the main purpose of your breadcrumbs – user satisfaction.Over stuffing of keywords could result into disastrous results. Be warned!The ShowcaseEnough said already! Use breadcrumbs if you feel like and if you require inspirations then we do have few exciting ones following up:
1. Apple
2. Booreiland
3. Bubble Stick
4. Cool Spotters
5. Delicious
6. Devlounge
7. Girls Scouts
8. Lonely Planet
9. Overstock
10. Unique Martique
Reducing complexity is an art and a “breadcrumb” is one tool that designers love to use. Breadcrumbs act as the navigational device for a website visitor. When used smartly, breadcrumbs make website navigation effortless. This article will enlighten you about the basics of breadcrumbs and help you understand the importance of breadcrumbs in your upcoming web design.
Why the word breadcrumb?It has something to do with the tale of two siblings, Hansel and Gretel, who were tricked into a house made of cake and candy. They were threatened by the owner of that dream home – a witch! In that story, the kids drop breadcrumbs to create a trail from their home which they use to escape the witch and get home. Just like the real breadcrumbs that helped those kids find their way out, breadcrumbs in an application helps users trace their path back to their starting point.
If you still don’t understand what breadcrumbs are then see the image below. The navigational links that are circled are the breadcrumbs that Google uses for the navigational ease of its readers.
Why breadcrumbs?That, I agree, is a smart question! When your client (or readers) do not ask for breadcrumb navigation why should you use it?
Breadcrumbs are performers nibbling in the corner of your design. Removing breadcrumbs might leave your design unchanged but they do matter when used smartly. Please understand that it isn’t the client who will tell you if they want breadcrumbs or not. It is your genius that should decide if a particular design requires breadcrumb or not. They will make a design more intuitive for users.
Should breadcrumbs “blindly” follow the fairytale model of Hansel and Gretel?That is one question that people ask me often. In our (aforementioned story) the two kids, Hansel and Gretel, walk through the mystifying forest, dropping breadcrumbs with a hope of finding their way out.
It is often an invitation to confusion when you take metaphors too far especially in the case of user interface design. If breadcrumbs were to follow the fairytale model of Hansel and Gretel without any modifications per se then it might just add to the complexity of any app design.
Let me take the case of a regular 1WD reader:
Starts from Home Page.Clicks on the category “WordPress” from menu.Clicks on the sub-category “Showcase” from the drop down menu.Suddenly changes mind and navigates to “Freebies” category.Finally, checks the “About Us” page out of curiosity.Can you imagine the breadcrumb navigation that this will result in if the fairytale was being literally followed? Here is a quick glance at what it would look like:
Will you want the breadcrumb navigation like above? Dainis, founder of 1WD, would never want any 1WD reader to believe that Freebies is a sub-part of Showcase when it actually isn’t. Such breadcrumbs (ideally called “Dynamic Breadcrumbs” in Internet lingo) often end up confusing the user. Remember, we are trying to use breadcrumbs to help the user discover the correct path to home and not the path that they have followed.
Pros of using breadcrumbsAs already mentioned before, removing breadcrumbs from your design might not bring many visual changes to your design but they surely add up to the much wanted user experience. Here are a few advantages of using breadcrumbs:
User Experience: That is the major reason why a designer might want to use breadcrumbs in an application. They simply add up to the overall user experience of any design. You don’t have to think about the navigational structure in a design when you have breadcrumbs helping you with the same.Reduce in useless page views: Users usually use the browser back button in order to track back their paths. In such cases they hardly stay on a page that comes by while clicking the back button because their goal is some other page. Breadcrumbs reduce such views!Increases average time on website: Once a user visits an internal page of a website directly using a search engine then either he has the choice of closing the window after his job is done or navigating to other related pages of the same website. This is when breadcrumbs help the user navigate to related stuff on that website. Henceforth, the average time that the visitor spends on the website multiplies.Small in size: Usually breadcrumbs are pretty small in size and nifty to use – unless you do something very unusual with them!Cons of using breadcrumbsEverything has its dark side and breadcrumbs aren’t any different!
Dynamic breadcrumbs (explained above) add to the navigational complexity of an application.Using breadcrumbs where they aren’t required simply adds to confusion. Consider the example of 1stWebDesigner itself. This website has two menus in its header that are more than enough to help users navigate through the complete website structure. We really don’t need breadcrumbs here (hence you don’t see them!)Using breadcrumbs as the only source of navigation can lead to information hiding. Breadcrumbs help the users navigate to home page. It can never help the user navigate through every possible content present in the website. You got to have menus for that!NOTE: It is solely the choice of a designer when it comes to breadcrumbs navigation. Think first, then make your decision.
SEO and breadcrumbsI ain’t gonna skip this! You talk of adding text (in any form) to a web page and a webmaster (like me) will start figuring out the keywords that can be used to optimize the same. Well, we are webmasters and we want our websites to be featured at the top page of Google!
Breadcrumbs can be a useful way to leave keywords on a page. This enhances keyword rich internal linking which as a result might help in SERP. Before you go the extra mile and optimize your breadcrumbs with keywords, I want you to go through below points:
First think about usability and later on, if possible, use keywords in your breadcrumbs. Never miss out on the main purpose of your breadcrumbs – user satisfaction.Over stuffing of keywords could result into disastrous results. Be warned!The ShowcaseEnough said already! Use breadcrumbs if you feel like and if you require inspirations then we do have few exciting ones following up:
1. Apple
2. Booreiland
3. Bubble Stick
4. Cool Spotters
5. Delicious
6. Devlounge
7. Girls Scouts
8. Lonely Planet
9. Overstock
10. Unique Martique
No comments:
Post a Comment