Introduce Tor network settings and other updates in TB9 onboarding

We should update users on the following changes:

• The Tor button is not at the toolbar anymore.

• Tor Network Settings were moved from the Tor button to about:preferences#tor https://trac.torproject.org/projects/tor/ticket/31286

• New Identity has a new icon at the toolbar and at the [≡] menu https://trac.torproject.org/projects/tor/ticket/27511

added TorBrowserTeam201910R actualpoints::2.2 component::applications/tor browser owner::tbb-team points::0.5 priority::high resolution::fixed severity::normal status::closed tbb-9.0-must-alpha tbb-no-uplift tbb-onboarding type::defect ux-team labels

Trac:
Priority: Medium to High
Keywords: N/A deleted, tbb-9.0-alpha-must, TorBrowserTeam201909 added

Trac:
Cc: N/A to intrigeri

Trac:
Status: new to assigned
Owner: tbb-team to dunqan

Trac:
Cc: intrigeri to intrigeri, tbb-team

Trac:
Summary: Introduce Tor network settings in TB9 onboarding to Introduce Tor network settings and other updates in TB9 onboarding
Description: We need to explain users that Tor Network Settings were moved from the Tor button to about:preferences#tor

New UI relevant ticket https://trac.torproject.org/projects/tor/ticket/31286

to

We should update users on the following changes:

• The Tor button is not at the toolbar anymore.

• Tor Network Settings were moved from the Tor button to about:preferences#tor https://trac.torproject.org/projects/tor/ticket/31286

• New Identity has a new icon at the toolbar and at the [≡] menu https://trac.torproject.org/projects/tor/ticket/27511

Trac:
Keywords: tbb-9.0-alpha-must deleted, tbb-9.0-must-alpha added

Trac:
Cc: intrigeri, tbb-team to intrigeri, tbb-team, catalyst

Trac:
Keywords: N/A deleted, TorBrowserTeam201910 added

Trac:
Keywords: TorBrowserTeam201909 deleted, N/A added

Trac:
Points: N/A to 0.5

I'm guessing any updates will need to be localised

Does emmapeel know where to find these files so she can add them to transifex to be translated? Or is there some job that updates this in transifex automagically?

Trac:
Cc: intrigeri, tbb-team, catalyst to intrigeri, tbb-team, catalyst, emmapeel

Trac:

Trac:

Trac:

Hi team, I've got two new onboarding slides for review that cover the work completed in tickets #31286 (moved) and #27511 (moved). Antonela's worked up some placeholder copy for Steph to work from too.

For reference, there's a clickable prototype to demonstrate what each link should do here: https://sketch.cloud/s/0gp7V/a/pyqpVA/play

@antonela: I don't have an up to date circuit path visual, could you replace the scrappy panel for me in Sketch please? I'm going to be offline until mid/late next week now :)

Slide 1

We were considering the following behaviour for each link present in the copy:

• new identity – opens the menu as visualised in slide below.
• Tor circuit – opens DuckDuckGo in a new tab, including the circuit display.
• about:preferences#tor – anchor link to the new Tor Network preferences in a new tab


Menu highlight


Slide 2

As with the about:preferences link in slide one, the grey button opens the Tor Network settings screen in a new tab.


Finally, all visuals can be previewed on this URL: https://sketch.cloud/s/0gp7V/p/artwork

(you can download the file for any amends at that link too @antonela)

Looking over the screenshots four things come to mind:

1. You write "Now, you can ask for a new identity using the toolbar button" but there is non visible on the images next to the text. We might want to have on there, though, given the new feature?

2. I think we should take the lesson from #30560 (moved) into account (see how we changes the images there)

3. I don't understand the image on the Tor Network slide (slide 2) next to the text. What are the symbols meant to convey? Why do we have the 3 circles on the lower right?

4. The big feature pospeselr is working on and that is most relevant for users is the bridge configuration moved to the about:perferences page, yet that is not mentioned on the Tor Network settings text. I am inclined to think we should focus on that part both in slide one and two when the network is concerned. I somehow doubt users understand what they should do with the Tor Network settings thing and how this relates to the old Torbutton bridge/proxy configuration we had.

Trac:
Keywords: N/A deleted, tbb-onboarding added

mcs/brade: Can you pick this task up? We might even be able to make progress here while waiting on the final copy and assets.

Trac:
Cc: intrigeri, tbb-team, catalyst, emmapeel to intrigeri, tbb-team, catalyst, emmapeel, mcs, brade

Replying to gk:

Looking over the screenshots four things come to mind:

