Lower "visual noise"

[gedankenstuecke]

Summary

In the user testing, people found that there was a lot of visual noise making the platform less accessible, the bullets below list the issues identified by participants

Deadline

What needs to be done?

• [x] Do not use the "red" on front page etc, as signals "danger"
• [x] Lower the number of colours (the mint/blue/green and yellow were appreciated)
• [ ] "flickering" when updating trigger labels
• [x] Double check that colours in dark mode work too
• [x] contrast ratio for the help texts on the white background below the forms is too low, need to be stronger
• [x] Help/placeholder texts for forms disappear as soon as people start typing, should instead go into the help text below the form to remain visible once people start entering data

Who can help?

• @gedankenstuecke for the implementation
• everyone else for reviewing suggested changes

---

Updates

[GeorgiaHCA]

Preference for the blues/turquoises in the user testing

[GeorgiaHCA]

Another option would be to have toggles for different colour palettes beyond the dark theme - e.g. high/low contrast?

[gedankenstuecke]

The contrast ratio for the help texts on the white background below the forms is too low, need to improve that

[gedankenstuecke]

Help/placeholder texts for forms disappear as soon as people start typing, should instead go into the help text below the form to remain visible once people start entering data

[gedankenstuecke]

In #670 the number of colour accents has be reduced to turquoise/blue/yellow, the bright reds are all gone except for the appropriate danger warnings (deleting stories/account). I've also tried to adapt the contrast so that it's neither too "flashing" nor too low. I've also made the 'loading signal' for the trigger filters last a bit longer, so that it's less visually disturbing.

I think those potentially address all the visual noise issues, but i'll keep the issue open for now so that @Davsarper & @GeorgiaHCA can review too

[Davsarper]

I was looking at the main page earlier, the more I look at it the more used I get to it but the first impression was a bit disconcerting. I am not sure what it is, but I think it is related to the different combinations of background colour and font colour; maybe the black-yellow-black also makes the 'how to use the platform' bit (yellow) be a bit too loud? I might go with white for fonts all the way through?

[Davsarper]

This is another example that for me has too many font colours

[Davsarper]

If we expand we have another colour, and it is reddish

[gedankenstuecke]

Thanks @Davsarper, I've gone and adapted those to make it less colourful/use a more consistent set of colours, see screenshots below (and also the demo deployment!)

[gedankenstuecke]

Okay, with this done I'll close this for now! 🚀