Opened 2 months ago

Closed 5 weeks ago

#27097 closed defect (fixed)

Add "Tor News" newsletter signup link in Tor Browser

Reported by: arthuredelstein Owned by: tbb-team
Priority: Medium Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ux-team, tbb-fundraising, TorBrowserTeam201809R, tbb-8.0.1-can
Cc: sstevenson@…, antonela, tbb-team, isabela Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

As part of our community building and fundraising, we would like to add a link to make it easy for users to join Tor's email list. We'll need final text, a URL, and a design.

Child Tickets

Attachments (9)

27097-1.png (227.3 KB) - added by antonela 2 months ago.
27097-2.png (196.0 KB) - added by antonela 2 months ago.
27097-3.png (203.0 KB) - added by antonela 2 months ago.
27097-4.png (197.8 KB) - added by antonela 2 months ago.
TB8 - Snippet - Top - White - Icon Color.png (334.0 KB) - added by antonela 2 months ago.
assets.zip (17.4 KB) - added by antonela 8 weeks ago.
27097_tor_news_banner_screenshot.png (104.6 KB) - added by arthuredelstein 8 weeks ago.
27097_4_screenshot.png (105.9 KB) - added by arthuredelstein 8 weeks ago.
tornews_banner_27097_5.png (34.6 KB) - added by arthuredelstein 7 weeks ago.

Download all attachments as: .zip

Change History (42)

comment:1 Changed 2 months ago by gk

Which email list is that? There is not a single Tor email list.

comment:2 Changed 2 months ago by antonela

sstevenson wants to lead people to Tor Newsletter, not to any list. Confirmed on IRC.

Changed 2 months ago by antonela

Attachment: 27097-1.png added

Changed 2 months ago by antonela

Attachment: 27097-2.png added

Changed 2 months ago by antonela

Attachment: 27097-3.png added

Changed 2 months ago by antonela

Attachment: 27097-4.png added

comment:3 Changed 2 months ago by antonela

Sarah, Arthur
Since we are going to launch this before TB8, I made some mocks with current stable UI.
Do we want something more noticeable? Or keeping the same white containers is ok?
Please, check the attachments and let me know what do you think

comment:4 Changed 2 months ago by arthuredelstein

Summary: "Join the Tor email list!" link in Tor BrowserAdd "Tor News" newsletter signup link in Tor Browser

I believe the URL we want is https://newsletter.torproject.org/

comment:5 Changed 2 months ago by arthuredelstein

Keywords: TorBrowserTeam201808R added
Status: newneeds_review

We discussed at length among Tor members and settled on the following text:

Get the latest news from Tor straight to your inbox. Sign up for Tor News.

Here's a patch for review that adds that text. We would like to land this soon to allow translation to get started:

https://github.com/arthuredelstein/torbutton/commit/27097

comment:6 Changed 2 months ago by gk

Keywords: TorBrowserTeam201808 added; TorBrowserTeam201808R removed
Status: needs_reviewnew

That's just been the two strings, right? At any rate, I pushed those to master (commit 3e7502789eca79d2e73c82b65770fc0d08527584). Setting the state to new again for the remaining things.

comment:7 Changed 2 months ago by antonela

hey!

I explored Firefox's Snippets and seems to be the best option for this feature
https://wiki.mozilla.org/Firefox/Projects/Firefox_Start/Snippet_Service

I made some versions with different background color and position. If it takes a lot of time and we need to have it soon, I made a version with the link at the bottom.

https://marvelapp.com/42g2bae

Please, let me know what do you think!

comment:8 in reply to:  7 Changed 2 months ago by isabela

Hi Antonela,

Is it possible to have a top - white copy one with the colors shifted? Like instead of white copy a purple one and the background is white? I really would like to keep the envelope icon tho, not sure if that is only in white.

I feel we all the bottom ones very hard to even notice they are there, I would not use them.

comment:9 Changed 2 months ago by antonela

Yes! I used a white background and made a custom icon with and without color.

How does it look now?

https://marvelapp.com/42g2bae/screen/47067924
https://marvelapp.com/42g2bae/screen/47067925

Changed 2 months ago by antonela

Changed 8 weeks ago by antonela

Attachment: assets.zip added

comment:11 in reply to:  6 Changed 8 weeks ago by arthuredelstein

Replying to gk:

That's just been the two strings, right? At any rate, I pushed those to master (commit 3e7502789eca79d2e73c82b65770fc0d08527584). Setting the state to new again for the remaining things.

