Cookiefail

Written by Joe Holdcroft

I was digging around in my sandbox area recently and came across some work Jamie and I did on cookietrails (or breadcrumbs as they are also referred to) a few months ago.

We decided we were kinda unhappy with the whole "cookietrail" thing... because, well, they're not really cookietrails, nor are they breadcrumbs. They are more like signposts... a map of "you are here", rather than "how did I get here" - which is what a cookietrail is really for.

With this in mind, the traditional design of pointing the arrows to the right (towards your current page) makes no sense at all. Really, the arrows should be pointing to the parent page, meaning "I live in here, and my parent page lives in here, and that page lives in here, etc".

We also decided that the "You are here" label that is occasionally used is almost always in the wrong place (at the start). Surely it should be pointing to your current page, where you actually are.

Some early visuals for the concept outlined in this blog post

Wow, cookietrails are flawed.

So then I got thinking about making them more useful by combining them with submenus. The idea being that you could jump straight to a sibling page of an ancestor in one click. For example, you're in "Products < Accessories < Gold Necklace", and you can jump to a sibling of the "Accessories" category, such as "Jumpers", in one click. It's like having a submenu for each page's ancestor on every page - awesome!


This is what I came up with (only tested in Webkit) - feel free to play around with the concept, I'd love to see what other people come up with using the same idea. If you've got something to show, post it in the comments below.

Comments

  • Will Morgan -

    Common sense! Love it. (Also works in Firefox.)

  • julian -

    I think it's a great idea.
    However I did get a little confused initially, mainly I think because I expected it to act like the main navigation - e.g. when I hovered over Accessories I kinda expected to see it's child nodes, not it's siblings.
    I still think it's a great idea and something no doubt i'll use in the future.

  • Joe Holdcroft -

    Julian,

    I thought that was a weak point too - I experimented with some designs where the item in the menu is in the list of siblings in context, so it's clearer they're siblings. I may develop that further and post it when it's a little clearer what's going on!

    Let me know if you come up with anything or use the idea on a project :)

  • Adam Perfect -

    This is something that I think the Windows 7 Explorer (and Vista too I think) gets right - having twist-down arrows to quickly jump to sibling folders at any level in your current path.

    It's one of the things I miss most in OS X and something that could be useful in big websites too, similar to your suggestion.

  • Joe Holdcroft -

    Adam,

    Interesting. I haven't really used Windows Vista/7 explorer, but you can kind of do a similar thing in Finder on OS X in the 'column' view which is real handy. Yeah you're right it's similar :)

  • James Seymour-Lock -

    It seemed a little confusing to begin with but makes sense once you realise what its doing.

    Although doesn't this contradict somewhat against the "Drop-down menus; no thanks!" blog post, despite it not being for main navigation.

    I can see it being really useful if your site doesn't use drop down navigation in its main menu. if your site already has a drop down menu then it would be pointless.

  • Jamie Freeman -

    Good point James! It's just an experiment at this stage, and Joe was pushing the contextualising as far as possible. In my defence, my visual designs (up there in the middle of the post) don't include such madness ;-)

  • James Seymour-Lock -

    I really like the "you are here" part, normally breadcrumbs are boring links and a lot of users don't really notice them or understand what its for and i think that having a bright label like in the post would really help with usability, its not something i have considered before and have never really given much input into the breadcrumbs.

Any questions? Please get in touch…

We'd love to talk to you about your web project, e-commerce, EPOS system or bespoke web application.

Message Digital Design Ltd

+44 (0)1273 772247

© Message Digital Design Ltd. 2017