AdGuardDNS icon indicating copy to clipboard operation
AdGuardDNS copied to clipboard

Published 20 hours ago • verified publisher icon AdguardTeam

Highlight dangerous filters in the user interface

Open Sergey-Lyapin opened this issue 10 months ago • 3 comments

Issue Details

Some filters break popular services, we should warn users about it by highlighting these filters in the UI. For example 1Hosts (Pro) breaks Facebook services. https://github.com/AdguardTeam/HostlistsRegistry/issues/50

Proposed solution

Highlight the filter with a color, text warning, etc.

Alternative solution

No response

Sergey-Lyapin avatar Apr 03 '24 10:04 Sergey-Lyapin

@Chinaski1 The idea is that we'd like to label some blocklists as problematic in HostlistsRegistry.

When a blocklist is labeled with this tag:

  1. It should be clear from the dashboard interface that the blocklist is problematic.
  2. When the user tries to enable it, we should warn them that this blocklist is known to be breaking stuff.

ameshkov avatar Apr 05 '24 10:04 ameshkov

Internal ID: AGDNS-2041/42

Chinaski1 avatar Apr 05 '24 11:04 Chinaski1

Here are some considerations:

Icon Choice

  • Informational Icon: A simple information icon is a good choice as it's universally understood and easily recognizable.
  • Shield Icon: While a shield icon might be visually appealing, it might not be as intuitive for indicating a warning. Users might associate it with protection rather than a caution.

adgdnsiconwarning

Placement of the Icon

After the List Name: This is a logical placement as it directly associates the warning with the specific list.

Hover Behavior

Tooltip: A tooltip that appears when the user hovers over the icon or list name is a clean and efficient way to display the warning.

Warning Message Content

  • Conciseness: Keep the warning message brief and to the point. Avoid technical jargon and use clear language.
  • Actionable Advice: If possible, provide a specific recommendation or course of action based on the issue.

Alternative: Advisory Link

  • Clear Indication: An advisory link placed next to the homepage link is a good visual cue.
  • Hover Behavior: A tooltip or a window can be used to display the detailed warning when the user hovers over or clicks the link.

Example

  • Informational Icon: 1Hosts Pro ⓘ
  • Advisory Link: 1Hosts Pro | Advisory Homepage Source
  • Tooltip Message:

Strict: Prioritizes privacy & safety over functionality,
e.g, ||graph.facebook.com^

KnightmareVIIVIIXC avatar Jul 02 '24 00:07 KnightmareVIIVIIXC