Monday, August 21, 2017

website design - Better approach to blue/underlined for link?


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”



Answer



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



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...