Show hints to number or scale of resources blocked by Fingerprinting and Trackers & Ads links

[mcint]

I want the Advanced Shields settings for Fingerprinting and Trackers & Ads to

1. Minor request:
   I want Fingerprinting at the top. I use it most frequently to allow pages to work, and want others to gain the benefit more quickly and intuitively. Current UI entices one to fiddle with Trackers & Ads blocking first, but it’s usually not the issue blocking first-party rendering (I would be happy to have telemetry on number of times each blocking setting is selected, and final/presumed best setting).

2. Major request:
   Calculate and show (a rough guess) of if, and how many, resources were blocked by the setting being on. Show “Aggressive block fingerprinting [0/3]”, “Block fingerprinting [1/3]”, “Allow fingerprinting [3/3]”, or some similar indication of [0, 1, many].

3. Major suggestion:
   Related to (2), perhaps switch from a dropdown to 3 side-by-side buttons, with evocative symbols, but current text as tool-tips on mouseover, (Aggressively block …), (Block …), and (Allow …) for both “Fingerprinting” and “Trackers & Ads”. Symbols like stop sign(s) and green dots, and including a number indication
   3.1)

   
   , 3.2) ,
   3.3) , 3.4)
   (Can’t wait for a D*sney DMCA for these symbols)

These would appear as button within the Shields browser modal in place of dropdown menus, for Fingerprinting (moved to 1st) and Trackers & Ads (moved to 2nd).

I want these changes so that:

• I have better visibility into how Shields settings pages might affect rendering of the page, especially desired one-shot usage.
• Other users can discover these features and quickly determine how to use them appropriately

These requests are motivated by a desire to:

• Limit use of complex stateful interactions, e.g. dropdowns, inside a temporary UI element
• Minimize the need to repeatedly open and fiddle with Shields settings on a domain or a page.

[fanboynz]

The icons aren’t that helpful, for users who aren’t sure their meaning, without looking at docs/a helpfile.

Easier to translate text into other languages “Off/Standard/Aggressive”.

[mcint]

Direct reply

Aren’t helpful?

My icons may not be, but icons are effective, essential:

• Privacy Badger (1,000,000+ users) does it well.
  
  
• Disconnect (500,000+ users) does something that communicates with icons instead of just text.
  
  
• Even NoScript (100,000+ users), the dense toggleboard (and a predecessor to Brave’s scripts toggle), uses icons
  
  

Icons are feature of apps that make it.

Translation

Icons don’t need to be translated. I agree that finding good ones can be difficult. I care about the feature of icons in use, a lot more than I care about “my” icons being used.

First-time users can read tooltips, even possibly longer ones with explanations included

• Aggressively block
Block based on Brave's advanced research

vs

• Aggressively block.

Every button in the Brave URL-bar line and bookmarks bar includes a tooltip, and extensions include a second line

• Vimium
Has access to this site

Helpfulness

Icons are helpful! Mouse-over tooltips are the answer for first time users, or even just the “Learn more” link at the top, however it’s about /privacy-features/ abstractly, not specifically how to use Shields. It appears to be more about marketing (albeit for some of Brave’s key differentiating features, which your work enables). You say this is a value, but the browser interface doesn’t reflect it, at the moment.

Icons make it clear how many options are available, without having to open many sub-dropdowns, 4 at current count. And icons in close proximity to each other reveal meaning with the briefest glance of comparison.

On the mobile screens we tested, users were roughly 37% faster at finding items when visual indicators varied both in color and icon compared to text alone.
https://www.nngroup.com/articles/visual-indicators-differentiators/

Not to mention, not having to traverse sub-menus.

The options are already hidden in “Advanced Controls”, and closed off by default.

My schpiel

Buttons make the similarity among categories clearer:

• Trackers & Ads: Block aggressively Block Allow all
• HTTPS/HTTP: Only HTTPS Upgrade to HTTPS Don’t upgrade HTTP
• Scripts (toggle) good
• Fingerprinting: Block aggressively Block Allow
• Cookies: Block all Block cross-site Allow all

This preceding mess of text is only a shortened reflection of all the text in the current menu, a proposed factoring of the group into a title and contained options as checkboxes.

I made this issue, because I want a User Interface where my User eXperience flow can be:

1. (Shields) see, move, click (wait)
2. see setting groups, see current states of all (with comparison), chose group, see current state, click desired state (no waiting for new elements to load)

I can picture the 4/5 3-option radio button settings (and toggle) in a mental snapshot. I have to resort to the phonological loop, reciting the current or desired settings, to recall the set. It could be cleaner, easier shorter.

Instead, the current interface requires:

1. (Sheilds) see, move mouse, click
2. read dropdown elements for name of category at random position offset, find the one I want, ponder the meaning of the displayed text and if I want it to contain different text.
3. click the dropdown
4. once the dropdown is open, depending on the option, move to the appropriate offset (which shares no UI scaling relation to the Shields popover), and click the desired setting.

Browsers are the most advanced, optimized, widely-deployed & -used graphics rendering engines on the planet. Why are we insisting on text. Also, why aren’t there shortcuts beyond “Toggle Shields” if one manually configures it.

---

I would take “lol, talk to a designer first, then, maybe, submit a PR”.