1125230 - [UX] Create specs for V1 of control center

Status: RESOLVED FIXED

(Firefox :: General, defect)

Description

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Iterating on the work coming out of bug 1119786, we need to define all the states we think would be useful for a V1 of control center.

Objectives of this bug:
- Enumerate and mock up the states for V1
- Explore enough of the scenarios beyond V1 to make sure we're not blocking future development with the short-term work.

Comment 1

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

This is still not complete, but I'd like to get some broader feedback at that point.
Here's the latest version: http://invis.io/GD2739CRH

Flagging a few people for feedback – feel free to comment either here or directly in Invision.

Comment 2

[Ash Grigas]

commented on the invision

Comment 3

[[:mmc] Monica Chew (no longer reading bugmail)]

Commented in invision. It's pretty nice!

Comment 4

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Attachment: Control Center v1 (wireframe spec)

Here's the (hopefully) final spec for Control Center v1. It is also on Invision for easier commenting: http://invis.io/T92BBH3FC

Please note that these comps are wireframe quality (so stylistic changes are still possible), but I think we're good in terms of structure and strings.

Comment 5

[Tanvi Vyas[:tanvi]]

Nice mock up Philipp!

Will this new design be in addition to the shield icon or used instead of the shield icon?

For Mixed Content Blocker, you probably need a mock up for the case where there is both mixed active content and mixed passive content on the page that says something like "Some insecure elements on this page have been blocked":
https://people.mozilla.org/~tvyas/mixedboth.html

And here are a couple more test pages in case they are useful when looking at the current behavior:
https://people.mozilla.org/~tvyas/mixedcontent.html - contains mixed active content only
https://people.mozilla.org/~tvyas/mixeddisplay.html - contains mixed display content only

For an HTTP page, the mockups use the word "unencrypted" but for mixed content they use the word "insecure".  Is this intentional? Perhaps we should use the same word in both places.

The text for when MCB is disabled says "blocked" when you may have meant to change that to "unblocked" or "allowed".  The current text for this case says: 
This website contains interactive content that isn't encrypted (such as scripts). Other people can view your information or modify the website's behavior.

Comment 6

[Ash Grigas]

(In reply to Tanvi Vyas [:tanvi] from comment #5)
> Nice mock up Philipp!
> 
> Will this new design be in addition to the shield icon or used instead of
> the shield icon?
> 
> For Mixed Content Blocker, you probably need a mock up for the case where
> there is both mixed active content and mixed passive content on the page
> that says something like "Some insecure elements on this page have been
> blocked":
> https://people.mozilla.org/~tvyas/mixedboth.html
> 
> And here are a couple more test pages in case they are useful when looking
> at the current behavior:
> https://people.mozilla.org/~tvyas/mixedcontent.html - contains mixed active
> content only
> https://people.mozilla.org/~tvyas/mixeddisplay.html - contains mixed display
> content only
> 
> For an HTTP page, the mockups use the word "unencrypted" but for mixed
> content they use the word "insecure".  Is this intentional? Perhaps we
> should use the same word in both places.
> 
> The text for when MCB is disabled says "blocked" when you may have meant to
> change that to "unblocked" or "allowed".  The current text for this case
> says: 
> This website contains interactive content that isn't encrypted (such as
> scripts). Other people can view your information or modify the website's
> behavior.

Philipps offline but I'm working with him on polaris work so I can answer some of your questions - the shield is replaced for mixed content and will instead be used to represent when tracking protection is enabled.

Comment 7

[Tanvi Vyas[:tanvi]]

