14

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”

Improve this question
1
  • 9
    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
    Commented Oct 17, 2011 at 9:39

4 Answers 4

Reset to default
23

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

Improve this answer
3
  • 4
    Or simply replace the last element in the breadcrumb trail with a select box.
    – TRiG
    Commented Oct 17, 2011 at 11:40
  • according to the docs, multiple crumbs in that trail could be active links. Select boxes would be heavy, visually.
    – Erics
    Commented Oct 17, 2011 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!
    – jakc
    Commented Oct 18, 2011 at 10:05
31

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.

Improve this answer
4
  • 1
    +1 agree the issue here is conflating the ideas of a breadcrumb trail and a drop down navigation list
    – jk.
    Commented Oct 17, 2011 at 13:08
  • Totally agree with this. Using a breadcrumb and then making the page you are on clickable is confusing.
    – Sheff
    Commented Oct 17, 2011 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.
    – ehm
    Commented Oct 17, 2011 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.
    – jakc
    Commented Oct 17, 2011 at 22:53
4

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.

Improve this answer
1
  • 1
    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
    Commented Oct 17, 2011 at 14:05
0

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".

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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