Make msg selection highlight color neutral

[sergioc]

While working on #739, it occurred to me that the current message selection highlight color isn't particularly appealing nor contrasts well with some icons.

Proposal 1

• use a neutral color like grey to better contrast with icon colors
• increase contrast...
  • ... with other rows by using a dark color
  • ... with text inside selected row, by making it white

Proposal 2

• use a neutral color like grey to better contrast with icon colors
• change selection highlight from light blue to light grey

Proposal 1 will likely give better results, but will require changes to "archive" and "retry requested"

[adamralph]

@sergioc could you provide some mock ups?

[sergioc]

I could, but it would be faster to visualize this directly in XAML.

[adamralph]

Discussed this with @HEskandari - he will provide screenshots.

[HEskandari]

@sergioc Do you have specific colors in mind?

[sergioc]

We can start from #222222 for dark grey (will require text to be white) and #bbbbbb for light grey and tweak from there.

[HEskandari]

Here's how it looks with the proposed colors.

I think the change in the focused row should also be reflected in the "Properties" window and the "Explorer" since they have similar semantics (selecting a row) and mechanics (using Grid control under the hood).

[adamralph]

@HEskandari are these two alternatives? Or are these two possible states?

[HEskandari]

These are the two colors suggested by @sergioc. There's not much of a possible state, as there's always one row selected/focused (unless there's no data).

[adamralph]

OK, so these are two alternatives. I find the black a little too jarring. My vote goes with the grey, similar to Excel:

[adamralph]

The reason I asked about state, is that some apps have a different style depending on whether the window (or pane) containing the list is active or not, e.g.

Active

Inactive

But I guess we don't have this state varation?

[HEskandari]

@adamralph we could have that option, if we choose to, but since the Messages list always has something selected, I think it makes sense to not have active/inactive distinction.

[adamralph]

@HEskandari that two states indicate whether the messages list has focus or not. In both states, there is a message selected.

[sergioc]

are these two alternatives? Or are these two possible states?

Alternatives

I find the black a little too jarring. My vote goes with the grey.

I think the grey doesn't completely solve the issue of contrast. Black would work better contrasting with most colors and is easy to see. How would both look in a screenshot showing the whole application? Would black still be jarring? Would you notice that jarriness during normal usage where your task will never be to analyse the color of the highlight?

The reason I asked about state, is that some apps have a different style depending on whether the window (or pane) containing the list is active or not, e.g.

That actually gives an idea of not putting the highlight background behind the icon. Then we can use whatever color, including a blue used in the different diagrams. Would that be possible?

[adamralph]

I think the grey doesn't completely solve the issue of contrast. Black would work better contrasting with most colors and is easy to see. How would both look in a screenshot showing the whole application? Would black still be jarring? Would you notice that jarriness during normal usage where your task will never be to analyse the color of the highlight?

@sergioc without analysing it too deeply, I simplify prefer the look of the grey highlight to the black one. It's striking enough to immediately convey that it's the active row, without looking odd, which I think a black highlight does. Is there an example of another UI which uses a black background to indicate the active row in a list?

That actually gives an idea of not putting the highlight background behind the icon. Then we can use whatever color, including a blue used in the different diagrams. Would that be possible?

I'm not sure, but given that the icon is in it's own cell in the row, I think that could look a little weird.

[sergioc]

Is there an example of another UI which uses a black background to indicate the active row in a list?

Not from the top of my mind.

[HEskandari]

The black one looks like designing SI for people with vision impairment. Why does it have to be that contrasty?

To me, the gray looks better, is contrasty enough to convey the meaning and matches the rest of the theme.

[sergioc]

Black is more noticeable, has no issue contrasting with other colors and there's no confusion with out of focus panes or windows. Can you produce some screenshots of the entire app with the different highlight colors?

[HEskandari]

Here are the full app screenshots.

Dark gray selected row (#222222):

Light gray selected row (#bbbbbb):

@sergioc let me know if you want to jump on a call and tweak the colors.

[WilliamBZA]

My vote goes for the light gray

[sergioc]

I still vouch for the dark grey for the reasons presented in my last comment.

But I think the best option is the previously mentioned option to use blue (aligned with the selection highlight color used in the diagrams), but not highlight anything in the first column to prevent clashing with icons:

[HEskandari]

@sergioc Not highlighting the first column, even if possible has a higher effort (since the grid only has the concept of a selected row out of the box).