Update Purple Tor Banner Messaging, Add Onion Icon, Remove "x"

[ninavizz]

Description

There are two messages in the Source UI today, advising users to do things with their Tor Browsers.

This issue is for the first of a few changes to improve the usability and behavioral compliance we're seeking of users. The parent Issue raising these concerns, is #4334

This Issue's Recommendations:

• Update text to read: Your Tor Browser’s Security Setting is too low. Use the <onion butt> button in your browser’s toolbar to change it.
  • Put SVG onion art, below, in place of <onionbutt> tag above.
  • Bold and hyperlink "Security Setting" to the instructions page.
• Remove "x" icon, so that user may not clear banner unless setting is updated
• Add the super sweet new Tor Button icon
• Add the circle-bang icon

As Is

Change To

Observed User Concerns

@huertanix and @zenmonkeykstop have commented that users have been ignoring the purple banner, to date. Thread in #4334. While deeper/systemic updates are clearly needed, this feels like a nice starting point.

User Stories

As a user, I want correct instructions to improve my security that will also get my attention and drive my behavior. It would be extra neat if a little picture of the button I'm supposed to press could immediately draw my attention to it so I needn't bother with clicking on an instructions link, too.

SVG Onion

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>Icon - Tor @svg</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Icon---Tor-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Tor-Button-Icon" transform="translate(2.000000, 1.000000)" fill="#0C0C0D">
            <path d="M8.27206791,6.27905236 C7.88283063,6.53485117 6.37928571,7.48491742 6.38222311,7.48303971 C5.92467564,7.77552366 5.55774616,8.01739321 5.22956304,8.24495813 C4.62774003,8.66226724 4.1902024,9.01032507 3.90524298,9.30237927 C2.34845165,10.8521114 1.86583368,12.1863028 2.03292037,14.2840468 C2.17744778,16.6290092 3.98280543,18.7226974 6.62789966,19.5725823 C7.66430091,19.8978216 8.64783036,20 10.3045058,20 C12.4566798,20 14.4305353,19.426444 15.7257727,18.390024 C17.1602235,17.2499732 18,15.5258216 18,13.7581121 C18,11.9676824 17.2065463,10.2463814 15.7919239,9.00433992 C15.0624549,8.37501782 14.1112169,7.77509114 12.728283,7.03810567 C11.4758566,6.39901667 10.3718516,5.26209475 9.95586156,3.83344263 C9.74417905,4.87665258 9.16812751,5.7299448 8.27206791,6.27905236 Z M17.1048177,7.49557522 C18.9563878,9.1179941 20,11.3893805 20,13.7581121 C20,16.1268437 18.889058,18.4306785 16.9701581,19.9557522 C15.1859178,21.3834808 12.6947145,22 10.3045058,22 C8.8232498,22 7.47665339,21.9351032 6.02906225,21.480826 C2.69623613,20.4100295 0.238697687,17.6843658 0.0367082257,14.4070796 C-0.165281236,11.8761062 0.440687149,9.92920354 2.49424667,7.88495575 C3.53785889,6.81415929 5.69241315,5.58112094 7.1736692,4.60766962 C7.91429722,4.15339233 8.68859016,2.79056047 7.20733411,0.227138643 L7.5103183,0 L11.9204215,1.75221239 C11.3144532,3.63421829 13.0650285,4.96460177 13.637332,5.25663717 C14.9165986,5.9380531 16.1285353,6.6519174 17.1048177,7.49557522 Z" id="Border" fill-rule="nonzero"></path>
            <path d="M10,5.80000019 C10.3632315,6.90320629 11.2333653,7.78038283 12.2159038,8.28105702 C13.3397544,8.87914153 14.1127842,9.36599897 14.7055922,9.87671162 C15.8551945,10.8846633 16.5,12.2815477 16.5,13.7345319 C16.5,15.1690781 15.81755,16.5682758 14.6518339,17.4934592 C13.5992506,18.3345433 11.9951837,18.8000002 10.2462051,18.8000002 C10.1620472,18.8000002 10.0800269,18.7996762 10,18.7990042 L10,5.80000019 Z" id="Half-Content"></path>
        </g>
    </g>
</svg>```

[eloquence]

The "Green" button is no longer green, but there is a new icon in the URL bar, that is green.

References to the "green" button and the icon have already been updated; the third screenshot above is out of date, that screen currently says:

Thank you for exiting your session! Please select "New Identity" from the onion button in the Tor browser's toolbar to clear all history of your SecureDrop usage from this device.

I'd prefer to split updates to the JavaScript banner and the "New Identity" banner into separate issues; the updates you propose to the "New Identity" banner are larger in scope and merit separate discussion. So I suggest we scope this issue only to the JavaScript banner.

Regarding that banner, a couple of comments/questions:

1. We cannot say that the security setting is at its lowest level. Try visiting https://nyttips4bmquxfzw.onion/ with the slider set to "Safer" (the middle level); the banner still shows up. That's because Tor treats .onion sites with HTTPS as more secure than without; not all SecureDrops also use HTTPS (.onion services have their own encryption). At minimum, we'll need to reword that.

2. Your banner version no longer has the "X" to dismiss, is that intentional?

3. I'm wondering if we might want to bring back the "Show me how" language instead of linking the "Tor Security Setting" text. Clicking that link I wouldn't know whether to expect help, whereas a "Show me how" link IMO makes that more obvious.

4. Since we're no longer showing any sort of rationale in this proposed text, it may make sense to include a one sentence rationale on the "Show me how" popup. Thoughts?

[zenmonkeykstop]

Based on recent user feedback, it may be worth looking into alternatives to the purple banner - apparently folks tend to ignore this particular UI element.

[ninavizz]

@zenmonkeykstop So... I totally agree, we need to make systemic changes within the Source Experience. ASAP tho, we can change the purple banner. Eliminating the "x" in the banner, is one such quickie change.

Larger/systemic changes I'm trying to restrict to #4334

@eloquence The more words (especially 'please' and 'thank you') we pack into a message, the more likely a user is to ignore it. It's a strange phenomenon I've observed in testing, and has slowly evolved to become a known UX best practice. Hence, my choice(s) in language use.

Happy to discuss tweaks to wording, but keeping the character-count AS LOW AS POSSIBLE is really important to get users to digest the ENTIRE THING w/o needing to "invest" in "reading" it. We need them to get the whole message in a glance, unfortunately. Gotta think "How to drive behavior" ahead of "How to communicate thoughts to them." Especially to Americans. Our brains no longer think, we're becoming increasingly conditioned to just take orders (only kinda kidding, regrettably).

[ninavizz]

@zenmonkeykstop Also: Pls to come to next week's UX meeting, as I would like to get this at the top of the agenda to discuss.

[eloquence]

The more words (especially 'please' and 'thank you') ..

Agreed. To be clear, the language I quoted is the current language; your screenshot is outdated. I am fine with revising it further and changing the banner design, but let's track that separately from changes to the "Security Settings" banner.

[rmol]

A translator correctly points out that the Tor settings say "Security Level", so let's include that in our deliberations.

[eloquence]

For the record, this issue was in fact resolved by b00a4de (the current Tor Browser warning reflects the recommendation in this issue, and that was shipped with 0.14.0). Further improvements to the banner should be logged separately.