Improve our Tor diagram based on results from usability tests (v2)

Not done before publishing #18450 (closed) with 4.22.

Current version on our website:

I did some basic tests in #18074 (closed). Next steps is to prototype some improvements:

• Improve the color coding of the links and relays
• Try not to make the line thinner: it's not the encryption getting weaker
• Add labels to explain the security properties

Prototype with first improvements tests during #18784 (closed):

Results from #18784 (closed):

• On "Hidden content" and "Hidden origin":

  • The shape felt like a placemarker or scary stop sign to P2 and P3. We could use a dialog bubble or a more neutral shape, maybe even without the line connecting to the Tor circuit.
  • P2 and P3 thought that “Hidden Origin” and “Hidden Content” were the names of each place or a spyware being inserted and not security properties. We should write “Tor hides your content” and “Tor hides your location” instead.

• On the circuit line:

  • The hidden yellow line makes it more clear that it's the same information traveling. We could either stick with a plain line or try with a dotted line maybe.
  • The yellow line getting thinner seemed like the encryption is getting weaker to P1.
  • Nobody comments on the 3 colors corresponding to the color of the relays. I'd line to test a version with peeled cable at origin (@anhdres) has this already somewhere and a line of constant width between the relays.

• On the origin and destination:

  • The picture of the server was unclear to P1, P2, and P4.
  • The location line of the server pointing to the middle relay was confusing to P1. I think that we could keep the location line for the relays but remove them for the origin and destination.
  • The envelope going out of the laptop was more clear.

I have footage of all this and could share it with @anhdres.