Opened 3 months ago

Closed 2 months ago

Last modified 8 weeks ago

#31768 closed defect (fixed)

Introduce Tor network settings and other updates in TB9 onboarding

Reported by: antonela Owned by: tbb-team
Priority: High Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ux-team, tbb-9.0-must-alpha, TorBrowserTeam201910R, tbb-onboarding
Cc: intrigeri, tbb-team, catalyst, emmapeel, mcs, brade, steph Actual Points: 2.2
Parent ID: Points: 0.5
Reviewer: Sponsor:

Description (last modified by antonela)

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

Child Tickets

Attachments (12)

31768-slide-1.0.png (191.8 KB) - added by dunqan 2 months ago.
31768-slide-1.1.png (207.9 KB) - added by dunqan 2 months ago.
31768-slide-2.0.png (192.5 KB) - added by dunqan 2 months ago.
1.0.png (137.5 KB) - added by antonela 2 months ago.
2.0.png (149.2 KB) - added by antonela 2 months ago.
1.0.2.png (140.0 KB) - added by antonela 2 months ago.
2.0.2.png (151.8 KB) - added by antonela 2 months ago.
1.0.3.png (142.6 KB) - added by antonela 2 months ago.
2.0.3.png (148.6 KB) - added by antonela 2 months ago.
1.0.4.png (142.4 KB) - added by antonela 2 months ago.
2.0.4.png (148.6 KB) - added by antonela 2 months ago.
illustration_toolbar_network.zip (82.3 KB) - added by antonela 2 months ago.

Download all attachments as: .zip

Change History (54)

comment:1 Changed 3 months ago by gk

Keywords: TorBrowserTeam201909 tbb-9.0-alpha-must added
Priority: MediumHigh

comment:2 Changed 3 months ago by intrigeri

Cc: intrigeri added

comment:3 Changed 3 months ago by antonela

Owner: changed from tbb-team to dunqan
Status: newassigned

comment:4 Changed 3 months ago by boklm

Cc: tbb-team added

comment:5 Changed 3 months ago by antonela

Description: modified (diff)
Summary: Introduce Tor network settings in TB9 onboardingIntroduce Tor network settings and other updates in TB9 onboarding

comment:6 Changed 3 months ago by mcs

Keywords: tbb-9.0-must-alpha added; tbb-9.0-alpha-must removed

comment:7 Changed 3 months ago by catalyst

Cc: catalyst added

comment:8 Changed 3 months ago by pili

Keywords: TorBrowserTeam201910 added

comment:9 Changed 3 months ago by pili

Keywords: TorBrowserTeam201909 removed

comment:10 Changed 3 months ago by gk

Points: 0.5

comment:11 Changed 3 months ago by pili

Cc: emmapeel added

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?

Changed 2 months ago by dunqan

Attachment: 31768-slide-1.0.png added

Changed 2 months ago by dunqan

Attachment: 31768-slide-1.1.png added

Changed 2 months ago by dunqan

Attachment: 31768-slide-2.0.png added

comment:12 Changed 2 months ago by dunqan

Hi team, I've got two new onboarding slides for review that cover the work completed in tickets #31286 and #27511. 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 tab within preferences

https://trac.torproject.org/projects/tor/raw-attachment/ticket/31768/31768-slide-1.0.png

Menu highlight

https://trac.torproject.org/projects/tor/raw-attachment/ticket/31768/31768-slide-1.1.png

Slide 2

https://trac.torproject.org/projects/tor/raw-attachment/ticket/31768/31768-slide-2.0.png

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)

Version 0, edited 2 months ago by dunqan (next)

comment:13 Changed 2 months ago by gk

Keywords: tbb-onboarding added

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

comment:14 Changed 2 months ago by gk

Cc: mcs brade 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.

comment:15 in reply to:  13 ; Changed 2 months ago by antonela

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 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?

Last edited 2 months ago by antonela (previous) (diff)

comment:16 in reply to:  12 Changed 2 months ago by antonela

Replying to dunqan:

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

comment:17 Changed 2 months ago by antonela

Cc: steph added

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

TODO:

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

Am I missing anything else?

