Onboarding: unintuitive not-navigation buttons, starting with "Circuit Display" / "See My Path"

The "See My Path" button's effects are unintuitive for a user at that point in sequence, and the button click may get skipped by people utilizing a different form of navigation through Onboarding.

Prior to "See My Path", each button was essentially a "go to next" button. Nothing in the "Circuit Display" paragraph indicates it will have a different effect than that.

Furthermore, the button doesn't advance the Onboarding screen (unlike prior buttons) - it just marks "Circuit Display" as done, thus leaving either of these navigation paths:

• user directly clicking on "Security" (or later)
• closing the Onboarding window and re-opening it (which "advances" the Onboarding because "Circuit Display" was marked as done)

A user may thus //also// try to click the button again, being so far trained to expect the button to cause navigation.

A similar thing happens for "Security" / "Review Settings" and "Experience Tips" / "See FAQs". However, for "Security", the text in the paragraph does indicate that something else will happen in response to the button click.

(Encountered in TB 8.0)

added TorBrowserTeam201903 component::applications/tor browser owner::tbb-team priority::medium resolution::fixed severity::normal status::closed tbb-8.0-issues tbb-8.5-must-alpha tbb-onboarding type::defect ux-team labels

Right. I was going through the onboarding, everything was cool, I clicked "See my path" and now I have a tab open to duckduckgo. What does that have to do with seeing my path?

Replying to arma:

Right. I was going through the onboarding, everything was cool, I clicked "See my path" and now I have a tab open to duckduckgo. What does that have to do with seeing my path?

Wowza. I killed that duckduckgo tab, and then I was faced with the same onboarding screen, so I clicked "see my path" again just for kicks, and this time it popped up a little window pointing out how to see my path. Neat. I wonder why it didn't do that the first time.

Trac:
Cc: ff60-esr, ux-team to tbb-8.0-issues, tbb-onboarding, ux-team

Replying to arma:

Wowza. I killed that duckduckgo tab, and then I was faced with the same onboarding screen, so I clicked "see my path" again just for kicks, and this time it popped up a little window pointing out how to see my path. Neat. I wonder why it didn't do that the first time.

Maybe that is a different bug. Can you reproduce it?

Regarding navigation: as I mentioned in ticket:27483#comment:2, I believe that Firefox only provides navigation between panels via the left hand side buttons. I agree it can be confusing to train people that the right button is for "go to the next panel" and then change the behavior part way through the onboarding sequence. Maybe the UX team should test this with more people and decide what is best.

Oops, I started this ticket with keywords in the cc field... fixing that...

Trac:
Keywords: N/A deleted, ux-team, tbb-onboarding, tbb-8.0-issues added
Cc: tbb-8.0-issues, tbb-onboarding, ux-team to N/A

Replying to mcs:

Regarding navigation: as I mentioned in ticket:27483#comment:2, I believe that Firefox only provides navigation between panels via the left hand side buttons. I agree it can be confusing to train people that the right button is for "go to the next panel" and then change the behavior part way through the onboarding sequence. Maybe the UX team should test this with more people and decide what is best.

I believe that the behavior should be consistent for each screen. Thus, either of these options should do that:

• remove the buttons on the first few screens that navigate for the user
• make the "not-navigation" buttons //also// advance the screen to the next, in addition to their current effects

Another part of the switch in behavior that was really confusing was the //lack of description// for what was going to happen. Doing things in a different tab is fairly unexpected / "jumpy" from a UX perspective - if there was some wording that "forewarned" the user, I think that the opening of a new tab wouldn't have been so confusing.

Just to reiterate and tie pieces of earlier comments together... I said:

Nothing in the "Circuit Display" paragraph indicates it will have a different effect than that. [...] A similar thing happens for "Security" / "Review Settings" and "Experience Tips" / "See FAQs". However, for "Security", the text in the paragraph does indicate that something else will happen in response to the button click.

arma said:

Right. I was going through the onboarding, everything was cool, I clicked "See my path" and now I have a tab open to duckduckgo. [...]

Replying to mcs:

Replying to arma:

Wowza. I killed that duckduckgo tab, and then I was faced with the same onboarding screen, so I clicked "see my path" again just for kicks, and this time it popped up a little window pointing out how to see my path. Neat. I wonder why it didn't do that the first time.

Maybe that is a different bug. Can you reproduce it?

No, but a person on #tor just experienced it too: the window pops up on the second try, but no window on the first try.

It is possible that both of us just ignored the window the first time, and it secretly was there. So I'm still not clear if the bug is "sometimes it doesn't show up the first time" or "it is common for humans to not see it".

hey, thanks for reporting it!

Let's first define the problem:

1. The new tab is unexpected
2. The user journey to arrive at the circuit display onboarding is long

for 1. As mcs mentioned in ticket:27483#comment:2 "Firefox only provides navigation between panels via the left menu".

Yes, since there is no call to action on the first screen, the user intuitively goes to the left menu or close it. BUT! Not finding a call to action can confuse users. The problem is usually defined as "I arrive here and I don't know what to do/click". Perhaps, Firefox folks did it intentionally so people don't need to take action but read.

We included the right-next buttons because in that way the navigation seemed more fluid for new users. The first three panels host very important knowledge for new users. We really want to have users reading it. Very different than the other three steps, which hosts advanced technical information.

We could solve it by a. removing [next] buttons at the right side so we force users to navigate with the left menu. b. being explicit about what we are going to open is a new tab.

