Skip to content
Snippets Groups Projects
New look: Off

Help users finding the new circuit display

    • Closed (moved) Issue created by Georg Koppen @gk

    We plan to improve and move the circuit display in #24309 (moved). 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.

    To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information

    Child items ...

    • Activity

    • Georg Koppen added TorBrowserTeam201808 component::applications/tor browser owner::tbb-team priority::very high resolution::fixed severity::normal sponsor::9 status::closed type::defect ux-team labels

      added TorBrowserTeam201808 component::applications/tor browser owner::tbb-team priority::very high resolution::fixed severity::normal sponsor::9 status::closed type::defect ux-team labels

    • C
      cypherpunks @cypherpunks ·

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

    • Georg Koppen
      Georg Koppen @gk ·
      Author

      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 (moved) is much broader in scope than this ticket. Let's keep it as a child to #24309 (moved) 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.

    • Antonela
      Antonela @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:

      1. User finds a top banner at about:tor page
      2. User clicks the main CTA [Try Now]
      3. A new tab with the TPO onion service opens
      4. 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.

    • Antonela
      Antonela @antonela ·

      Trac:
      Cc: N/A to tor@antonela.me

    • S
      Sukhbir Singh @sukhbir ·

      Trac:
      Cc: tor@antonela.me to tor@antonela.me, sukhbir

    • Georg Koppen
      Georg Koppen @gk ·
      Author

      Trac:
      Cc: tor@antonela.me, sukhbir to tor@antonela.me, sukhbir, arthuredelstein

    • Georg Koppen
      Georg Koppen @gk ·
      Author

      Trac:
      Parent: #24309 (moved) to N/A
      Priority: Medium to High
      Keywords: N/A deleted, TorBrowserTeam201805 added

    • Georg Koppen
      Georg Koppen @gk ·
      Author

      Moving our tickets to June 2018

      Trac:
      Keywords: TorBrowserTeam201805 deleted, TorBrowserTeam201806 added

    • Georg Koppen
      Georg Koppen @gk ·
      Author

      Trac:
      Priority: High to Very High

    • Antonela
      Antonela @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?

    • A
      Alison Macrina @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?

    • Mark Smith
      Mark Smith @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)?

    • Antonela
      Antonela @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 (moved).

    • Antonela
      Antonela @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?

    • Georg Koppen
      Georg Koppen @gk ·
      Author

      Moving first batch of tickets to July 2018

      Trac:
      Keywords: TorBrowserTeam201806 deleted, TorBrowserTeam201807 added

    • Georg Koppen
      Georg Koppen @gk ·
      Author

      Move our tickets to August.

      Trac:
      Keywords: TorBrowserTeam201807 deleted, TorBrowserTeam201808 added

    • Mark Smith
      Mark Smith @mcs ·

      The implementation of this is being tracked in #26962 (moved).

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

      Trac:
      Status: new to needs_information

    • Antonela
      Antonela @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!

    • Georg Koppen
      Georg Koppen @gk ·
      Author

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

      Trac:
      Status: needs_information to closed
      Resolution: N/A to fixed

    • Pili Guerra
      Pili Guerra @pili ·

      Trac:
      Sponsor: N/A to Sponsor9

    • Trac closed

      closed

    • Trac moved to tpo/applications/tor-browser#24918 (closed)

      moved to tpo/applications/tor-browser#24918 (closed)

    Please register or sign in to reply