1. You write "Now, you can ask for a new identity using the toolbar button" but there is non visible on the images next to the text. We might want to have on there, though, given the new feature? Right. Ideally, we should highlight the icon at the toolbar. I'll update those assets.

2. I think we should take the lesson from #30560 (moved) into account (see how we changes the images there) Yes. Indeed, we are having it in consideration by removing any letters at the illustration.

3. I don't understand the image on the Tor Network slide (slide 2) next to the text. What are the symbols meant to convey? Why do we have the 3 circles on the lower right? That image is illustrating TB9 about:preferences. The 3 circles at the lower right are decorative. We can remove those if they add unwanted noise.

4. The big feature pospeselr is working on and that is most relevant for users is the bridge configuration moved to the about:perferences page, yet that is not mentioned on the Tor Network settings text. I am inclined to think we should focus on that part both in slide one and two when the network is concerned. I somehow doubt users understand what they should do with the Tor Network settings thing and how this relates to the old Torbutton bridge/proxy configuration we had.

I disagree. Net settings in about:preferences are not very useful for censored users who need bridges at the moment but it is a required step for the next iteration improvements. Why? Because users who cannot connect to Tor during the bootstrap cannot open about:preferences#tor settings; the main browser window didn't load yet. In this release, that critical flow will still have Tor Launcher and it will not change.

Altho, we can have a line that says "Now, Tor Bridges and local network settings can be configured in [about:preferences#tor, Tor Network Settings]."

What do you think GeKo?

Replying to dunqan:

Thank you Duncan! It looks awesome! I'll adjust some details and back to this ticket.

So, I updated the mocks based on gk's comment:13:

TODO:

• We still need to define #27511 (moved)'s icon.
• Steph, could we work together with this content?

Am I missing anything else?

 

Trac:
Cc: intrigeri, tbb-team, catalyst, emmapeel, mcs, brade to intrigeri, tbb-team, catalyst, emmapeel, mcs, brade, steph

Trac:

Trac:

Thanks, this looks better to me. I wonder why we mention the Tor circuit being visible behind the [i] in this context. It's nothing new as seems to be implied by the text.

Replying to antonela:

So, I updated the mocks based on gk's comment:13:

TODO:

• We still need to define #27511 (moved)'s icon.

acat is preparing a version with the broom icon. It seems to me that one got the most fans. :) But we can make a final decision on Monday (swapping the icons should be not too hard then).

Replying to gk:

Thanks, this looks better to me. I wonder why we mention the Tor circuit being visible behind the [i] in this context. It's nothing new as seems to be implied by the text.

I guess what we could do here is moving the circuit related text in the previous paragraph so user still have the feature mentioned when reading the text. And then just the new identity update to the toolbar in its own paragraph.

Replying to gk:

Replying to gk:

Thanks, this looks better to me. I wonder why we mention the Tor circuit being visible behind the [i] in this context. It's nothing new as seems to be implied by the text.

I guess what we could do here is moving the circuit related text in the previous paragraph so user still have the feature mentioned when reading the text. And then just the new identity update to the toolbar in its own paragraph.

Agreed! Let's do that. I'll sync with steph on this.

Replying to antonela:

Replying to gk:

[snip]

4. The big feature pospeselr is working on and that is most relevant for users is the bridge configuration moved to the about:perferences page, yet that is not mentioned on the Tor Network settings text. I am inclined to think we should focus on that part both in slide one and two when the network is concerned. I somehow doubt users understand what they should do with the Tor Network settings thing and how this relates to the old Torbutton bridge/proxy configuration we had.

I disagree. Net settings in about:preferences are not very useful for censored users who need bridges at the moment but it is a required step for the next iteration improvements. Why? Because users who cannot connect to Tor during the bootstrap cannot open about:preferences#tor settings; the main browser window didn't load yet. In this release, that critical flow will still have Tor Launcher and it will not change.

Altho, we can have a line that says "Now, Tor Bridges and local network settings can be configured in [about:preferences#tor, Tor Network Settings]."

What do you think GeKo?

Makes sense. What I had in mind when writing my comment was that I know users are configuring different bridges when they e.g. realize the currently used one is getting too slow or unreliable and the bridge settings has been the most important part of the tor settings that gets moved. So, they would in particular miss that point in the onboarding update if we just mentioned Tor network settings in general.

Suggested copy update:

Goodbye Tor Button

We want your experience using Tor to be fully integrated within Tor Browser.

That's why now, rather than using Tor Button, you can see your Tor Circuit via the [i] in the URL bar and request a New Identity using the toolbar button the [=] menu.

--

