Opened 8 months ago

Closed 3 months ago

#25695 closed defect (fixed)

Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard

Reported by: isabela Owned by: antonela
Priority: Very High Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ux-team, TorBrowserTeam201808
Cc: tbb-team, dmr Actual Points:
Parent ID: Points:
Reviewer: Sponsor: Sponsor17

Description

Redesign Tor Browser homepage ("about:tor") to inform users about various Tor features and settings they can use to customize their experience.

We are not taking advantage of the best opportunity to educate users about Tor’s features and settings. The “about:tor” page is the first thing a user sees once they successfully launch Tor Browser and connect to the Tor network. At this moment, they are ready to start browsing; therefore, it is a great opportunity for us to build an educational moment to teach them about Tor Browser security features and how to use them.

Child Tickets

TicketStatusOwnerSummaryComponent
#26960closedmcsimplement new about:tor start pageApplications/Tor Browser
#26961closedmcsimplement new user onboardingApplications/Tor Browser
#26962closedtbb-teamimplement new features onboardingApplications/Tor Browser
#27082closedmcsenable a limited UITourApplications/Tor Browser

Attachments (6)

25695.png (766.0 KB) - added by antonela 7 months ago.
25695-about-new-feature-walkthrough.png (2.2 MB) - added by antonela 7 months ago.
25695-about.png (1.5 MB) - added by antonela 7 months ago.
forward.zip (4.3 KB) - added by antonela 4 months ago.
onboarding-illos.zip (97.1 KB) - added by antonela 3 months ago.
figure_welcome.zip (49.4 KB) - added by antonela 3 months ago.

Change History (44)

comment:1 Changed 8 months ago by gk

Cc: tbb-team added

Ccing the tbb-team.

comment:2 Changed 8 months ago by gk

Keywords: TorBrowserTeam201804 added
Priority: MediumHigh

comment:3 Changed 8 months ago by cypherpunks

You can modify the onboarding system extension to your needs https://searchfox.org/mozilla-central/source/browser/extensions/onboarding

If you want to test it in its Mozilla form download nightly and enable it using https://searchfox.org/mozilla-central/source/browser/extensions/onboarding/README.md#how-to-show-the-onboarding-tour

comment:4 Changed 8 months ago by cypherpunks

Related tickets: #23489 #23649

Last edited 8 months ago by cypherpunks (previous) (diff)

comment:5 in reply to:  3 Changed 7 months ago by antonela

Replying to cypherpunks:

If you want to test it in its Mozilla form download nightly and enable it using https://searchfox.org/mozilla-central/source/browser/extensions/onboarding/README.md#how-to-show-the-onboarding-tour

Thanks! So useful :)

Changed 7 months ago by antonela

Attachment: 25695.png added

comment:6 Changed 7 months ago by antonela

Hi! I put together the first approach for this task. I'm trying to get into consideration all the suggestions made by the previously mentioned tickets.

https://trac.torproject.org/projects/tor/attachment/ticket/25695/25695.png

I'd like to be on the same page with devs about the different use cases.

Using F60 onboarding is a great idea! I think we can use it.

Copy is up to creation/review.

comment:7 Changed 7 months ago by dmr

Cc: dmr added

Changed 7 months ago by antonela

comment:8 Changed 7 months ago by antonela

Alo!

This ticket includes four related tasks:

a) redesign current about:tor
b) think about critical messages eg. "Update Tor Browser"
c) onboarding for new users
d) onboarding for new features

Check here
https://trac.torproject.org/projects/tor/attachment/ticket/25695/25695-about.png

All this components or flows are living or are triggered at about:tor page. This is why we are thinking about them right now. On my last delivery, I included a narrative and low-res mocks for onboarding new users. Also, during our meeting, we talked about having a walkthrough like onboarding for new features.

So, I'm including now

a) About:tor > We talked a lot about to have a dark theme here. Having a purple background reminds users of safe private browsing mode in regular browsers which is a feeling that we want to recall here.

b) Critical Messages > We have a separate task for the browser update flow, but I'm just introducing it here. I'm going to work deeply on it at their respective ticket(#25694).

c) Onboarding New Users > The F60-like onboarding for new users will be triggered for first-time users. Also will be persistent at the left top icon.

d) Onboarding for New Features > Based on Firefox's UX https://www.mozilla.org/en-US/firefox/59.0.2/tracking-protection/start/.

This flow must be used for onboarding new features. The walkthrough style allows us to drive the user through each feature per time and also to show them in their context.

Try the New Circuits Display here: https://marvelapp.com/3djhfhh

