Closed Bug 1095640 Opened 5 years ago Closed 5 years ago

Update UX for site identity popup to handle tracking blocking

Categories

(Firefox for Android :: Theme and Visual Design, defect)

35 Branch
defect
Not set

Tracking

()

RESOLVED FIXED
Firefox 36
Tracking Status
fennec 36+ ---

People

(Reporter: Margaret, Assigned: Margaret)

References

(Blocks 1 open bug)

Details

Attachments

(6 files, 4 obsolete files)

Follow-up to bug 1063831 to refine the for showing even more things in the site identity popup.
Depends on: 1095643
Depends on: 1095143
As a first step, could we unify the hanger's with the same background color? It's blue ATM :\ see screenshots.
^ :)
Flags: needinfo?(mark.finkle)
(In reply to Anthony Lam (:antlam) from comment #1)
> Created attachment 8523159 [details]
> Screen Shot 2014-11-14 at 1.08.49 PM.png
> 
> As a first step, could we unify the hanger's with the same background color?
> It's blue ATM :\ see screenshots.

As I mentioned in bug 1095143, this is partially due to bug 1095643. Ian originally designed it to have two colors so that the notification would be visually distinct from the site identity information.

We need to make sure we have a design that will work when we show both the identity information and the mixed content/tracking notification at the same time.
What Margaret said. Let's fix the Identity + (Mixed Content or Tracking) mode and see how the Doorhanger looks.
Flags: needinfo?(mark.finkle)
Ah, ok. Margaret helped clear this up for me. 

Will come back with something soon.
(In reply to Anthony Lam (:antlam) from comment #5)
> Ah, ok. Margaret helped clear this up for me. 
> 
> Will come back with something soon.

I made a spreadsheet that tries to explain this UI:
https://docs.google.com/spreadsheets/d/1HpcQAOBrAjjetBDOn6y5zsxGEXjEhOG-MX1DWEB7mL8/edit?usp=sharing
I can work with antlam to solve this bug.
Assignee: nobody → margaret.leibovic
Blocks: site-id-v2
Attached file icon_shield.zip (obsolete) —
Attaching shield and the crossed-out shield icon.

Still to UX:

 - Show indicator when there is more than just the Shield icon (i.e. lock, larry, etc)

After that ^, it would seem that the UX issue around the double doorhanger prompt (https://bugzilla.mozilla.org/attachment.cgi?id=8513923&action=edit) should be addressed as a part of a larger "better doorhangers" discussion.

I think we should file follow up bugs for that and tackle it as a part of meta bug 1058818. We need to update our doorhangers/ wrangle all the different kinds and consolidate them a bit.
Attached file icon_shield2.zip (obsolete) —
Oops, forgot to account for transparency. 

Adjusted these new icons but snapping all the paths to a grid caused for lots of weird shape layer collisions. 

tl;dr I just converted down from a large bitmap (which is usually not what I do but...), let's see how these look. If they're blurry, I can refine them but wanted to post something before I head out.
Attachment #8524973 - Attachment is obsolete: true
Attached image prev_sitesecgroup1.png
Attaching current idea for indicator to show multiple collapsed ID/security elements.
I'm morphing this bug to just be about updating the icon. I don't think we have ideas for a quick way to fix the popup itself, so we can move that work to other bugs.
Summary: Update UX for site identity popup to handle tracking blocking → Update tracking/mixed content protection disabled icon
(In reply to :Margaret Leibovic from comment #11)
> I'm morphing this bug to just be about updating the icon. I don't think we
> have ideas for a quick way to fix the popup itself, so we can move that work
> to other bugs.

Actually, I change my mind, there is more we need to do here.

Right now when you disable tracking protection we show the string "This page is tracking your online activity." in the doorhanger. That sounds pretty scary. I think we need to work on the language we're putting in these popups.

I also realized that we'll need a large broken shield icon for the notification in addition to the one we display in the urlbar.

antlam, have you been able to test this feature on your phone? Can you audit it for the UX specific to the tracking protection? I feel like we've spent time talking about the general popup UX, but we should focus on what we're doing in this new feature.

To test this, you just need to enabled DNT and flip "browser.trackingprotection.enabled" in about:config, then go to a site that has tracking (e.g. espn.com).
Flags: needinfo?(alam)
Summary: Update tracking/mixed content protection disabled icon → Update UX for site identity popup to handle tracking blocking
tracking-fennec: --- → ?
(In reply to :Margaret Leibovic from comment #12)
> antlam, have you been able to test this feature on your phone? Can you audit
> it for the UX specific to the tracking protection? I feel like we've spent
> time talking about the general popup UX, but we should focus on what we're
> doing in this new feature.

As per our chat on IRC let's do the following:

Blocking enabled:
"Tracking protection enabled
Parts of the page that track your online activity have been blocked. 
Learn More. "

Blocking disabled: 
"Tracking protection disabled
Parts of this page may track your activity.
Learn More."
Attached file icon_shield3.zip
Attaching new icon pack with the graphic that exists in the doorhanger :)
Attachment #8524985 - Attachment is obsolete: true
Flags: needinfo?(alam)
Screenshot with new strings/assets.
Attachment #8526478 - Attachment is obsolete: true
Attachment #8526479 - Attachment is obsolete: true
Attachment #8528685 - Flags: review?(michael.l.comella)
Comment on attachment 8528685 [details] [diff] [review]
Update UX for site identity popup to handle tracking blocking

Review of attachment 8528685 [details] [diff] [review]:
-----------------------------------------------------------------

mfinkle could also review this if he gets to it first.
Attachment #8528685 - Flags: review?(mark.finkle)
Comment on attachment 8528685 [details] [diff] [review]
Update UX for site identity popup to handle tracking blocking

Did you trimage the image?
Attachment #8528685 - Flags: review?(mark.finkle) → review+
(In reply to Mark Finkle (:mfinkle) from comment #21)
> Comment on attachment 8528685 [details] [diff] [review]
> Update UX for site identity popup to handle tracking blocking
> 
> Did you trimage the image?

I used pngcrush, since there's no trimmage download for OSX.
https://hg.mozilla.org/mozilla-central/rev/bf5ee5924070
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 36
tracking-fennec: ? → 36+
You need to log in before you can comment on or make changes to this bug.