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

[karenkliu]

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]

@cezaraugusto Is this technically feasible?

[bsclifton]

@karenkliu I know @too4words and others have been looking at webcompat. I think we'd need to lean on the work they're doing, as there isn't a clear indicator from the browsers perspective on whether it's working correctly or not.

There are folks doing analysis for shields up/down to find differences which may be webcompat problems

[karenkliu]

@bsclifton Yep - this is more of a stopgap solution while they are working on getting a fully automated webcompat solution up and running. We are hoping that in the future the user does not need to interact with the Shields panel at all, because Shields is smart enough to have the right settings per the work the research team is doing. However, in the meantime we still need to provide the user with something because the worst case scenario is that they assume Brave Browser is glitchy and switch right back to Chrome. Right now the small percentage of self-selected users who reach out to Brave support are typically met with a first line instruction of "have you tried turning it off?". The design can use this temporary solution to take care of those cases and help retention for new users.

[bsclifton]

cc: @snyderp

[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

[karenkliu]

@snyderp That's the plan! They are working on the MVP version of what is to become #4262; this future design details out what the "report this site is broken to brave" flow looks like integrated into the Shields panel.