Contextual hint first time we show the tracking protection shield

RESOLVED FIXED in Firefox 42

Status

()

defect
RESOLVED FIXED
4 years ago
4 years ago

People

(Reporter: Margaret, Assigned: mhaigh)

Tracking

(Depends on 1 bug)

35 Branch
Firefox 42
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox42 verified, firefox43 verified, firefox44 verified)

Details

Attachments

(5 attachments, 9 obsolete attachments)

40 bytes, text/x-review-board-request
liuche
: review+
Margaret
: review+
sebastian
: review+
Details
288.55 KB, image/png
Details
18.23 KB, application/zip
Details
191.22 KB, image/png
Details
68.70 KB, image/png
Details
(Reporter)

Description

4 years ago
We should teach people what this shield means the first time we show it.
I think we need to make it more obvious that the shield is there and they should trigger the doorhanger to "learn more" and see what this shield is all about.

As we talked about, I'm planning to see if we can do something similar to bug 1011712, but with the shield icon on the left (plus obvious copy adjustment). 

More designs to follow, this is important cause it will help the users notice that something is different and throttle their expectations
Flags: needinfo?(alam)
Posted image prev_mob_tip.png (obsolete) —
I'd like to pick up from the UX left behind in bug 1011712 and see if we can take a similar approach here.

I believe that most users will begin to scroll as soon as they see something being loaded. So, they'll effectively hide the toolbar. And since we don't show the Shield until the page is finished loading, we'll have to roll down/animate in the toolbar to show this tip. 

This animation will bring attention to this state of the toolbar. If the user then triggers the doorhanger, we should never roll this in again. 

I'm really trying to not annoy our users here and I think that this more conservative approach will compliment the First Time UX well.

Can we get a build to test this?
Flags: needinfo?(alam)
(Assignee)

Updated

4 years ago
Assignee: nobody → mhaigh
(Assignee)

Comment 3

4 years ago
Really basic version here: https://dl.dropboxusercontent.com/u/7163922/1177612.apk
Flags: needinfo?(alam)
Nice! 

Questions: 
 - Can we center the text and make it our verified green?
 - Can we remove the favicon when this comes in?
 - what variables/options do we have in terms of how long we can persist this message?
