Breadcrumbs review on E-commerce websites


Three types of breadcrumbs:

Path-based breadcrumbs indicate the steps, or path, a user has taken to arrive at the current page of a website. They are dynamic and they display the pages the user has visited before arriving on the current page.

Location-based breadcrumbs indicate to the user where the current page stands in the hierarchy of the website. They are typically used for navigation schemes that have multiple levels.

Attribute-based breadcrumbs display the attributes of a particular page.

In this study, 9 different e-commerce websites’ breadcrumb are reviewed .

Each website is reviewed through 2 different scenarios:

  • Scenario one: using navigation to click through pages
  • Scenario two: search for items on the website

Scenario one results:


Next — Combining location-based breadcrumb with path-based breadcrumb

John Lewis — Combining location-based breadcrumb with path-based breadcrumb

TopShop — Location-based breadcrumb

ASOS — Location-based breadcrumb

River Island — Location-based breadcrumb

New Look — Combining location-based breadcrumb with path-based breadcrumb

Debenhams — Combining location-based breadcrumb with attribute-based breadcrumb

Jcrew — No breadcrumb

House of Fraser — Combining location-based breadcrumb with path-based breadcrumb

Scenario two results


Next — Path-based breadcrumb

John Lewis — Combining location-based breadcrumb with path-based breadcrumb

TopShop — Path-based breadcrumb

ASOS — Path-based breadcrumb

River Island — Search results page using path-based breadcrumb;

the product detail page using location-based breadcrumb.

New Look — Combining location-based breadcrumb with path-based breadcrumb

Debenhams — Location-based breadcrumb

Jcrew — Path-based breadcrumb

House of Fraser — Combining location-based breadcrumb with path-based breadcrumb

Note: It was done in Feb, 2015.

Some good reference:

http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices/

http://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-examples/