Discussion on the appearance of icon states

• May 17, 2013 - 00:38

This is a span of this thread on icon colours , focusing on the specific issue of distinguishing the various icon states. Please use the other threads to discuss the rest of the design.

In the current redesign of MuseScore UI, there have been some tests and trials about giving different icon states (disabled, enabled, activated) a visible difference.

1) By colours: in a short-lived phase (documented by the screen shot in this post ) the attempt was to distinguish active icons by colours.

2) By luminance: the currently implemented way is to use luminance; from the original, full luminance, icon, the normal (enabled) state is darkened, the disabled state is darkened more and the activated is at full light.
_ _ _ _ _ _ _ _ _ _

1) was quickly abandoned, perhaps the choice of colour was not satisfactory. In fact, using blue, which is the hue to which the hunan eye is less sensible, does not give enough difference of contrast. I tried by myself other solutions (green, orange) but none was really convincing.

In fact, any colour will have less luminance than full white and therefore will have less contrast with the background, making the coloured icon less visible than the white one, not more. Using green or red (or some orange-ish combination of them), to which the human eye is more sensible, may attenuate this but will not change the matter.
_ _ _ _ _ _ _ _ _ _

2) is based on darkening (to some degree) the normal state; this is also not really satisfactory. My first test is usually the following:

1) load a score, possibly with a passage where several note values alternate,
2) select a note in that passage,
3) with the left or right arrows, move the selection to the other notes: is the currently 'active' note value clearly visible in the toolbar?

To me, it is not.

I) Not using the full light for the normal state compromizes the readability of the shapes in most occasions; as already stated, the human brain pattern recognition ability is based above all on contrast; any reduction of contrast affects this ability. The result is that the user will spend more time on 'reading' the icons or in looking for the right one.

II) The current difference between 'normal' and 'active' is barely noticeable; as 'active' cannot be increased (already at max), the 'normal' level should be further reduced to distinguish it; this would make the whole even less readable.
_ _ _ _ _ _ _ _ _ _

As neither 1) or 2) are fully satisfactory, the only other solution which comes to my mind is to play with the background: either

A) make the 'active' icon border more clearly different, for instance by adding light borders at the right and bottom edges, completing the 3D effect (currently only barely hinted at);
OR
B) make the whole 'active' icon background lighter: a small difference would make the whole icon to stand out and would reduce only minimally the icon contrast;
OR both.

In the worse case, a substantially light background could be combined with a reversal of the icon luminance, for a negative effect.

Any possibility to investigate these?

Thanks,

M.


Comments

There is one more possibility for IIb and that is to change the background colour of the icon concerned.

Potentially this may be more useful as the contrast between selected and unselected icons as the area of change would be bigger and more noticeable to the eye.

It could even match colour of the voice being worked on :)

In reply to by ChurchOrganist

@ChurchOrganist: Thanks for the suggestion.

IIUC, you propose to change the icon background, as opposed to the button background. This was one of my first attempts and it usually does not work as one might expect.

Here are a couples of (quick and dirty) attempts:

A) Lighting the icon background:
NOT FOUND: 1

B) Reversing the icon (negative):
NOT FOUND: 2

Both suffer from the fact that the icon background is only a part of the whole button background: modifying it leaves an unmodified border between the button edge and the icon edge.

Then each has its own problems (A compresses the luminance scale and B suffers from the "Canadian flag" effect); as the coding behind these examples is rather crude, these can be probably better tuned but the basic issue remains.

Thanks,

M.

In reply to by schepers

Of course no offense is intended: it is a well-known example of an also well-known optical illusion: look at the Canadian flag and, if you exchange the foreground with the background, the maple leaf may turn into the outline of two faces.

M.

Do you still have an unanswered question? Please log in first to post your question.