Opened 14 months ago

Closed 3 months ago

Last modified 3 months ago

#25694 closed defect (fixed)

Activity 3.1: Improve the user experience of updating Tor Browser

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

Description (last modified by isabela)

First thing here is to review usability tickets for the updater:

All these tickets were selected back in the day when we were creating sponsor17 proposal.

So we should read what is going on at these tickets to define the problems we will try to fix.

Once we have the problems defined is when we will start drafting solutions.

Child Tickets

TicketStatusOwnerSummaryComponent
#27213closedtbb-teamUpdate about:tbupdate to new (about:tor) layoutApplications/Tor Browser
#27828closedtbb-team"Check for Tor Browser update" doesn't seem to do anythingApplications/Tor Browser
#28885closedtbb-teamnotify users that update is downloadingApplications/Tor Browser
#29180closedtbb-teamMAR download stalls when about dialog is openedApplications/Tor Browser

Attachments (20)

25694.png (226.9 KB) - added by antonela 13 months ago.
1.0.png (280.3 KB) - added by antonela 13 months ago.
1.3.png (300.4 KB) - added by antonela 13 months ago.
1.4.png (314.6 KB) - added by antonela 13 months ago.
1.2.png (309.5 KB) - added by antonela 13 months ago.
1.1.png (309.1 KB) - added by antonela 13 months ago.
FF60 Updater.png (246.5 KB) - added by mcs 13 months ago.
mockup based on the Firefox 60 UI
1.0.2.png (317.1 KB) - added by antonela 13 months ago.
1.1.2.png (127.1 KB) - added by antonela 13 months ago.
1.1.3.png (120.6 KB) - added by antonela 13 months ago.
1.2A.png (133.0 KB) - added by antonela 13 months ago.
1.2B.png (132.2 KB) - added by antonela 13 months ago.
1.3A.png (301.8 KB) - added by antonela 13 months ago.
1.3B.png (301.8 KB) - added by antonela 13 months ago.
25694-2.png (242.3 KB) - added by antonela 12 months ago.
25694-3.png (245.2 KB) - added by antonela 12 months ago.
Captura de pantalla 2018-05-11 a la(s) 10.43.26 AM.png (1.6 MB) - added by antonela 12 months ago.
TTB-restart-menu.png (727.0 KB) - added by antonela 12 months ago.
FF hamburger restart to update.png (57.9 KB) - added by mcs 12 months ago.
Sample prompt within hamburger menu
1.3C.jpg (341.6 KB) - added by antonela 9 months ago.

Change History (44)

comment:1 Changed 14 months ago by isabela

Description: modified (diff)

comment:2 Changed 14 months ago by gk

Cc: tbb-team added

Ccing the tbb-team.

comment:3 Changed 13 months ago by dmr

Cc: dmr added

comment:4 Changed 13 months ago by mcs

Additional tickets related to this task:
#23721 (website banner)
#25580 (Torbutton should trigger update)

Kathy and I have been testing the revised updater UX that we get "for free" with our upcoming update to an ESR60-based Tor Browser. The main change compared to the older UX is that doorhangers are used to inform users about update-related things instead of a Big Ugly Window. Hopefully an expansion of what was done for Firefox will meet our needs. There are hidden preferences we can adjust so that Tor Browser users are nagged as soon as an update is available (Firefox delays some hours or days before nagging).

Another thing to keep in mind is an architectural issue that we should resolve — Tor Browser currently uses two separate methods to determine if the browser needs to be updated:

  1. The traditional Firefox-based update service mechanism, which pulls down XML data from https://aus1.torproject.org/torbrowser/update_3/.... These checks occur twice per day and trigger an automatic download and staging of the update.
  2. Retrieving https://www.torproject.org/projects/torbrowser/RecommendedTBBVersions. This is used by Torbutton to display the update needed warning and associated arrow on the about:tor page. This kind of check occurs when a new window or tab is opened (including once during browser startup).

