Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

We have a web application that allows users to query a database.
The results are returned in a breadcrumb style interface.

We brought this change in at a new version, and assumed it was self-intuitive enough for our users to understand (we provided some docco on how to use it as well).

We have had some feedback from our users that they do not know where to click on the new interface.

Other users seem to be ok, but we take any critical feedback seriously, and not too sure if we should change anything here or not.

We use the old school approach of symbolising the clickable element in the breadcrumb with the blue & underlined approach:

enter image description here

When you click the link, you get this:

enter image description here

To me and the devs, this is obvious. The correct answer could be that you also agree, or perhaps you can suggest a better more self intuitive approach to make it look like its clickable.

One user did make a valid comment:
"The new breadcrumb format is actually more like a trail, or a “where have I been” rather than “what is available”

share|improve this question
Blue and underlined = clickable. That is a long time standard and that the link is clickable would therefore be clear to 99.9% of your users. What may not be clear for your users is that they need to click that particular link to go to the next logical step in your app. In other words: the clickability of the link isn't the problem, the problem is that you are "hiding" an action under a link where your users may expect a button or some such. Links navigate, buttons perform actions. –  Marjan Venema Oct 17 '11 at 9:39
add comment

4 Answers

up vote 23 down vote accepted

The problem I see here is that you're using a styling which is originally and frequently used to signify a link that will take you somewhere else, where instead what happens is that a drop down of options appears.

I would use a ▼ marker at the end of the label to indicate a drop-down menu behaviour. That's a unicode character 'black down-pointing triangle' (U+25BC), or you can just use an image if you prefer.

By the way, do you only provide the drop down functionality on the last crumb? Here's an example where they provide drop-down functionality on each level of the hierarchy/crumb trail, although they don't call it out at all.

That example also suggests another change I would recommend in your design. Currently, the drop-down is offset from the current value, which implies subordination, when what you are really offering is a list of equal siblings. Move the drop-down to the left to align with the current value. Also, consider putting a ✓ check mark (Unicode U+2713) against the currently selected value (ADL_Property_LInfo in your example).

All up, it could look more like this: revised breadcrumb dropdown

share|improve this answer
Or simply replace the last element in the breadcrumb trail with a select box. –  TRiG Oct 17 '11 at 11:40
according to the docs, multiple crumbs in that trail could be active links. Select boxes would be heavy, visually. –  Erics Oct 17 '11 at 11:53
This one is the best answer for me. We will be likely using the drop down marker symbol along with the tick box symbol. Thanks loads to all! –  Simon Oct 18 '11 at 10:05
add comment

Your problem isn't how to mark the link. The problem is that the link appears to be something other than you intended.

A breadcrumb trail shows you how you got where you are, and ideally providing links back to where you've been. It is not a navigation element to show you new places that you can go to. Looking at that screen, I would assume that the current page that I am on is "ADL Property LInfo". There would then not be any sense in clicking the link to the page that I am currently on.

It appears that you really want to show some alternate views of the page that you're on. In which case you should provide a label saying which view it is and a button that says (for example) "Change view" and which opens a menu to change the view.

share|improve this answer
+1 agree the issue here is conflating the ideas of a breadcrumb trail and a drop down navigation list –  jk. Oct 17 '11 at 13:08
Totally agree with this. Using a breadcrumb and then making the page you are on clickable is confusing. –  Sheff Oct 17 '11 at 13:08
I agree with this answer, but having a drop down navigation list when clicking on one of the parents could be a nice "hidden feature", because it allows users to go to siblings of a parent (if that is possible) much quicker. –  Eikern Oct 17 '11 at 18:56
Thanks. We were hoping not to have to provide 2 different views of the data and wanted to combine the best of both worlds into one. Not sure if this is possible or not. The example in Erics post is a good one. –  Simon Oct 17 '11 at 22:53
add comment

If you're using the breadcrumb approach I would expect the choice you offer in the popup to be available when I click the parent breadcrumb.

It's also not clear that the ancestors are clickable in any way. I would suggest using some sort of button instead of the label you currently use; or at least turn it into a button on-hover.

Some users might get that a blue underlined text means a link, but none would guess it acts as a button. A link usually takes you somewhere else (maybe outside the app?), and here this isn't the case.

So my suggestion is to buttonize these breadcrumbs with some sort of flat style button.

share|improve this answer
Is there a 'standard' for this style of interface? Windows 7 has "dropdown shows children" [as you recommend]; Erics' link, and the OP, has "dropdown shows siblings". I know I would expect "dropdown shows siblings" if this were composed of [perhaps even a fixed number] of ordinary combo boxes (by analogy to controls like OSX's file picker which does the same with full-height list boxes) –  Random832 Oct 17 '11 at 14:05
add comment

I agree with the previous responses that this is a well hidden link that contains options. The parents (Results and Adelaide.PROPERTY) both have trailing parentesis with containing a number. I assume those are the number of options on that level in the tree. If you added such a parentesis with the number of available options combined with the earlier suggested arrow or rather change it to a standard html-drop down.

You could also make a bigger change and make it more visible that it is a complete tree and not just a "trail".

share|improve this answer
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.