Detect when a user might be experiencing a webcompat issue and help turn off Shields

Description

Currently, users in the general audience attribute webcompat issues to the browser or website not working correctly and don’t identify it as a Shields setting issue. Help the user fix webcompat issues on their own by detecting when they are possibly experiencing a webcompat issue and surfacing instructions to fix it.

Designs should solve for:

• Education around web incompatibility issues
• Fixing web incompatibility issue (Non-expert users should be able to fix incompatibility themselves)

Designs

Scenario Detect when a user may be experiencing a webcompat issue based on this behavior:

• User refreshes the webpage two or more times within 30 seconds of a page loading
• User copies the URL from the address bar

Once detected, surface a tooltip pointing to Shields icon instructing user to turn off Shields:

The user clicks on the link in the tooltip, which opens the Shields panel for them, and has the Shields off toggle highlighted:

Play around with the prototype on your own here (it’ll be higher res): https://framer.cloud/ihOau/

The text should say “Site not working? Try bringing Shields down. [ ] Don’t show this again.”

Add an option to show the help tip again in Settings if the user selects “Don’t show this again.”

Interaction Notes

This is the animation I used for the highlight: circle1animationshow = circle1.animate({ properties: {scale: 1.2, opacity:1} time: 0.5 curve: "ease-in" }) circle1animationgrow = circle1.animate({ properties: {scale:1.625, opacity:0} time: 1 curve: "ease-out" }) circle1animationreset = circle1.animate({ properties: {scale:1} time: 0 }) circle2animationshow = circle2.animate({ properties: {scale: 1.2, opacity:1} time: 0.5 curve: "ease-in" }) circle2animationgrow = circle2.animate({ properties: {scale:1.8, opacity:0} time: 1 curve: "ease-out" }) circle2animationreset = circle2.animate({ properties: {scale:1, opacity: 0} time: 0 })

• Avoid annoying the user with this tooltip by limiting to showing it once per day.
• Avoid creeping out the user with this tooltip by disabling detection when user is visiting websites of sensitive content: pornography / adult entertainment, tobacco or healthcare products, dating or similar service, political sites, pharmaceutical or healthcare sites

[karenkliu]

@snyderp That’s the plan! They are working on the MVP version of what is to become https://github.com/brave/brave-browser/issues/4262; this future design details out what the “report this site is broken to brave” flow looks like integrated into the Shields panel.

[pes10k]

I think this is a great idea. Would also be good to incorporate it with the “report this site is broken to brave” feature that @antonok-edm and @alexwykoff are working on