Activity 2.1: Improve user understanding and user control by clarifying Tor Browser's security features

added GeorgKoppen201812 TorBrowserTeam201904 component::applications/tor browser owner::antonela priority::high severity::normal sponsor::17 status::new type::project ux-team labels

Trac:
Description: This work is related to the following proposal:

!https://lists.torproject.org/pipermail/tbb-dev/2018-March/000799.html

to

This work is related to the following proposal:

https://lists.torproject.org/pipermail/tbb-dev/2018-March/000799.html

There should also be an experience for Android. (maybe create a child ticket to track that?)

Trac:
Summary: Actity 2.1: Improve user understanding and user control by clarifying Tor Browser's security features to Activity 2.1: Improve user understanding and user control by clarifying Tor Browser's security features

Trac:

Trac:
Cc: N/A to tbb-team

@antonela Great prototypes! (love how you designed them with FF60's UX :) ) Concerning colors it would be great if you could make modifications so that they won't pose a problem for color blind users, see for example https://medium.theuxblog.com/how-to-design-for-color-blindness-a6f083b08e12 Another option would be to offer an option for enabling color blind friendly colors just like the extension uMatrix does in its options (here's a link for it to try out: https://addons.mozilla.org/en-US/firefox/addon/umatrix/ then go to its preferences)

I've made a first approach based on latest https://lists.torproject.org/pipermail/tbb-dev/2018-February/000756.html and updates.

https://trac.torproject.org/projects/tor/attachment/ticket/25658/25658.png

So far, what is changing is:

NoScript + https everywhere icons are going to be removed
Tor Button is going to be placed on the right side

what we need to think about is:

Finding a way to offer visual feedback about a. the current status of the security setting b. the site/content changes once the slider change

Some comments:

If we don't want people to change security easily or by error and also if it's changed carries a lot of security problems between sites, do you think the slider is the best UI artifact?.
I believe that it is an outstanding feature and I'd like to expose it in our main UI. Could we show the status of the security with a visual indicator and move the settings to the settings right place? Something like this we discussed in Rome.
On this proposal, when the user clicks on the security indicator a door hanger appears. The door hanger includes a] The security status b] a description with an expected behavior c] a link to settings
I'm proposing to have settings inside about:preferences#security but it might change to a specific section with general Tor Browser settings, like about:preferences#torbrowser
I'm using firefox's tracking protection icon. Despite the fact that seems to be the proper icon, it will confuse users about each feature? In that case, aren't both features protecting users?

I included on attachment some another option I explored, but I don't think they work as we aimed.

https://trac.torproject.org/projects/tor/attachment/ticket/25658/25658-exploration.png

Replying to cypherpunks:

@antonela Great prototypes! (love how you designed them with FF60's UX :) )

Thanks, glad you like it (:

Concerning colors it would be great if you could make modifications so that they won't pose a problem for color blind users, see for example https://medium.theuxblog.com/how-to-design-for-color-blindness-a6f083b08e12 Another option would be to offer an option for enabling color blind friendly colors just like the extension uMatrix does in its options (here's a link for it to try out: https://addons.mozilla.org/en-US/firefox/addon/umatrix/ then go to its preferences)

Yes, accessibility is a priority and we will make sure that the colors we are using works for most of the users. The selection of colors is based on a metaphor and we really want people to understand it. So, despite the fact that the color could be representative or not, we should have labels or text anchor that reinforce the meaning of the icon.

Trac:
Priority: Medium to High
Keywords: N/A deleted, TorBrowserTeam201804 added

https://trac.torproject.org/projects/tor/attachment/ticket/25658/25658-exploration.png

Another option instead of showing colors to convey the security level one can show a number badge from 1 to 3 (more security => bigger number, Standard => 1, Safe => 2, ...etc). setBadgeTest can also show a text but one would need to see if it will fit in that space https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/browserAction/setBadgeText

(Also a note on the about:preferences changes: I think they're unnecessary since the functionality would already be offered by the security button, so there's no need for duplicate effort)

Replying to cypherpunks:

Another option instead of showing colors to convey the security level one can show a number badge from 1 to 3 (more security => bigger number, Standard => 1, Safe => 2, ...etc). setBadgeTest can also show a text but one would need to see if it will fit in that space https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/browserAction/setBadgeText

This is a good option to test, yes. I don't know how normal people will understand the number, but it worth an exploration for sure. Thinking about incremental numbers = more security is tricky. If I get an A grade is better than a C grade. But if I get 3 is better than 1? How intuitive is it? IDK. I'll prepare mocks to see how it feels. Thanks :)

(Also a note on the about:preferences changes: I think they're unnecessary since the functionality would already be offered by the security button, so there's no need for duplicate effort)

Well, we don't want to have the slider on the Top bar UI. The doorhanger is just showing the security setting description + a call to action in the case the user wants to change it. So if the user wants to change the security setting, they should go to about:preferences to upgrade or downgrade their setup.

I like the idea of moving the UI for changing the security level into about:preferences. However, nearly everything in about:preferences is "instant apply" (changes take effect immediately) which may make it more difficult for people to learn about the different security levels before they decide to change their level.

In the existing dialog-based UI users can learn what the different levels do via two methods: (1) tooltips and (2) they can move the slider to the different positions to reveal descriptive text (since the actual security level is not changed until they dismiss the dialog). We could use tooltips in about:preferences, but maybe we can also come up with a more obvious way for people to learn about the different security level choices. For example, if we use three radio buttons instead of a slider control we might be able to simply include the descriptive text nearby (that might be crowded though).

Trac:

Thanks for the comment @mcs!

Replying to mcs:

I like the idea of moving the UI for changing the security level into about:preferences. However, nearly everything in about:preferences is "instant apply" (changes take effect immediately) which may make it more difficult for people to learn about the different security levels before they decide to change their level.

Yes, indeed.

In the existing dialog-based UI users can learn what the different levels do via two methods: (1) tooltips and (2) they can move the slider to the different positions to reveal descriptive text (since the actual security level is not changed until they dismiss the dialog). We could use tooltips in about:preferences, but maybe we can also come up with a more obvious way for people to learn about the different security level choices. For example, if we use three radio buttons instead of a slider control we might be able to simply include the descriptive text nearby (that might be crowded though).

To be honest, and as I said before, I think the slider is not the best solution for this UX at the moment. But, I know that people have been calling this feature security-slider for a while and I'm not sure about how hard could be this change for them.

That said, I love the idea about to have three simply radio buttons with each description. In that case, we will continue having the confirmation step before seeing the changes.

I made a mockup to see how it looks :) See here

