Opened 14 months ago

Last modified 5 months ago

#31660 new task

Revise onboarding to take new Firefox experience into account

Reported by: gk Owned by: tbb-team
Priority: Medium Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ux-team, tbb-10, ReleaseTrainMigration
Cc: antonela, acat Actual Points:
Parent ID: #33658 Points: 4
Reviewer: Sponsor: Sponsor58-can

Description

Firefox 68 ESR does not come with the onboarding extension anymore which Mozilla and we used to provide an onboarding experience for our browser based on Firefox 60 ESR. We hacked around that for Tor Browser 9 by reverting a bunch of patches and adjusting the code we had (see: #28822) but that strategy won't work forever.

Instead we should look into how the new onboarding in Firefox works and develop our own on top of that. Or: We make a conscious decision to provide onboarding independent of Firefox's one because we don't like the new one Mozilla ships.

Child Tickets

TicketStatusOwnerSummaryComponent
#34321closedtbb-teamAdd What's New Onboarding ItemApplications/Tor Browser

Attachments (2)

onboarding.png (69.0 KB) - added by gk 12 months ago.
bug31660_00_whats-new.png (100.2 KB) - added by sysrqb 5 months ago.
What's New

Download all attachments as: .zip

Change History (38)

comment:1 Changed 14 months ago by antonela

Thanks for the heads up, gk. Do you have any documentation link I could explore regarding any Firefox onboarding in ESR68? I failed when I tried to find it.

comment:2 Changed 14 months ago by antonela

Cc: acat added

adding acat here too.

comment:3 in reply to:  1 Changed 14 months ago by gk

Replying to antonela:

Thanks for the heads up, gk. Do you have any documentation link I could explore regarding any Firefox onboarding in ESR68? I failed when I tried to find it.

I have not looked closely to be honest. It's part of the activity stream now, https://bugzilla.mozilla.org/show_bug.cgi?id=1457565 being the meta bug. Clicking a bit around I found

https://trello.com/c/gRkk9mI2/188-i-want-a-simple-onboarding-tour-to-run-at-the-first-run-of-the-first-new-tab-page

but we should probably dig up more here.

comment:4 Changed 12 months ago by sysrqb

Keywords: TorBrowserTeam201911 tbb-9.5 added

comment:5 Changed 12 months ago by pili

Points: 4

comment:6 Changed 12 months ago by antonela

comment:7 in reply to:  6 ; Changed 12 months ago by gk

Replying to antonela:

i'm leaving this here so i don't forget

https://www.mozilla.org/en-US/firefox/70.0/whatsnew/all/?oldversion=69.0.3

FWIW, that's not the actual onboarding but more a general update page. The actual onboarding is explaining features as the previous one did. You see it in the attached screenshot (that's with Firefox 70.0.1) where you can click on the buttons to load further info or download stuff. The onboarding seems to be pretty flexible as I see an onboarding in ESR 68 closer to what we ship where features are highlighted that then open menu items explaining things in more detail (assuming that general functionality still exists in later versions).

Changed 12 months ago by gk

Attachment: onboarding.png added

comment:8 in reply to:  7 Changed 12 months ago by antonela

Replying to gk:

The onboarding seems to be pretty flexible as I see an onboarding in ESR 68 closer to what we ship where features are highlighted that then open menu items explaining things in more detail (assuming that general functionality still exists in later versions).

Nice! I didn't see it, but for sure we can follow that pattern on the next iteration. Honestly, I really like the idea of keeping cards.

comment:9 Changed 11 months ago by pili

Keywords: TorBrowserTeam202001 added; TorBrowserTeam201911 removed

Moving tickets to January

comment:10 Changed 9 months ago by pili

Keywords: TorBrowserTeam202002 added; TorBrowserTeam202001 removed

Moving tickets to February

comment:11 Changed 9 months ago by pili

Keywords: TorBrowserTeam202004 added; TorBrowserTeam202002 removed

Moving to April 2020

