2

I've seen two implementations of a "selected" schema. One uses the convention that blue is clickable, and therefor are using the selected one in black, and the clickable one in blue.

enter image description here

The second one is using blue as the selected one, and the black ones are clickable.
enter image description here

Personally I understand better the first option, but I can't help but wonder if the second one might be better in specific cases. For example maybe if there are more than 2 options? What is the common practice for this?

1
  • A problem with changing to bold and back is that bold text is wider, so the transition causes other elements to shift (to move slightly). That shift, or movement, draws attention to itself—*all of itself*, not just the element that became bold. And I'd suggest that the newly bolded text element is where the attention should be, not on the newly unbolded text elements. That's why I avoid bolding and unbolding.
    – JeromeR
    Aug 22, 2015 at 21:56

3 Answers 3

2

Your UI designer will make a colour scheme, which usually defines the colour of a clickable item. It might be contextual, and it would probably need a hover state colour as well.

But as Tohster has said, relying on colour alone is an accessibility problem. There needs to be an additional cue, and you have to leave it up to your UI designer to make it for you.

The visual side of interface depends heavily on how cohesive various elements on the design are. So you'd need to give this freedom to your designers while laying down the accessibility guidelines for them.

1

Some good answers above but some could be problematic. See the following:

Things to avoid and best practice:

Firstly, in your examples the first option is better - blue is well known as an actionable link (just look around this stackexchange page!) so having the page you're on as blue wouldn't be ideal.

However, putting the current page link in Bold (or any different font weight) is not advisable. It's okay in some instances but as this makes the strings of text longer or shorter it can lead to layouts breaking in some instance (particularly when using larger font sizes).

It's best to choose a colour for links that is used universally across your project (it doesn't have to be blue but it should be clearly different to the main text for those with colour blindness) and stay consistent - with the exception of the primary navigation that may be have a more custom style. If you want to go the extra mile and really tick the usability box you should underline links - or at least underline 'on hover' which will help but not on touchscreen.

I think in your example you're most interested in navigation breadcrumbs and tabs but, as mentioned, you may want to consider using buttons in other instances (in your example I think not). Buttons are best for primary actions e.g. on this page I can click 'Post an Answer' button because that is the primary action after I finish typing.

0

None of the above

  • Colored fonts are used widely and varyingly in interfaces nowadays so it's not a good idea to rely only on color to differentiate clickable elements.
    • This is especially true for navigation elements (versus, for example, inline links)
  • Color-only approaches present accessibility problems for the color-blind.

Alternatives

There are too many alternatives to enumerate here, but as examples:

  • Convert links to buttons or tab controls, or underline them
  • Use capitalization and color to denote flat buttons (like this)
  • Use shaded backgrounds or font weight to denote buttons which are selected (vs unselected)
  • Use carets or or relative font size to denote clickable text...this example shows both: enter image description here

... You get the point. There are many other ways to denote clickable and selected elements, but it's best practice nowadays to avoid color-only schemes.

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.