Kathy and would like to eliminate the second method and simply reply on the update service checks, unless we need redundancy to make it less likely that a bad actor can mount a successful "denial of update" attack. If we keep both mechanisms, we should integrate them in a smart way.

Changed 13 months ago by antonela

Attachment: 25694.png added

Changed 13 months ago by antonela

Attachment: 1.0.png added

Changed 13 months ago by antonela

Attachment: 1.3.png added

Changed 13 months ago by antonela

Attachment: 1.4.png added

comment:5 Changed 13 months ago by antonela

Hi all,

Here is a first approach for Update Tor Browser UX, based on tickets #13309, #17594, #18179, #18193, #18948, #25151, #25580, #25702, #19270, #20083, and #23721.

Please, take a look at the user flow I mapped and let me know if I'm missing anything.

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

We have two main user tasks: Update Tor Browser and Check for Updates.

I'm describing each of them here:

Existing Update

If there is an updated package to download, could we check it once the Tor Browser starts?

If the package exists, could we download it automatically and inform users? See the image 1.1

If the package exists, but the user has opted out for non-automatic updates, could we ask if they want to Download and Restart to apply changes? See 1.2. Do you think we need a Settings secondary button? I'd like to find some way to encourage these users to enable automatic updates.

Once the updated browser restart we can show feedback to users by changing the about:tor message. See 1.3

Checking for Updates

Right now users need to go to Tor Button → Check for Tor Browser Updates to check if a new version is available.

We could make this pattern consistent by don't open this updater windows. Instead, we may open the About Tor Browser popup which includes a Updates checking. See 1.4

I would like to have a review on:

  • User Flow: am I missing something?
  • Top Banner: I think it is taking enough attention to explain what is happening, what do you think?
  • About:Tor Warning: The red background, is it too much?

Notes from tickets
https://share.riseup.net/#HIWU1lsguq7-avQ-4jDB7g

Copy
All the copy status is up to review.

1.0 - Main
Title: Your browser is outdated
Description: Get the most recent version to keep browsing securely.
Call To Action: Update Now

1.1 - Banner
Title: We found a new Tor Browser stable version. Downloading now…
Call To Action: Restart Now
Secondary: Settings -> about:preferences/updates

1.2 - Banner
Title: We found a new Tor Browser stable version. Please, download it now.
Call To Action: Download and Restart

1.3 - Main
Title: Your Browser was updated
Description: Now you are connected to Tor. Browse the internet anonymously and securely.

comment:6 in reply to:  4 Changed 13 months ago by antonela

Replying to mcs:

Thanks a lot for all the tech background added here and in #25580 too. It is pretty useful for our work.

Changed 13 months ago by antonela

Attachment: 1.2.png added

Changed 13 months ago by antonela

Attachment: 1.1.png added

Changed 13 months ago by mcs

Attachment: FF60 Updater.png added

mockup based on the Firefox 60 UI

comment:7 Changed 13 months ago by mcs

Overall, the flow looks good. We will need to add some error cases, e.g., if the update fails to apply, Firefox prompts the user to download a new installer (which seems like a good idea).