https://trac.torproject.org/projects/tor/raw-attachment/ticket/31768/1.0.png
https://trac.torproject.org/projects/tor/raw-attachment/ticket/31768/2.0.png

Changed 2 months ago by antonela

Attachment: 1.0.png added

Changed 2 months ago by antonela

Attachment: 2.0.png added

comment:18 Changed 2 months ago by 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.

comment:19 in reply to:  17 Changed 2 months ago by gk

Replying to antonela:

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

TODO:

  • We still need to define #27511'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).

comment:20 in reply to:  18 ; Changed 2 months ago by 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.

comment:21 in reply to:  20 Changed 2 months ago by antonela

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.

comment:22 in reply to:  15 Changed 2 months ago by gk

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.

comment:23 Changed 2 months ago by 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.

--

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.

Changed 2 months ago by antonela

Attachment: 1.0.2.png added

Changed 2 months ago by antonela

Attachment: 2.0.2.png added

comment:24 Changed 2 months ago by antonela

Updated mockups

https://trac.torproject.org/projects/tor/raw-attachment/ticket/31768/1.0.2.png

https://trac.torproject.org/projects/tor/raw-attachment/ticket/31768/2.0.2.png

comment:25 in reply to:  23 ; Changed 2 months ago by 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".

comment:26 Changed 2 months ago by 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.

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.

Changed 2 months ago by antonela

Attachment: 1.0.3.png added

Changed 2 months ago by antonela

Attachment: 2.0.3.png added

comment:27 in reply to:  26 ; Changed 2 months ago by antonela

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

https://trac.torproject.org/projects/tor/raw-attachment/ticket/31768/1.0.3.png
https://trac.torproject.org/projects/tor/raw-attachment/ticket/31768/2.0.3.png

comment:28 in reply to:  25 ; Changed 2 months ago by antonela

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.

comment:29 in reply to:  27 ; Changed 2 months ago by mcs

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.

comment:30 in reply to:  28 Changed 2 months ago by mcs

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.

comment:31 Changed 2 months ago by steph

I'm fine with "Goodbye Onion Button"

How about: "How to request a New Identity"

comment:32 in reply to:  31 Changed 2 months ago by gk

Replying to steph:

I'm fine with "Goodbye Onion Button"

How about: "How to request a New Identity"

Sounds good to me.

Changed 2 months ago by antonela

Attachment: 1.0.4.png added

Changed 2 months ago by antonela

Attachment: 2.0.4.png added

Changed 2 months ago by antonela

comment:33 Changed 2 months ago by antonela

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

https://trac.torproject.org/projects/tor/raw-attachment/ticket/31768/1.0.4.png

https://trac.torproject.org/projects/tor/raw-attachment/ticket/31768/2.0.4.png

comment:34 in reply to:  29 Changed 2 months ago by antonela

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!

comment:35 Changed 2 months ago by mcs

Keywords: TorBrowserTeam201910R added; TorBrowserTeam201910 removed
Status: assignedneeds_review

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.

comment:36 in reply to:  35 Changed 2 months ago by gk

Keywords: TorBrowserTeam201910 added; TorBrowserTeam201910R removed
Owner: changed from dunqan to tbb-team
Status: needs_reviewassigned

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

Last edited 2 months ago by gk (previous) (diff)

comment:37 Changed 2 months ago by mcs

Keywords: TorBrowserTeam201910R added; TorBrowserTeam201910 removed
Status: assignedneeds_review

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 but it should work (we did test it with other preference categories).

comment:38 Changed 2 months ago by gk

Keywords: TorBrowserTeam201910 added; TorBrowserTeam201910R removed
Status: needs_reviewneeds_revision

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.

Last edited 2 months ago by gk (previous) (diff)

comment:39 in reply to:  38 ; Changed 2 months ago by mcs

Keywords: TorBrowserTeam201910R added; TorBrowserTeam201910 removed
Status: needs_revisionneeds_review

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

comment:40 in reply to:  39 Changed 2 months ago by antonela

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!

comment:41 Changed 2 months ago by gk

Resolution: fixed
Status: needs_reviewclosed

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

comment:42 Changed 8 weeks ago by mcs

Actual Points: 2.2
Note: See TracTickets for help on using tickets.