Also a static version here: https://trac.torproject.org/projects/tor/attachment/ticket/25695/25695-about-new-feature-walkthrough.png

New users on their onboarding can trigger the features that have walk-through tutorials. So, the call to action we have at the user onboarding popup will trigger the specific feature walkthrough.

Content is not defined yet, but I opened a pad to work with the comms team on it https://pad.riseup.net/p/about-tor-copy

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

Changed 7 months ago by antonela

Attachment: 25695-about.png added

comment:9 Changed 7 months ago by cypherpunks

Sublime work really antonela, it looks all good :D

One note however: The update warning needs to be more scary :)

comment:10 Changed 7 months ago by gk

Keywords: TorBrowserTeam201805 added; TorBrowserTeam201804 removed

Move our roadmap tickets to May.

comment:11 Changed 6 months ago by gk

Keywords: TorBrowserTeam201806 added; TorBrowserTeam201805 removed

Moving our tickets to June 2018

comment:12 Changed 6 months ago by gk

Priority: HighVery High

Upping prio.

comment:13 Changed 5 months ago by antonela

For Tor Browser 8 onboarding, Steph and I we have been working on having the content and the steps of the onboarding ready.
You can grab the copy and the links from here

https://docs.google.com/document/d/1c2RZSwI44h5IT0_0HyurByWuzf5jhA1iCLUR6FBjIvY/edit?usp=sharing

and the prototype is living here
https://marvelapp.com/5981a4b/screen/44384308

let me know what else is needed to moving it forward

We'll continue working on it after Alpha release.

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

comment:14 Changed 5 months ago by gk

I am not a huge fan of "ultimate" when describing .onions. Could we use "enhanced" or something similar? Otherwise looks good to me. I guess we can chat a bit about it (and how to move forward implementing it) in our meeting today.

comment:15 Changed 5 months ago by gk

Keywords: TorBrowserTeam201807 added; TorBrowserTeam201806 removed

Moving first batch of tickets to July 2018

comment:16 Changed 5 months ago by gk

Resolved #23489 as duplicate.

comment:17 Changed 4 months ago by antonela

I updated the last prototype with the new content + the first round of illustrations. Take a look and let me know what do you think!

https://marvelapp.com/5981a4b/screen/44384322

comment:18 Changed 4 months ago by gk

Looks great. I think I like the "Explore. Privately." one better than the "Go Explore. Privately." But I feel not that strongly about it. I am not sure whether the text is ready yet for review, so I skipped that part but the general flow seems good to me.

comment:19 Changed 4 months ago by mcs

Kathy and I are working on implementation of the startup page portion of this ticket (that is, about:tor without new user or feature onboarding). We have a few questions:

  • Within this new design, how do we let users know that Tor is not working correctly? In the old about:tor, the text near the top of the page is changed to "Something Went Wrong! Tor is not working in this browser." (with a red background).
  • Should about:tor include a link to the Tor Browser manual? I think we talked about this during one of our meetings, but I cannot remember our conclusion.
  • Will there be a way for users to navigate to https://check.torproject.org/ (the old "Test Tor Network Settings" link)?
  • Is it OK to completely remove everything related to update notifications from about:tor? I think we decided to use something based on Firefox 60's doorhanger-based update notifications, which means we no longer need anything related to updates inside the about:tor page.

comment:20 in reply to:  19 ; Changed 4 months ago by antonela

hey! happy to have you working on it :)

Replying to mcs:

Within this new design, how do we let users know that Tor is not working correctly? In the old about:tor, the text near the top of the page is changed to "Something Went Wrong! Tor is not working in this browser." (with a red background).

I think someone mentioned it before on another ticket; does exist a situation where Tor Browser is not connected to Tor Network?

Should about:tor include a link to the Tor Browser manual? I think we talked about this during one of our meetings, but I cannot remember our conclusion.

We are linking to the manual in a lot of cards at the onboarding. We can have a link at about:tor too for sure.

Will there be a way for users to navigate to https://check.torproject.org/ (the old "Test Tor Network Settings" link)?

The first time I thought about about:tor came to my mind the idea to have check.torproject.org status just there. But then, the same question: Which is the situation where Tor Browser loads and not connect to Tor? Anyways, "You're connected to the Tor Network" string was inspired directly by check.tpo. What would be wrong if we take it from there?

Is it OK to completely remove everything related to update notifications from about:tor? I think we decided to use something based on Firefox 60's doorhanger-based update notifications, which means we no longer need anything related to updates inside the about:tor page.

Yes, exactly. I'm going to back to Update Tor ticket I hope this week. So far, we discussed to have everything running at the doorhanger. I suggested having the red about:tor for old Tor Browser versions -> https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.0.2.png. Both cases can work together and that about:tor status is an ongoing discussion at #25694.

