Update purple Tor Safest bar on Source Interface per Tor Browser new UX & urgent usability needs

[ninavizz]

Description

The Tor team eliminated the Security Slider in it's latest Browser release, moving that functionality into the browser's Preferences pane. A huge win for general-population usability (even though power-users are likely to dread this)! 😸

As such:

1. The iconography in the toolbar users are directed to, has changed.
2. The iconography and text in the flyout are now obsolete.
3. Because the experience has changed, the directives in the flyout need to change.

In a parallel effort, updates to the Source experience around motivating users to comply with Tor stuff, has also been getting explored in #4334. As a part of that effort, a recommendation was made to make asap improvements to this piece of the UI (the purple bar) within today's experience as an asap precursor to deeper experiential improvements.

• Today's copy is abundant with "filler" text to express complete, fully accurate thoughts in a polite and helpful fashion. To users this unfortunately gets conflated with marketing content in split-second, unconscious decisions to tune-out what our modern brains have been trained to believe is most likely unimportant fluff. Which sucks, because this is neither.
  • Tightly structuring messaging content in brief chunks that are rarely complete sentences, is a known UX best-practice for copywriting for driving user behavior. The "Copywriting for UI" section I put together in the Resources block on the SD UX Wiki lists some great resources to learn more about this.
• A simple "bang" icon at the beginning of a shortened sentence is likely to grab the user's attention, more than simply starting it with words; and reducing the sentence's footprint entices engagement.
  • It's also become common for companies and webapps to announce new features or things they want you to buy, in full-width micro-banner messaging like this. This message is not that, and the little bang can go a long way communicating this quickly.

This ticket merges the asap recommendation from #4334, with the immediate needs cited in #4454 to also update messaging per the latest Tor Browser updates.

User Research Evidence

This section should be renamed to: User Needs This Issue Addresses. Labeling this section a place to cite evidence of research that rarely exists dilutes the value using actual user research evidence.

That said, user needs are adequately laid forth in the above cross-referenced tickets.

Implementation Guidelines

I've prioritized the updates in bullets below the mockup.
MUST, SHOULD, and COULD.
Out of respect for dev time, I'll only insist that MUSTs get implemented—but SHOULD items also fit within my criteria for addressing urgent usability needs in a high-impact/low-effort fashion, and if at all possible I'd like them to get implemented, too. The one COULD task may be a huge PITA, and is less important than the SHOULDs.

• Update banner text, to: Your Tor Browser’s Security Setting is too low. Use the button in your browser’s toolbar to change it.
  • MUST
• Hyperlink and bold Security Setting and present as a proper noun (m/c) as the active cue in the text
  • MUST
    • Hyperlinked text should always be of the destination, not of a concept you're asking the user to buy into. Yep, "Learn More" falls into the latter as a best-practice; it just feels too optional, and queue's a decisionmaking process vs stating plainly a place we're directing the user to go to.
• Include Guard icon (what Torproject is calling it) and Bang icon in the bar
  • SHOULD
    • This icon is referenced as the Shield in other tickets; but Tor calls it the Guard icon, and I recommend consistent verbiage to make everyone's life easier. Even though I agree, it's a friggin' shield.
    • Visuals do much more to drive user action (when used correctly), than words.
    • This is not a happy/cheery "Yay, new features we want to tell you about!" message. The user needs a symbolic cue to make the case for them to read the next 18 words.
• Remove "x" to collapse the bar
  • SHOULD
    • Easy to do; it's against the user's best interest to enable their blowing this off
• Update bubble text (content in code block, below):
  • MUST
    • The slider is dead. Its functionality has been moved to a set of radio buttons in the browser's preferences pane, and as such today's existing text is misleading. There is no longer a slider control for a new user to find.
    • Eliminate all text not included in code block, above. The intro pleasantries are well intended, but unfortunately distract from task completion.
    • In item number one, the shield icon should be placed in the big space between "the" and "in"
    • Hyperlinked text should be "Refresh this page" per rationale cited above for linked text in purple bar

1. Click the        in your browser’s toolbar above
2. Select Advanced Security Settings
3. Select Safest

Refresh this page, and you’re done!

• Update the current Guard icon to the cleaner SVG (code in the comment of this Issue)
  • MUST
    • Guard icon in the PR's code is obfuscated by unnecessary negative space in a square graphic. Icons or icons w/in instructional content are only valuable if users can quickly and easily 1:1 match the image in instructions, to a UI element. Too much parsing is required of the image currently used.
• Eliminate the "x" in the flyout bubble
  • SHOULD
    • Easy to do, and it's in the user's best interest for us to force them to just make the damn change
• Tweak the pointer-thingy in the white bubble, so that it more simply points "up" vs specifically to a thing on the right or the left.
  • COULD
    • The pointer's current styling infers more specificity than can realistically be built-in, and making the triangle of the pointer a horizontally-symmetrical triangle is a recommended improvement.

SVGs are pasted below in comments.

[ninavizz]

If this could get into #4462 or done in a new PR for the next release @redshiftzero, that'd be great. Thx!!

[ninavizz]

Tor Guard SVG

Note: This is a version that Nina edited, to make it align stylistically with what is used in the latest Tor Browser. All publicly available iconography for Tor Browser, is woefully out of date (including versions I found of the Guard icon). This SVG was further optimized on Peter Collingridge's SVG optimizer.

