Opened 9 months ago

Closed 7 weeks ago

#27484 closed defect (fixed)

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

Reported by: dmr Owned by: tbb-team
Priority: Medium Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: tbb-8.0-issues, tbb-onboarding, ux-team, TorBrowserTeam201903, tbb-8.5-must-alpha
Cc: catalyst, antonela Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

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)

Child Tickets

Attachments (3)

TB8.5-onboarding-review.png (1.8 MB) - added by antonela 3 months ago.
TTB8-onboarding-2-buttons-navigation.png (164.2 KB) - added by antonela 2 months ago.
27484-wip1.png (129.4 KB) - added by mcs 2 months ago.
revised onboarding (work in progress)

Change History (36)

comment:1 Changed 9 months ago by 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?

comment:2 in reply to:  1 ; Changed 9 months ago by arma

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.

comment:3 Changed 9 months ago by gk

Cc: tbb-8.0-issues tbb-onboarding added; ff60-esr removed

comment:4 in reply to:  2 ; Changed 9 months ago by 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?

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.

comment:5 Changed 9 months ago by dmr

Cc: tbb-8.0-issues tbb-onboarding ux-team removed
Keywords: tbb-8.0-issues tbb-onboarding ux-team added

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

comment:6 in reply to:  4 Changed 9 months ago by dmr

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. [...]

comment:7 in reply to:  4 Changed 8 months ago by arma

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".

comment:8 Changed 8 months ago by antonela

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

  1. removing [next] buttons at the right side so we force users to navigate with the left menu.
  2. 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?

comment:9 in reply to:  8 Changed 8 months ago by mcs

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

  1. removing [next] buttons at the right side so we force users to navigate with the left menu.
  2. 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.

comment:10 in reply to:  1 Changed 8 months ago by traumschule

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?

comment:11 Changed 8 months ago by catalyst

Cc: catalyst added

comment:12 Changed 8 months ago by 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.

comment:13 in reply to:  12 Changed 8 months ago by arma

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.

comment:14 Changed 3 months ago by antonela

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

https://trac.torproject.org/projects/tor/raw-attachment/ticket/27484/TB8.5-onboarding-review.png

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.

Changed 3 months ago by antonela

Attachment: TB8.5-onboarding-review.png added

comment:15 Changed 3 months ago by pili

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

comment:16 Changed 3 months ago by mcs

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.

comment:17 Changed 3 months ago by gk

Keywords: TorBrowserTeam201903 added

comment:18 Changed 3 months ago by antonela

Cc: antonela 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.

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

comment:19 Changed 2 months ago by gk

Keywords: tbb-8.5 added

Tickets on our radar for 8.5

comment:20 in reply to:  18 Changed 2 months ago by mcs

Replying to antonela:

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.

I am a little confused by your comment. Is that our priority? What should we implement, or do we need to discuss this further and/or do more thinking?

Changed 2 months ago by antonela

comment:21 Changed 2 months ago by antonela

Let's implement the two buttons navigation idea. That will fix the uncertainty about the navigation.

https://trac.torproject.org/projects/tor/raw-attachment/ticket/27484/TTB8-onboarding-2-buttons-navigation.png

I'd use the same label I suggested at comment:14: [Go To $next_section] instead of [Next]. Next sounds like a generic label and doesn't have too much information about what is coming next.

The aim of this onboarding is educating people while engaging them. This iteration will make the navigation consistent and that will help us to make users arriving at the end of the tour. We can learn more and explore different ways to do it better during our research work.

Thanks for this suggestion mcs/brade!

Changed 2 months ago by mcs

Attachment: 27484-wip1.png added

revised onboarding (work in progress)

comment:22 in reply to:  21 Changed 2 months ago by mcs

Replying to antonela:

Let's implement the two buttons navigation idea. That will fix the uncertainty about the navigation.

Thanks! We made some progress on this today and produced the following:

revised onboarding (work in progress)

Antonela, is the position of the "See My Path" button acceptable? We placed it below the text for two reasons:

  1. The action is associated with the text above.
  2. The implementation is a lot easier. Why? Because Mozilla used a 2x2 grid for the layout of each onboarding panel, which means there really is not enough room in row 2, column 2 for both buttons.

Let us know what you think.

comment:23 Changed 2 months ago by antonela

Yeah, is great. I think is working. Thanks for sharing!

comment:24 Changed 8 weeks ago by gk

Keywords: tbb-8.5-must added; tbb-8.5 removed

Marking blockers for Tor Browser 8.5.

comment:25 Changed 8 weeks ago by gk

Keywords: tbb-8.5-must-alpha added; tbb-8.5-must removed

Tickets that block the next 8.5 alpha.

comment:26 Changed 8 weeks ago by mcs

Keywords: TorBrowserTeam201903R added; TorBrowserTeam201903 removed
Status: newneeds_review

comment:27 in reply to:  26 ; Changed 8 weeks ago by gk

Status: needs_reviewneeds_revision

Replying to mcs:

This is now ready for review. Here is the tor-browser patch:
https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug27484-01&id=b622c8f02012d63135856c2cf782ce9909f76d51

