Posted: 01 Nov 2009 03:17 AM PST
Breadcrumb navigation is often overlooked in the design and development process. Some people may see it as unnecessary while others may feel it is too big of a hassle for what its worth. Fact of the matter is, breadcrumb navigation will greatly increase the usability of a website. Breadcrumbs give users an alternative method of navigation, allow them to see where they stand in the hierarchy of a website, and will reduce the number of steps needed to navigate to a higher-level within a website.
Outlined here are the different types of breadcrumb navigation being used today, why they are important, and how they should best be implemented online. Also included here for your reference are over 30 examples of how breadcrumbs are being used online today. Remember, while it is likely that breadcrumb navigation will not make or break a website it will provide an added benefit to your users by increasing the overall usability and functionality of your website.
Path-based breadcrumbs indicate the steps, or path, a user has taken to arrive at the current page of a website. Furthermore, users will see links to pages they have previously visited to reach the current page. Out of the three types of breadcrumb navigation, Path-based breadcrumb navigation is least popular online. Reason being, Path-based breadcrumb navigation provides the similar functionality to the “Forward” and “Back” buttons on a browser. For most websites Location-based and Attribute-based breadcrumb navigation offers better functionality.
Location-based breadcrumbs indicate to the user where the current page stands in the hierarchy of the website. This type of breadcrumb navigation is most commonly seen on websites with more than two levels of depth or content. Upon moving further into a website users are provide with links to pages, or categories, that act as a “parent” or a level up from the page they are currently viewing. For example, a user may be on the “Speak” page however the “What we do” page is a parent of the “Speak” page while the “Home” page is a parent of the “What we do” page.
Attribute-based breadcrumbs indicate to the user the attributes or categories ascribed to the current page within a website. Often seen on e-commerce websites, products may not only fall under a category but under certain attributes as well. For example, a vehicle may be categorized as an SUV then have the attributes of being the color black and released in the year 2010.
Why Use Breadcrumbs?
Breadcrumb Best Practices
Great Examples of Breadcrumbs
About Author – Shay Howe is a professional web and user interface designer currently living in Chicago, IL. He writes about web design in his own blog over at letscounthedays and would love to hear from you on Twitter. Please feel free tell him hello!
|You are subscribed to email updates from hongkiat.com |
To stop receiving these emails, you may unsubscribe now.
|Email delivery powered by Google|
|Google Inc., 20 West Kinzie, Chicago IL USA 60610|