1641092 - Reduce visual salience/noise of sent-message arrows in correspondent column

Status: RESOLVED FIXED

(Thunderbird :: Theme, enhancement)

Description

[Thomas D. (:thomas8)]

Attachment: Current: Correspondent-grey-arrow.thick.dark.webp

Under the fresh impression of Aleca's awesome presentation today on how flat UIs with whitespace can reduce the cognitive burden of parsing the UI, here's another little contribution in that direction as part of my anti-oversalience series:

Actual:

Sent-message indicator arrows in correspondent column are clearly over-salient, too dark, too big, hence needlessly standing out from the entire message list UI.

Expected:

Can we please make them much lighter, and send them on a photon diet, because they will still be sufficiently distinct by their mere presence in an otherwise empty column! (see mockup screenshots in next comments)

Comment 1

[Alessandro Castellani [:aleca]]

Yup, I totally agree, that arrow is extremely out of place and inconsistent.

Comment 2

[Thomas D. (:thomas8)]

Attachment: Mockup1: Correspondent-grey-arrow.thick.light.webp

Mockup1: Thick arrow with lighter color

Here I have just lightened up the color. What a relief already! But let's see if we can still do better (see next comment)...

Comment 3

[Thomas D. (:thomas8)]

Attachment: Mockup2: Correspondent-grey-arrow.thin.light.png

Mockup2: Photon style arrow with lighter color

Yeah! I like this so much better, and blending in nicely with the wireframe photon style.
Note: Arrows still well visible by their mere presence in an otherwise empty column.

What do you think?

Comment 4

[Alessandro Castellani [:aleca]]

Comment on attachment 9151926 [details]
Mockup2: Correspondent-grey-arrow.thin.light.png

Yeah, definitely better.
Are you using the actual Photon icon? That seems a bit different: https://design.firefox.com/icons/viewer/#forward

Also, we should consider using a color for that icon as putting it at the same opacity at the other icons might mislead the user in thinking that icon is clickable.

Comment 5

[Thomas D. (:thomas8)]

(In reply to Alessandro Castellani (:aleca) from comment #4)

Comment on attachment 9151926 [details]
Yeah, definitely better.

That's good to hear.

Are you using the actual Photon icon? That seems a bit different:
https://design.firefox.com/icons/viewer/#forward

No, it's a mockup (Screenshot > Irfanview > MSPaint), and we cannot use the photon browser forward icon because that's too big.
I started out on the photon download arrow, rotated 90 degrees, and then still clipped the arrow wings a bit shorter.
I'm sure we can find something like that as an SVG, or Richard can try his SVG editing skills on the download icon as I did.

Also, we should consider using a color for that icon as putting it at the
same opacity at the other icons might mislead the user in thinking that icon
is clickable.

Well, as soon as you add color, you're going back to the very over-salience which we want to get rid off.
I don't see a risk of misleading the user into clicking those arrows just because they have the same color.
No harm even if you do - might happen once and then you know.

Comment 6

[Alessandro Castellani [:aleca]]

(In reply to Thomas D. from comment #5)

and we cannot use the photon browser forward icon because that's too big.

We can easily manage the size via CSS or create a smaller variation if necessary.

Well, as soon as you add color, you're going back to the very over-salience which we want to get rid off.

Not necessarily, we can find a good variation that doesn't grab the attention and it doesn't get associated with other icons.

I don't see a risk of misleading the user into clicking those arrows just because they have the same color.
No harm even if you do - might happen once and then you know.

Different icons for different purposes should be stylistically different, that's why the forwarded, replied, and other icons of that sort in the thread pane come with different colors.

Comment 7

[Richard Marti (:Paenglab)]

Attachment: 1641092-correspondents-icon.patch

The normal goback.svg and goforward.svg are too big. I made smaller arrows now and played with the opacity to work on all themes and backgrounds.

Comment 8

[Thomas D. (:thomas8)]

(In reply to Richard Marti (:Paenglab) from comment #7)

The normal goback.svg and goforward.svg are too big. I made smaller arrows now and played with the opacity to work on all themes and backgrounds.

Can you attach a screenshot for Windows?

Comment 9

[Richard Marti (:Paenglab)]

Attachment: How it looks on Windows with patch

Comment 10

[Alessandro Castellani [:aleca]]

Comment on attachment 9152338 [details] [diff] [review]
1641092-correspondents-icon.patch

Review of attachment 9152338 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks for the patch.
I still think we should tweak the color a little bit to separate this icon from the actionable icons of the row, but that's something we can tweak later when we have more time.
Better land this to ensure a more cohesive feeling.

Comment 11

[Richard Marti (:Paenglab)]

What colour do you have in mind?

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/7b9c7c1b0f4c
Use a photon icon for the correspondents arrow. r=aleca

Comment 13

[Thomas D. (:thomas8)]

AWESOME! What a relief. Eye pain gone.
I would leave the photon arrow exactly as it is (passive info, low salience), but can't we have a hover effect on the clickable column icons instead? Do we have a bug for that?

Comment 14

[Richard Marti (:Paenglab)]

You mean the column header? The headers show already a hover effect. Or can you better explain what you mean?

Comment 15

[Alessandro Castellani [:aleca]]

Hover effect per column is not supported by the XUL tree element unfortunately (if that's what you were asking), it only returns the hover on the entire row, which is one of the many shortcomings of this element.
There should be a way to implement this feature from the C++, but I haven't looked at it enough to be sure.
Having that feature would be extremely useful to improve usability, and if it's too complicated to implement, it's another point in favour of replacing the tree with a native and equally performant HTML element.

Comment 16

[Thomas D. (:thomas8)]

Attachment: Screenshot: Sketch to clarify requested tree icon hover state

(In reply to Alessandro Castellani (:aleca) from comment #15)

Hover effect per column is not supported by the XUL tree element unfortunately (if that's what you were asking), it only returns the hover on the entire row, which is one of the many shortcomings of this element.

I think Alex got me right (see attached mockup screenshot outlining the idea; the red circle implies the hover state).

Having that feature would be extremely useful to improve usability

+1