comment:12 Changed 9 months ago by sysrqb

Keywords: ReleaseTrainMigration added

comment:13 Changed 7 months ago by antonela

We don't have this work with any sponsor but I think is critical that we should do something. TB 9.0.6 (stable) has the onboarding-overlay-button in about:tor but it does not have any action. Could we link to a webpage that we can easily update? Something dynamic like:
tpo.org/download/$version/new

@hiro what do you think?

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

comment:14 Changed 7 months ago by pili

Sponsor: Sponsor58-can

comment:15 Changed 7 months ago by pili

Keywords: TorBrowserTeam202005 added; TorBrowserTeam202004 removed

comment:16 Changed 7 months ago by pili

Parent ID: #33658

comment:17 in reply to:  13 Changed 5 months ago by sysrqb

Replying to antonela:

We don't have this work with any sponsor but I think is critical that we should do something. TB 9.0.6 (stable) has the onboarding-overlay-button in about:tor but it does not have any action. Could we link to a webpage that we can easily update? Something dynamic like:
tpo.org/download/$version/new

I think we should try https://www.torproject.org/download/torbrowser/9.5a12/new or /whatsnew

1) we have download/tor/ for tor-specific download information, so can put Tor Browser info under download/torbrowser/ (and localized pages are ${locale}/download/torbrowser/$version/whatsnew)
2) this follows Mozilla closer where they use en-US/firefox/74.0/whatsnew/all/

Alternatively, we put it at torbrowser/$version/whatsnew instead of under download/. I don't have strong feelings about this and we can always move it to a different location later.

In addition, the "New Thing" on desktop is Messaging System for the "What’s New Panel" (under Hamburger button-> "What's New"). We should migrate to that after we finish the 78esr transition (on desktop). Fenix has a separate implementation and Mozilla's using:
https://support.mozilla.org/en-US/kb/whats-new-firefox-preview?as=u&utm_source=inproduct

comment:18 Changed 5 months ago by antonela

I think we should try ​https://www.torproject.org/download/torbrowser/9.5a12/new or /whatsnew

Awesome. Hiro and I we are working on this templating

In addition, the "New Thing" on desktop is ​Messaging System for the "What’s New Panel" (under Hamburger button-> "What's New"). We should migrate to that after we finish the 78esr transition (on desktop). Fenix has a separate implementation and Mozilla's using:

https://support.mozilla.org/en-US/kb/whats-new-firefox-preview?as=u&utm_source=inproduct
That sounds ideal. Do you want to run it for 9.5? Seems easy enough to have a short descirption and a gradient-like filled onion icon :)

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

comment:19 in reply to:  18 Changed 5 months ago by gk

Replying to antonela:

I think we should try ​https://www.torproject.org/download/torbrowser/9.5a12/new or /whatsnew

Awesome. Hiro and I we are working on this templating

In addition, the "New Thing" on desktop is ​Messaging System for the "What’s New Panel" (under Hamburger button-> "What's New"). We should migrate to that after we finish the 78esr transition (on desktop). Fenix has a separate implementation and Mozilla's using:

https://support.mozilla.org/en-US/kb/whats-new-firefox-preview?as=u&utm_source=inproduct
That sounds ideal. Do you want to run it for 9.5? Seems easy enough to have a short descirption and a gradient-like filled onion icon :)

Not sure what you mean but I think we don't have time to move the onboarding we currently have to the one Firefox is using for 9.5. I am not even sure whether we get to that for Tor Browser 10, although that might be more likely.

Changed 5 months ago by sysrqb

Attachment: bug31660_00_whats-new.png added

What's New

comment:20 Changed 5 months ago by sysrqb

We should have something included in the 9.5 release onboarding for the new features. Antonela and I decided we can have one new entry named "What's New" (following Mozilla's new onboarding experience). This entry simply has a link to a webpage where new features are described.

The webpage is currently being developed at https://www.torproject.org/releases/tor-browser-95/

I have a Linux testbuild at https://people.torproject.org/~sysrqb/bug31660/ and I'm building a macOS X testbuild now (should be ready in ~2 hours).

1) Is the current design/UX a good idea?
2) We have very little time for getting strings translated. What strings should we use?

