Web - Tagtree - Tagset icon

[gusferguson]

@will-moore @pwalczysko

This is the tags icon with slightly different colours.

Question is - would it be better to go radical and have totally different colours as in Project-Dataset.

I would have to completely redo the tags and tag icons anyway - so a radical colour change is not any more work.

1. 10 degree colour rotation

1. 15 degree colour rotation

[pwalczysko]

yes, I can see the tag from tagset much more readily now. Completely different color would not be bad either.

[gusferguson]

@pwalczysko @will-moore

I have had to regenerate the tag and tagset icon to do the mockup, so introduced a bit more definition in them.

Below shows:

• a purple/dark grey tagset icon in the toolbar - based on the data tree screen icon colours
• a same grey colour tagset icon at the top of the tag tree - just a bit more definition
• a green tagset icon - based on the dataset icon colours

Top most tag icon is new one with more definition.

What are your thoughts?

[pwalczysko]

I like the dark grey/purple color for the tagset. (green resembles too much the Dataset, and grey (the same color as tags) does not do it for me.

[gusferguson]

I think I prefer the green and I think the dataset-tagset association is good.

@will-moore - casting vote/veto!

[will-moore]

I think I prefer the 15 degree colour change (or even the grey) but I'm not sure the Dataset association is good because Tagset (green) and Tag (blue) then look similar to Project (blue) and Dataset (green) except that the hierarchy is the other way up. And I also think that it's nice to have a clearer distinction anyway - especially since they can all be jumbled up together in the Tag tree.

[gusferguson]

The colour rotation is certainly easier to do - I just use the existing icon.

Here are the icons for 10, 12, 15 and 20 degree rotations - see what you think when they are in place.

10 degree colour rotation:

12 degree colour rotation:

15 degree colour rotation:

20 degree colour rotation:

(Don't look a lot different in isolation)

[hflynn]

Not to throw a spanner in the works, but while you're redesigning this anyway, have you considered accessibility issues regarding colour and contrast? There seem to be lots of online tools to help with this stuff.

[gusferguson]

@hflynn - I did a full review of all the icons and text with respect to contrast and colour a year or so ago, and it passed with at least an AA according to the W3C WCAG 2.0 rules. I use a desktop tool Colour Contrast Analyser.app https://www.paciellogroup.com/resources/contrastanalyser/.

I do keep an eye on it with changes, but if you detect any issues please shout.

[hflynn]

That's great @gusferguson - I defer to your expertise, it just occurred to me that distinguishing green from grey here might be an issue so I wanted to check such things were being kept in mind.

[gusferguson]

@hflynn - the colour issue as such is a whole different can of worms - we have never looked at how any of our UIs and web pages work with colour blindness, or for that matter low visual acuity. In this instance sticking to shades of grey is probably safest, but if there are purple shades (red) in there the contrast for Red-green colour blindness could be affected. In this case the contrast does not fall off too badly for the 15 and 20 degree rotations - which is moving towards red.

15 degree contrast: