Update design for menu to clarify and support strict-blocking

[dhowe]

Need to support the following in the bottom section of the menu (*indicates a new item):

• strict-block-site *
• disable-on-site
• disable-on-page
• ublock settings
• settings (perhaps switch to gear icon?)
• faq

There is also the potential concern that the current 'disable' button suggests disabling ADN altogether, rather than only for the current page/site

[mneunomne]

We could maybe have instead of the "disabled" button, a 3-state button, when the following actions to the current webpage:

• Disable adn on this website (allow all requests)
• Default behavior
• strictBlock (Blocks all requests like uBlock does)

3 state button example

uBlock has a clear big button indicating it, with the domain name under it:

[mushon]

Can we maybe do this with a sub-menu? Like:

• Disable Here (with icon)
  • disable only this page
  • disable on domain.tld
  • disable everywhere
  • strict block (what does that mean?)
• Settings (with gear)
  • Adnauseam settings
  • Unlock (ad blocker) settings
• Help (icon only)

[dhowe]

So "strict-block" means that for the current domain, ADN acts just like ublock. Rather than trying to hide and collect ads, it simply blocks everything outright, as ublock would.

This is needed for pages which either have many videos with embedded ads (eg. youtube) or very aggressive spam ads, which would require too many rules to hide/collect (eg. piratebay)

[mushon]

Should we maybe add this as an extra option after someone chooses to disable on url? As in:

• [x] keep malware protection

[dhowe]

this is very different than disabling:

• disabling is as-if you are not using any blocker (you will see ads, etc.)
• strict-blocking is as-if you are using ublock (stronger protection, but no collection/clicking)

[mushon]

Then is strict blocking similar to = "only block, don't click"

[dhowe]

I suppose it is somewhat similar, for a single domain... But it is stronger in terms of blocking and protection.

Currently we have 'disable', which is the equivalent of 'whitelist'. Strict-block is closer to 'blacklist', or 'treat as dangerous'...

---

One question is how many of these options do we really need in the menu?

Certainly 'settings', but this could perhaps be a single gear icon somewhere, rather than the full word.

Do we need disable/whitelist? Not sure... Seems more likely that someone would choose the new 'strict-block' options (for example, when they see ads that sneak through), rather than the 'disable' option, which will show them even more ads. Users are also able to easily add sites to the 'whitelist' tab in settings. If we do have the 'disable' menu button we need to make it more clear (as ublock does) that it applies to the page/site, not to ADN in general.

Do we need uBlock settings? Not sure... this could perhaps be an option from our main settings page instead

Do we need the '?' which leads to our FAQ? Not sure... perhaps clicking on the ADN icon could take the user there, instead of to our homepage (the '?' could show on hover)

[mushon]

So each page/domain can be in one of 3 states: [ DISABLED ] [ ACTIVE ] [ STRICT BLOCK ] We can use a toggle for this and pop a dropdown type of menu when disabled is chosen We can also add explanation on hover

• add Gear & ? icons besides

[dhowe]

a domain can be in one of 3 states: [ DISABLED ] [ ACTIVE ] [ STRICT BLOCK ] at present a single page cannot be strict-blocked, but we might be able to add this...

we also have the same 3 global settings for adnauseam: disabled everywhere, active everywhere, or strict-block everywhere

[mushon]

So should I mock up that toggle?

[dhowe]

makes sense to me - any comment @mneunomne ?

[mneunomne]

Was thinking, and isnt perhaps better that we use the uBlock menu for this instead? It already has space and the webpage name under.... We would just need replace this sign for a 3 state button

To have this type of option in the regular menu might be too much for the non-advanced user

[mneunomne]

Do we need uBlock settings? Not sure... this could perhaps be an option from our main settings page instead

@dhowe I believe we do need the uBlock menu, I know some users definetelly use it to create the blocking rules with the rules UI in uBlock menu, also the logger, etc

[mneunomne]

Certainly 'settings', but this could perhaps be a single gear icon somewhere, rather than the full word.

This I agree, and would leave more space for a 3 state button

[mushon]

So to summarize we go for the 3 state toggle + 2 icons. Yes?

[mneunomne]

@mushon the gear Icon we already have. The other icon you mean for the 3state toggle?

[mushon]

Let me send something tomorrow and we’ll take it from there

Mushon Zer-Aviv Recent work: Normalizi.ng Mushon.com | Shual.com | @mushon

On Feb 7, 2022, at 19:47, Alberto Harres @.***> wrote:

 @mushon the gear Icon we already have. The other icon you mean for the 3state toggle?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[mushon]

This is what I had in mind:

[dhowe]

I like it

• where does one find the ublock settings?
• disable on site / page - works same as now with ctrl-click ?
• perhaps just 'strict' instead of 'strict block' ?

[mneunomne]

I like it

• where does one find the ublock settings?
• disable on site / page - works same as now with ctrl-click ?
• perhaps just 'strict' instead of 'strict block' ?

Agreed.

Maybe the "?" can go to the top instead?

The gear icon we will use the same as uBlock I guess, which has three gears:

[mushon]

here's a (basic) prototype: https://www.figma.com/proto/UEvj2moMOJDFb3Brc95shq/ad_view?page-id=0%3A1235&node-id=0%3A2012&viewport=382%2C48%2C1.19&scaling=min-zoom&starting-point-node-id=0%3A2012

[dhowe]

maybe we need to rename 'strict' as something more daunting, like 'extreme' blocking... we want to avoid people using this regularly as it basically disables adnauseam (and replaces it with ub)

[mushon]

Disabled / Just block / Block & click