for 2. I know that could be ideal to trigger/open a circuit display when the user clicks the button, but since we are in about:tor, we don't have a circuit and fake it is not smart.

Since it is not possible, something that came to my mind is what would go wrong if we open the doorhanger when the user visits their first site, and we prompt the useful circuit display onboarding. So, instead of launching it for duckduckgo, it launches for any first site that gets open.

The user flow will look like (for first time or just updated users):

• user lands in about:tor
• user opens a new tab / writes a URL at the URL bar
• the circuit loads, the page loads, the doorhanger prompts and the circuit onboarding step 1 appears.

mcs it is possible? could we prompt the circuit onboarding on the first visited site? what would be wrong if we do it?

Replying to antonela:

Yes, since there is no call to action on the first screen, the user intuitively goes to the left menu or close it. BUT! Not finding a call to action can confuse users. The problem is usually defined as "I arrive here and I don't know what to do/click". Perhaps, Firefox folks did it intentionally so people don't need to take action but read.

That may very well be the case. I think the problem that dmr is pointing out is that the first few onboarding screens teach people that the right side button is for navigation, but then we change the behavior and we have not taught them how to navigate between onboarding steps.

We included the right-next buttons because in that way the navigation seemed more fluid for new users. The first three panels host very important knowledge for new users. We really want to have users reading it. Very different than the other three steps, which hosts advanced technical information.

We could solve it by a. removing [next] buttons at the right side so we force users to navigate with the left menu. b. being explicit about what we are going to open is a new tab.

My vote would be for a. (remove the [next] buttons). Another possibility would be to add explicit Next buttons (so some panels would have two buttons and some would just have Next).

for 2. I know that could be ideal to trigger/open a circuit display when the user clicks the button, but since we are in about:tor, we don't have a circuit and fake it is not smart.

Since it is not possible, something that came to my mind is what would go wrong if we open the doorhanger when the user visits their first site, and we prompt the useful circuit display onboarding. So, instead of launching it for duckduckgo, it launches for any first site that gets open.

The user flow will look like (for first time or just updated users):

• user lands in about:tor
• user opens a new tab / writes a URL at the URL bar
• the circuit loads, the page loads, the doorhanger prompts and the circuit onboarding step 1 appears.

mcs it is possible? could we prompt the circuit onboarding on the first visited site? what would be wrong if we do it?

This would be difficult to implement because Kathy and I would rather not invoke the onboarding code for arbitrary sites (the implementation is tied to Firefox's URL-based permissions model). From a UX point of view, it might also be too intrusive and/or confusing to interrupt people's work in this way.

Replying to arma:

Right. I was going through the onboarding, everything was cool, I clicked "See my path" and now I have a tab open to duckduckgo. What does that have to do with seeing my path?

had the same. is this fixed in the coming alpha?

Trac:
Cc: N/A to catalyst

I ran into something very similar when I upgraded to 8.5a1: I was confused as to why a button on the about:tbupdate page that purports to help me "Learn More" about the new circuit display resulted in the DDG onion service page and no explanation of circuit displays.

I suspect what happened was that the DDG onion was taking a while to load the first time, so I tabbed away to a different page, and when I tabbed back, the doorhanger wasn't there. If I wait for the page to load and the doorhanger appears, it disappears as soon as I tab away, so this might actually be the underlying problem, at least for some people.

Replying to catalyst:

I suspect what happened was that the DDG onion was taking a while to load the first time, so I tabbed away to a different page, and when I tabbed back, the doorhanger wasn't there. If I wait for the page to load and the doorhanger appears, it disappears as soon as I tab away, so this might actually be the underlying problem, at least for some people.

Boom! Catalyst is a winner here -- I just tried the same thing, and got the same results: a duckduckgo page open with no hint about why it's open. I am totally willing to believe that this was how I hit the bug originally too.

I reviewed this ticket and I approached solutions for the problem defined at 1. on the comment:8 and confirmed by mcs at comment:9


Option A

We continue having a [next/continue] button on all steps and move external links to the body content. In this case, we will need some indicator that we are going to open an external URL — something like this.

Option B

We rely on the left menu navigation for users to navigate, in the same way as Firefox does, and we use the right button on the needed steps to open external links.

Trac:

Personally I prefer Option A, but I don't have strong feelings about it

It would be interesting to know if Mozilla did any usability studies with their approach (Option B).

Option A seems like it will definitely be an improvement over what we have today, but I wonder if people will notice the big button a lot more than the inline link. The button is like "Next" with a different label and it is a little confusing that it is positioned below the current topic's image.

Another approach would be to include a button labeled "Next" on every panel except the last one and then have an action button there as well for panels that have an action. Something like:

  [See My Path]    [Next]

That would be easier to implement than Option A, but I do not know if it will completely solve the usability hiccup.

Trac:
Keywords: N/A deleted, TorBrowserTeam201903 added

The downside of the option A is that the most beneficial action in the 4th and following steps is not [next], is probably experience the circuit display UI, review their security setting, learn more about browsing with Tor and visiting a .onion.

If we are prioritizing the completion of the onboarding flow, that is, users should arrive at the end of the onboarding, then the two buttons idea seems appropriate.

Here, [next] acts as a Primary, and goes to the right side for RTL languages. And [See My Path] [Review Settings] [See FAQs] and [Visit an .onion] go with a Default style.

Trac:
Cc: catalyst to catalyst, antonela