Percentile Color Scheme/Eye strain

[ajrdesign]

We've received a ton of feedback, obviously, about the colors of the site :). Some of it I believe is something we should change sooner rather than later and the rest maybe some change aversion people are going through which may fade over time as people adapt.

Feedback:

Discord Convo in training channel: https://www.evernote.com/l/AHF5eCCSB91PAJ66Md0lVppKuZ4E-ZgUHiA https://www.evernote.com/l/AHHL9pSbJtBMk5tIpUkeSzXWnK05vCNPXN8 https://www.evernote.com/l/AHE8WpjiEXVBXJnzA7DfrrD--GyhThGMeCo https://www.evernote.com/l/AHFnEaxWeCNMcqPkr_-AKwegPXeHWT79rME

https://www.reddit.com/r/Guildwars2/comments/88z9uh/v20_gw2raidarcom_edm_update/dwoayzn/

https://www.reddit.com/r/Guildwars2/comments/88z9uh/v20_gw2raidarcom_edm_update/dwon12n/

Summary

Problems I've identified that are not associated with change aversion:

• Digging into buffs is hard because percentile colors over 50% seemingly have the same "weight". The item "rarity" system isn't as intuitive as I initially thought for scanning to pick out the good and the bad. I think this is due partly to the high contrast of all the colors and the lack of natural gradation.
• Buffs is a little mucked up by icon logo repetition. It seemed like having the icon next to each percentage would be good but in hindsight it probably makes it harder to focus on specifics you want to, especially since boon color and current percentile colors can be pretty close.

Solution(s)

I've been working on a different color scheme, which involves a gradation from grey>orange>blue>purple. I think it significantly reduces the amount of work it take to scan dense color areas. I've also added a very subtle darker outline to buff displays to offset any vibration the color can cause against a darker background.

I've tried a lot of different combinations here and even been asking someone with colorblindness (green weak which is about 5% of males) for feedback on different themes. Just for clarity these are the restrictions I found while doing this:

1. Needs at least 4 colors in the gradation, anything less and the "inbetween" colors feel too close together and it's hard to distinguish at a glance.
2. Green and solid yellow are poor choices, green has large colorblindness issues and yellow is usually too high contrast to be usable.
3. Colors need to have a slight desaturation to avoid visual noise on a darker palette.

Still working on it and tweaking but changes can be seen here: https://github.com/merforga/gw2raidar/tree/colors

[ajrdesign]

After playing with so many different combinations I think I've found one that solves a lot of the problems.

https://d.pr/free/i/Jgfks7

A couple things to note:

• I tried to make Top:Middle:Bottom very distinguishable from each other and not care much about everything else. These are the main use cases I've seen people talking about are trying to determine a binary "Is this good or bad?" so certain colors are tied to these concepts "Strong Purple = Very Good, Blue = Decent, Grey = Very poor".
• No longer one solid color for in between, adding other accent colors was problematic and kept competing with the "Very Good" value for prominence when you are looking at a view with a lot of different colors (Like buffs).

If we can get this on UAT at @amadanmath convenience that'd be great. Currently I cannot test Global/personal stats with this color scheme (local is really broken atm) so I'd like to see how those look.

[Toeofdoom]

Couple of random notes -

• It seems like having multiple colour scheme options purely for percentiles would be much easier than multiple whole site styles
• do Firefox dev tools allow you to override the production servers css locally?

[merforga]

Personally i would also prefer option of being able to switch colour schemes for percentiles....mainly because rainbow =p

I know some people have been overriding the CSS with their own version but not sure what they're using to do so. Is there a possibility for people to upload their own CSS or have a fully customisable CSS ? O_O (i know this is probably heading into stupid long development features)

[ajrdesign]

As a designer I think leaving it up to people to override CSS is... lazy. They didn't really feel the need to do that before and if they feel "forced" to it's a major problem with the UI.

We could support a couple of different percentile themes, it's exponentially easier to do that an entire website theme, but I wouldn't want to use the "rainbow" as the default theme. The default choice should be the one we determine is "easiest" to use because most people won't bother changing it.

Initially I think having the above scheme as a default and the "rainbow" and a color blind scheme would be a good start.

[ajrdesign]

I've created 3 "percentile themes" and added some UI to the account section to be able to change between them. The precious 🌈 is in tact, I did tweak it a bit to be less vibrant for certain colors.

I don't know how to hook up the switch for changing the theme so I'll need someone else to do that for me. There are now 3 separate stylesheets in the that can be toggled on and off based on what radio button they've selected in the account options.

[Toeofdoom]

Uh, I just meant that you could override css on prod for testing purposes and see how it looks on the global stats page etc. Without waiting on bright :p

[Toeofdoom]

Apparently the close button is easy to hit by accident

[ajrdesign]

Oh gotcha @Toeofdoom. I finally was able to fix my local though ha :D.

[merforga]

Version 2.1.0b2 released on 2018-04-09 17:48:56