1177612 - Contextual hint first time we show the tracking protection shield

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[:Margaret Leibovic]

We should teach people what this shield means the first time we show it.

Comment 1

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

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

Comment 2

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_mob_tip.png

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?

Comment 3

[Martyn Haigh (:mhaigh)]

Really basic version here: https://dl.dropboxusercontent.com/u/7163922/1177612.apk

Comment 4

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

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?

Comment 5

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

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?

Comment 6

[:Margaret Leibovic]

(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...

Comment 7

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

I've checked out the build in person. It looks good to me.

Leaving NI on Martyn to upload here.

Comment 8

[Martyn Haigh (:mhaigh)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=9663a37f1f55

Comment 9

[Martyn Haigh (:mhaigh)]

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

Bug 1177612 - Part 1: Expose Dynamic Toolbar methods through BrowserApp; r?sebastian

Comment 10

[Martyn Haigh (:mhaigh)]

Attachment: MozReview Request: Bug 1177612 - Part 2: Add view to layout file with associated changes; r?sebastian

Bug 1177612 - Part 2: Add view to layout file with associated changes; r?sebastian

Comment 11

[Martyn Haigh (:mhaigh)]

Attachment: MozReview Request: Bug 1177612 - Part 3: Wire in layout changes and amend toolbar to correctly animate notification; r?sebastian

Bug 1177612 - Part 3: Wire in layout changes and amend toolbar to correctly animate notification; r?sebastian

Comment 12

[Mark Finkle (:mfinkle) (use needinfo?)]

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.

Comment 13

[:Margaret Leibovic]

(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 14

[Sebastian Kaspari (:sebastian; :pocmo)]

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!

Comment 15

[Sebastian Kaspari (:sebastian; :pocmo)]

Attachment: urlbar-left-padding.png

Comment 16

[Sebastian Kaspari (:sebastian; :pocmo)]

Attachment: overlapping.jpg

Comment 17

[Sebastian Kaspari (:sebastian; :pocmo)]

Attachment: espn-enabled.png

Comment 18

[Sebastian Kaspari (:sebastian; :pocmo)]

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)

Comment 19

[Martyn Haigh (:mhaigh)]

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?

Comment 20

[Mark Finkle (:mfinkle) (use needinfo?)]

Yes, I'd like to see the hint implemented some other way.

Comment 21

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(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.

Comment 22

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

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.

Comment 23

[Karen Rudnitski [:kar]]

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.

Comment 24

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_mob_tip2.png

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).

Comment 25

[Martyn Haigh (:mhaigh)]

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.

Comment 26

[Mark Finkle (:mfinkle) (use needinfo?)]

(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.

Comment 27

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_mob_tip3.png

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.

Comment 28

[Martyn Haigh (:mhaigh)]

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?

Comment 29

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

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.

Comment 30

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Filed bug 1187984 for 3.

Comment 31

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_mob_frue3b.png

Attaching new design for slide up sheet.

Comment 32

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: img_toolbarillustr.png

This is the graphic to replace the shield. It's the same height so we can ideally just keep the same padding :)

Comment 33

[Martyn Haigh (:mhaigh)]

antlam: can I get that graphic in hdpi, xhdpi and xxhdpi please?

Comment 34

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: img_toolbarillustr.zip

My bad! that one was actually XXHDPI but I dunno why I didn't get the others.. Here they are in a zip!

Comment 35

[Martyn Haigh (:mhaigh)]

Here's an APK: https://dl.dropboxusercontent.com/u/7163922/Work/1177612.apk

Comment 36

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Looks good!

Comment 37

[Martyn Haigh (:mhaigh)]

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

Comment 38

[Chenxia Liu [:liuche]]

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?

Comment 39

[Martyn Haigh (:mhaigh)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=e8433a5bdec0

Comment 40

[Martyn Haigh (:mhaigh)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=3c0c73e8005f

Comment 41

[Martyn Haigh (:mhaigh)]

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.

Comment 42

[:Margaret Leibovic]

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!

Comment 43

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/02fd2b5d1df3

Comment 44

[Chenxia Liu [:liuche]]

Landing this because it's been r+, and it's blocking tp-v1 which merges monday.

Comment 45

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/02fd2b5d1df3

Comment 46

[Teodora Vermesan (:TeoVermesan)]

Attachment: Screenshot_2015-08-14-13-26-05.png

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)

Comment 47

[Teodora Vermesan (:TeoVermesan)]

Attachment: Screenshot_2015-08-13-16-00-16.png

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)