4

Current Design

Background In short, the above 'Object list' increases in content when the different buttons at the top (A, B, C, D & E) are selected. These buttons look like tabs, but since several can be selected simultaneously (adding their respective content to the list) they behave more like toggle buttons. In the above image, buttons A & D currently generate the content in the 'Object list'.

Problem Users understand the functionality of the buttons, but report that they don't always know which buttons are (in)active. As a result they don't always understand which buttons generate the content in the 'Object list' below.

Question Since users had no problems with the actual functionality of the buttons I'm thinking of only improving the display state by use of colour, so (see image below):

  • Active buttons are now lighter and inactive buttons are darker
    • As a result the area connected below the active buttons is now lighter as well
  • Active buttons have their letters in bold in their respective colour to illustrate a selected state

Am I heading in the right direction here by just using colours?

New Design

  • Problem here is not only about confusion with tab. I see higher cognitive load in user's mind to find out what is been selected. – Jivan Jun 6 '16 at 5:16
4

I think you have the answer yourself, when you say

These buttons look like tabs

Simply make them look as what they are, BUTTONS, and then you can use regular button states to communicate statuses such as active, selected, disabled or neutral. Using the UI for other elements than those you actually use will always bring problems, going from dfficulties in affordance understanding to implementation issues (such as those you have now).

In short: buttons are buttons. Use them as expected and problem solved.

  • I like all answers given, but I was indeed quite torn about the tabs vs buttons aspect of the problem. I'm now convinced I should treat them for what they really are, i.e. buttons. =) – Rorschach Jun 6 '16 at 9:05
3

Stepping back a bit, I think your problem might be that of mixing UI metaphors.

In desktop applications, tabs are used to select one-of-many pages.

Your UI offers freely composable options, which are usually associated with checkboxes. So adding a checkbox to the label would make things closer to the usual some-of-many selections in other applications.

Adding a line of text between the tabs and the list, would be another option that would even play nice with screen readers.

2

Avoid using solely color to communicate information

One the principles of web accessibility is "Ensure color is not the sole means of communicating information."

  • While two colors may look very different to a designer's eye, someone with color vision deficiency may perceive them as nearly the same - check your colors against each other with a Contrast Checker
  • Users accessing your page with a screen reader will not get those visual cues. Screen readers don't report the color of the page or its elements. Check out the MDN Documentation on ARIA tagging

Using ARIA tags on the tabs will help with accessibility issues. And consider adding an "active icon" to to the active tab.

Best Practices for Accessibility: Color

Checking Color Reliance

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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