Travel a decentralized network

Tor Browser connects you to the Tor network, run by thousands of volunteers around the world. Unlike a VPN, there’s no one point of failure or centralized entity you need to trust in order to enjoy the internet privately.

NEW: Tor Network Settings, including the ability to request bridges where Tor is blocked, can now be found in Preferences.

Trac:

Trac:

**Updated mockups **



Replying to steph:

Suggested copy update:

Goodbye Tor Button

We want your experience using Tor to be fully integrated within Tor Browser.

That's why now, rather than using Tor Button, you can see your Tor Circuit via the [i] in the URL bar and request a New Identity using the toolbar button the [=] menu.

When you say "Tor Button" are you referring to the onion button in the toolbar or the extension or both? I was a bit confused but that might just be because I know that the extension is "Torbutton" (and not "Tor Button"). Should we say "onion button" instead when pointing to the button on the toolbar instead? If we want to convey that the extension is gone than we should use "Torbutton".

Kathy and I think the graphic associated with the "Tor Network" panel is confusing. The about:preferences categories are displayed along the left side of a browser window (at least in LTR locales) but the proposed graphic shows them on the right side. Also, the yellow background color could be confusing because that is not how about:preferences looks.

Also, there is a problem with implementing the proposed design: the onboarding code does not have the capability to include inline links in the description; it only supports simple text. Actions need to be done via buttons. For the Toolbar panel, I suggest we add a button Show how to request a new identity (but that text may be too long).

For the Tor Network panel, we should just remove the link from the Preferences text since the design already includes a Adjust your Tor Network Settings button.

Trac:

Trac:

Replying to mcs:

Kathy and I think the graphic associated with the "Tor Network" panel is confusing. The about:preferences categories are displayed along the left side of a browser window (at least in LTR locales) but the proposed graphic shows them on the right side. Also, the yellow background color could be confusing because that is not how about:preferences looks.

Thanks for the review! I attached a new version without a yellow background. It is an abstract image but I agree that it might be confusing. I removed the borders to reduce that confusion too.

Also, there is a problem with implementing the proposed design: the onboarding code does not have the capability to include inline links in the description; it only supports simple text. Actions need to be done via buttons. For the Toolbar panel, I suggest we add a button Show how to request a new identity (but that text may be too long). Show how to request a new identity seems long, yes. Stephw do you have any suggestions? if not, we will stick to it.

For the Tor Network panel, we should just remove the link from the Preferences text since the design already includes a Adjust your Tor Network Settings button. Cool!

Can do new install (no-updated users) have the [New] label at the Tor Network label? If yes, that would be the ideal scenario.

Updated mockups

 

Replying to gk:

Replying to steph:

Suggested copy update:

Goodbye Tor Button

We want your experience using Tor to be fully integrated within Tor Browser.

That's why now, rather than using Tor Button, you can see your Tor Circuit via the [i] in the URL bar and request a New Identity using the toolbar button the [=] menu.

When you say "Tor Button" are you referring to the onion button in the toolbar or the extension or both? I was a bit confused but that might just be because I know that the extension is "Torbutton" (and not "Tor Button"). Should we say "onion button" instead when pointing to the button on the toolbar instead? If we want to convey that the extension is gone than we should use "Torbutton".

We want to notify users the Tor button at the toolbar has gone intentionally. I think we can explain it more if you feel it. We have room for another two paragraphs there. Do you have anything in mind? Steph, what do you think?

I'm good changing the title to Goodbye Onion Button if that can solve this issue.

Replying to antonela:

Thanks for the review! I attached a new version without a yellow background. It is an abstract image but I agree that it might be confusing. I removed the borders to reduce that confusion too.

It looks better; thanks!

Show how to request a new identity seems long, yes. Stephw do you have any suggestions? if not, we will stick to it.

Your mockup has Show me how to request a new identity (with the word me it is even longer, but clearer). But that button title wraps onto two lines, at least on macOS. Maybe we could shorten it to Show Me How?

Can do new install (no-updated users) have the [New] label at the Tor Network label? If yes, that would be the ideal scenario.

Do you mean that you would like new users to see the same thing for the Tor Network panel as updated users? If the answer is yes, then I think we can make that happen.

Replying to antonela:

I'm good changing the title to Goodbye Onion Button if that can solve this issue.

I like this solution. In any case, we should decide ASAP so there is enough time to localize the strings.

I'm fine with "Goodbye Onion Button"

How about: "How to request a New Identity"

Replying to steph:

I'm fine with "Goodbye Onion Button"

How about: "How to request a New Identity"

