Security slider makeover for mobile

We improved the usability of Tor browser's security slider and designed an interface for Orfox. (tickets: #20291 (moved), #20815 (moved))

To do this, we redesigned the security settings, simplified the technical text, and designed a mobile UI for the security slider.

People:

Linda, UX Team
Isabela, UX team
Synzvato, contracted
Amogh, contracted
Geko and Nathan - tech leads

Timeline:

Nov 31st 2016: design and implement the security slider for tor browser mobile.
Dec 23rd 2016: Milestone 1: Completion of the Alpha release of Security Slider configuration component.
Jan 27th 2017: Milestone 2: Completion of stable release of Security Slider configuration component.
Feb 28th 2017: Milestone 3: Completion of Usability Workshops in target countries.
March 31st 2017: Milestone 4:
- Completion of usability improvements from workshop feedback.
- Submission of the Final Report of all activities and results.

Goals:

Make the security slider easier to use and understand
Communicate why these settings exist and how these settings affect browsing
Design a mobile interface that corresponds with natural gestures

The scope of this project was limited to the security slider. This documentation is focus on the UX work, from presenting a UI to developers to build, to building a methodology to test such UI and coordinate such tests in the target countries.

We reserve porting over other onion button features to mobile for future work. The whole project roadmap is summarized here.

Pain points

Here is the current security slider.

We show you the web version because this is the only interface that exists.

The mobile tor browser (orfox) did not have this before our work.

Scary settings

It's concerning that the default security setting is "low."

Not only is this scary for users, it's inaccurate. Using Tor on "low" is much safer than using another browser.

No matter what the security setting, users get basic protections and their traffic routed over Tor.

Technical text

It's not clear what the various settings do.

Sure, there is the text that explains what technically happens, but many won't understand.

Even if they do, they don't know how this might impact their browsing experience.

Uninformed decisions

There is no instruction for why they should choose a particular setting.

Certain functionalities are disabled to defend against particular attacks.

People can choose these settings to be safer. We should tell them this.

Solutions

Here is the security slider, more usable and for mobile.

This is the result of a process that involved identifying design principles, collaboratively writing the text, and making wireframes to give to the developer.

We address how the changes address the pain points above in the sections below.

There were also other changes because we designed for a mobile UI.

We aimed for OS-provided elements for familiarity, natural gestures (horizontal bar rather than vertical), and ensured that the important elements fit on a mobile screen.

Friendly settings

We downsized to 3 security settings rather than four. Less options mean less confusions.

Conceptually it's also easier to understand or explain left, middle, and right vs left, left-middle, right-middle, and right.

To make the settings less scary, we named them "standard, safer, and safest." This more accurately communicates that the extra settings are optional precautions.

Using the text as a cue for how the options are supposed to work is common practice.

There are many world life examples of this! The most familiar one to you would be:

For instance, this conveys that the lowest grade isn't necessarily bad, but the other grades have extra bonuses.

Less text

To clarify what the settings do, we drastically reduced the amount of text.

Having less text makes it more likely that users would read the text, and increases their comprehension.

We explicitly stated what would happen if it was appropriate (points 1 and 2 in the example below).

But we also summarized the changes if that was easier to understand (point 3 in the example below).

Communicating why

To tell users why these settings exist and why they should choose a particular one, we added an introductory sentence for each setting.

The sentence tells them why the changes were made and what the changes would be protecting users from.

We also provide a link to the tor manual security slider documentation if they are curious about the details.

Testing

Two researchers (Linda and Amogh) tested participants using this methodology, asking these five questions. Amogh tested twelve computer science students in India and recorded the interviews. Linda tested a librarian and nurse in the United States and took notes of the interviews. Both researchers collected participant demographics after each interview. After the usability testing, a researcher (Linda) went through the data to aggregate results, analyze the findings, and make recommendations.

Users seemed to choose the setting that would be right for them, functionality wise, even if they didn’t have good security understanding or mild misconceptions. UI should account for multiple ways of interaction.

Results

Based on what participants said:

