Introduce new features to users in Tor Browser
We need to follow a pattern to introduce new features in Tor Browser.
The onboarding tour seems the best place to explain the feature in detail, but for recurrent users, we need to find a catchy way to encourage users to discover it.
Activity
Trac:
Parent Ticket: #25658 (moved)
Also note (in case you are not aware): the onboarding mechanism allows us to specify a different list of topics for upgraded users vs. new users. This is accomplished by two prefs: browser.onboarding.newtour browser.onboarding.updatetour (in Tor Browser, we currently have the same list in both prefs).
But we should also keep #28822 (moved) in mind since esr68 is not too far in our future.
Hey mcs/gk & antonela,
Some initial ideas for feedback below:
about:tor
- Update the copy on the onboarding-speech-bubble
- Reduce the border radius to ~12px
- Add a notification dot (hex 00E2B1)
On that last point, would it be possible to animate the dot slightly? e.g. Could we make it pulse in CSS, like so here or here? Alternatively something like this would be subtler.
Onboarding
- Automatically skip returning users down to the first "New" item
- Replace tick icon with purple "NEW" pill for updated items (I've redrawn & increased the size of the tick icon slightly to match too)
- Consider a highlight state for text to emphasise changes for returning users (this is really an optional extra, however I'm conscious that some updates in future may be quite subtle and may need the extra emphasis)
Full & downloadable .sketch doc here for reference antonela: https://sketch.cloud/s/d1Wv2
Thanks!
Thanks, works for me.
Trac:
Parent: N/A to #25658 (moved)
Keywords: N/A deleted, TorBrowserTeam201903 added-
Replying to dunqan:
Hey mcs/gk & antonela,
Some initial ideas for feedback below:
== about:tor ==
- Update the copy on the onboarding-speech-bubble
- Reduce the border radius to ~12px
- Add a notification dot (hex 00E2B1)
Thanks for working on this! The above changes sound good.
On that last point, would it be possible to animate the dot slightly? e.g. Could we make it pulse in CSS, like so here or here? Alternatively something like this would be subtler.
We will see what we can do.
... == Onboarding ==
- Automatically skip returning users down to the first "New" item
- Replace tick icon with purple "NEW" pill for updated items (I've redrawn & increased the size of the tick icon slightly to match too)
- Consider a highlight state for text to emphasise changes for returning users (this is really an optional extra, however I'm conscious that some updates in future may be quite subtle and may need the extra emphasis)
After looking at Mozilla's implementation, Kathy and I would like to make a propose a different approach. Mozilla's model is that returning users (e.g., those who have updated their browser) are shown a completely different set of onboarding pages. That way there is no confusion about which items are new and which are not. Here are some mockups to show what it might look like if we had two items in our "updated" tour:
Thoughts? We would need a new image for the "Toolbar" page (or we could remove the image). And all of the copy needs work.
Trac:
Status: new to needs_information -
Thanks both! That certainly seems like a far cleaner solution.
Would the consequences of this approach be that existing users could no longer return to the base onboarding once an update's been released?
I don't think we've got any data on how often users return to this feature after initial onboarding – do we?
-
Replying to dunqan:
Would the consequences of this approach be that existing users could no longer return to the base onboarding once an update's been released?
Yes. The update "track" (aka tour type) is selected if the browser has been opened at least once with an older version of the tour set (this is handled via hidden prefs named
browser.onboarding.tourset-versionandbrowser.onboarding.seen-tourset-version). So far we have only used one one tour set version, which is 2. When we release Tor Browser 8.5 we would bump that to 3, which means users who upgrade to 8.5 will be placed on the update track. New users will remain on the "new" track until we release a Tor Browser that has a tour set version higher than 3. The logic that implements tour selection is here: https://gitweb.torproject.org/tor-browser.git/tree/browser/extensions/onboarding/OnboardingTourType.jsm#n22I don't think we've got any data on how often users return to this feature after initial onboarding – do we?
No, not unless some data (or feeling) was captured during the UX testing sessions.
-
Great, thanks mcs!
No, not unless some data (or feeling) was captured during the UX testing sessions.
Anecdotally I've came across a couple of novice users who returned to the onboarding after the initial run-through to reference certain features, but there hasn't been any testing on this subject afaik.
Nonetheless replacing the illustrations with screenshots on the "updated" onboarding screen (as per your proposal) may provide a little more flexibility when introducing new features in future?
If you can fire me a screenshot or visual of the toolbar change I can mock this up for you :)
(Sorry, I'm not familiar with that ticket)
-
Replying to dunqan:
Nonetheless replacing the illustrations with screenshots on the "updated" onboarding screen (as per your proposal) may provide a little more flexibility when introducing new features in future?
If you can fire me a screenshot or visual of the toolbar change I can mock this up for you :)
The toolbar changes were done in #25658 (moved). In am not sure what you have in mind for the toolbar screenshot, so probably you should compare the toolbars in Tor Browser 8.0.8 and 8.5a10 and then grab screenshots from 8.5a10. A quick summary of the changes:
- Added Security Level (shield) icon.
- Moved Torbutton (onion) after the URL bar.
- Removed NoScript and HTTPS-Everywhere icons.
Trac:
Status: needs_information to new 
Replying to dunqan:
Hey, I think that can be useful if we remove the illo and we include a UI mockup of the new toolbar. Perhaps, can we have a gif?
For 1. Toolbar, we can have the old one and the new one. A little loop showing how the new icons appear could be illustrative for users that don't even know what "toolbar" stands for. Showing that we are hiding HTTPS-E and NoScript icons may be problematic.
For 2. Security Settings, we could have a little loop showing how the doorhanger appears?
Is possible that having gifs is a problem. So, for both options, the static .png (300x300) is necessary.
Thanks dunqan!
Great, thanks mcs!
No, not unless some data (or feeling) was captured during the UX testing sessions.
Anecdotally I've came across a couple of novice users who returned to the onboarding after the initial run-through to reference certain features, but there hasn't been any testing on this subject afaik.
Nonetheless replacing the illustrations with screenshots on the "updated" onboarding screen (as per your proposal) may provide a little more flexibility when introducing new features in future?
If you can fire me a screenshot or visual of the toolbar change I can mock this up for you :)
(Sorry, I'm not familiar with that ticket)
-
Replying to antonela:
Hey, I think that can be useful if we remove the illo and we include a UI mockup of the new toolbar. Perhaps, can we have a gif?
Yep, exactly what I was thinking! I mocked up these two static images last night, but I didn't realise the image size is different on TB vs Sketch so will need to fix that up first.
Any preference/recommendations for animation tools antonela?
-
Replying to antonela:
Dunqan, I think both look great. We don't need an animation for this iteration. Let's wait for devs feedback and then share the assets with them for implementation. Thanks!
Kathy and I don't have any experience with using animated gifs inside Firefox chrome code, but it should be possible. The only thing I would worry about is controlling when the animation begins; for example, all of the onboarding tour panels are loaded as soon as onboarding is opened (even the hidden ones). Ideally, an animated gif would play from the beginning each time someone switched to the panel it is on, so we would need to figure out how to control "playback."
That's a long-winded way of saying that Kathy and I are okay with skipping animation for this round :)
-
Haha, no worries!
I've updated the Sketch file to better reflect the live dimensions of the onboarding card on TB: https://sketch.cloud/s/d1Wv2
The only other addition I've made to the "updated" onboarding cards are the meta-labels above the card titles (to clean up long titles a little). It's strictly optional however!
300x300 PNGs @1x, 2x and 3x can be found here: https://www.dropbox.com/sh/nmyrpysuxtrr7s6/AABXxN0QA8_r47Osvie8-fF2a?dl=0
(Have cronched the filesizes down a bit too.)
All good folks?
-
Replying to gk:
If mcs/brade are fine with it then this looks good to me, thanks!
Yes, we will work on implementing it.
Dunqan — can you provide colors and corner radius for the
UpdatedandNewmeta-labels? If you provide CSS we would use it ;)Antonela — what do we need to do to finalize the English text? We should do that soon so there is time for translation.
-
Replying to mcs:
Dunqan — can you provide colors and corner radius for the
UpdatedandNewmeta-labels? If you provide CSS we would use it ;)Sure thing! CSS attributes as follows:
{{{ background: #F1F1F3; border-radius: 4px; Min-height: 25px; font-size: 10px; font-weight: 600; text-transform: uppercase;
-
Replying to mcs:
Antonela — what do we need to do to finalize the English text? We should do that soon so there is time for translation.
Started a thread with stephw to have her review. Thanks!
-
As we discussed via email, we have three group of users:
Updated Users (via automatic updates)
This group of users will have an onboarding tour, automatically prompted when they launch the updated browser with 2(two) sections, following comment:19 designs. Copy will say:
Toolbar layout We improved the browser toolbar layout. We moved the Torbutton icon after the URL bar, and we added a security level icon next to it. The NoScript and HTTPS-Everywhere icons are no longer included in the toolbar by default, but you can customize your toolbar to add them back.Security level experience We improved how you see and set your security level. We replaced the security slider with a toolbar icon that makes your current level visible at all times. Click it to view details about your current level or to change your security settings.New Users (could be recurrent, but with a fresh installation)
This group of users will have the regular onboarding tour, automatically prompted when they start the browser with 7(seven) sections. The Security Section will have the
newlabel.First Time Users
Same onboarding, like a New User.
mcs/brade/pospeselr are we good with this? am i missing anything?
Can confirm, Updated Users will still see NoScript and HTTPS-Everywhere (along with any other user initiated UI customizations such as theme and other extension icons) exactly where they left them prior to update, but Torbutton will move and Security Level button placed alongside it.
The Updated Users copy can remove the entire last sentence about NoScript and HTTPS-Everywhere.
-
Okay, here is our torbutton patch (add new strings): https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug29768-01&id=9d7c1081105eb3858f6654daa31202d4bac1d84f
And here is our tor-browser patch (make all the new stuff work): https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug29768-01&id=e4a163b58530f37b7f292fe49ad7b882b2f046d0
Adding the attention-grabbing dot took some work but it seems worthwhile. We ended up using a variation of the third animation that Dunqan suggested in comment:4 (a simple pulsating "dot" that stops animating after 14 seconds). Kathy and I think it looks good without being too annoying. Once we have a new nightly build everyone should take a look at it. You can force the 8.5 update tour to be displayed by opening the browser, using about:config to set
browser.onboarding.tourset-versionto2(instead of the new default value of3), and then restarting the browser.Trac:
Status: new to needs_review
Keywords: TorBrowserTeam201903 deleted, TorBrowserTeam201903R added -
Replying to mcs:
Okay, here is our torbutton patch (add new strings): https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug29768-01&id=9d7c1081105eb3858f6654daa31202d4bac1d84f
And here is our tor-browser patch (make all the new stuff work): https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug29768-01&id=e4a163b58530f37b7f292fe49ad7b882b2f046d0
Adding the attention-grabbing dot took some work but it seems worthwhile. We ended up using a variation of the third animation that Dunqan suggested in comment:4 (a simple pulsating "dot" that stops animating after 14 seconds). Kathy and I think it looks good without being too annoying. Once we have a new nightly build everyone should take a look at it. You can force the 8.5 update tour to be displayed by opening the browser, using about:config to set
browser.onboarding.tourset-versionto2(instead of the new default value of3), and then restarting the browser.Looks good to me. I merged the Torbutton patch to
master(commit 9d7c1081105eb3858f6654daa31202d4bac1d84f) and the browser patch totor-browser(commit e4a163b58530f37b7f292fe49ad7b882b2f046d0).For anyone testing that in, say, nightly builds the pref to actually set tp
2isbrowser.onboarding.seen-tourset-version. -
Is this the place to get Nightly builds from? Couldn't see anything on the regular dist/download URLs.
http://f4amtbsowhix7rrf.onion/tor-browser-builds/
Also installing Nightly alongside Stable/Alpha seems to break the browser for me on MacOS – any tips there? e.g. Should I be installing & running Tor Nightly in a VM instead?
Apologies for the noob questions ;)
-
Replying to dunqan:
Is this the place to get Nightly builds from? Couldn't see anything on the regular dist/download URLs.
Yes, although the changes for this ticket probably aren't in the latest nightlies (wait for the next builds).
Also installing Nightly alongside Stable/Alpha seems to break the browser for me on MacOS – any tips there? e.g. Should I be installing & running Tor Nightly in a VM instead?
I am not sure how your browser broke, but you cannot run two copies of Tor Browser at the same time unless you change the ports used by the tor daemon. Also, it is best to avoid sharing browser profiles and other data between e.g., stable and nightly. On macOS, creating a folder for each .app is a good approach; that way, each copy of the browser will have its own
TorBrowser-Datadirectory. -
To help recurring users who do a fresh install, we could improve the Security onboarding page to include
[New](as Antonela suggested in comment:27; sorry I missed that) and we could also add a text note about the NoScript and HTTPS-E changes (a suggestion from gk). Here is a prototype:
Kathy and I think this looks pretty good, although adding
[New]at the top and the note at the bottom nearly fills the available space. That might be a problem in some languages. -
Replying to mcs:
I am not sure how your browser broke, but you cannot run two copies of Tor Browser at the same time unless you change the ports used by the tor daemon. Also, it is best to avoid sharing browser profiles and other data between e.g., stable and nightly. On macOS, creating a folder for each .app is a good approach; that way, each copy of the browser will have its own TorBrowser-Data directory.
Gotcha, thanks mcs!