Flags: needinfo?(alam) → needinfo?(mhaigh)
Saw a build from Martyn today (https://dl.dropboxusercontent.com/u/7163922/1177612.apk)

Feedback:
 - Type should read "Tracking Protection Enabled" not "Tracking enabled"
 - If we remove the favicon, can we actually place the shield 7dp from the left edge of the URL bar?
(Reporter)

Comment 6

4 years ago
(In reply to Anthony Lam (:antlam) from comment #5)

>  - If we remove the favicon, can we actually place the shield 7dp from the
> left edge of the URL bar?

Removing the favicon sounds out of scope for this bug...
Status: NEW → ASSIGNED
I've checked out the build in person. It looks good to me.

Leaving NI on Martyn to upload here.
(Assignee)

Updated

4 years ago
Blocks: 1183538
(Assignee)

Comment 9

4 years ago
Bug 1177612 - Part 1: Expose Dynamic Toolbar methods through BrowserApp; r?sebastian
Attachment #8633462 - Flags: review?(s.kaspari)
(Assignee)

Comment 10

4 years ago
Bug 1177612 - Part 2: Add view to layout file with associated changes; r?sebastian
Attachment #8633463 - Flags: review?(s.kaspari)
(Assignee)

Comment 11

4 years ago
Bug 1177612 - Part 3: Wire in layout changes and amend toolbar to correctly animate notification; r?sebastian
Attachment #8633464 - Flags: review?(s.kaspari)
(Assignee)

Updated

4 years ago
Flags: needinfo?(mhaigh)
I am pretty much against using the URLBar for displaying a textual hint. The URLBar already displays the URL or page title. Making it display another text reference, even temporarily, seems like a bad practice. If the goal of the hint is to draw attention to the shield, I can't imagine this implementation does a good job.
(Reporter)

Comment 13

4 years ago
(In reply to Mark Finkle (:mfinkle) from comment #12)
> I am pretty much against using the URLBar for displaying a textual hint. The
> URLBar already displays the URL or page title. Making it display another
> text reference, even temporarily, seems like a bad practice. If the goal of
> the hint is to draw attention to the shield, I can't imagine this
> implementation does a good job.

Thinking about this design a bit more, I have to say I agree with mfinkle... can we implement a popup that points to the shield to explain what it's doing? I feel like onboarding arrow popups are a common UX paradigm. That would also give us the opportunity to explain things a bit more and include a "Learn more" link.
Comment on attachment 8633462 [details]
MozReview Request: Bug 1177612 - Contextual hint first time we show the tracking protection shield; r?margaret

https://reviewboard.mozilla.org/r/13215/#review11947

Ship It!
Attachment #8633462 - Flags: review?(s.kaspari) → review+
Attachment #8633463 - Flags: review?(s.kaspari)
Attachment #8633464 - Flags: review?(s.kaspari)
I stopped the review after I found some issues. Just assign me again after looking at these:

* On my HTC Desire HD the shield icon and text overlap (see overlapping.png)

* The patch introduced some weird left padding in the url bar on my N9, is this intended? (see url-left-padding.png)

* On big tablets the centered text does not seem to be related to the shield in any way (see espn-enabled.png)
Flags: needinfo?(mhaigh)
(Assignee)

Comment 19

4 years ago
antlam: mfinkle: what's the take on this - I get the impression that we should rethink.  Shall we close this and we can open another bug if needs be for a better solution?
Flags: needinfo?(mhaigh)
Flags: needinfo?(mark.finkle)
Flags: needinfo?(alam)
Yes, I'd like to see the hint implemented some other way.
Flags: needinfo?(mark.finkle)
(Assignee)

Updated

4 years ago
Attachment #8633462 - Flags: review+
(In reply to Mark Finkle (:mfinkle) from comment #12)
> I am pretty much against using the URLBar for displaying a textual hint. The
> URLBar already displays the URL or page title. Making it display another
> text reference, even temporarily, seems like a bad practice. 

I don't agree that it's bad practice. 

The toolbar is our UI that is used to display information about the page/ web content that we're presenting. In that context, if Firefox is to do "something" this is where we show the user we're doing something. For example, Reader View icon, lock, caution sign, are all things pertaining to the page in view.

> If the goal of
> the hint is to draw attention to the shield, I can't imagine this
> implementation does a good job.

Again, the goal of this is not to draw attention to the shield, it is to notify users (that are looking for some hint as to why their page looks different) that something is happening. 

(In reply to :Margaret Leibovic from comment #13)
> Thinking about this design a bit more, I have to say I agree with mfinkle...
> can we implement a popup that points to the shield to explain what it's
> doing? 

This is far too intrusive to the user experience. My intention is to not draw too much attention to this because the user still just wants to browse their page. Popping up something in their face just because they loaded a link in Private Browsing isn't ideal.

> I feel like onboarding arrow popups are a common UX paradigm. That
> would also give us the opportunity to explain things a bit more and include
> a "Learn more" link.

That's what we're doing in bug 1175970 already. In the context of onboarding, so as not to surprise or annoy our users.

All in all, if we don't think we need to do a little bit of gentle "hand holding" with our users after switching on something like TP, then we can close this bug. I'm happy with In terms of UX, we already have bug 1175970 and even though we know most users will skim over that, I don't think we need to call out much more.

From a UX stand point, we don't want to annoy the user more and show anything like a popup in front of them just because they loaded a web page. The ideal solution is to place indicators over areas that are affected but that's not do-able in the interim.
Status: ASSIGNED → NEW
Flags: needinfo?(alam)
Status: NEW → ASSIGNED
I think there's some decision to be made about whether or not we need to do this "hand holding" here. Let's get some data to inform the conversation a bit more. In the meantime, maybe we could hold this behind Nightly to get more eyes on it, or hold off on it completely?

The builds that Martyn posted will be great for some user testing as well and I'll pick up that conversation with Gemma. Getting more data will also be necessary and we can track that work in bug 1184165.
I took a look at Martyn's build on Anthony's device. My general feeling is that the hint in the URL bar offers a reminder to users that the page 'looks funny'. Especially if there's a lot of text, users tend to dismiss pop-ups and large 'things to read' and considering this feature makes pages 'look funny' under many circumstances, I'd rather remind the user that there is a (good) reason for that.

I would like to propose that we turn it on in pre-release and actively solicit feedback (ie is it annoying, should it be improved [like not showing it after X number of private browsing sessions], it is helpful in reminding them what's going on, did they even notice it...). 

I like the idea of getting more eyeballs on this and it's easier to show it then describe it. We can remove it if users are finding it too intrusive.

My general concern is that TP definitely modifies the layout of webpages, and that implication is generally not going to be understood until users browse the web. I don't want them blaming Firefox for that, but rather understanding what's going on. The more help we provide users in educating them, the better - at least initially.

So really, let's put it to the test with our pre-release audience to get eyeballs and feedback from a larger group of folks.
Posted image prev_mob_tip2.png (obsolete) —
To address some UX concerns and implementation issues. I've come up with something that's a bit more explicit. 

At first, I wasn't so sure how explicit we wanted to be, but after more thought, I think we can/should take the more explicit route here (at least initially). But, we can also do some testing around this.

Coming in from the bottom of the toolbar, this tip would overlay the content (not push it down). It would also trigger the doorhanger if the user presses on it and effectively show them more info.

We will need to work out (with a more explicit design like this), at what point do we stop showing this tip? UX-wise, it seems to be a bit much to have this come in every time a page loads, indefinitely. But temporarily, it does serve it's purpose of attracting attention.

Worth noting here that Gemma and Bill have also done some studies on this as well (https://blog.mozilla.org/ux/2015/07/user-study-of-tracking-protection-in-firefox-nightly/). 

And while I do think there is value to being more explicit here ATM, I'm not sure we can extend this same UX to other areas (in need of contextual hints).
Attachment #8627286 - Attachment is obsolete: true
Flags: needinfo?(mark.finkle)
Flags: needinfo?(krudnitski)
(Assignee)

Updated

4 years ago
Blocks: 1184487
(Assignee)

Comment 25

4 years ago
Just been talking to Margaret and we discussed the idea of moving the onboarding slide up panel to show the first time TP is used.  This would mean the user is notified at a more relevant time than the current onboarding and in a more explicit way than the current contextual notice, also we wouldn't annoy the user with the same notification repeatedly and cut down on code complexity.  We discussed the idea of showing a mockup of the url bar in the slide up panel with the shield icon highlighted to help create a connection between tracking protection and the shield in the URL bar, which is something we don't currently do.

I've got a theory that the screenshot/mockup of the URL bar with the shield will help form a connection to the user, even if they don't read the text.  It would be good to get some user research around the shield, to see if users associate that with tracking protection at all.
(In reply to Anthony Lam (:antlam) from comment #24)
> Created attachment 8634647 [details]
> prev_mob_tip2.png
> 
> To address some UX concerns and implementation issues. I've come up with
> something that's a bit more explicit. 

I like that this UI is more explicit. I think we need to consider the one-off nature of the UI though. We started to look at using "snackbars" to replace toasts. I am wondering if a snackbar UI would be appropriate here as well.
Flags: needinfo?(mark.finkle)
Posted image prev_mob_tip3.png (obsolete) —
I think the snack bar idea works here. If we use them app-wide, it would provide consistency and also move us in the Material design direction. We're looking into that in bug 1157526 but it doesn't look like it'll be done in time for this tip.

So, in the meantime, we can either use a toast (less than ideal), or create our own snackbar-looking tip (attached).

I think using a toast has disadvantages like not being able to persist (2 or 3.5 secs), whereas a snackbar is meant to persist until an action (or tap) happens. 

Having this on the bottom will probably solve a lot of implementation issues we had with it along the top as well right, Martyn?

Since we want to move towards a snackbar, maybe this design in the interim will be our best answer.
Attachment #8634647 - Attachment is obsolete: true
Flags: needinfo?(mhaigh)
(Assignee)

Comment 28

4 years ago
I was having issues implementing a overlaying view which sat under the top UI but replacing it with a snackbar style interface which sits over content at the bottom of the screen would be easier from my pov and introduce less code complexity.  

The snackbar widget is similar to a Toast widget in that it displays for a set period of time or until a user interacts with something else on screen before fading away (https://developer.android.com/reference/android/support/design/widget/Snackbar.html) so it may not be exactly what we're looking for.  One issue I can see is how to tell the user that this is a application UI element and not something related to the webpage?  antlam: any ideas on that front?

Also any thoughts on the idea I proposed in comment 25 of this bug?
Flags: needinfo?(mhaigh) → needinfo?(alam)
So, mfinkle, margaret, martyn and I chatted about this over vidyo. We think that three things can be done together to achieve the goals of this bug.

1) Showing the current "slide-up sheet" that has "Now with Tracking Protection" the first time Tracking Protection is triggered
2) Adding more imagery to the "slide-up sheet" that draws connections to our toolbar
3) Adding information to about:privatebrowsing 

We can leave this bug open to deal with 1 and 2. I'll file a new one and NI Matej for some copy for 3.
Flags: needinfo?(alam)
Flags: needinfo?(krudnitski)
Posted image prev_mob_frue3b.png
Attaching new design for slide up sheet.
Attachment #8638600 - Attachment is obsolete: true
Posted image img_toolbarillustr.png (obsolete) —
This is the graphic to replace the shield. It's the same height so we can ideally just keep the same padding :)
Flags: needinfo?(mhaigh)
(Assignee)

Comment 33

4 years ago
antlam: can I get that graphic in hdpi, xhdpi and xxhdpi please?
Flags: needinfo?(mhaigh) → needinfo?(alam)
My bad! that one was actually XXHDPI but I dunno why I didn't get the others.. Here they are in a zip!
Attachment #8634039 - Attachment is obsolete: true
Attachment #8634043 - Attachment is obsolete: true
Attachment #8634044 - Attachment is obsolete: true
Attachment #8640072 - Attachment is obsolete: true
Flags: needinfo?(alam) → needinfo?(mhaigh)
(Assignee)

Comment 35

4 years ago
Here's an APK: https://dl.dropboxusercontent.com/u/7163922/Work/1177612.apk
Flags: needinfo?(mhaigh) → needinfo?(alam)
Looks good!
Flags: needinfo?(alam)
(Assignee)

Comment 37

4 years ago
Comment on attachment 8633462 [details]
MozReview Request: Bug 1177612 - Contextual hint first time we show the tracking protection shield; r?margaret

Bug 1177612 - Contextual hint first time we show the tracking protection shield; r?liuche
Attachment #8633462 - Attachment description: MozReview Request: Bug 1177612 - Part 1: Expose Dynamic Toolbar methods through BrowserApp; r?sebastian → MozReview Request: Bug 1177612 - Contextual hint first time we show the tracking protection shield; r?liuche
Attachment #8633462 - Flags: review?(s.kaspari)
Attachment #8633462 - Flags: review?(liuche)
(Assignee)

Updated

4 years ago
Attachment #8633463 - Attachment is obsolete: true
(Assignee)

Updated

4 years ago
Attachment #8633464 - Attachment is obsolete: true
(Assignee)

Updated

4 years ago
Attachment #8633462 - Flags: review?(s.kaspari)
Attachment #8633462 - Flags: review?(liuche) → review+
Comment on attachment 8633462 [details]
MozReview Request: Bug 1177612 - Contextual hint first time we show the tracking protection shield; r?margaret

https://reviewboard.mozilla.org/r/13215/#review13109

Ship It!

::: mobile/android/base/resources/layout/tracking_protection_prompt.xml:26
(Diff revision 2)
> -                   android:src="@drawable/ic_tracking_protection"
> +                   android:src="@drawable/tracking_protection_toolbar_illustration"

Let's remove this if we aren't using it anymore.

::: mobile/android/base/BrowserApp.java:2060
(Diff revision 2)
> -    private void showTrackingProtectionPromptIfApplicable() {
> +    public void showTrackingProtectionPromptIfApplicable() {

Eventually, it would be pretty nice to have some centralized place where we keep track of contextual hints that we've shown - I always feel this twitch when I open BrowserApp and see how much code it has...!

::: mobile/android/base/toolbar/ToolbarDisplayLayout.java:466
(Diff revision 2)
> +    private boolean shouldShowTrackingProtectionNotification(Tab tab) {

Since this is a one line check, do you want to just inline it?
(Assignee)

Comment 41

4 years ago
Comment on attachment 8633462 [details]
MozReview Request: Bug 1177612 - Contextual hint first time we show the tracking protection shield; r?margaret

Bug 1177612 - Contextual hint first time we show the tracking protection shield; r?margaret

liuche has already reviewed the bulk of this code, but I just changed tests to ensure they are passing - don't suppose you'd be able to take a look at that for me?

Also in this patch I've optimised the images, which I'd forgotted to do before.
Attachment #8633462 - Attachment description: MozReview Request: Bug 1177612 - Contextual hint first time we show the tracking protection shield; r?liuche → MozReview Request: Bug 1177612 - Contextual hint first time we show the tracking protection shield; r?margaret
Attachment #8633462 - Flags: review?(s.kaspari)
Attachment #8633462 - Flags: review?(margaret.leibovic)
(Reporter)

Comment 42

4 years ago
Comment on attachment 8633462 [details]
MozReview Request: Bug 1177612 - Contextual hint first time we show the tracking protection shield; r?margaret

https://reviewboard.mozilla.org/r/13215/#review13603

Ship It!
Attachment #8633462 - Flags: review?(margaret.leibovic) → review+
Attachment #8633462 - Flags: review?(s.kaspari) → review+
Landing this because it's been r+, and it's blocking tp-v1 which merges monday.
https://hg.mozilla.org/mozilla-central/rev/02fd2b5d1df3
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 42
After the first page that displays a tracking protection shield in the URL Bar is opened, a doorhanger appears with information about what tracking protection means.

Verified as fixed using:
Device: Alcatel One Touch (Android 4.1.2)
Builds: Firefox for Android 42.0a2 (2015-08-14) and  Firefox for Android 43.0a1 (2015-08-13)
Verified as fixed using:
Device: Samsung S6 Edge (Android 5.1)
Builds: Firefox for Android 42 Beta 1, Firefox for Android 43.0a2 and 44.0a1 (2015-09-21)
You need to log in before you can comment on or make changes to this bug.