Question for you now :)

Can't wait to see it live!

comment:21 in reply to:  20 ; Changed 4 months ago by mcs

Replying to antonela:

I think someone mentioned it before on another ticket; does exist a situation where Tor Browser is not connected to Tor Network?

It is possible, if things are misconfigured, to have a situation where the browser does not send traffic through a Tor proxy. That is why Torbutton currently does a check at startup and the current about:tor has the concept of "Something went wrong. Tor is not working in this browser."

We are linking to the manual in a lot of cards at the onboarding. We can have a link at about:tor too for sure.

OK. We will do something but you may have ideas about where to include that link.

The first time I thought about about:tor came to my mind the idea to have check.torproject.org status just there. But then, the same question: Which is the situation where Tor Browser loads and not connect to Tor? Anyways, "You're connected to the Tor Network" string was inspired directly by check.tpo. What would be wrong if we take it from there?

Up until a few years ago, the Tor Browser home page was https://check.torproject.org/ but connecting to that site was slow and put load on the network (and that site). We switched to a local check in which Torbutton checks that the browser's SOCKS proxy configuration matches what the embedded tor daemon is using. This kind of check is very quick. I'd rather not return to an automatic check that hits check.tpo over the network. The reason we retained the link to check.tpo when we switched to the local check is because it provides an "end to end" live network-based check which some people want. But maybe its time of usefulness is past. Georg, Arthur, or others -- any opinion on whether we need to provide an easy and obvious way for people to load check.tpo?

Question for you now :)

Using system fonts will keep things smaller, but we could bundle Source Pro if it makes sense to do so. We should ask Arthur what he thinks about bundling another font. Maybe we can make that change after making an initial implementation using a system font.

  • is okay an SVG for the circle's pattern at the background? or do you prefer a png/jpg?

SVG should be fine, although we will need to double-check that SVGs are not disabled on about:tor when the security slider is set to the Safest setting.

We will also need a DuckDuckGo icon for the search box (small-ish, maybe 34 x 34 pixels) and Kathy and I think we should add a right pointing "action" arrow to the right side of the search box like Mozilla has on Firefox's about:home (in case someone wants to use the mouse to start a search). That icon should be similar in height to the DDG one.

comment:22 Changed 4 months ago by mcs

A couple of follow ups:

comment:23 in reply to:  21 Changed 4 months ago by gk

Replying to mcs:

Replying to antonela:

[snip]

The first time I thought about about:tor came to my mind the idea to have check.torproject.org status just there. But then, the same question: Which is the situation where Tor Browser loads and not connect to Tor? Anyways, "You're connected to the Tor Network" string was inspired directly by check.tpo. What would be wrong if we take it from there?

Up until a few years ago, the Tor Browser home page was https://check.torproject.org/ but connecting to that site was slow and put load on the network (and that site). We switched to a local check in which Torbutton checks that the browser's SOCKS proxy configuration matches what the embedded tor daemon is using. This kind of check is very quick. I'd rather not return to an automatic check that hits check.tpo over the network. The reason we retained the link to check.tpo when we switched to the local check is because it provides an "end to end" live network-based check which some people want. But maybe its time of usefulness is past. Georg, Arthur, or others -- any opinion on whether we need to provide an easy and obvious way for people to load check.tpo?

I think we can get rid of it on our about:tor page, especially as it is error-prone which caused confusion in the past.

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

comment:24 Changed 4 months ago by antonela

Thanks gk and mcs!

Assets are ready to be exported here. I included .png and .svg options.

https://marvelapp.com/5981a4b/screen/44384308/handoff

About fonts, I'll leave it up to you or Arthur. I'm fine moving forward with system fonts :)

If Tor Browser is not connected, could restart Tor Browser fix the problem? Could we lead users to restart? With that scenario, I have a few ideas about how to make it successful.

About check.tpo status, +1 with Geko. Steph already provided a copy for the subhead.

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

Changed 4 months ago by antonela

Attachment: forward.zip added

comment:25 Changed 4 months ago by antonela

