Opened 8 months ago

Closed 3 weeks ago

#24918 closed defect (fixed)

Help users finding the new circuit display

Reported by: gk Owned by: tbb-team
Priority: Very High Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ux-team, TorBrowserTeam201808
Cc: tor@…, sukhbir, arthuredelstein Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

We plan to improve and move the circuit display in #24309. In order to help the users getting accustomed to this change we need to implement some guidance into Tor Browser. The work for that both UX and coding-wise is tracked in this bug.

Child Tickets

Change History (19)

comment:1 Changed 8 months ago by cypherpunks

Seems like a duplicate or child ticket of this one: https://trac.torproject.org/projects/tor/ticket/23489#comment:1

comment:2 in reply to:  1 Changed 8 months ago by gk

Replying to cypherpunks:

Seems like a duplicate or child ticket of this one: https://trac.torproject.org/projects/tor/ticket/23489#comment:1

No, it's not a duplicate as #23489 is much broader in scope than this ticket. Let's keep it as a child to #24309 as well as it is bound to that task which is very likely get done earlier anyway. And it is not sure whether about:tor changes are the only ones we want assuming we want any at all for this ticket.

comment:3 Changed 8 months ago by antonela

Hi! The UX team have been working on this ticket.

Since about:tor is going to be taken in your roadmaps later than circuits, we are sharing a proposal that doesn't modify anything existent on our current about:torpage.

You can try the flow here https://marvelapp.com/59a164g/screen/37879856

A successful user flow looks like this:

0) User finds a top banner at about:tor page
1) User clicks the main CTA [Try Now]
2) A new tab with the TPO onion service opens
3) User clicks [i]

Also, we made a mockup of a similar idea but using a smaller banner:
You can see here https://marvelapp.com/59a164g/screen/37879878

Another option could use a small full-page banner at the bottom like current new:tab on Firefox.
You can see a mockup here https://marvelapp.com/59a164g/screen/37879882

Some considerations that apply to all options:

  • Learn More link should open a new tab with the related documentation.
  • Banners should be able to be closed/dismissed.

All the copy text is up to review and right now is just a draft.

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

comment:4 Changed 8 months ago by antonela

Cc: tor@… added

comment:5 Changed 7 months ago by sukhbir

Cc: sukhbir added

comment:6 Changed 7 months ago by gk

Cc: arthuredelstein added

comment:7 Changed 4 months ago by gk

Keywords: TorBrowserTeam201805 added
Parent ID: #24309
Priority: MediumHigh

comment:8 Changed 4 months ago by gk

Keywords: TorBrowserTeam201806 added; TorBrowserTeam201805 removed

Moving our tickets to June 2018

comment:9 Changed 4 months ago by gk

Priority: HighVery High

comment:10 Changed 4 months ago by antonela

Suggested copy for this step through feature onboarding:

Step 1
Title: How circuits works?
Description: Tor periodically creates virtual circuits through the Tor network. Once inside a Tor network, circuits allow you to browse encrypted.

Step 2
Title: Circuit Display
Description: This diagram shows you how the circuit is running. If you have any trouble trying to reach a website, then you can load a new circuit.

Step 3
Title: Do you need a new circuit?
Description: If the exit relay you are using is unable to connect to the website you require, or is not loading it properly, then you can load a new circuit.

Is there anything else missing in this ticket that blocks us to move it to development?

comment:11 in reply to:  10 ; Changed 4 months ago by alison

Thanks for this copy Anto. Suggested edits below:

Replying to antonela:

Suggested copy for this step through feature onboarding:

Step 1
Title: How circuits works?

How do circuits work?

Description: Tor periodically creates virtual circuits through the Tor network. Once inside a Tor network, circuits allow you to browse encrypted.

Should we give a little bit more of an explanation here, after "through the Tor network" say "Circuits are made up of randomly-assigned relays, which are computers configured to forward Tor traffic" might be a little too wordy, but that sentence right there answers a good portion of user questions about relays/circuits.

Also it should be "inside the Tor network" in the second sentence.

Step 2
Title: Circuit Display
Description: This diagram shows you how the circuit is running. If you have any trouble trying to reach a website, then you can load a new circuit.

Step 3
Title: Do you need a new circuit?
Description: If the exit relay you are using is unable to connect to the website you require, or is not loading it properly, then you can load a new circuit.

