Opened 8 weeks ago

Closed 5 weeks ago

#26961 closed defect (fixed)

implement new user onboarding

Reported by: mcs Owned by: mcs
Priority: Very High Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: TorBrowserTeam201808R
Cc: tbb-team, ux-team, emmapeel Actual Points:
Parent ID: #25695 Points:
Reviewer: Sponsor:

Description

This ticket is to track implementation of the new user onboarding portion of #25695.

Child Tickets

Change History (13)

comment:1 Changed 7 weeks ago by gk

Keywords: TorBrowserTeam201808 added; TorBrowserTeam201807 removed

Move our tickets to August.

comment:2 Changed 7 weeks ago by gk

Priority: MediumVery High

Bumping prio.

comment:3 Changed 6 weeks ago by mcs

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

comment:4 Changed 6 weeks ago by mcs

Keywords: TorBrowserTeam201808R added; TorBrowserTeam201808 removed
Status: assignedneeds_review

This feature required one Torbutton patch:
https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug26961-01&id=4c69fedc9a0a927aea5d29e5060acb0df7016fef

and two tor-browser patches:
https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26961-01&id=ebce96a43a93481bf86ff7ae62654f8fe65594cb

https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26961-01&id=ad51b2427361c2f3eda54f0d22a90f4d435e668b

(the tor-browser patches are on a branch named bug26961-01 which also contain the commits for #27082).

We did our best to reuse the Firefox onboarding implementation with minimal changes (while still achieving Antonela's design). There are some loose ends; in particular the circuit display onboarding has not yet been implemented — but that will be done in #26962. Kathy and I think it makes sense for someone to review what we have so far so everyone can see this in a nightly build (which will allow us to get feedback from the UX team).

comment:5 Changed 6 weeks ago by mcs

Here are a few notes for the UX Team / Antonela:

comment:6 Changed 6 weeks ago by mcs

Cc: emmapeel added

One more thing: our Torbutton patch adds a new properties file, browserOnboarding.properties, which will need to be translated. In my opinion (and please do not take this as criticism) someone should make another pass and polish the English strings before we put this file on Transifex.

comment:7 in reply to:  5 ; Changed 5 weeks ago by antonela

Replying to mcs:

Here are a few notes for the UX Team / Antonela:

  • The onboarding requires a window that is at least 960 pixels wide; otherwise, it is not shown. Hopefully most of our users have a display that is wide enough.

Is this a Firefox's media query break up? What happens with smaller screens? We could think in a responsive version for next iteration :)

Great, perfect. Thanks.

Yes, we can think about to include them or not on the next iteration.

Ok.

  • We disabled onboarding notifications since we do not have a specification for the text (if enabled, these would appear at the bottom of the about:tor window to prompt users to look at onboarding tasks). Do we want notifications in a future version of this feature? We would need a notification title and message for each of the onboarding tasks. The English strings used by Firefox ESR60 are in the following file (search for onboarding.notification.onboarding-tour): https://dxr.mozilla.org/mozilla-esr60/source/browser/extensions/onboarding/locales/en-US/onboarding.properties There is also a button for each notification but in all cases Firefox ESR60 uses "Learn More" as the label (from onboarding.button.learnMore in that same properties file).

We might do it. I'll keep it in mind for the next iteration.

comment:8 in reply to:  7 Changed 5 weeks ago by mcs

Replying to antonela:

Replying to mcs:

Here are a few notes for the UX Team / Antonela:

  • The onboarding requires a window that is at least 960 pixels wide; otherwise, it is not shown. Hopefully most of our users have a display that is wide enough.

Is this a Firefox's media query break up? What happens with smaller screens? We could think in a responsive version for next iteration :)

With smaller screens the onboarding icon and prompt are not displayed. I think this is just a limitation of the Firefox implementation.

comment:9 Changed 5 weeks ago by mcs

We made a few small improvements and also incorporated the final onboarding artwork. Here are the commits to review:

One Torbutton patch:
https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug26961-01&id=4c69fedc9a0a927aea5d29e5060acb0df7016fef

and two tor-browser patches:
https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26961-02&id=e10e27a50893c473ed905a50715f35824185a87e

https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26961-02&id=b8dca4037d4dba3bbc27ee9989a09928446085f1

(the tor-browser patches are on a branch named bug26961-02 which also contain the commits for #27082).

comment:10 in reply to:  9 ; Changed 5 weeks ago by gk

Keywords: TorBrowserTeam201808 added; TorBrowserTeam201808R removed
Status: needs_reviewneeds_revision

Replying to mcs:

We made a few small improvements and also incorporated the final onboarding artwork. Here are the commits to review:

This works for me, nice! I was a bit puzzled, though, that the circuit display pane (and every pane after it) does not have a button leading to the next pane. Is that intentional?

One Torbutton patch:
https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug26961-01&id=4c69fedc9a0a927aea5d29e5060acb0df7016fef

Looks good, but please rebase against master (note, there is no observe() imported anymore, we might want to do that again).

and two tor-browser patches:
https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26961-02&id=e10e27a50893c473ed905a50715f35824185a87e

Looks good to me.

https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26961-02&id=b8dca4037d4dba3bbc27ee9989a09928446085f1

Looks good to me.

comment:11 in reply to:  10 Changed 5 weeks ago by mcs

Replying to gk:

This works for me, nice! I was a bit puzzled, though, that the circuit display pane (and every pane after it) does not have a button leading to the next pane. Is that intentional?

It is intentional in the sense that it is spec'd in Antonela's design, here:
https://marvelapp.com/5981a4b/screen/44384314
(well, the circuit display panel is supposed to have an Explore button; that will be added as part of #26962).

In Firefox ESR60 they do not use the buttons located in the bottom right for navigation between panes. The buttons are reserved for actions that allow users to explore more deeply, which is what we have for Circuit Display and the panes that follow it. Mozilla assumes users will navigate between panes using the names along the left hand side. I think it might be better to adopt that approach so that our use of the bottom right buttons is more consistent. But that is up to Antonela.

It may also be possible to have more than one button (e.g., Circuit Display could have a "Next" button as well as "Explore"); I am not sure if Mozilla's implementation handles that or not, and it may be a bad idea from a UX perspective because people won't know which button to choose.

One Torbutton patch:
https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug26961-01&id=4c69fedc9a0a927aea5d29e5060acb0df7016fef

Looks good, but please rebase against master (note, there is no observe() imported anymore, we might want to do that again).

I will rebase it.

comment:12 Changed 5 weeks ago by mcs

Keywords: TorBrowserTeam201808R added; TorBrowserTeam201808 removed
Status: needs_revisionneeds_review

Thanks for the review. Here is a rebased Torbutton patch (yes, we had to import observe agsin):
https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug26961-02&id=b3e9549ef08adf6865aadfe5da30e2b43523931f

I also rebased the browser patches as part of a minor change I made for #27082; if it is more convenient you can take the following two patches from our bug26961-03 tor-browser branch:
https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26961-03&id=b56c7cb384d76016e9b25aaf1e252534e579ea69

https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug26961-03&id=7ecd537d1d3f9120ad7e55943d8fbc59293ff0ec

comment:13 Changed 5 weeks ago by gk

Resolution: fixed
Status: needs_reviewclosed

Looks good, thanks! Applied to master (torbutton) as commit and tor-browser-60.1.0esr-8.0-1 (commits 1c7d5ff5c2982f6ba67e2e7cf80398b147c7182e and c5e0193f1771ef457a85cd7a59dda8ac99b2b03e).

Note: See TracTickets for help on using tickets.