comment:21 in reply to:  20 Changed 5 months ago by sysrqb

Status: newneeds_review

Replying to sysrqb:

1) Is the current design/UX a good idea?
2) We have very little time for getting strings translated. What strings should we use?

3) I re-used/repurposed an image from the original Onboarding experience for this new entry. It mostly fits, but I don't know if we have a better graphic available.

comment:22 Changed 5 months ago by acat

Would it make it simpler to make "What's New" open the link to https://www.torproject.org/releases/tor-browser-95 directly? (without showing the "subview" on the right). It seems to me the last step of clicking See What's New is a bit redundant, and maybe we could save some design/strings.

comment:23 in reply to:  22 ; Changed 5 months ago by sysrqb

Replying to acat:

Would it make it simpler to make "What's New" open the link to https://www.torproject.org/releases/tor-browser-95 directly? (without showing the "subview" on the right). It seems to me the last step of clicking See What's New is a bit redundant, and maybe we could save some design/strings.

Oh! Nice idea! That will avoid adding many new strings, too. (We'll still need "What's New")

I did find the subview as redundant, as well, but I decided to follow the same pattern as the other items. I'll create another patch with this behavior.

comment:24 Changed 5 months ago by brade

The current onboarding code displays two different "tours" (sets of panels):

  • "newtour" for new users
  • "updatetour" for users who have upgraded

Should we omit "What's New" from the "newtour" and only have it for "updatetour"?
It is easy to control this via the browser.onboarding.* preferences.

comment:25 in reply to:  23 ; Changed 5 months ago by mcs

Replying to sysrqb:

Replying to acat:

Would it make it simpler to make "What's New" open the link to https://www.torproject.org/releases/tor-browser-95 directly? (without showing the "subview" on the right). It seems to me the last step of clicking See What's New is a bit redundant, and maybe we could save some design/strings.

Oh! Nice idea! That will avoid adding many new strings, too. (We'll still need "What's New")

If you make the "See what's new in Tor Browser" button that is displayed on about:tor go directly to the web page then we would not need any new strings. I am not sure how difficult that would be to implement though.

comment:26 in reply to:  25 ; Changed 5 months ago by mcs

Replying to mcs:

If you make the "See what's new in Tor Browser" button that is displayed on about:tor go directly to the web page then we would not need any new strings. I am not sure how difficult that would be to implement though.

Maybe it is as simple as doing something like this inside handleClick() (in Onboarding.jsm):

...
case "onboarding-overlay-button":
...
if (this._tourType === "update")
  this.sendMessageToChrome("tor-open-tab", {url: ...});
} else {
  this.showOverlay();
  this.gotoPage(this._firstUncompleteTour.id);
}

Untested of course ;)

comment:27 in reply to:  25 Changed 5 months ago by sysrqb

Replying to mcs:

Replying to sysrqb:

Replying to acat:

Would it make it simpler to make "What's New" open the link to https://www.torproject.org/releases/tor-browser-95 directly? (without showing the "subview" on the right). It seems to me the last step of clicking See What's New is a bit redundant, and maybe we could save some design/strings.