I would remove the part about "if the exit relay you are using is" and replace it with "If you are not able to connect to the website you're trying to visit, or is not loading properly, then you should try loading a new circuit" because the user might be like "how do I know if it's my exit that's the problem?"

Thanks for all your work on this!!

Alison

Is there anything else missing in this ticket that blocks us to move it to development?

comment:12 Changed 4 months ago by mcs

I am trying to understand how the pieces of this fit together. Are "Step 1" "Step 2" and "Step 3" included in one of the Marvel mockups? (Maybe I just don't know how to get to those steps).

Also, did we decide which of the three about:tor banner approaches we are going to use (large banner at top, small banner at top, banner at bottom)?

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

Replying to mcs:

I am trying to understand how the pieces of this fit together. Are "Step 1" "Step 2" and "Step 3" included in one of the Marvel mockups? (Maybe I just don't know how to get to those steps).

Hi! The prototype accepts clicks here :)
https://marvelapp.com/d2djgd4/screen/44025420

As we discussed before, this is based on
https://www.mozilla.org/en-US/firefox/59.0.2/tracking-protection/start/?step=1

Also, did we decide which of the three about:tor banner approaches we are going to use (large banner at top, small banner at top, banner at bottom)?

Not yet, this is an ongoing talk at #25695.

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

comment:14 in reply to:  11 Changed 4 months ago by antonela

Thank you Ali!

Replying to alison:

Thanks for this copy Anto. Suggested edits below:

Replying to antonela:

Suggested copy for this step through feature onboarding:

Step 1
Title: How circuits works?

How do circuits work?

Description: Tor periodically creates virtual circuits through the Tor network. Once inside a Tor network, circuits allow you to browse encrypted.

Should we give a little bit more of an explanation here, after "through the Tor network" say "Circuits are made up of randomly-assigned relays, which are computers configured to forward Tor traffic" might be a little too wordy, but that sentence right there answers a good portion of user questions about relays/circuits.

Also it should be "inside the Tor network" in the second sentence.

Step 2
Title: Circuit Display
Description: This diagram shows you how the circuit is running. If you have any trouble trying to reach a website, then you can load a new circuit.

Step 3
Title: Do you need a new circuit?
Description: If the exit relay you are using is unable to connect to the website you require, or is not loading it properly, then you can load a new circuit.

I would remove the part about "if the exit relay you are using is" and replace it with "If you are not able to connect to the website you're trying to visit, or is not loading properly, then you should try loading a new circuit" because the user might be like "how do I know if it's my exit that's the problem?"

Thanks for all your work on this!!

Alison

Is there anything else missing in this ticket that blocks us to move it to development?

comment:15 Changed 3 months ago by gk

Keywords: TorBrowserTeam201807 added; TorBrowserTeam201806 removed

Moving first batch of tickets to July 2018

comment:16 Changed 8 weeks ago by gk

Keywords: TorBrowserTeam201808 added; TorBrowserTeam201807 removed

Move our tickets to August.

comment:17 Changed 8 weeks ago by mcs

Status: newneeds_information

The implementation of this is being tracked in #26962.

Antonela, does https://marvelapp.com/3djhfhh contain the final design for circuit display onboarding? I found that URL in ticket:25695#comment:8.

comment:18 Changed 8 weeks ago by antonela

Hey yes!

Ideally, the user flow should looks like:

0 - Tor Browser launches the onboarding.
1 - Once in the Circuit Card, the user clicks at the CTA [Learn More / Try it now! / Visit an .onion].
3 - A New tab opens, and the walkthrough appears.
4 - User goes through step1, step2, step3.
5 - User stays on the .onion or gets back to about:tor [onboarding closed].

We discussed two options to run/launch this helper for new features. One of them included a fake onion, and we don't want to fake the flow > https://marvelapp.com/3djhfhh/screen/46325148

Instead, I made a prototype with a real .onion to show the user flow. I think we can use tpo's onion there > https://marvelapp.com/3djhfhh/screen/46324625

Remember that I'm following Firefox's one here, so that you may find source files somewhere.
https://www.mozilla.org/en-US/firefox/59.0.2/tracking-protection/start/?step=1

Let me know what do you think and if anything else is needed!

comment:19 Changed 3 weeks ago by gk

Resolution: fixed
Status: needs_informationclosed

I think we are done here as this got implemented in #26962, closing.

Note: See TracTickets for help on using tickets.