UI may be confusing; some people thought it was a slider, some thought you had to click on the bar above the word, some thought you had to click the word. We should make sure that all three interactions work.
Text is short enough; many people read them aloud in entirety when asked what the settings do, and most people summarize it well.
Standard is the best default setting. Many said that they would keep it there, and want javascript enabled for browsing.
Most did not have a good reason to use safer/safest settings. Some chose safer only because they saw the word safer, and felt insecure about their abilities to fix computers. This is critical, since most of the participants were young, studying computer science, and had lots of exposure to technology. If they can’t name it, chances are likely that others won’t be able to either.
People viewed “safest” as a setting for extreme circumstances (“for paranoid people,” “for browsing the dark web,” and even saying “I don’t think I’ll be doing anything that would require that amount of safety. giggles”)
Mild concerns include: people keep mentioning how standard makes tor a “normal browser”--not sure what that means; one person couldn’t find the settings somehow, and bad connotations associated with the “safest” setting.

For transcriptions of what each participant said for each question, see here.

Recommendations

Cover all possible interactions for adjusting settings: sliding slider, clickable setting text, clickable slider points.
Keep the default setting at standard.
Differentiate between safer and safest more clearly.

Final decisions for this project:

Since the sliding and clickable slider points were interactions that already existed, we decided to just enable clickable setting text to cover all possible ways an user might interact with it.
We kept the default setting at standard
We decided to keep safe and safest description as it is not only on Orfox but we will use these same copies on Tor Browser for desktop for now as well.

The fine print

Only one user was a self-identified “cautious” internet user (9 were casual and 4 were unsure), but even they did not choose the “safest” setting and said that the highest setting was for “paranoid people.

8 had used Tor before in a limited capacity, and 6 never have, but this didn’t seem to affect their understanding significantly. None of our participants were regular Tor users, or were familiar with the settings before the testing.

We do not make any correlations with gender, since only a small number of our participants were female (3 of 14). We encourage further testing of the interface with older participants, less technologically savvy participants, and high-risk users (ones who would be very cautious on the internet) for further insights. All of our test participants were relatively young (all under the age of 40 and 5 being under 20) and tech savvy (all participants had regular interaction with technology).

Appendix

Background

The security allows users to choose their appropriate trade off website functionalities for increased security. The slider settings gradually disable subsets of web features that can be used as a vector for attack.

You can find the slider on Tor browser through the onion button. The desktop version has four settings: low, med-low, med-high, high. The default setting is initialized to low, unless users change it.

Methodology

Isa discusses the settings with tbb-team and designs the mobile interface
Isa hacks together wireframes of the mobile UI with rough settings and text
Isa and Linda review the wireframes and finalize the UI
Linda creates a clickable prototype of the wireframes
Linda and Isabela perform parallel cognitive walkthroughs
Linda and isa share their comments from the cognitive walkthroughs
Linda identifies design principles for security slider text
Linda writes version 0 of security slider text
Collaborative iterative wordsmithing! A google doc of the security slider text is sent to tor-project, ux-team, and misc people.
UX team approves final security slider text
TBB-team and tbb-mobile team approve the final security slider text
A hired contractor develops the mobile UI according to the prototype and final text

Design principles

Brevity: mobile interfaces have much less space; users are more likely to read the information if it is less text.
Understandability: a user should understand why each setting is there and when if they should use that setting.
Appropriate tone: the security slider is there to give users extra security settings; users should pick the highest level of security that they will not get frustrated using. Even the lowest setting will have all standard tor browser precautions and you cannot turn Tor off Tor Browser.

Final Copy

The results of our efforts! Both Orfox and Tor Browser have agreed to adopt these changes.

Standard 

All Tor Browser and website features are enabled.

Safer

Disables website features that are often dangerous, causing some sites will lose functionality. 

At this cautious setting: 
* JavaScript is disabled on non-HTTPS sites.
* Some fonts and math symbols are disabled.
* Audio and video (HTML5 media) are tap-to-play. 

