[3.3.x] Styles Support & Discussion • Re: Breadcrumb

Further to this, and regarding responsiveness...
The other night I happened to read an article by the Baymard Institute, who do a lot of research on UX.
The article is this one: 6 Important Aspects of Well-Performing Mobile Product Page Breadcrumbs

Note that this is research on what normal, average users find easy and intuitive to use. IOW, it's not all about what code junkies think is cool. It's about the poor sods who will have to use the stuff we think is cool. The conclusion regarding how to display breadcrumbs comes down to this...

1/ Do not remove any links, and do not truncate links via ellipsis.
2/ Do not try to wrap the breadcrumbs to multiple lines on mobile.
2/ Use overflow-x (scroll or auto) so the breadcrumbs are swipeable on mobile.

How to Implement Long Breadcrumb Paths

Testing revealed one design pattern to explore if breadcrumb length on the product details page is still an issue after the hierarchy and category labels have been reviewed and tweaked where necessary, and the homepage and product page layers have been excluded — namely, making breadcrumbs swipeable.

Implementing breadcrumb links as a horizontally swipeable element saves space while still allowing users access to the complete, or near-complete, hierarchy via a standard mobile gesture, to which testing revealed most users are naturally predisposed...

...Sites with swipeable breadcrumbs were among those that performed particularly well during testing.

The advantages of doing it this way are:
1/ Normal people will find it easy and useful.
2/ It requires a lot less CSS than trying to get tricky.
3/ It still looks as good as any other presentation.

So, from now on, this is how I am going to do them.

And the article is only over 3 years old, so really we should all have known this stuff by now.

Statistics: Posted by Gumboots — Thu May 30, 2024 9:54 pm

---