<svg width="12" height="13" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg"><title> Fill 1</title><desc> Created with Sketch.</desc><g fill="none"><g fill="#FFF"><path d="M12 3.2C12 8.9 8.4 12 6.2 12.9 5.9 13 6 13 5.7 12.9 3.1 11.8 0 8.3 0 3.2L5.7 0.1C6 0 6 0 6.3 0.1L12 3.2Z"/></g></g></svg>

[drewmassey]

Thanks for scoping this out, @ninavizz, let me retire the vestigial references to the slider left over in PR 4462 in a new PR that rounds out this as well.

[ninavizz]

Thank you so much, @drewmassey! Though please do get out and enjoy the holiday weekend. 😄

I appreciate your recent contributions, and am delighted to have you on the good ship SecureDrop. You're a mensch!

[drewmassey]

@ninavizz This all makes sense to me, I will tackle this later today and tomorrow. I am assuming the rest of the team has no other feedback to consider on this matter right now.

• I am inclined not to implement the one COULD (triangular pointer), because, well, I think there are more impactful pieces to work on. Open to being persuaded otherwise.
• Thanks for providing the SVG for the shield. A previous PR rips out font-awesome in certain contexts, I will make sure that providing a bang in the purple bar is still feasible without it; if this is impossible I may come ask you for a SVG for the bang too.

[ninavizz]

@drewmassey Heh, I'm actually who requested the FA icons removal. 😈

Click on the link for the Bang Icon in the spec, up above. It should link you to that icon's SVG code in the SecureDrop UX Repo. Yeah, we have a little housekeeping to do wrt styles documentation. All in due time.

Prioritization is a beautiful thing; and especially as a volunteer, simply getting a MUST taken care of, helps a lot. Srsly no biggie on the arrow; if all UX recommendations were all-MUST all the way, nothing would ever get implemented or improved. 😸

[drewmassey]

@ninavizz Here's a screenshot, this look ok? A few notes / questions below.

1.) I found the securedrop-ux repo but can't seem to coax the error-bang SVG out of it. The issue linked above keeps crashing my browser and I don't have sketch installed on my computer to pull it straight from the asset file. Er... help?
2.) Are the error-bang and guard icons font-awesome or no? I don't want to put them in the static folders for font-awesome if they aren't.
3.) In terms of internationalization, it looks like this isn't a concern for developer flow, but wanted to confirm that there isn't an expectation of that in the PR.

Also just a few notes to myself about stuff that needs to be done prior to submitting the PR:

• Update screenshots in docs/source.rst
• Update appArmor files
• Confirm tests locally before creating PR.

[ninavizz]

@drewmassey Huh, that is very weird—I just cut and pasted the SVG code from the comment on the aforementioned page. If you tried getting the SVG from the preview in the table, that icon is a crappy PNG I cut-and-pasted into a GitHub table.

Thank you again for tackling this, it looks awesome!! My only "feedback" (in big air-quotes) would be:

• Requesting the bubble get nudged up to decrease the distance from the purple bar to be about half what it is, in the screenshot. Th :)
• Maybe a few pixels of padding to the right of the Guard icon in the purple bar? The "b" in button looks like it's crashing into it a bit.

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title> Fill 1</title><desc> Created with Sketch.</desc><g id="Spex" style="fill:none;stroke-width:1;stroke:none"><g id="ICONZZZ" fill="#000"><path d="M10 18C5.6 18 2 14.4 2 10 2 5.6 5.6 2 10 2 14.4 2 18 5.6 18 10 18 14.4 14.4 18 10 18ZM10 0C4.5 0 0 4.5 0 10 0 15.5 4.5 20 10 20 15.5 20 20 15.5 20 10 20 4.5 15.5 0 10 0ZM9 11L11 11 11 5 9 5 9 11ZM9 15L11 15 11 13 9 13 9 15Z" id="Fill-1"/></g></g></svg>

[drewmassey]

@ninavizz Addressed in 828a9df, PR submitted. Thanks and have a nice weekend.

[ninavizz]

Hey @drewmassey... per the convo in #4494, I included the incorrect state for the TorGuard icon, in my mockups and specs. Thank you @zenmonkeykstop for your awesome attention to detail in catching that!

Below is updated artwork, to reflect the not-safest state of the control in Tor browser's toolbar. Sorry for the extra work on my account! :(

<svg width="12" height="13" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg"><title> Fill 1</title><desc> Created with Sketch.</desc><g fill="none"><g fill="#303030"><path d="M1.4 4C1.6 7.9 3.9 10.5 6 11.5 7.6 10.8 10.4 8.4 10.6 4L6 1.5 1.4 4ZM6 13C5.9 13 5.7 13 5.6 12.9 5.6 12.9 5.5 12.9 5.5 12.9 2.8 11.7 0 8.4 0 3.6L0 3.2 5.5 0.1 5.6 0.1C5.9 0 6.1 0 6.4 0.1L6.6 0.2 12 3.2 12 3.6C12 6 11.3 8.1 10 9.9 9.1 11.2 7.7 12.3 6.5 12.9 6.5 12.9 6.4 12.9 6.4 12.9 6.2 13 6.1 13 6 13L6 13Z"/></g></g></svg>