Learn more  (link to https://tb-manual.torproject.org/en-US/security-slider.html)

Safest

Only allows website features required for static sites and basic services. These changes affect images, media, and scripts. 

At the strict security setting: 
* JavaScript is disabled by default on all sites. 
* Some fonts, icons, math symbols and images are disabled.
* Audio and video (HTML5 media) are tap-to-play. 

Learn more  (link to https://tb-manual.torproject.org/en-US/security-slider.html)

Wireframes

Participant quotations

Q1 answers (How do you change the security slider settings?):

“It’s a simple drag and slide it to the setting you want.”
“Just tap on each setting.”
“I am not able to understand where the setting is. I don’t see any settings.”
“By pressing above the word on the line”
“Drag along the slider, left to right”
“By pressing on the different options.”
“Based on the <I can’t make out what he said>.” (He seemed confident though and seemed like he knew what he said).
“By touching the safer, safest, or default.”
“You just tap where you want to go.”
“Just tapping on safer or safest.”
“Just swipe right or left”
“By clicking on the word and it moves”
“Moving the slider seems like the obvious thing to do, but someone unfamiliar with them might need a prompt.”
“The slider seems pretty easy to use. I would not need any explanation on how to change from standard to safest.”

Q2 answers (What does each setting do?):

“Yeah, I understand what each setting does .”
“Yeah, I read the description and I understood it.”
“It changes the functionality of the website to make it safer.”
“It changes what the browser allows and what it doesn’t.”
“They make the browser more safer.”
“It tells us about different standards of safety. ..how each case tells us what scripts will run and not run which helps end user privacy”
“Standard doesn’t block anything, safer blocks some javascript with audio and video, safest blocks all javascript and a bunch of symbols”
“The settings change the security features of the browser. ”
“”
“Makes the ... .... I think it makes your browsing safer...”
“From what I understand standard is the normal browser settings... I don’t really know the difference between safer and safest since both disable javascript, but it says only static things work on safest”
“All of the safety aspects are easily comprehendible.”
“I can understand all the terms and safety aspects. I like how you explained that the HMTL5 refers to media and audio.”

Q3 answers (How does this affect your browsing?):

“There will be a lot of animations and responsive content but when you change these settings, they won’t be responsive at all. Things might not work and then you’ll have to manage what you want to see on your own when you choose safer or safest.”
“I read the settings and javascript is disabled. I don’t like that, so I’d rather be on standard mode.”
“It would make it.. safer..”
“Disabling javascript would not let me use some websites and disabling HTML5 would ruin some other ones.”
“It restricts ... the features and functionalities in the browser.”
“In normal everyday life, no one would care about scripts being loaded and stuff like that ... but various institutions that take data without asking, and we allow them to take our data. That’s against privacy”
“On different modes we are anonymous at different levels! Using standard anyone can know anything about us. Safer they know basic things about us. Safest, they won’t know as much.”
“It makes it safer, in the sense that there are scripts that scan what you are doing, which website you are opening, and this can prevent that, ...the safest setting might reduce data load and will make things load faster.”
“The might be ... some dangerous malware or something, right? I think this is a good option for preventing that kind of issues.”
“It should prevent you from getting hacked or viruses”
“If javascript is not present, then all the .. dynamic related elements won’t work. So this would reduce the experience in all the sites in general.”
“Some aspects of web pages may be blocked due to unsafe content.”
“It would affect my browsing if I chose a safer setting- I would use a less safe setting so that JavaScript would not be disabled”

Q4 answers (Would you adjust the setting from what it is now?):

“I would change it to ‘safer.’”
“Not necessarily.”
“No.”
“No.”
“No, not for normal usage.”
“I would go for safer. Safest is for browsing the deep web. Regular users use safer. ”
“Yes I would use safer if I am doing normal browsing.”
“Yes, I would mostly put it on safer option”
“Yeah, after seeing this, I would like to settings to this one.” (no mention or notes of what was pointed to.. But it was either safer or safest)
“I will keep it to safer, I guess. If I am using Tor, I want more security than other browsers.”
“I would probably choose the “safe” setting, there's the potential for more content being blocked on the safest setting, and I'm the kind of dum-dum who's willing to take my chances.”
“I would choose the standard setting- I’m just going off of the experience I’ve had on the website I currently visit. I have Norton and feel like that keeps my computer pretty safe.”

Q5 answers (When would you use the other settings? If not, why?):

“I would never use safest, but I think for the more paranoid users, this would be useful.”
“Safer and safest are generally used in place of private browsing.”
“No.”
“In some open environments, but not for usual browsing.”
“When I’m using a site on a public network and I feel insecure about attacks to restrict my data that’s going out.”
“It’s for deep web browsing!”
“default for youtube and safest when I want to be anonymous.”
“if I want to access a website I trust is safe, I would move it to standard.”
“For my regular browsing I might use standard”
“I’m not sure, I don’t think I’ll be doing anything that would require that amount of safety. giggles”
“Not that I can think of!”
“I can’t think of situations where I would need to use other settings.”

Comments

Please register or sign in to add a comment.

OrfoxSecuritySlider