wiki:doc/UX/OrfoxSecuritySlider

Version 9 (modified by lnl, 22 months ago) (diff)

--

Designing the Security Slider for TBB-mobile

We ported Tor browser's security slider security feature over to Orfox (Tor Browser for mobile).

Even with the security slider, Orfox still does not have all the features that its desktop counterpart does. We leave this for future work.

People:

  • Linda, UX Team
  • Isabela, UX team
  • Synzvato, contracted

Timeline:

  • Nov 2016: design the security slider
  • Dec 2016: handed off design to synzvato to implement

Goals:

  • create a mobile-appropriate interface for the security slider
  • make the security slider easier to understand

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.

low

Some existing concerns with the slider were that:

  1. it's hard for users to find, and therefore, users do not use it.
  2. users were concerned that the default security setting was set to "low."
  3. users do not understand what the various settings do.
  4. users do not know why they should choose a particular setting.

In this project, design a mobile interface for the security slider, redesign the interface to address concerns 2-4, and build the mobile interface (located under settings > Tor Browser Settings).

Process

Methodology:

  1. Isa discusses the settings with tbb-team and designs the mobile interface
  2. Isa hacks together wireframes of the mobile UI with rough settings and text
  3. Isa and Linda review the wireframes and finalize the UI
  4. Linda creates a clickable prototype of the wireframes
  5. Linda and Isabela perform parallel cognitive walkthroughs
  6. Linda and isa share their comments from the cognitive walkthroughs
  7. Linda identifies design principles for security slider text
  8. Linda writes version 0 of security slider text
  9. Collaborative iterative wordsmithing! A google doc of the security slider text is sent to tor-project, ux-team, and misc people.
  10. UX team approves final security slider text
  11. TBB-team and tbb-mobile team approve the final security slider text
  12. 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.

Summary

We designed the mobile user interface, wordsmithed the text for the security slider, and hired a contractor to develop the security slider for Orfox.

Changes made:

  • changed to have 3 security settings rather than four. There was no specific reason for having four settings and three makes it less confusing for users because there are less options.
  • re-named settings from "low, med, high" to "standard, safer, and safest." This more accurately communicates that the extra settings are optional precautions.
  • added an introductory sentence to each setting explaining why changes are made
  • wordcrafted to shorten the bullet list of disabled features.
  • linked to the tor maunual security slider documentation for more information.

Security Slider Settings and Text:

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/linux/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/linux/en-US/security-slider.html)

Clickable Prototype:

Click here to check out our layout design. The text will be updated to reflect the changes above.

Wireframes with final copy:

Wireframes with final copy

Attachments (20)