Looks mostly good. One thing that needs to get fixed is that your code is jumping over the security pane directly to "Experience Tips" if clicking on "Go to Security". Moreover, clicking on the respective button on the security pane to move forward is doing nothing.

And here is the torbutton one (to add several new strings for the new button labels):
https://gitweb.torproject.org/user/brade/torbutton.git/commit/?h=bug27484-01&id=99cde4d564510acd4aac504b3e1ee88e8be9c738

I merged that one as commit 743c1432c0112d74da5c18e9b238ede00ceb550e on master to get the translating going.

comment:28 Changed 8 weeks ago by gk

Keywords: TorBrowserTeam201903 added; TorBrowserTeam201903R removed

Oh, and I guess we open a new ticket for the issue arma and catalyst had, right? Because that's orthogonal to this bug.

comment:29 in reply to:  28 Changed 8 weeks ago by mcs

Replying to gk:

Oh, and I guess we open a new ticket for the issue arma and catalyst had, right? Because that's orthogonal to this bug.

Thanks for the reminder. I opened #29925 to track that issue.

comment:30 in reply to:  27 ; Changed 8 weeks ago by mcs

Keywords: TorBrowserTeam201903R added; TorBrowserTeam201903 removed
Status: needs_revisionneeds_review

Replying to gk:

Looks mostly good. One thing that needs to get fixed is that your code is jumping over the security pane directly to "Experience Tips" if clicking on "Go to Security". Moreover, clicking on the respective button on the security pane to move forward is doing nothing.

Ugh. I am sorry about those problems. We revised the patch to add a new gotoNextTourItem() function, which makes everything less error-prone. Please take a look:
https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug27484-02&id=d6319109718b5e2bbd82244bce9baeaaea46f356

comment:31 in reply to:  30 Changed 7 weeks ago by gk

Keywords: TorBrowserTeam201903 added; TorBrowserTeam201903R removed
Status: needs_reviewneeds_revision

Replying to mcs:

Replying to gk:

Looks mostly good. One thing that needs to get fixed is that your code is jumping over the security pane directly to "Experience Tips" if clicking on "Go to Security". Moreover, clicking on the respective button on the security pane to move forward is doing nothing.

Ugh. I am sorry about those problems. We revised the patch to add a new gotoNextTourItem() function, which makes everything less error-prone. Please take a look:
https://gitweb.torproject.org/user/brade/tor-browser.git/commit/?h=bug27484-02&id=d6319109718b5e2bbd82244bce9baeaaea46f356

No worries, looks better now. One final thing I noticed while testing: What's the purpose of the blue-ish border around the button that shows up once I click (mouse-down) on the not-go-to-next-pane-buttons? I guess it's meant as a further visual indicator (besides the grey of the button getting a bit darker) that the user is currently clicking on/selecting that button? I am asking because it behaves differently on different panes. For instance, if I click (mouse-down) to check out the security settings I see that the button gets darker grey and the border shows up and it gets back to normal without the blue border once I actually execute the action behind it (mouse-up). However, that does not happen on the panes where external sites get loaded. In those cases those sites get loaded in a new tab, the grey of the button gets back to the original one, but the blue-ish border stays, which is confusing.

You can see that behavior on the security pane as well if you mouse-down on the button but move the mouse cursor from the button and do a mouse-up somewhere else: the grey tone resets but the blue border stays.

I'd say the expected behavior is the blue-ish border follows the behavior of the other selected/clicked indicator: if the button gets darker, the border shows up, but if the button gets less dark again the border vanishes, too.

(Sorry for the many words, it turned out hard for me to explain the issue in english. :) I hope it makes sense, but if not please ping me and we sort it out via chat).

comment:32 Changed 7 weeks ago by mcs

The blue border is actually a focus ring. On macOS it seems to only appear if you use keyboard navigation (e.g., the tab key), but on Linux it also appears when you click. I don't think the behavior is as inconsistent as you think (although it is confusing if you don't realize it is a focus ring).

On Linux, when I click the gray "action" button to show the security level doorhanger, the focus ring disappears while focus is on the doorhanger, but it reappears if I use the Esc key to dismiss the doorhanger. It also reappears if I click the Security Level toolbar icon to dismiss the doorhanger. On the other hand, if I click somewhere else to close the doorhanger the focus ring does not reappear; presumably focus is now elsewhere.

A similar sequence occurs when I use the buttons that open a new tab, e.g., the FAQ one, although most of the ways that someone would close a tab (maybe all?) bring focus back to the See FAQs button. This makes the behavior seem inconsistent.

I hope what I wrote makes sense. I have not confirmed whether this is new behavior (I don't think so) or if the ring is just more noticeable with the gray buttons.

Last edited 7 weeks ago by mcs (previous) (diff)

comment:33 Changed 7 weeks ago by gk

Resolution: fixed
Status: needs_revisionclosed

Aha, right. I feel it is more noticeable and did not see it as a focus ring. But, yes, with that in mind the behavior makes sense. Sorry for the noise.

Merged to tor-browser-60.6.1esr-8.5-1 (commit d6319109718b5e2bbd82244bce9baeaaea46f356).

Note: See TracTickets for help on using tickets.