The search "action" arrow that Mozilla uses on about:home is actually 16x16 pixels, so a similarly sized PNG would be great to have (see ​https://dxr.mozilla.org/mozilla-esr60/source/browser/themes/shared/icons/forward.svg; they use CSS magic to change the fill color).

I included 1x, 2x and 3x versions to have a good quality support for retina displays.
You can grab them here
https://trac.torproject.org/projects/tor/attachment/ticket/25695/forward.zip

comment:26 in reply to:  22 Changed 4 months ago by ProTipGuyFWIWWeLoveARMA

Replying to mcs:

  • SVGs are blocked when the security slider is set to the Safest setting. The easiest thing to do right now is to stick with PNGs.

PNG with the first iteration sounds good, but then please add the SVGs and use SVG fallbacks to deal with the case you mentioned since it will look much cleaner, see: https://css-tricks.com/svg-fallbacks/

comment:28 Changed 4 months ago by mcs

I created some child tickets so we can handle the implementation in phases:

  • #26960 implement new about:tor start page
  • #26961 implement new user onboarding
  • #26962 implement new features onboarding

comment:29 Changed 4 months ago by mcs

Status: assignedneeds_information

Kathy and I are trying to determine what needs to be done to implement the new user onboarding.

Antonela:

comment:30 in reply to:  29 Changed 4 months ago by antonela

Are the images and copy ready for the desktop new user onboarding? Where can we find them?

You can grab the copy by clicking at the left side bottom button called 'handoff'. That option will allow you to explore the design file.

We are still working on illos, could you have a placeholder for now? They are going to be ready, I hope, for this week.

Does https://marvelapp.com/5981a4b/screen/44384314 reflect how things should look?

Yes. Thanks!

I'm using Marvel for handing off just because is the tool we are using.
If there is a better way to do it for you, please let me know.

comment:31 Changed 4 months ago by mcs

Status: needs_informationnew

comment:32 Changed 4 months ago by mcs

Marvel will work fine for the handoff. Kathy and I are getting better at using it :)

Regarding the illustrations, you may already know this, but the following folder contains the onboarding images that Firefox 60 uses:
https://dxr.mozilla.org/mozilla-esr60/source/browser/extensions/onboarding/content/img

The SVGs whose filenames begin with icons_ contain the small icons that are shown to the left of navigation titles (left column of the onboarding overlay), and the filenames that begin with figure_ contain the larger illustrations that are displayed on the right side of each topic panel.

We don't have to include the small icons but we can.

I am not sure much flexibility we have with respect to image dimensions, so please try to stay close to the sizes that Firefox uses. Looking at the CSS rules, it looks like the icons are scaled to about 20 pixels high and the large illustrations are scaled to 352 pixels wide. Mozilla uses SVGs for everything, but we need to use to PNGs for now because of #25695. Kathy and I can produce the PNGs which we need if you give us SVGs.

comment:33 Changed 4 months ago by gk

Keywords: TorBrowserTeam201808 added; TorBrowserTeam201807 removed

Move our tickets to August.

comment:34 in reply to:  32 Changed 4 months ago by antonela

Marvel will work fine for the handoff. Kathy and I are getting better at using it :)

Cool! Glad it is working :)

Regarding the illustrations, you may already know this, but the following folder contains the onboarding images that Firefox 60 uses:
https://dxr.mozilla.org/mozilla-esr60/source/browser/extensions/onboarding/content/img

Thanks for the link and the explainer! I'm going to have pretty much the same size, and I'll provide the .svg and .png for each of them.

Thanks!

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

Changed 3 months ago by antonela

Attachment: onboarding-illos.zip added

comment:35 Changed 3 months ago by antonela

Illustrations for the onboarding attached here
https://trac.torproject.org/projects/tor/attachment/ticket/25695/onboarding-illos.zip

Please, remove metadata and let me know if you need any different format. Thanks!

comment:36 in reply to:  35 ; Changed 3 months ago by mcs

Status: newneeds_information

Replying to antonela:

Illustrations for the onboarding attached here
https://trac.torproject.org/projects/tor/attachment/ticket/25695/onboarding-illos.zip

Please, remove metadata and let me know if you need any different format. Thanks!

This looks good, except figure_welcome.png appears to be clipped on the bottom and right sides (e.g., part of the magnifying glass handle is missing). Is that intentional?

Changed 3 months ago by antonela

Attachment: figure_welcome.zip added

comment:37 in reply to:  36 Changed 3 months ago by antonela

Oh, thanks for the heads up. Updated version here:
https://trac.torproject.org/projects/tor/attachment/ticket/25695/figure_welcome.zip

Replying to mcs:

This looks good, except figure_welcome.png appears to be clipped on the bottom and right sides (e.g., part of the magnifying glass handle is missing). Is that intentional?

comment:38 Changed 3 months ago by gk

Resolution: fixed
Status: needs_informationclosed

Okay, unparented the remaining child tickets. This got implemented and the remaining tickets are bugs/enhancements not need to be tracked here (as trac does not let someone close a bug without all child bugs being resolved).

Note: See TracTickets for help on using tickets.