However, Kathy and I are interested in reusing as much of the new Firefox updater UI as we can. Did you consider that approach? Advantages:

  • We can avoid some "line of death" problems (see https://textslashplain.com/2017/01/14/the-line-of-death/).
  • We reduce our dependency on about:tor (which some users do not use as their home page).
  • We will reduce our implementation effort and patch maintenance effort.
  • We will have the opportunity to help Mozilla improve their update UX.

I attached a mockup (FF60 Updater.png) that shows what that might look like (using Firefox screenshots).

comment:8 Changed 13 months ago by antonela

Thanks, Katty and Mark! Firefox approach seems just good for what we need to solve.

One thing we could discuss is the little noticeable icon we have as an "update remainder." We might make it more noticeable. As you mentioned in #26049 reducing a delay to prompt a message is a good idea. I would like to explore a new icon or some red flag to make it more visible.

Another thing I would like to explore is if we can show in some way a successful update. About:tor seems to be the first place to do it at first glance. But you mentioned that a lot of people doesn't have about:tor as a homepage. Should we do more research about it? How % of users have a custom home page? And how might the prompt works once the user restart?

That said, I'm in favor to keep this looking same as FF60 as much as we can. For sure, there is a lot of benefits to approaching this kind of tasks in this way for us.

comment:9 in reply to:  8 Changed 13 months ago by cypherpunks

Replying to antonela:

Another thing I would like to explore is if we can show in some way a successful update. About:tor seems to be the first place to do it at first glance. But you mentioned that a lot of people doesn't have about:tor as a homepage. Should we do more research about it? How % of users have a custom home page? And how might the prompt works once the user restart?

The basic assumption is that most users don't touch the default settings, I'd bet at worse that only a tiny percentage have a custom homepage.

Changed 13 months ago by antonela

Attachment: 1.0.2.png added

Changed 13 months ago by antonela

Attachment: 1.1.2.png added

Changed 13 months ago by antonela

Attachment: 1.1.3.png added

Changed 13 months ago by antonela

Attachment: 1.2A.png added

Changed 13 months ago by antonela

Attachment: 1.2B.png added

Changed 13 months ago by antonela

Attachment: 1.3A.png added

Changed 13 months ago by antonela

Attachment: 1.3B.png added

Changed 12 months ago by antonela

Attachment: 25694-2.png added

Changed 12 months ago by antonela

Attachment: 25694-3.png added

Changed 12 months ago by antonela

Attachment: TTB-restart-menu.png added

comment:10 Changed 12 months ago by antonela

As was decided at last meeting, I have been working with FF60 UI/UX

So far, we have this user flow once TB opens

https://trac.torproject.org/projects/tor/attachment/ticket/25694/25694-2.png

We also discussed to remove the 'Never check for updates' and 'Check for updates but let you choose to install them' user options in about:preferences. In that case, the user flow is going to look like

https://trac.torproject.org/projects/tor/attachment/ticket/25694/25694-3.png

Considerations using FF60 Update flow

Tor Browser is Outdated

When Tor Browser tells to users that an update is available and users delay the restart by clicking [not now], I propose to:

  1. load a new tab with 1.0 and keep the red restart notification at the Menu button OR
  2. keep the red dot at the Menu button without load a new tab.

If we will keep the notification at the Menu button, what does happen when the user wants to open the menu? Has FF60 a kind of notification bar as we have now?

https://trac.torproject.org/projects/tor/attachment/ticket/25694/TTB-restart-menu.png

If not, could the warning notification bubble be placed at the Tor Button? Could we have a notification banner like the menu button have right now but at the Tor Button Menu? If you think this is the way, I'll mockup it.

Downloading Package Feedback

Check [1.1](https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.1.2.png) and [1.1.2](https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.1.3.png). We can use the same doorhanger to keep the activity on the same side of the window and use the Download icon to illustrate what is happening under the hoods.

This proposal is useful because we are using a default browser behavior for downloading so users can easily identify that a download is progressing. Right after it finishes, we should open the Menu icon's doorhanger like img 1.2. I made two options: [1.2A](https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.2A.png) and [1.2B](https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.2B.png).

Another option could be using the same icon we have by default at the Menu icon and then open a doorhanger explaining the downloading. A ↓ icon, instead of the ↑ used now, makes more sense for users to illustrate that something is downloading.

Tor Browser is Updated

It is fancy what Firefox has right now

https://trac.torproject.org/projects/tor/attachment/ticket/25694/Captura%20de%20pantalla%202018-05-11%20a%20la(s)%2010.43.26%20AM.png

But it seems like it has some of the problems mentioned above, eg. line of death. So, my proposal here is: once user restarts, the message in about:tor updates and we keep for a few seconds a Check icon at the right Menu button. I'm not sure how Firefox is showing any feedback at menu icon by default (or if they are doing it at least), but I made a blue and green options for it.

comment:11 in reply to:  10 ; Changed 12 months ago by gk

Replying to antonela:

As was decided at last meeting, I have been working with FF60 UI/UX

So far, we have this user flow once TB opens

https://trac.torproject.org/projects/tor/attachment/ticket/25694/25694-2.png

We also discussed to remove the 'Never check for updates' and 'Check for updates but let you choose to install them' user options in about:preferences. In that case, the user flow is going to look like

https://trac.torproject.org/projects/tor/attachment/ticket/25694/25694-3.png

Not necessarily. We don't back out support for non-automatic updates, we just remove the UI for making this option easier accessible. It's still possible to flip the respective preferences in about:config and this option won't go away.

Considerations using FF60 Update flow

Tor Browser is Outdated

When Tor Browser tells to users that an update is available and users delay the restart by clicking [not now], I propose to:

  1. load a new tab with 1.0 and keep the red restart notification at the Menu button OR
  2. keep the red dot at the Menu button without load a new tab.

I think 2. is enough at least for now (we can iterate later on that if we think that's necessary).

If we will keep the notification at the Menu button, what does happen when the user wants to open the menu? Has FF60 a kind of notification bar as we have now?

https://trac.torproject.org/projects/tor/attachment/ticket/25694/TTB-restart-menu.png

I tried a bit but could not get it to work. But maybe I need to try harder or look at the code. So, I don't know. But having this bar on the menu, shown in red as the item on the hamburger menu button, sounds helpful to me.

If not, could the warning notification bubble be placed at the Tor Button? Could we have a notification banner like the menu button have right now but at the Tor Button Menu? If you think this is the way, I'll mockup it.

No, we should get rid of things in Torbutton. I would like to have the update related item gone in the menu and not a new one at its place.

Downloading Package Feedback

Check [1.1](https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.1.2.png) and [1.1.2](https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.1.3.png). We can use the same doorhanger to keep the activity on the same side of the window and use the Download icon to illustrate what is happening under the hoods.

Sounds good to me. As I said in the meeting if we want to get fancy we could show the remaining time of the download (Firefox is doing so when downloading normal stuff, so there is already UI and logic available for the general case). But I am fine deferring that to an iteration.

This proposal is useful because we are using a default browser behavior for downloading so users can easily identify that a download is progressing. Right after it finishes, we should open the Menu icon's doorhanger like img 1.2. I made two options: [1.2A](https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.2A.png) and [1.2B](https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.2B.png).

We should not introduce another color for the state of "update is ready but user has not decided yet whether to restart or not". Just go with the red one + some words as you suggested to hint at this being important.

Another option could be using the same icon we have by default at the Menu icon and then open a doorhanger explaining the downloading. A ↓ icon, instead of the ↑ used now, makes more sense for users to illustrate that something is downloading.

The "up icon" used by Mozilla serves a different purpose: it's meant to illustrate to the user that they are *up*dating the Firefox version I think (not *down*loading something because that's essentially not important to a "normal" user and rightly so; they just want to have the latest Firefox). So, we can essentially use both depending on what we want to stress in which context (the updating or the download ongoing).

Tor Browser is Updated

It is fancy what Firefox has right now

https://trac.torproject.org/projects/tor/attachment/ticket/25694/Captura%20de%20pantalla%202018-05-11%20a%20la(s)%2010.43.26%20AM.png

But it seems like it has some of the problems mentioned above, eg. line of death. So, my proposal here is: once user restarts, the message in about:tor updates and we keep for a few seconds a Check icon at the right Menu button. I'm not sure how Firefox is showing any feedback at menu icon by default (or if they are doing it at least), but I made a blue and green options for it.

What is the (green or blue) icon on the menu for? To show some continuity given that there was a red icon before there? I am inclined to think we don't need that especially given the big and prominent notice on the start page.

What happened to the changelog? I think we should add a way to have it easily accessible on the "you just updated"-page. I remember a bunch of folks being happy to have the changelog easily visible after update.

Changed 12 months ago by mcs

Sample prompt within hamburger menu

comment:12 in reply to:  11 Changed 12 months ago by mcs

Replying to gk:


Considerations using FF60 Update flow

Tor Browser is Outdated

When Tor Browser tells to users that an update is available and users delay the restart by clicking [not now], I propose to:

  1. load a new tab with 1.0 and keep the red restart notification at the Menu button OR
  2. keep the red dot at the Menu button without load a new tab.

I think 2. is enough at least for now (we can iterate later on that if we think that's necessary).

Kathy and I agree. Firefox has a mechanism to automatically open the doorhanger prompt if the user hasn't updated for some period of time after the browser notices that an update is available. We can use that mechanism to make sure our users notice the pending update. #26049 is about reducing the delay before the browser displays such a doorhanger prompt.

If we will keep the notification at the Menu button, what does happen when the user wants to open the menu? Has FF60 a kind of notification bar as we have now?

https://trac.torproject.org/projects/tor/attachment/ticket/25694/TTB-restart-menu.png

I tried a bit but could not get it to work. But maybe I need to try harder or look at the code. So, I don't know. But having this bar on the menu, shown in red as the item on the hamburger menu button, sounds helpful to me.

Firefox does include a notification area within the hamburger menu. This is a screenshot:

Sample prompt within hamburger menu

Downloading Package Feedback

Check [1.1](https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.1.2.png) and [1.1.2](https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.1.3.png). We can use the same doorhanger to keep the activity on the same side of the window and use the Download icon to illustrate what is happening under the hoods.

Sounds good to me. As I said in the meeting if we want to get fancy we could show the remaining time of the download (Firefox is doing so when downloading normal stuff, so there is already UI and logic available for the general case). But I am fine deferring that to an iteration.

For notification during download, Kathy and I were thinking of something more subtle, especially since it can take a while to download the update. Our idea is to have an icon on the hamburger menu (maybe the download icon as Antonela suggested). To see details about the update, the user would open the hamburger menu and we would use the notification area within the hamburger menu to show details.

Changed 9 months ago by antonela

Attachment: 1.3C.jpg added

comment:13 Changed 9 months ago by antonela

A recap:

Tor Browser is Outdated
When Tor Browser tells users that an update is available and users delay the restart by clicking [not now], we will keep the red dot at the Hamburger Menu button. Also, we will reduce the delay before the browser displays such a doorhanger prompt (#26049).

Downloading Package Feedback
When a new version is ready to get downloaded, Tor Browser will prompt the doorhanger (1.1). When the user clicks on [Download and Restart], the download starts and the download icon appears on the hamburger menu.
(1.1) https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.1.2.png

One remaining question here, when the download is ready, will we ask users to confirm the restart? (1.2) or will we restart automatically?
(1.2) https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.2B.png

Also, seems like Chrome/Brave's approach for UI feedback once a file is downloading is the preferred. I think we can consider this improvement/discussion for the next iteration (#27028).

Tor Browser is Updated
When the browser restarts, a fresh about:tor page will appear. The main title will change to the familiar "Tor Browser has been updated" (1.3).

(1.3) https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.3C.jpg

About changelogs, yes! We should include them or at least link to this list. I added a small link at the right top, just behind the Tor Browser Version.

Question about Tor Browser changelogs: How are they generated? manually? Who does that? How is the process? I'm thinking about to have a readable list like:

https://www.mozilla.org/en-US/firefox/releases/
https://www.mozilla.org/en-US/firefox/61.0/releasenotes/
https://www.sketchapp.com/updates/

Do you think is something worth to explore for the next iteration? If yes, I'll fill a ticket for it.

comment:14 in reply to:  13 Changed 9 months ago by gk

Replying to antonela:

A recap:

Tor Browser is Outdated
When Tor Browser tells users that an update is available and users delay the restart by clicking [not now], we will keep the red dot at the Hamburger Menu button. Also, we will reduce the delay before the browser displays such a doorhanger prompt (#26049).

Downloading Package Feedback
When a new version is ready to get downloaded, Tor Browser will prompt the doorhanger (1.1). When the user clicks on [Download and Restart], the download starts and the download icon appears on the hamburger menu.
(1.1) https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.1.2.png

One remaining question here, when the download is ready, will we ask users to confirm the restart? (1.2) or will we restart automatically?
(1.2) https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.2B.png

Also, seems like Chrome/Brave's approach for UI feedback once a file is downloading is the preferred. I think we can consider this improvement/discussion for the next iteration (#27028).

Tor Browser is Updated
When the browser restarts, a fresh about:tor page will appear. The main title will change to the familiar "Tor Browser has been updated" (1.3).

(1.3) https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.3C.jpg

About changelogs, yes! We should include them or at least link to this list. I added a small link at the right top, just behind the Tor Browser Version.

Question about Tor Browser changelogs: How are they generated? manually? Who does that? How is the process? I'm thinking about to have a readable list like:

https://www.mozilla.org/en-US/firefox/releases/
https://www.mozilla.org/en-US/firefox/61.0/releasenotes/
https://www.sketchapp.com/updates/

Do you think is something worth to explore for the next iteration? If yes, I'll fill a ticket for it.

FWIW: That's #27213.

comment:15 in reply to:  13 Changed 9 months ago by mcs

Replying to antonela:

About changelogs, yes! We should include them or at least link to this list. I added a small link at the right top, just behind the Tor Browser Version.

Question about Tor Browser changelogs: How are they generated? manually? Who does that? How is the process? I'm thinking about to have a readable list like:

https://www.mozilla.org/en-US/firefox/releases/
https://www.mozilla.org/en-US/firefox/61.0/releasenotes/
https://www.sketchapp.com/updates/

Do you think is something worth to explore for the next iteration? If yes, I'll fill a ticket for it.

We had a brief conversation about this on IRC in #tor-dev. Here is what I said there:

Currently the change log is maintained as a text file in git by boklm and GeKo (mostly).
It lives at https://gitweb.torproject.org/builders/tor-browser-build.git/tree/projects/tor-browser/Bundle-Data/Docs/ChangeLog.txt
about:tbupdate reads it as a local file (no network access)
We could just put it on a website but I like having something in the browser package that people download too.
Some people probably want all the details with ticket numbers and other people would probably prefer a simpler, friendlier format.

comment:16 Changed 5 months ago by mcs

I created #28885 to implementation of the "Downloading Package Feedback" item.

comment:17 Changed 4 months ago by gk

Keywords: tbb-updater added

comment:18 Changed 4 months ago by gk

Keywords: tbb-update added; tbb-updater removed

Renaming keyword to make it a bit broader

comment:19 Changed 3 months ago by gk

Status: assignedneeds_information

Are we good with this ticket as all child tickets are closed or is there work left to do here?

comment:20 Changed 3 months ago by antonela

On my side, yes.

comment:21 in reply to:  20 Changed 3 months ago by gk

Resolution: fixed
Status: needs_informationclosed

Replying to antonela:

On my side, yes.

I parse this as "We are good with closing this ticket". :) If not, please reopen.

comment:22 Changed 3 months ago by antonela

\o/

comment:23 Changed 3 months ago by mcs

Antonela, regarding the "Tor Browser is Updated" part of your comment:13: do you still like the idea of integrating about:tbupdate into the about:tor page? If you think so, please open a new ticket for that task so we can work on it in a future iteration.

comment:24 in reply to:  23 Changed 3 months ago by antonela

Replying to mcs:

Antonela, regarding the "Tor Browser is Updated" part of your comment:13: do you still like the idea of integrating about:tbupdate into the about:tor page? If you think so, please open a new ticket for that task so we can work on it in a future iteration.

Yes, it would be great. I have opened #29440 to tackle it. Thanks!

Note: See TracTickets for help on using tickets.