834828 - Make Mixed Content Doorhanger More Discoverable

Status: RESOLVED WONTFIX

(Firefox :: Security, defect)

Description

[Tanvi Vyas[:tanvi]]

In the current design at http://people.mozilla.com/~lco/ProjectSPF/Mixed_Content/Mixed_Content_Spec/, the doorhanger should automatically appear (dismissed = false) the first 3 times the mixed content shield/doorhanger appears on a firefox profile.  Note, this is not per site.

Comment 1

[Larissa Co [:lco]]

Dolske, Shorlander and I discussed this today, and we decided to try something a little more lightweight than showing the doorhanger. We also came to the conclusion that showing the user the doorhanger initially doesn't really guarantee that he will remember how to use it later on.

So currently, we plan to explore a couple of ideas (maybe in combination):
- animating the arrow panel when it appears
- some light animated cue (or shine) on the arrow panel or icon

Dolske, Shorlander, how do you guys want to prototype these?

Comment 2

[Brian Smith (:briansmith, :bsmith, use NEEDINFO?)]

The way the lock icon slides in and out on the Fennec address bar makes it really noticable. Perhaps we should use that kind of sliding animation for all doorhangers (or all doorhangers that don't pop open by default)? Flash CtP has similar discoverability probblem, so perhaps they should be solved together.

Comment 3

[Larissa Co [:lco]]

(In reply to Brian Smith (:bsmith) from comment #2)
> The way the lock icon slides in and out on the Fennec address bar makes it
> really noticable. Perhaps we should use that kind of sliding animation for
> all doorhangers (or all doorhangers that don't pop open by default)? Flash
> CtP has similar discoverability probblem, so perhaps they should be solved
> together.

Yep, one idea was to slide the arrow panel in. And I think it's worth using as a general approach, if it's successful. CtP might need something a bit heavier, but maybe not!

Comment 4

[Tanvi Vyas[:tanvi]]

Larissa, is there any update on the sliding/animation for the Mixed Content Blocker doorhanger?

Comment 5

[Tanvi Vyas[:tanvi]]

Questions about the discoverability of the mixed content blocker were brought up in 841613.  Pasting the info here for reference:


(In reply to Alex Keybl [:akeybl] from comment #13)
> I'm nominated this as a good use case for determining whether the current UI
> is discoverable enough for our end users, in this simple use case. Does the
> user need to discover the shield themselves to workaround, or can we add a
> dialog/glow similar to what we do for CTP?

We have discussed the discoverability of the Mixed Content Blocker doorhanger at length.  We didn't want to show the user the doorhanger every single time they encountered a mixed content warning because the page may work perfectly fine with the mixed content loaded.  Also, this would contribute to security warning fatigue.  Our first proposal was to show the doorhanger the first 3 times a user encounters any page with mixed content (so 3 times per browser, not 3 times per user).  After further thought, UX had some other ideas being discussed in bug 834828.

Note that Chrome's mixed content blocker is also a shield/badge in the location bar that does not provide any information/text unless you actually click on it.

IE's Mixed Content Blocker (which blocks mixed content iframes and hence is triggered or airmozilla) shows a light yellow bar at the bottom of the page.

Comment 6

[Zandr Milewski [:zandr]]

Aside from the discoverability, I'm not having any luck with the "Disable protection on this page" preference sticking. Am I missing something?

https://xkcd.com is my test case; CSS is not served over https.

Comment 7

[Larissa Co [:lco]]

(In reply to Tanvi Vyas [:tanvi] from comment #4)
> Larissa, is there any update on the sliding/animation for the Mixed Content
> Blocker doorhanger?

we might be able to use the work we're doing for "invisible" CtP, where the doorhanger is shown for a brief period of time, and then hidden. However, this might still cause user fatigue if it's shown every time the user visits the page. For CtP, we're trying some clever ways to remember the user's settings. We might be able to do this with Mixed Content as well, but I need to think further about how it applies.

Comment 8

[Mike Beltzner [:beltzner, not reading bugmail]]

Came here because for some reason Firefox was loading xkcd over https (ohai, zandr!) and I couldn't tell why the page was all of a sudden broken.

Madhava has successfully convinced me that in the ideal cases of blocking mixed content (ie: when it's nefarious, not accidental) the lack of malicious content will not be disturbing to the user. Further, the missing content will either be invisible (script) or called out (plugin blocks) and so the user will know what's going on.

CSS is an interesting case. We block it (for what I'm assured is good reason) and the result can either be effectively invisible, or as in the case of https://xkcd.com , terribly visible.

Perhaps we should show the doorhanger in certain conditions, such as blocked CSS content, in a way that explains that we've blocked something and that's bad. Or perhaps the shield just needs some animation or colour to call a bit more attention to it.

It's easy to make these comments from the cheap seats; I know it's a complex issue. :)

Comment 9

[Larissa Co [:lco]]

(In reply to Mike Beltzner [:beltzner] from comment #8)
> Came here because for some reason Firefox was loading xkcd over https (ohai,
> zandr!) and I couldn't tell why the page was all of a sudden broken.

If you want, you can add a note about it to this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=844556 

> 
> Madhava has successfully convinced me that in the ideal cases of blocking
> mixed content (ie: when it's nefarious, not accidental) the lack of
> malicious content will not be disturbing to the user. Further, the missing
> content will either be invisible (script) or called out (plugin blocks) and
> so the user will know what's going on.

To provide more context about how much our current Mixed Content implementation is affecting UX, we're currently tracking the sites that contain mixed content here: https://bugzilla.mozilla.org/show_bug.cgi?id=844556 

mwobensmith looked at the Alexa top 1000 and created a list of sites with mixed content. In general, most of those sites aren't typically loaded over https, and most don't have CSS issues. Our next step is to figure out which we sites are breaking on FF compared to other browsers.

> 
> CSS is an interesting case. We block it (for what I'm assured is good
> reason) and the result can either be effectively invisible, or as in the
> case of https://xkcd.com , terribly visible.
> 
> Perhaps we should show the doorhanger in certain conditions, such as blocked
> CSS content, in a way that explains that we've blocked something and that's
> bad. Or perhaps the shield just needs some animation or colour to call a bit
> more attention to it.
> 

Not a bad idea to target CSS specifically if we know that's where the majority of UX issues occur. We've also been considering reaching out to specific large companies or issuing some kind of advisory to get them to fix their site, rather than creating more UI for the user to deal with.

The main point I want to make is that before we decide we need additional UI or intervention we should make sure it's commensurate with how much of the Web we're breaking.

> It's easy to make these comments from the cheap seats; I know it's a complex
> issue. :)

Comment 10

[Tanvi Vyas[:tanvi]]

(In reply to Peter Bengtsson [:peterbe] from comment #0)
> The little "shield looking" icon to the left of the URL in the address bar
> is not "loud" enough. Considering that it's my only way to get to the
> content I think its color should be bolder and maybe pulsate the icon or
> some other animation.
>

Comment 11

[Tanvi Vyas[:tanvi]]

Comment 10 is from bug Bug 891378, which was filed with the title "Mixed content blocker is not warning loudly enough".

Can we revisit a few options:

1) Make the shield icon into an animation (make it flash, swoop, highlight, or something)

2) Pop open the Mixed Content Doorhanger the first 3 times the user encounters the shield (to alert the user that it exists) and then have it auto-dismissed after that.

Will either of these fly with the UX and frontend teams?  Is an animation even possible with the current doorhanger implementation?

Comment 12

[Larissa Co [:lco]]

I'd like to unify whatever we do with other notification icons in the Address Bar because we can't just have a point solution for Mixed Content. I'm bringing this up with the respective teams and will give an update soon.

My initial proposal is to:
1. Make the icon change color / flash when the page is initially loaded
2. (potentially only in certain cases, since this can get annoying rather quickly) Have the doorhanger animate in and automatically animate out

Comment 14

[Brian Smith (:briansmith, :bsmith, use NEEDINFO?)]

(In reply to Tanvi Vyas [:tanvi] from comment #11)
> 1) Make the shield icon into an animation (make it flash, swoop, highlight,
> or something)

Sounds reasonable.

> 2) Pop open the Mixed Content Doorhanger the first 3 times the user
> encounters the shield (to alert the user that it exists) and then have it
> auto-dismissed after that.

Please no.
1. Based on experience with other features that tried this, everybody hates auto-opening doorhangers.
2. We don't want to encourage users to unblock mixed content unless/until they've experienced an actual usability issue; otherwise, we're not only crying wolf in many situations, but we're also encouraging them to make the less-secure choice, which goes against Larissa's design principals.
3. It is inconsistent UX. IMO, we should never be doing something different the first X times. What if somebody else encountered the blocked mixed content the first three times before the user uses the computer. That second user would not benefit from any improvement in discovering the feature that only shows up the first X times.

(In reply to Larissa Co [:lco] from comment #12)
> My initial proposal is to:
> 1. Make the icon change color / flash when the page is initially loaded

Again, seems reasonable to me.

> 2. (potentially only in certain cases, since this can get annoying rather
> quickly) Have the doorhanger animate in and automatically animate out

This seems like it would be a lot of work for something that is very likely to be very annoying.

Comment 15

[Tanvi Vyas[:tanvi]]

Comment from bug 873349:
(In reply to Ray Satiro from comment #15)
> Created attachment 781167 [details]
> Mockup of notification bar if it were to warn of mixed content
>
> I'd prefer some type of notification other than the white icon in the
> awesome bar. I've attached a screenshot to help visualize what I described.
> Thanks

Attachment url: https://bugzilla.mozilla.org/attachment.cgi?id=781167&action=edit

Comment 16

[Ivo Anjo]

I'm not a developer, but I've been a long-time Firefox user since the Phoenix times, and yeah I have to say that it took me a while to notice the shield on the address bar that appeared on broken pages (I use newsblur a lot, and some others).

The yellow notification bar I think would be a step up for discoverability. Or maybe just adding some text next to the icon? Like for instance right now I have a green lock with "Mozilla Foundation (US)" in the location bar. Maybe I could have the shield with "Some Content Blocked"? That would definitely make it more clear that something was up.

As always, thanks for all your work on Moz. Really appreciate it :)