Implement distinctive visual cues to warn of scripts that are known to break something. about privacy.sexy

[undergroundwires]

Thanks for your feedback @ElektroStudios, let's keep this separate from #300. We should have cues for script safety to prevent issues.

Let's define how..

I will give you a bit context about how privacy.sexy works now. Its script can have two recommendation levels (Standard/Strict), or they'll not be recommended at all. Categories have no recommendations, this applies on scripts only.

So scripts can have either of these three states:

• Standard: No known issues; ideal for everyone.
• Strict: May cause problems; use with care.
• None: Likely to cause significant issues; for advanced users only

I was playing different ideas:

• Use color-coded circles: 🟢 (standard) 🟡 (strict) 🔴 (none)
• Use emotion-based icons like: 👍 (standard) 🤔 (strict) 💀 (none).
• Highlight script names with specific colors, as @ElektroStudios suggested, but it may be too intrusive to the eyes.
• Stay minimalist and creative, possibly by coloring the checkbox borders instead of adding more icons.

These add visual cues on scripts. But how about the categories? How can we give feedback about whether an applying a category as a whole can be breaking or safe? It would be good to warn directly if a category has an unsafe script deep in its hiearchy somewhere. Would using circles with mixed colors make sense? Mixed-color circles to indicate a mix of script states within a category and uniform-color circles to reflect uniform script states within a category:

• If a category contains Standard (🟢) + Strict (🟡) scripts; Add a circle that's half green and half yellow (🟢🟡)
• If a category contains only Standard (🟢) scripts; Add a circle that's full green (🟢)
• If a category contains script that has strict/standard scripts; Add a circle with three colors in it (🟢🟡🔴).

What do you think about this? Or can there be better solution?

We have three challenges we need to solve:

1. Visual appeal: How do we make these cues eye-catching but not overwhelming?
2. Clarity: How should we distinguish between the different recommendation levels? Should we highlight all three levels, or should we just distinguish between Standard vs others? We should decide whether to represent all three script states or just to highlight Standard versus non-Standard.
3. Category handling: How do we effectively communicate the safety level of scripts deep within a category somewhere on the title of the category?

If we can clarify this, I want to prioritize this and get it done in next feature release 0.14.0.

@plantindesk, your recent contributions have been very valuable, and your input on this matter would be greatly appreciated ❤️.

P.S: Visual Studio is solved in #327 thanks to @Cajunvoodoo and it will be released as part of the next patch.

[undergroundwires]

Right border	Left border 1px	Left 3px	Left border 8px

Right margin	Borders	Background

Which do you think that looks the best?

[undergroundwires]

I fix it using a CSS hack. This is 6px.

Without white borders	With white borders

Keeping the white border on top and at bottom border looks better I think.

Should checked states be styled too?

Styled	Not styled

I guess we'd like to keep seeing the level of stuff we choose, but it looks a bit ugly when its styled inside this way. Feel free to comment.

---

I know its a lot but it wouldn't happen without your contribution @plantindesk and @ElektroStudios so please keep giving feedback. In the end I will list the options that we liked so we can choose one of them.

[undergroundwires]

Thanks for quick input @ElektroStudios, you've been really helpful ❤️.

There's one issue with left borders:

Color inside, with radius	Color inside, without radius

This does not work well, then I move the border outside of checkbox instead of inside. But it does not work with radius:

If I remove the radius from existing checkbox, it looks nice:

We can also remove white left border so its more integrated:

Separating a bit works well:

So three alternatives work:

Option	Image
No margin
No margin, remove left white border
Some margin

I guess this is the best way right?

1. Remove the radius so checkboxes look flat. privacy.sexy is flat for the 90% of the UI so it would align better with current design language, no problem with that.
2. Choose between "no margin" or "No margin, remove left white border", not sure which @ElektroStudios ?

---

GPT:

This is literally the worst looking option...

If I push GPT harder, it wants to add texts "Strict, standard" etc. We do not align at all, I think humans call the shots here 😃

[plantindesk]

@undergroundwires
I would go for some margin