https://trac.torproject.org/projects/tor/attachment/ticket/25658/25658%20-%20Settings%20Radio.png

Trac:

Trac:
Cc: tbb-team to tbb-team, dmr

Trac:

Hi! I have been working on creating an icon set that allows us to show visual feedback for our three levels of security. I tried hard the ideas we talked about last week. You can lurk them here

https://trac.torproject.org/projects/tor/attachment/ticket/25658/25658-exploration%202.png

But nothing seems working.

So, I did an exercise, and I started to walk the user journey to understand what are the user expectations when they downgrade or upgrade their security settings.

Let's walk through this user journey:

User wants to visit a risky site or a shared URL from an unknown source
User slide up the Security Slider and set up the security at Safer or Safest
User types the URL and waits until the content load
The content is not loading correctly because of settings.
User can a) downgrade their security level to make things work b) use the website as it is because the nonloaded content is not critical (e.g., fonts change, or an ad at sidebar blocked with js)

In both cases, probably an update of security won't fix the problem. In the best situation, it will create a new content display problem. But in the worst, users are exposed to leak information.

Also, seems like users don't even need to understand how the security engine works, but how it benefits them[0]. We may make the decision easier for them. And we can work with their expectations.

The slider UI was selected before for being a familiar pattern to set up a stepped security level, pretty similar to Security Slider configuration on Microsoft's IE. But now, we are experimenting the downsides of it.

So, can we simplify the choices? What if we have two levels of security instead of three? Activated and Deactivated.

Maybe, we can increase TorBrowser default security by moving some medium settings to default.

You can see the concept here

https://trac.torproject.org/projects/tor/attachment/ticket/25658/25658%20-%202.png

What do you think? Can we re-think this feature, so it works proactively with user expectations? Can we offer a UX that is intuitive and straightforward for regular users?

And for heavy users, can we allow them to set up specific content through a granular configuration? How technically possible it is?

Is any tradeoff on removing medium security setting? Is it a lot of development effort?

Will people downgrade their security because something is not working/loading properly? If yes, is it not what users are doing right now everytime they want to see a video, and someone is tracking them, and the resistance app is blocking the content, and the content is not working?

[0] https://www.freehaven.net/anonbib/cache/usableTor.pdf

Hm. Perhaps I'm focusing on the wrong part of your comment;, but as I was looking through https://trac.torproject.org/projects/tor/attachment/ticket/25658/25658-exploration%202.png I was in agreement that none of them really illustrated the visual feedback.

The one with the words Standard / Safer / Safest did of course; because it's making it explicit.

The rest of them had no indicator to me that a) This state was 'partial' - e.g. that there was a better state to be in. b) That this state was 'the best'.

Okay 3 dots is better than 1 dot. How do I know that there is something better than 1 dot? How do I know there is not a four-dot setting?

Shield, half-shield... and the checkerboard shield... these could both be stylist choices. I don't know the shield is supposed to be full.

Until I saw the grey shield on the far right. Th one where it looks like it's filling a progress bar. That one immediately resonated with me (personally at least.) It's a progress bar. It fills up.

If you make the full shield have the small white lines so it's indicative of three 'bars' that filled up it's more apparent. It might be even more apparent if you render it in stark color (black or purple, with the unfilled boxes being light grey.

Heck, if we want to animate it, we could blink the filled or unfilled progress bars.

Anyway, I just wanted to point out that that one in particular jumped out to me and felt the most right of the icons you had initially explored.