Sounds good to me.

Trac:

Trac:

Trac:
illustration_toolbar_network.zip

Awesome, thanks! I've attached the illos assets and also the mockups' latest version.

Replying to mcs:

Do you mean that you would like new users to see the same thing for the Tor Network panel as updated users? If the answer is yes, then I think we can make that happen.

Exactly. Thank you!

Here are the string changes: https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug31768-01&id=c9beb4afcfa31914f699059e86f9a91a8c51f5b8

For consistency, Kathy and I made a small change to the description text on the Toolbar panel: s/rather than using Tor Button/rather than using the onion button/

Later today we plan to post a patch to update the onboarding logic.

Trac:
Keywords: TorBrowserTeam201910 deleted, TorBrowserTeam201910R added
Status: assigned to needs_review

Replying to mcs:

Here are the string changes: https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug31768-01&id=c9beb4afcfa31914f699059e86f9a91a8c51f5b8

For consistency, Kathy and I made a small change to the description text on the Toolbar panel: s/rather than using Tor Button/rather than using the onion button/

That's a good one. Pushed to master (commit 3a214e0399db82add929868b464699c41d785af4).

Trac:
Owner: dunqan to tbb-team
Status: needs_review to assigned
Keywords: TorBrowserTeam201910R deleted, TorBrowserTeam201910 added

Here are the onboarding changes: https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug31768-01&id=391c15f29686f06f8975d0fd97c25fd1407f71c4

Two notes:

1. For the How to Request a New Identity button, we used the existing highlighting method that Mozilla implemented. It adds a background color to the hamburger menu item, which seems OK.
2. We have not tested the Adjust Your Tor Network Settings button with the WIP progress patch for #31286 (moved) but it should work (we did test it with other preference categories).

Trac:
Keywords: TorBrowserTeam201910 deleted, TorBrowserTeam201910R added
Status: assigned to needs_review

Two things I've found while testing:

1. The security item should lose its "New" flag. That feature was new in 8.5 but is not in 9.0

2. I think requesting a New Identity should be done via the toolbar button, for two reasons: a) we are showing the toolbar + the icon on the onboarding card. It seems weird doing that and then using a menuitem instead of requesting a New Identity. b) the preferred way of requesting a New Identity is likely via the toolbar as this requires less clicks. Thus, we should teach the users to use that one instead of the backup option via the menu.

Trac:
Keywords: TorBrowserTeam201910R deleted, TorBrowserTeam201910 added
Status: needs_review to needs_revision

Replying to gk:

Two things I've found while testing:

1. The security item should lose its "New" flag. That feature was new in 8.5 but is not in 9.0

Good catch.

2. I think requesting a New Identity should be done via the toolbar button, for two reasons: a) we are showing the toolbar + the icon on the onboarding card. It seems weird doing that and then using a menuitem instead of requesting a New Identity. b) the preferred way of requesting a New Identity is likely via the toolbar as this requires less clicks. Thus, we should teach the users to use that one instead of the backup option via the menu.

Makes sense. Here is a revised patch: https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug31768-02&id=28e7c573ad2c0ffba5eb675447ee0c70a24e1a57

The New Identity toolbar button highlight is a little subtle. We tried all three of the animated methods that the existing Mozilla-derived UITour code supports and picked zoom because it provides a pulsating effect that loops indefinitely. The other two choices are wobble which briefly rotates the button background and color which does not seem to have any effect (at least on macOS; it looks like it changes border color). I don't think we have time to do better for TB 9.0, but for future reference the animations are defined in here: https://searchfox.org/mozilla-esr68/source/browser/base/content/browser.css#1281 and here: https://searchfox.org/mozilla-esr68/source/browser/base/content/browser.css#1331

Trac:
Keywords: TorBrowserTeam201910 deleted, TorBrowserTeam201910R added
Status: needs_revision to needs_review

Replying to mcs:

The New Identity toolbar button highlight is a little subtle. We tried all three of the animated methods that the existing Mozilla-derived UITour code supports and picked zoom because it provides a pulsating effect that loops indefinitely.

That is awesome. Thank you for this!

Looks good now, thanks. I picked your tor-browser patch up with commit 6126f44deb98e91efb4fb6a13dd7eb4c2c46d8e1.

Trac:
Resolution: N/A to fixed
Status: needs_review to closed

Trac:
Actualpoints: N/A to 2.2

Trac:
Keywords: N/A deleted, tbb-no-uplift added

closed

changed time estimate to 4h

added 17h 36m of time spent

moved to tpo/applications/tor-browser#31768 (closed)