(In reply to agrigas from comment #6)
> Philipps offline but I'm working with him on polaris work so I can answer
> some of your questions - the shield is replaced for mixed content and will
> instead be used to represent when tracking protection is enabled.

The shield icon has been associated with Mixed Content Blocker since it was released in 2013, so removing it from mixed content might cause confusion.  Since Tracking Protection is a relatively new feature that currently has a limited number of users, what if we create a new icon for it?

Also, in the proposed flow, how will the user know that mixed content is being blocked on a page without the shield doorhanger?  Currently the doorhanger is a signal that their is content being blocked on the page.  Without a doorhanger, the page looks like any other SSL page with a lock icon.  If it is not functioning properly, the user won't know to click on the lock icon and disable protection.

Comment 8

[Tanvi Vyas[:tanvi]]

Or perhaps the proposal is that the shield be used in Control Center for Tracking Protection, but that the shield doorhanger continues to behave the same way it currently does (for both Mixed Content Blocker and Tracking Protection).  That would work.

Comment 9

[Ash Grigas]

I'll let philipp answer that as he's more familiar with that piece of the design.

Comment 10

[Tim Taubert [:ttaubert] (inactive)]

There has btw been some discussion about the emphasis we seem to be planning to put on EV certs here:

https://twitter.com/dveditz/status/571942983014068224

Comment 11

[[:mmc] Monica Chew (no longer reading bugmail)]

Comment on attachment 8569784 [details]
Control Center v1 (wireframe spec)

Commented on invision.

Comment 12

[Ash Grigas]

Attachment: updated control center TP.png

updated wireframe spec that create more consistency in use of tp shield icon when enabled and disabled and consistently shows tracker count

Comment 13

[Javaun Moradi [:javaun]]

Do we need a visual design bug here to be added to backlog for 39.2 starting Tuesday?

Comment 14

[Ash Grigas]

I believe Philipp created one already. Ping him when you can to verify.

Comment 15

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Attachment: Control Center v1 (wireframe spec)

Updated some copy in the wireframe and removed inconsistencies.

Comment 16

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

I filed bug 1140774 for the visual design.

Comment 19

[[:mmc] Monica Chew (no longer reading bugmail)]

Hey Ash, re this comment from https://mana.mozilla.org/wiki/display/FIREFOX/Polaris+Tracking+Protection+and+Control+Center+UX

"Five tracking elements detected. Protection is disabled for this site."

It is not a good idea to give the user a count of elements that have been detected but not blocked. For example, on weather.com, blocking 4 elements prevents another 40-odd domains from loading, many of which are tracking elements. So the flow would be

1) "40 tracking elements detected. Protection is disabled for this site"
2) Users enable tracking protection
3) "5 tracking elements blocked"

which is a very confusing message to have to explain to users. IMO, revealing the number of detected elements is not worth it. Francois, please follow up with Ash and Philipp about this.

Thanks,
Monica

Comment 20

[François Marier [:francois]]

I agree with Monica, I would suggest:

- changing "(5) Five tracking elements detected." to "Tracking elements detected."
- keeping "(5) Five attempts to track your online behavior have been blocked." as it is

Comment 21

[Ash Grigas]

(In reply to François Marier [:francois] from comment #20)
> I agree with Monica, I would suggest:
> 
> - changing "(5) Five tracking elements detected." to "Tracking elements
> detected."
> - keeping "(5) Five attempts to track your online behavior have been
> blocked." as it is

That is fine with me. Sorry I was late to the thread - copy still hasn't been finalized as this feature now is on pause. I will update the wiki for when we get to that point and have a timeline for release.

Comment 22

[Ash Grigas]

(In reply to [:mmc] Monica Chew (no longer reading bugmail) from comment #19)
> Hey Ash, re this comment from
> https://mana.mozilla.org/wiki/display/FIREFOX/
> Polaris+Tracking+Protection+and+Control+Center+UX
> 
> "Five tracking elements detected. Protection is disabled for this site."
> 
> It is not a good idea to give the user a count of elements that have been
> detected but not blocked. For example, on weather.com, blocking 4 elements
> prevents another 40-odd domains from loading, many of which are tracking
> elements. So the flow would be
> 
> 1) "40 tracking elements detected. Protection is disabled for this site"
> 2) Users enable tracking protection
> 3) "5 tracking elements blocked"
> 
> which is a very confusing message to have to explain to users. IMO,
> revealing the number of detected elements is not worth it. Francois, please
> follow up with Ash and Philipp about this.
> 
> Thanks,
> Monica

Monica - anything you want noted/captured before you leave you can add as a comment on the wiki since this bug is closed: https://mana.mozilla.org/wiki/display/FIREFOX/Polaris+Tracking+Protection+and+Control+Center+UX

Comment 23

[Kostas]

I'd like to make one suggestion please:
the 
> (5) Five tracking elements detected
> (5) Five attempts to track you
to be dash-underlined, 
and whenever you mouseover them,
to display in a popup the URLs that have been blocked.

Comment 24

[Ash Grigas]

(In reply to Kostas from comment #23)
> I'd like to make one suggestion please:
> the 
> > (5) Five tracking elements detected
> > (5) Five attempts to track you
> to be dash-underlined, 
> and whenever you mouseover them,
> to display in a popup the URLs that have been blocked.

Thanks for the suggestion but we have already defined this UI for this ticket. We can incorporate this feedback for future iterations.

Comment 25

[David Lawrence [:dkl]]

Mistakenly filed against Firefox 38 and should be instead 38 Branch. Sorry for the spam. dkl