UBlock Options: Just block Block Extreme blocking Strict block Block onlyl Full options: Block & click Enabled Full on! … We can also pop a confirmation dialogue that would make sure that if you go for block only you are disabling the main reason you installed this and that it would only do that on this domain.

[mneunomne]

maybe we need to rename 'strict' as something more daunting, like 'extreme' blocking... we want to avoid people using this regularly as it basically disables adnauseam (and replaces it with ub)

@dhowe Actually not. Because strict blocking doesn't unables ad collection, just decreases it. If you use uBlock together with Adn some ads still go through and are collected. Because some ads are not unrendered by uBlock but rather are just hidden with cosmetic filters as well. So I think Strict is the most appropriate name

[mneunomne]

For example, google search ads can still be collected with Strict Block enabled (and uBlock enabled):

[mneunomne]

here's a (basic) prototype: https://www.figma.com/proto/UEvj2moMOJDFb3Brc95shq/ad_view?page-id=0%3A1235&node-id=0%3A2012&viewport=382%2C48%2C1.19&scaling=min-zoom&starting-point-node-id=0%3A2012

@mushon i like the drop down, but i would say it doesnt seem so necessary on the "settings" part. The Adnauseam settings is more necessary to the avarage user then the ublock settings menu. The uBlock settings menu (in my view) would be more for the advanced user.

And one bad news.... Our menu now is 320px wide and not 385px We had to change it to support have support in certain browsers...

[dhowe]

@mushon i like the drop down, but i would say it doesnt seem so necessary on the "settings" part. The Adnauseam settings is more necessary to the average user then the ublock settings menu. The uBlock settings menu (in my view) would be more for the advanced user.

@mneunomne I agree with this, ADN settings likely gets clicked much more frequently -- do you think it is necessary in the menu? If so, then maybe just the small ub icon we have now

[mushon]

OK, now in 320px (I had to change the header as well). Here's what's different:

• help moved to top left
• toggle reordered
• added dividers to toggle
• gear moved to the right and will take to ADN settings (and a link to uBlock from there)
• Scaling:
  • changed list type size
  • changed logo size
  • changed button proportions
  • DNT notice is trimmed and would require animation

Figma prototype here

[dhowe]

Getting quite close... @mneunomne do you think we need ublock settings accessible from menu? if so, we could use another tiny icon, like the '?' (I had used 'µ'), either on the top right corner, or.. if we change the text to 'strict' rather than 'strict block', there's still room on bottom row...

[mneunomne]

I would say we need yes. Can't we squeeze both buttons in like this somehow?

(im using the gear is the uBlock icon btw)

[dhowe]

Basically we have [Active, Strict, Disable^] along the bottom, then 3 other small icons: ?, µ, and gear(s), each of which can go in any of the 4 corners... does this make sense to everyone ? if so, then @mushon can work his magic...

[mushon]

I feel like µ is not communicating. Maybe an “inspect” type icon may also work, also switched to "just block":

[dhowe]

I could go either way on the ublock icon settings - it is an advanced feature that only few experts use (who may already be familiar with µ) - but perhaps it should swap with the FAQ icon, which is more likely to be needed by beginners?

same with 'just block' , though as @mneunomne mentions there is still hiding happening -- but I wonder if 'active' should be the smallest icon when it is what we want people to select

[mneunomne]

I think the ublock icon is good because our advanced users already know it. And some people even have requested a way to activate the uBlock menu directly somehow... I think it's fine if its cryptic, since it is not inteded for the avarage user anyway.

And we should remember that perhaps advanced users are the minory, but are probably the users that we make sure that we don't loose because we are doing things more difficult for them.

[mushon]

Another attempt. If active is first I think it gives it more prominence

• we can use an icon based on the uBlock icon:

[dhowe]

perhaps a blue (or gray) version of

[mushon]

[mneunomne]

this looks good now, what do you think @dhowe ?

[dhowe]

looks quite good -- I guess my only concern is that of all the icons, the ublock one is the least commonly used (at least for the average user) yet it is the biggest and most prominent... so I might switch that with the '?' icon, which is also closer to our current design

users looking for that icon will find it, even if small

[mneunomne]

For some reason I like it therem but im not an avarage user... But still I think we should keep the advanced users as priority somehow. (I would say Adnauseam itself is an "advanced adblocker", usual public might just be using "AdBlocker")

[mushon]

I suggest to switch the uBlock icon with the gear. I think this does the trick:

[mushon]

maybe better a outline:

[mneunomne]

Okay, so I will start implementing this. @dhowe I think we should make a separate branch for this feature change. And keep the master clean until we have it 100%. So we don't stop possible release-fix from the master along the way...

[mneunomne]

@dhowe I still wonder about 2 things in the menu:

1. Naming: maybe strickt/active/disabled? "Block only" doesnt sound very clear to me, "Strict" i think is perfect for what it does. We can also go with uBlock new naming "Trusted/Untrusted/Regular" idk...
2. Do we need the dropdown? I think its better that we only implement on disable/strict on domains.

[dhowe]

As discussed, we do need the drop-down for the site/domain distinction. Strict vs Block-only, not sure... What we want to avoid is people clicking that button frequently, as this essentially disables ADN's defining function, so it should be framed as diminished rather than added functionality

[dhowe]

@mushon -- appearance for 'disabled' and 'strict-blocked' states?

[mneunomne]

This is when the page is blocked from "My Rules":

[mushon]

@mushon -- appearance for 'disabled' and 'strict-blocked' states?

not sure I understand the question

@mneunomne I see you have access to the Figma file. Let me know if you're missing anything there (you can also comment inside the file itself)

[dhowe]

perhaps this is in the figma already? what the menu and icon should look like, after adn is disabled for the page, or strict-blocked for the page (probably two different colors?)

[mushon]

Is it something we may solve like this?