[tbb-bugs] #24309 [Applications/Tor Browser]: Activity 4.1: Improve how circuits are displayed to the user

[Tor Bug Tracker & Wiki]

#24309: Activity 4.1: Improve how circuits are displayed to the user
-------------------------------------------+--------------------------
 Reporter:  isabela                        |          Owner:  tbb-team
     Type:  defect                         |         Status:  new
 Priority:  Medium                         |      Milestone:
Component:  Applications/Tor Browser       |        Version:
 Severity:  Normal                         |     Resolution:
 Keywords:  ux-team, TorBrowserTeam201803  |  Actual Points:
Parent ID:                                 |         Points:
 Reviewer:  antonela                       |        Sponsor:
-------------------------------------------+--------------------------

Comment (by antonela):

 Replying to [comment:27 gk]:
 > Replying to [comment:26 arthuredelstein]:
 > > I have a working prototype for a patch. I have posted two screenshots
 below. I made a few tweaks to Antonela's version 8 design.
 > >
 > > I simplified the title of the circuit section to just "Tor Circuit,"
 because the domain or website name is shown in the "Secure Connection"
 section right above it. I moved the domain name to the last node in the
 circuit.
 >
 > Looks good to me!

 Indeed. Looks great Arthur!
 \\
 > > It occurs to me that the Tor Circuit section needs an icon at left,
 similar to the lock in the "Secure Connection" section and the Permissions
 [✓|x] icon below. Any ideas what this icon should be? (An onion is
 probably not the right choice because we're already using that for onion
 sites.) One possibility would be the "relay" icon in
 https://people.torproject.org/~irl/icons/
 >
 > What makes you believe it needs an icon, too? I think it's fine without
 one.

 At first glance, I thought we need an icon, so I made a mockup to see how
 it looks. But I think looks pretty crowded. Anw, in case we want it, the
 relay icon can make the job there.
 Please, take a look here
 https://trac.torproject.org/projects/tor/attachment/ticket/24309/032718.png

 \\
 > > Any thoughts about where the "Guard (i)" and "Learn More" links should
 lead to? Somewhere in the Tor Browser manual? Or should these be tooltips?
 Or perhaps a single large info section could pop up next to the circuit
 display whenever the user hovers over it. Also I'm wondering if it's bad
 to have both the Guard (i) and "Learn More" links, since they seem to be
 redundant.
 >
 > I think it depends on how much text we want to show. I am inclined to
 give a bit of text ("it stays the same for an amount of time") conveying
 the most important thing for users and link to the Tor Browser manual
 because
 >
 > a) there one can explain this in more details (referencing other
 sources)
 > b) users that might be confused by guard nodes might be confused by
 other parts of Tor Browser and having the manual open might help with
 that, too.
 >
 > Yes, the "Learn more" link should go. Actually, the more I think about
 the more I feel the whole text below the "Load New Circuit"-button should
 go because users might think the text is related to the button (which it
 is not). I think just sticking to the "i" icon and giving the most-
 pressing information while hovering over it is quite sufficient. At least
 for a first round of testing in the alpha versions of Tor Browser.
 >
 Guard (i) -> A tooltip inside the doorhanger seems weird. I see the
 [guard] label as an indicator and the (i) as a link to more info about
 guards and how TTB works. The manual seems the best place.
 "Learn More" -> I'm inclined to link the [learn more] to a wiki section
 where we explain specifically why guards don't change often.
 \\

 > > Also, I liked Sukhbir's suggestion about adding an "Exit" label. We
 could even add a "Middle relay" label or more information about an onion
 site's relays. But I don't want it to look too cluttered either. Maybe
 tooltips are the best thing?
 >
 > Let's think about that in the next round of iteration, if we really want
 it? I am not convinced yet and we might want to incorporate feedback from
 testing our current design idea before putting more info into the display.

 I like the idea too. But agreed with GeKo. Let's test it and we can
 iterate on it later. Things like colored dots to show connection progress
 or visual feedback on the status of the relays seems cool to explore too.

 \\

 I love how it is looking Arthur! I like that long and short circuits are
 working good with our structure. Do you think "relay" should be
 capitalized like "Relay"?

 Also, I think the subtle background on the bottom section [New Circuit +
 Links] helps a lot to group actions for better user understanding.

--
Ticket URL: <https://trac.torproject.org/projects/tor/ticket/24309#comment:28>
Tor Bug Tracker & Wiki <https://trac.torproject.org/>
The Tor Project: anonymity online