I have just discovered that aboutTor.properties is no longer usable in about:tor, as a result of the patch from #26960 implementing our awesome new about:tor page. So here is a patch to move the two strings to aboutTor.dtd and remove the rest of aboutTor.properties file in each locale (I will ensure that any already-translated instances of the two "newsletter" strings are moved to the new location in Transifex.):

https://github.com/arthuredelstein/torbutton/commit/27097+2

Edit: new revision

Last edited 8 weeks ago by arthuredelstein (previous) (diff)

comment:12 Changed 8 weeks ago by arthuredelstein

Keywords: TorBrowserTeam201808R added; TorBrowserTeam201808 removed
Status: newneeds_review

comment:13 Changed 8 weeks ago by gk

Keywords: TorBrowserTeam201808 added; TorBrowserTeam201808R removed
Status: needs_reviewnew

Fixed with commit 360427812f7953864a85ffdde8382f6b76105ace on Torbutton's master branch.

comment:14 Changed 8 weeks ago by arthuredelstein

Keywords: TorBrowserTeam201808R added; TorBrowserTeam201808 removed
Status: newneeds_review

Here's an implementation patch for review:

https://github.com/arthuredelstein/torbutton/commit/27097+3

And here is a screenshot:


Last edited 7 weeks ago by arthuredelstein (previous) (diff)

Changed 8 weeks ago by arthuredelstein

comment:15 Changed 8 weeks ago by gk

Status: needs_reviewneeds_revision

The code looks okay, but I am not happy with the behavior yet. So, the user get urged to subscribe to Tor News which I am generally fine with. However, I think it is bad behavior to still urge someone to subscribe somewhere after they already had or after they already made the decision to not subscribe (for whatever reasons). But the current patch does that as the banner is not going away. Now, that's hard to do without knowing the intentions or the one using the browser but one can simulate that by showing the banner only on first start or a small amount of times after first start. I think we should do something like that.

From a design perspective I am not happy either as the design at the top is drawing attention away from the onboarding we developed for 8.0. I think the onboarding is one of the major improvements for Tor Browser usability but right now once Tor Browser starts I fear users are only seeing the white banner (and might get annoyed by it because it does not go away).

comment:16 Changed 8 weeks ago by gk

Cc: isabela added

comment:17 Changed 8 weeks ago by gk

Keywords: TorBrowserTeam201808 added; TorBrowserTeam201808R removed

comment:18 in reply to:  15 ; Changed 8 weeks ago by isabela

Hi there,

I agree that our new user experience should have some momentum before we distract people with the banner.

Here is the calendar for what goes out and when:

09.05 - 8.0 stable release goes out without the newsletter banner

Before 09.28 Mexico meeting - we will probably need to do a bug fixing release, so the newsletter banner will go out with that release.

The experience from Firefox that this banner is based on does include an X for the user to close it. The X shows up when your mouse hoover over the banner. Can devs confirm that with me? I want to make sure there is a way for the user to close the banner (or express 'no').

10.23 stable release - Is when our YE campaign banner will go out.

Replying to gk:

The code looks okay, but I am not happy with the behavior yet. So, the user get urged to subscribe to Tor News which I am generally fine with. However, I think it is bad behavior to still urge someone to subscribe somewhere after they already had or after they already made the decision to not subscribe (for whatever reasons). But the current patch does that as the banner is not going away. Now, that's hard to do without knowing the intentions or the one using the browser but one can simulate that by showing the banner only on first start or a small amount of times after first start. I think we should do something like that.

From a design perspective I am not happy either as the design at the top is drawing attention away from the onboarding we developed for 8.0. I think the onboarding is one of the major improvements for Tor Browser usability but right now once Tor Browser starts I fear users are only seeing the white banner (and might get annoyed by it because it does not go away).

comment:19 in reply to:  18 Changed 8 weeks ago by arthuredelstein

Hi gk and isabela,

I agree with your points here. The code currently doesn't have an X to close the banner, but we can add one. And I think you're right we should wait for a later release to post this banner.

I think we could also consider a design in the future where the newsletter link is not so prominent but integrated better with the about:tor design. For example, it could look similar to the Tor Browser Manual link. That way we could include the newsletter link permanently without distracting from the more important elements in the design (such as the onboarding, the "Explore. Privately." tagline and the search box).

comment:20 Changed 8 weeks ago by antonela

I think we could also consider a design in the future where the newsletter link is not so prominent but integrated better with the about:tor design. For example, it could look similar to the Tor Browser Manual link. That way we could include the newsletter link permanently without distracting from the more important elements in the design (such as the onboarding, the "Explore. Privately." tagline and the search box).

