Propose a color for the panel on desktop and mobile that would be easier on the eyes and be visually pleasing with respect to the rest of the page

[gissoo]

What's in scope:

• the color of the panel

[gissoo]

@rlskoeser @jhimpele I'd like your opinion on the color of the panel. The light version is too stark and makes it harder to look at after some time, therefore I thought of proposing the dark version that matches the color of the header and the footer. Here are the versions on figma for desktop and mobile.

[rlskoeser]

@gissoo I see what you mean now about the light version being too stark.

If you think the dark background is distinct enough for this use, then I'm ok with it. I like it visually, I just wonder about contrast / emphasis — I think this should be visually more important than header or footer.

The tag background color looks too bright on the dark background.

[jhimpele]

Agree with @rlskoeser here. I prefer the dark panel, and would darken the tag backgrounds too. I might suggest a panel that is shaded somewhere in between the tree background and the header/footer, and the same for the tag background.

But for the sake of intelligibility and simplicity, I think we ought to avoid adding too many more colors/shades. So: keep the panel dark as is, but darken the tag background....

[gissoo]

@rlskoeser @jhimpele so helpful!! Yikes, don't know why I didn't think of changing the color on the tag containers, it's not the right system for this dark version – I'll do that, thanks.

I was 100% thinking of the relation between the panel, header, and footer and wasn't comfortable but also with the colors on the tree I found that matching the panel with the header and the footer may be the safer route to go – let me do a quick digging on this and will get back to you.

[gissoo]

@jhimpele @rlskoeser I've revised the color of the tag containers (selected and default), please take a look here and let me know what you think Note: the only thing in scope here is the visual styling of the tags

• also, I tried lighter shades (then the dark brown) for the panel but they all fail accessibility contrast requirements for small text size (which we have in the panel), the only ones that pass are very close to this dark brown that I've shown you. I think we should go with this.

Let me know if you have any concerns or we can close this issue

[rlskoeser]

@gissoo this looks fine to me

[jhimpele]

This color is acceptable. What do the checkmarks in each tag container indicate when highlighted and not?

[gissoo]

@jhimpele the filled-in checkmark is when a tag is selected/acitve, and the outlined one is how it looks by default/not selected.

[gissoo]

@jhimpele your comment reminds me: when one is selected (filled-in) the others are outlined and faded (30%opacity), when no tag is selected all of them are outlined and 100%. I just made the change on Figma link above so you can see.

[jhimpele]

@gissoo Thanks for clarifying. What confuses me is that there is already a checkmark in the circle before anything is selected. I intuitively expect the circle to be empty, and then selecting something (i.e. the tag) ticks the circle with a checkmark. Here, there seems to be three rather than two ways of interpreting a circle. Can we just do empty + checked when used, however you think looks best in terms of outline and opacity? Thanks!

[gissoo]

@jhimpele I don't think that's a good idea, because the outlined checkmark makes it clearer that you can interact with the tags, otherwise it's not clear that the capability exists. An empty circle is not visually familiar to the users' eyes because it's currently not used anywhere in UIs – that's why the color distinction can be a clearer option than adding/subtracting from the icon.

[gissoo]

@jhimpele what you're suggesting could have worked for filters but it's trickier for tags that appear inside a panel, below descriptions.

[jhimpele]

I think where I see the confusion is that if you land on a page (panel) with a set of circles with checkmarks, it looks like the items have already been “completed.” I agree that the empty circle would similarly not be understood until after it is checked. Can we skip the checkmarks and de-emphasize the font on tags that have been clicked? Backing up one more step, must we necessarily indicate which tags have been clicked in a panel? Will those tags remain completed if one leaves and returns to the panel? I’m thinking indicated used tags might be excessive…..

[gissoo]

@jhimpele I understand.

• I can look for other icons that could work better. (let me see)
• I'd like to avoid changing the font weight, it often creates issues, creating little shifts within the container.
• Yes, usability-wise we'll need to clearly indicate when a tag is active, especially because one can be directed to that view since it's going to have its own URL. And more generally anything that you can interact with needs to visually reflect that. They won't remain checked /active once you refresh the page or if you select a different panel. They may remain checked/be preserved if you go to another page but use the browser's back button to get back to the page. Note that as we mentioned only one tag can be selected at a time.

I think this discussion is going beyond the scope of this issue. We can track this discussion in issue #55 and close this issue.

[rlskoeser]

fwiw, I don't love the checkmarks either, it makes it look more like a filter (which isn't quite right), and it also clutters/distracts from the text. They seemed ok so I didn't bring it up. But don't they look enough like buttons without that? Could we use color to indicate currently selected tag? I do agree it's valuable to have an indicator of which tag is selected.

[gissoo]

ok, let's discuss this in issue #55. Thanks for the comments. I can propose other styles for tags that rather incorporate all requirements and feedback on both sides.

[jhimpele]

@gissoo I now understand and agree with being able to see which tag is active at any time.

A highlighted background color on the tag would work very well.

[jhimpele]

Agree. Color outlines or backgrounds…. Thanks @gisoo. On 2/14/23, 4:07 PM, "Rebecca Sutton Koeser" wrote: fwiw, I don't love the checkmarks either, it makes it look more like a filter (which isn't quite right), and it also clutters/distracts from the text. They seemed ok so I didn't bring it up. But don't they look enough like buttons without that? Could we use color to indicate currently selected tag? I do agree it's valuable to have an indicator of which tag is selected. — Reply to this email directly, view it on GitHub<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FPrinceton-CDH%2Flenape-timetree%2Fissues%2F77%23issuecomment-1430379040&data=05%7C01%7Cjhimpele%40princeton.edu%7C3a76bc85f6f043f49f6308db0ecf7b28%7C2ff601167431425db5af077d7791bda4%7C0%7C0%7C638120056515625013%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=VDIkk8bB2mXetiTPgNpC3IApCmGEdSHTzrJw0dvHqHs%3D&reserved=0>, or unsubscribe<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAWMVXZ2WYWJP4FZ4JMFNSFDWXPXZBANCNFSM6AAAAAAUURWRFE&data=05%7C01%7Cjhimpele%40princeton.edu%7C3a76bc85f6f043f49f6308db0ecf7b28%7C2ff601167431425db5af077d7791bda4%7C0%7C0%7C638120056515625013%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=SKfijaCQXF9eww2r%2FBd5%2FCF%2BkYMgHFZ7Wu7x02NBLow%3D&reserved=0>. You are receiving this because you were mentioned.Message ID: ***@***.***>