User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have a header section that look like this , just below the main header. The breadcrumb is on the left side and they are clickable. It doesn't seem obvious. Initially it was in a shade of blue which made it look clickable , but that was affecting the UI Design and we decided to change it to shade of black. Which is the best way to make it look clickable ?
I do not wish to change the colour or use underlines. Is there any possible way to do this ?
From what I've seen, users generally expect links on 'header sections', and are likely to try and click to see what they do if it is something in which they are interested.
Breadcrumbs give a sense of hierarchy and since they change as a user navigates, they give the user a sense of where they have been. Implying that they could get back to a higher level some how, possibly by clicking.
Underlines and color changes are nice visual queues to help the user, and do make it more obvious that there is some interaction that can be done, but given that there are so many different styles of apps and websites out there, it seems it is becoming less common to have underlines on navigation.
If you are hard set on the design, I suggest leaving the bread crumb navigation as you have it. The very fact that it is where navigation is expected, on the 'header section', and that it looks like a breadcrumb should be enough to promote clicking.
Another thought, if you are targeting mouse, then a subtle hover state on each breadcrumb link would give some additional assurance to the user that they can click on the link and go somewhere.
There are some common conventions other than the use of colours and/or underline to make breadcrumbs look clickable, but these are generally secondary to the use of colours (e.g. blue to make it seem like a link) and underlining.
One answer already mentioned the positioning of the breadcrumbs at the top of the process, and the other is the font size of the breadcrumbs, which tend to be smaller than the body text. I would also suggest you can try providing a hover-over effect so there is some perceived interaction (e.g. change of colour or underline), but if you still don't want to include this as a secondary interaction then even changing the cursor shape, size of the font or change in background colour is better than no change if you want to encourage people to click it.