arthur yes, I agreed. I made a version here on the first round of iterations with that option. Maybe, we can discuss it with comms people too. They have another idea about how to use about:tor.

https://marvelapp.com/42g2bae/screen/47038942

Changed 8 weeks ago by arthuredelstein

Attachment: 27097_4_screenshot.png added

comment:21 in reply to:  20 ; Changed 8 weeks ago by arthuredelstein

Replying to antonela:

arthur yes, I agreed. I made a version here on the first round of iterations with that option. Maybe, we can discuss it with comms people too. They have another idea about how to use about:tor.

https://marvelapp.com/42g2bae/screen/47038942

I think this is a good approach. Here's a patch that does that:
https://github.com/arthuredelstein/torbutton/commit/27097+4

And here is the screenshot:

Last edited 8 weeks ago by arthuredelstein (previous) (diff)

comment:22 in reply to:  21 Changed 8 weeks ago by steph

I'd be happy with it in there more discretely like this for now and for longer term (not if there is a similar banner at the same time). Is this back to being a possibility in 8.0?

comment:23 Changed 7 weeks ago by arthuredelstein

Keywords: TorBrowserTeam201809R added; TorBrowserTeam201808 removed
Status: needs_revisionneeds_review

Here's a new version of the banner for review. It disappears permanently:

  • if the user clicks a small "X" on the right
  • if the user clicks the "Sign Up" link
  • if the banner has already been shown 4 times


https://github.com/arthuredelstein/torbutton/commit/27097+5


Last edited 7 weeks ago by arthuredelstein (previous) (diff)

Changed 7 weeks ago by arthuredelstein

Attachment: tornews_banner_27097_5.png added

comment:24 Changed 6 weeks ago by gk

Keywords: tbb-8.0.1-can added

tbb-8.0.1-can

comment:25 Changed 5 weeks ago by steph

Looks great, thank you!

comment:26 Changed 5 weeks ago by gk

Keywords: TorBrowserTeam201809 added; TorBrowserTeam201809R removed
Status: needs_reviewneeds_revision

Looks good! One small thing:

+    const kAboutTorHideTorNewsBanner = this.kAboutTorHideTorNewsBanner;

just remove that line and use this.kAboutTorHideTorNewsBanner in the two instances needed directly. Having a kAboutTorHideTorNewsBanner in the function scope and declared above is confusing and seems not worth it.

comment:27 in reply to:  26 Changed 5 weeks ago by arthuredelstein

Replying to gk:

Thanks for the review!

Looks good! One small thing:

+    const kAboutTorHideTorNewsBanner = this.kAboutTorHideTorNewsBanner;

just remove that line and use this.kAboutTorHideTorNewsBanner in the two instances needed directly. Having a kAboutTorHideTorNewsBanner in the function scope and declared above is confusing and seems not worth it.

Good catch. Here's a revised version where I fix that and rebased to the latest master.

https://github.com/arthuredelstein/torbutton/commit/27097+6

comment:28 Changed 5 weeks ago by arthuredelstein

Keywords: TorBrowserTeam201809R added; TorBrowserTeam201809 removed
Status: needs_revisionneeds_review

comment:29 Changed 5 weeks ago by gk

Resolution: fixed
Status: needs_reviewclosed

Looks good now, thanks! Merged to master (commit b55672f07a24e5611510840012a32108553cf413).

comment:30 Changed 5 weeks ago by gk

Resolution: fixed
Status: closedreopened

Ha, so it seems we got the scope of "this" wrong. I have a follup-up fix for that issue in my bug_27097-fixup (https://gitweb.torproject.org/user/gk/torbutton.git/commit/?h=bug_27097-fixup&id=7540556c69566bc5454be354d877d08b98ac5d99). Arthur, please review.

comment:31 Changed 5 weeks ago by arthuredelstein

Oh, that explains why I used

+    const kAboutTorHideTorNewsBanner = this.kAboutTorHideTorNewsBanner;

before.

I had forgotten. Anyway, this fixup looks good to me, and the banner worked properly for me with this patch.

comment:32 Changed 5 weeks ago by arthuredelstein

Status: reopenedmerge_ready

comment:33 Changed 5 weeks ago by gk

Resolution: fixed
Status: merge_readyclosed

Thanks, commit 7540556c69566bc5454be354d877d08b98ac5d99 on master has the fixup.

Note: See TracTickets for help on using tickets.