Oh! Nice idea! That will avoid adding many new strings, too. (We'll still need "What's New")

If you make the "See what's new in Tor Browser" button that is displayed on about:tor go directly to the web page then we would not need any new strings. I am not sure how difficult that would be to implement though.

Hrmmmm. That would be relatively easy. In that case, we move all important onboarding information to the webpage.

I'm a little torn right now because the onboarding experience provides a nice tutorial for new users. But we can sacrifice that aspect of onboarding for both 1) simplicity, and 2) we'll need to reimplement all of this for 78esr anyway.

comment:28 in reply to:  26 ; Changed 5 months ago by sysrqb

Replying to mcs:

Replying to mcs:

If you make the "See what's new in Tor Browser" button that is displayed on about:tor go directly to the web page then we would not need any new strings. I am not sure how difficult that would be to implement though.

Maybe it is as simple as doing something like this inside handleClick() (in Onboarding.jsm):

...
case "onboarding-overlay-button":
...
if (this._tourType === "update")
  this.sendMessageToChrome("tor-open-tab", {url: ...});
} else {
  this.showOverlay();
  this.gotoPage(this._firstUncompleteTour.id);
}

Untested of course ;)

Ah, this follows on from brade's comment. That was exactly the way I'd do it (modulo testing :)), but we should give new users a link to the webpage, as well (somewhere). Are you suggesting we use this for users who update, and we have the additional tab for new users?

comment:29 in reply to:  28 Changed 5 months ago by mcs

Replying to sysrqb:

Ah, this follows on from brade's comment. That was exactly the way I'd do it (modulo testing :)), but we should give new users a link to the webpage, as well (somewhere). Are you suggesting we use this for users who update, and we have the additional tab for new users?

Yes, I think that makes sense.

comment:30 in reply to:  24 ; Changed 5 months ago by sysrqb

Replying to brade:

The current onboarding code displays two different "tours" (sets of panels):

  • "newtour" for new users
  • "updatetour" for users who have upgraded

Should we omit "What's New" from the "newtour" and only have it for "updatetour"?
It is easy to control this via the browser.onboarding.* preferences.

For new users should we call it "Additional Features" or "See More"? Phrasing that indicates more information is available? Maybe we can use "More Information", and re-use the PageInfo string (but that's not exactly an ideal string for this use case).

comment:31 in reply to:  30 ; Changed 5 months ago by sysrqb

Replying to sysrqb:

Replying to brade:

The current onboarding code displays two different "tours" (sets of panels):

  • "newtour" for new users
  • "updatetour" for users who have upgraded

Should we omit "What's New" from the "newtour" and only have it for "updatetour"?
It is easy to control this via the browser.onboarding.* preferences.

For new users should we call it "Additional Features" or "See More"? Phrasing that indicates more information is available? Maybe we can use "More Information", and re-use the PageInfo string (but that's not exactly an ideal string for this use case).

"Learn More" ?

comment:32 Changed 5 months ago by gk

Keywords: TorBrowserTeam202005R added; TorBrowserTeam202005 removed

comment:33 in reply to:  31 Changed 5 months ago by acat

Replying to sysrqb:

Replying to sysrqb:

Replying to brade:

The current onboarding code displays two different "tours" (sets of panels):

  • "newtour" for new users
  • "updatetour" for users who have upgraded

Should we omit "What's New" from the "newtour" and only have it for "updatetour"?
It is easy to control this via the browser.onboarding.* preferences.

For new users should we call it "Additional Features" or "See More"? Phrasing that indicates more information is available? Maybe we can use "More Information", and re-use the PageInfo string (but that's not exactly an ideal string for this use case).

"Learn More" ?

+1 on opening tab directly for existing users.

For new users, I don't have a strong opinion on the string we should show. Maybe I would still just use "See what’s new".

comment:34 Changed 5 months ago by antonela

Thanks for working on this team! What is the final version? Will make the alpha? Can I have a build?

The idea of the webpage was exactly to avoid last-minute changes in Tor Browser patches. I think it is good if we open a new tab for existing users.

For new users, we can use "See what's new" link too.

comment:35 Changed 5 months ago by sysrqb

Status: needs_reviewnew

(Okay. We're 30 comments into this ticket, but it's never too late for becoming organized).

I opened #34321 for the current patch we're working on that is going into 9.5.

comment:36 Changed 5 months ago by sysrqb

Keywords: tbb-10 added; tbb-9.5 TorBrowserTeam202005R removed
Note: See TracTickets for help on using tickets.