Also according to me Mistral Large>Claude>Gemini>Mixtral>Chatgpt 3.5

Also if you want to do anonymously go for Huggingface Chat cause it also give Search Web option which will search the web too.

[plantindesk]

Refer issue #330
So you can close issue if you want

[plantindesk]

I think the screenshots @ElektroStudios are perfect 🤔

[ElektroStudios]

For me, the flat left border looks the best, although not all of the border colors of that group should be yellow, I'm right?. I mean, It should look like the right margin image but with left border colored instead, don't?.

Anyway, this is what ChatGPT 3.5 thinks about the comparison between left border / flat left border and a filled background (I think it is a valid and objective opinion):

[undergroundwires]

No margin, remove left white border

Here's how it looks with different PX using all the alternatives (spacing used in privacy.sexy):

3px	4px	6px

10px	15px	20px	30px

4px looks too shy, so it should be at least 6px.
Bigger than 20px looks very ugly.

I think the options are 6px-10px-15px-20px.

6px	10px	15 px	20px

What do you say here? After choosing this we can also define "some margin" I also think it should be considered because it clearly separates the visual elements, and we can take a last look later between these two options.

[ElektroStudios]

Refer issue #330 So
you can close issue if you want

I appreciate that you let me know that there was already a proposal almost identical to mine, but at least for the moment I am not going to close this thread since I still maintain the additional suggestion of modifying the color of the relevant script names to a "pastel red" (indian red, #CD5C5C), which would make it much more intuitive for users to perceive that they are selecting a script that involves a breaking change, rather than a warning symbol and aligned at the very end of the script name.

Thank you very much for your collaboration!

[ElektroStudios]

* If a category contains Standard (🟢) + Strict (🟡) scripts; Add a circle that's half green and half yellow (🟢🟡)

* If a category contains only Standard (🟢)  scripts; Add a circle that's full green (🟢)

* If a category contains script that has strict/standard scripts; Add a circle with three colors in it (🟢🟡🔴).

What do you think about this? Or can there be better solution?

I don't understand why the category name "None" to represent the highest level of risk. Wouldn't something like "Critical" be more appropriate?. Maybe I just didn't understood what the "None" word is meaning in this context.

In any case, if there are three levels of risk, that should translate into three levels of priority on the color of the circle. And the circle should highlight only the highest risk level selected in the scripts within that category.

Mixing the colors in the same single circle is simply unnecessary, because by using a circle filled with the color that represents the script selection having the highest risk, it is already warning the end-user about the current risk, am I explaining correctly?. I don't find it useful to mix colors in the same single circle to warn of lower priorities too.

That is my opinion. Then:

If within a category a mix of "Standard", "Strict" and "None" scripts are selected, the color of the category circle should be red, since "None" has a higher priority / risk level over "Standard" and "Strict".

Likewise, if only a mix of "Strict" and "None" scripts are selected within a category, the color of the category circle should be red (None has a higher priority/risk level over Strict).

And if within a category a mix of "Standard" and "Strict" scripts are selected, the color of the circle should be yellow.

Etc.

We have three challenges we need to solve:

1. **Visual appeal**: How do we make these cues eye-catching but not overwhelming?

2. **Clarity**: How should we distinguish between the different recommendation levels? Should we highlight all three levels, or should we just distinguish between Standard vs others? We should decide whether to represent all three script states or just to highlight Standard versus non-Standard.

3. **Category handling:** How do we effectively communicate the safety level of scripts deep within a category somewhere on the title of the category?

Honestly, I would prefer the color of the scripts with risk "None" to be highlighted in an Indian Red color under a dark theme.

Once you have been able to categorize the scripts into the three states mentioned, meaning that by then you will have already implemented a mechanism that automatically each script has its risk level property defined, would it be too difficult to implement the color change, as an OPTIONAL feature available through checking/unchecking an "Appearance Peferences" option in the application settings?.

In any case, continuing with the circles idea, I think that perhaps the freemium application NTLite could help or inspire you.

In NTLite, instead of showing circles, the visual cues are simplified by coloring the left side of the checkboxes. This could be a good idea for Privacy.sexy too, although the drawing logic of the checkbox controls may have to be modified to carry out this customization.

And regarding how the color is decided for each checkbox, in NTLite, the comparison with the idea that you've explained about the circles it would be totally unfair, since in NTLite the categories doesn't have visual cue; what have visual cues are the tree of checkboxes that represents Windows components, and it is understandable that selecting a critical root component has a red warning color or risk level, while its child components that are safe to remove them have a green color. So I think it can't be took as example to discuss the idea that you've proposed about the circles.

But I still think that it could be of help to inspire you, due the fact of how the checkboxes are colored on its left side, thus avoiding adding additional controls or symbols, such as a colored circle.

I'll show you a screenshot of the program so you can see how the visual cues are like:

Dark Theme:

Light Theme:

[ElektroStudios]

I find "No Margin" (1st image) to be annoying (irritating to see) that white border so close to the other, and I think this is not subjective.

I would opt for "No margin, remove left white border" (2nd image).

The "No margin, remove left white border" feels like a single visual element, as if it were part of the same checkbox. It becomes clearer to see what you have marked and the color. I think with our human brain and vision signals it is much faster and productive to identify it like that, I mean in that image we have to focus our attention on only one single figure with a colored side, instead of separating the vertical colored rectangle element like in "Some margin" (3rd image) to add two different visual elements that are "far away" each other, it seems a little strange to me, I wouldn't say it is annoying, but maybe it feels imperfect or not as optimal as it could be.

In the end I think this is all a matter of personal preference. Except for what I said about the 1st image.

EDIT:

As a suggestion, I would make bigger the width of the colored border, like in the "Flat border" example which feels like around the 25% (8px in your example) of the left side is filled. This is totally a personal preference, but I think it helps to make it even clearer and consistent to see it.

[ElektroStudios]

The larger you make the filled rectangle left at the outside of the checkbox boundaries, the more it will look in conjunction like a confusing kind of toggle (on/off switch) button, like in the 20px and 30px images.

So 6px is fine.

But it would be better 10px or more if the filled rectangle can be put inside the checkbox bounds, aligned to the left side, like what you have shown here:

[undergroundwires]

Sorry , I keep editing posts @plantindesk...
Yeah we should have last two alternative and compare. I think margin is nice because it clearly separates the different visuals. These are different size with no margin.

Margin used: 0.5em.

6px	10px	15 px	20px

[undergroundwires]

Or align right?

6px	10px	15px	20px

[undergroundwires]

The larger you make the filled rectangle left at the outside of the checkbox boundaries, the more it will look in conjunction like a confusing kind of toggle (on/off switch) button, like in the 20px and 30px images.

So 6px is fine.

But it would be better 10px or more if the filled rectangle can be put inside the checkbox bounds, aligned to the left side, like what you have shown here:

I was thinking that having it a bit bigger is good because we can show a tooltip explaining what it is on hover, but thinking again we can show the tooltip on whole checkbox.

Going back to filling inside, it looks weird once zoomed in (due to how CSS handles borders), but maybe it's not so bad.

Filled inside + no white border on left:

6px	10px	15px	20px

[ElektroStudios]

I was thinking that having it a bit bigger is good because we can show a tooltip explaining what it is on hover, but thinking again we can show the tooltip on whole checkbox.

And hovering the mouse cursor on the filled rectangle it will prevent the checkbox from being able to be clicked/checked?. I think it shouldn't prevent the user from checking/unchecking the checkbox.

Going back to filling inside, it looks weird once zoomed in (due to how CSS handles borders), but maybe it's not so bad.

I love how it feels the 6px filled inside the checkbox bounds. Except for the curvature from the top and bottom sides of the filled rectangle, to the inside.

[plantindesk]

but Navigator API is yet remaining. I will do after 29th 😅

[ElektroStudios]

Should checked states be styled too?

Of course, what would be the point of this feature (and all of your work put on this) if the visual cue does not remain visible when the checkbox is checked?. No one can remember the color / risk level of all the marked checkboxes when they are a lot.

Keep it going!