Compose new static page for post-SUI Logout

[ninavizz]

Per resolution established in SD #4952

• Should to map to SUI Design Principles

[ninavizz]

First jab...

[ninavizz]

@rocodes @zenmonkeykstop Hey gang... this is an update to what's above, based on Friday Feedback before everyone went on break. Let me know what y'all think, I'd love to un-block Ro!

[rocodes]

The exact wording I'd like someone to weigh in on (I'd make it shorter - "Click the icon on the Tor browser toolbar to hide your SecureDrop activity" -- we can't exactly say whether there will be no traces of SD activity on their device, and I wouldn't give advice on whether or not they should check back) but the design looks very clean to me.

[ninavizz]

@rocodes Thanks for the feedback.... I don't disagree, that ideally I'd like it to be shorter. My rationale:

1. It's a best practice to name the functionality you're asking the user to invoke. Especially for accessibility things. Unfortunately, I feel the name of the feature is dreadfully confusing, and that its naming may distract from the task we're asking of the user. However, naming the feature does clearly text instruct the user which tooltip'd object is the correct one, and it names the functionality if they wish to learn more about it. Finally: to drive behavioral compliance users need to know why they're being asked to do something (also a known best practice in UI text). I appreciate the security concerns with making assurances on something, however the gist of what is said is accurate. It's a delicate balance between seeking pure-accuracy, against clarity of concepts communicated to motivate behavior.
2. We have learned from newsrooms that too often the same source will re-submit under different codenames. It is not known why they do this, and we cannot concretely assume why—but we can hypothesize. Not understanding the whole dealie-o with codenames, is one potential issue. Remembering to write down their codename, is another potential issue. If they don't know why this whole codename thing even matters, is another potential issue. Currently the Source experience does a poor job readily letting users know they can check back to receive journalist replies. This one brief reminder is a nice gapfill on that known deficit in the experience, until the full experience can be rethought.

This additional line of text imho does not detract from the first ask; while it also adds an important reminder to the next step in the experience—which was never intentionally orchestrated as an experience for users, and as such has many workflow probs (sources not submitting under the same codename, a primary known prob—with many more likely not yet known probs).

[rocodes]

I think this is important (sources submitting under different codenames), but (possibly) belongs with a larger conversation about communicating to sources what the "codename" is/does. I'm not sure if the logout flow is the best place to intervene with that kind of knowledge if it hasn't been emphasized already by the (pretty excellent!) reminders throughout the submission experience, such as "remember, your codename is ___ " / "Forgot your codename?" etc.

Relevant SD tickets:
freedomofpress/securedrop#4096
freedomofpress/securedrop#3586 (older, may have been resolved already)

[ninavizz]

I am 100% with you, in agreeing this is far from the best place to put that reminder on the codename. :)

We're very far away from having the bandwidth to solve for the codename ambiguity and other—abundant—Source UI problems... that need to be solved for in a proper/holistic effort, is the thing. Unfortunately, reminders to do an action (write down a codename) are hollow, if a user doesn't know the value behind taking that action. Nowhere, have we communicated the value. And I agree, this is a shitty place to make that first value-prop.

While I agree this is a turd-polish "solution" (that is more of a band-aid), it's something we have the bandwidth for, today—to address a known problem that likely impacts newsrooms as much as it does sources. Because it fits into that overlap area sweet-spot of likely impacting newsroom workflows, it feels important for me to seize every reasonable turd-polish opportunity we can get—until we have the bandwidth to properly solve for it.

Unfortunately, that's kind of the general gist with most Source UI fixes, at the moment. Where we have reasonable opportunities, we have to take them.

[zenmonkeykstop]

I second @rocodes' point about telling sources to check back. Making it conditional "If you want to check back..." seems OK, but there will be sources who have no plans to check back, and the page should reflect that. The critical element for source security here is that they hit that broom button. Anything that distracts from that CTA is harmful IMO.

[eloquence]

To resolve freedomofpress/securedrop#4952, we will need to revise the contents of the message that is shown on session expiry as well. For now, to manage scope, I don't think we should change the interaction flow here, but the content should be updated to reflect the changes to the Tor Browser UI, with the stretch goal of also cleaning up the message presentation a bit (e.g., giant hand icon).

[ninavizz]

This is an iteration on the mockup above, per everyone's feedback. There are specific motivations behind each word that's shown—this is not an arbitrary choice of words—to influence behavior by Sources.

Users most often look for a primary action to inform their behavior choices, before reading content on a page—often they skip the content altogether. Saying "Thank you" in H1 content is a flag that will most likely trigger users to ignore page content. Unfortunately it doesn't matter how important a task flow might be—users I've observed applying for jobs they felt invested in, registering to vote, and applying for a driver's license, all reflected this behavior.

My priorities here, are:

• Catching the users attention with atypical text
• Including the icon graphic for 1:1 visual identification to drive action
• Naming what the functionality as alt-text or a screen-reader wd surface it to be.

Attached (below) is the broom icon, saved as a PNG at 4x the 100% resolution.

[ninavizz]

@eloquence Did the purple bar get killed at the top of that screen?

[rocodes]

I'll look into the purple bar thing - if it did get killed, I am the likely culprit.

Re wording: I completely agree, but I also think it is important to clarify that they have in fact successfully logged out when they see this new page (similar to the old "thank you for exiting your session!" wording).

[ninavizz]

@rocodes I feel the big "Log In" button clearly achieves the goal you're identifying, while keeping our ask focused.

"Thank you" too clearly implies the user is at the end of a task. They're not, though. From +15yrs of observing users in testing sessions, I can pretty confidently assert that any additional text will backfire on us, here.

Even if we didn't use the verbiage "thank you" and just stated in a small sentence a confirmation they've logged out, the more text there is, the more likely the user is to TL;DR ignore it. Again: we can't fall-back on the assumption "this is too important for them to ignore," because that's not how human brains work.

[ninavizz]

^ Every word in the H1 and body, was carefully chosen on the assumption the user would still be informed to do what they need to do, even if they skip everything past the broom icon. It is highly likely that users will skip much of the text, past the broom icon. The more that's there, the more likely it is more text will be skipped.

The body starting with an instructive verb, is also really important. Users have to be able to only read a handful of words, to register what they need to do next.

[eloquence]

@eloquence Did the purple bar get killed at the top of that screen?

No, but it only shows up if JavaScript is enabled in Tor (that's what the warning is about), which it was not in the screenshot I shared with you.

[ninavizz]

@rocodes So... insight into my own brain: the argument you cite above, I was just wrestling with. Hard. In composing the text for this screen.

In this scenario, the user didn't even chose to log out; so in a way its even more urgent that the text be brief, here, as they'll likely only encounter it while tab hunting. It's TOTALLY wacky to not say 'You have been logged out due to inactivity. Log in to check for responses or to share more with us.' yet because of behavioral-cognitive-reality things, stuffing all that text into this message would most likely backfire on getting users to take the protective actions they need for their own safety.

@eloquence This feels like Yet Another Urgent Need for the Learn More/TL;DR Page to be completed. Ro, if we had such a page, a simple "Learn More" link to an FAQ there, would be my preferred solution to this conundrum.

[ninavizz]

Artwork for above, assuming there will be a long discussion about text, below... :D
As with other artworks, both were generated at 4x their 100% size, to budget for scaling fuzzies.

[eloquence]

I don't have a strong opinion on whether or not we have to explicitly acknowledge that the user has logged out. I agree that the "Log in" button gives a strong visual hint to that effect, and subtle recognizable hints like this can often be as effective at conveying the state of a system as explicit language.

As has been noted, we should not say "This will ensure you leave no trace of your SecureDrop activity on this device", or wording to that effect, because the scope of the "New Identity" feature is too limited to make any such assurance (we don't know what else the user has done on the device).

How about:

"This will clear your history and other browser activity data on this device."

I would also suggest to tweak the wording "Click the [icon] icon to Create New Identity" a little bit, because the capitalization does not map to anything in the user interface (the tooltip just says "New Identity"). I would change this to:

Click the [icon] New Identity button

As you have done in your more recent mockup.

[ninavizz]

...ok, so (for the "user clicked log out" screen):

H1: One more thing…
Body: Click the [icon] <b>New Identity</b> button in your Tor browser’s toolbar. This will clear your history and other browser activity data on this device.

[eloquence]

Log in to check for responses or to share more with us.' yet because of behavioral-cognitive-reality things, stuffing all that text into this message would most likely backfire on getting users to take the protective actions they need for their own safety.

(For anyone following along, we're talking about the session expiry case)

I think it's reasonable to omit the language about logging back in because the login button is literally immediately below the message, so it's obvious that it's an action available to the user. However, I do think we need to explicitly acknowledge what happened (session timeout), or the message itself has high potential to be too confusing and disorienting to be actionable. The user may even distrust it.

[ninavizz]

I do feel it's important to include the last half of the sentence, here, as the phrase Log In is not used on the button, below—and that is the intuitive polarity to "logged out."

Also, I'm well aware the below sentences feel backwards. Per my above cited notation that the first few words must trigger actions in the user's brain, it felt important to keep them inverted in support of the urgency for the user to take action.

[eloquence]

I do feel it's important to include the last half of the sentence, here, as the phrase Log In is not used on the button, below

It is - the button says "LOG IN". You're working from an older screenshot or mockup.

[ninavizz]

Ugh, yeah—the typography is still wacked in the code, so I used a mockup. Thx for catching that.

[eloquence]

(Still commenting on the session expiry case)

If this was a straightforward "the user must click this button every time" thing, I would agree with your approach, but it's not straightforward -- the user needs to understand this action in the context of what they're doing, especially because "New Identity" is a potentially destructive operation (it closes other open windows or tabs and erases all data about them).

For example, a source may have done a significant amount of other work in other tabs or windows. Now they are being asked to click a button that closes all other tabs and windows. Why are we asking them to do that? What are the consequences of doing that?

In practice, the user may want to revisit those other tabs before taking this action, or they may decide that it's appropriate for them to do this after they're completely done with their session.

For this reason, I would err on the side of a straightforward construction that can be easily read, even if it has somewhat lower follow-through, e.g.:

You were logged out due to inactivity.

Click the New Identity[icon] button in your Tor browser's toolbar before moving on. This will clear your history and other browser activity data on this device.

[rocodes]

I agree that the "explain what happened" (you were logged out due to inactivity) should come first, but I defer to rest of team, esp ux. Whenever there is consensus on wording I will include it!

[ninavizz]

Yeah, I'm cool with Erik's suggestion—especially since this page is served from passive neglect, vs the user taking an action with the theoretical intent to protect themselves. I tweaked it a touch to reduce word-count, though; as "browser data" and "history" are kinda redundant. @eloquence If that tweek looks good to you, perhaps let's edit the other message to read the same?

[eloquence]

Nice edit, works for me! I have a slight preference for using "Tor browser activity data" over "Tor browser's activity data" throughout (may be a bit easier to translate as well) but either is fine with me.

[ninavizz]

@eloquence Your grammar is better than mine, so I (the native English speaker) will always defer to you (the non-native English speaker) on those points. (cough) yeah. :D

@rocodes I believe consensus has emerged! Thank you for your patience with our (my) pedantry. If there are discrepancies between the Zeplin mox and the text below, follow the text below. :)

Ship It!

For the scenario: User logs out, and no UI is shown on the screen other than the H1 and body, with the logout button, languages selector, footer, and newsroom logo.
— Zeplin spec —
H1: One more thing…
Body: Click the [icon] <b>New Identity</b> button in your Tor browser's toolbar. This will clear your Tor browser activity data on this device.

For the scenario: User ignores authenticated session and system logs them out.
— Zeplin spec —
Message salutation: Important
Message body: You were logged out due to inactivity. Click the [icon] <b>New Identity</b> button in your Tor browser's toolbar before moving on. This will clear your Tor browser activity data on this device.

[ninavizz]

^ ...also, note: FYI @rocodes the stop-bang is not intended to be the standard error message styling. This is a slight twist on that, with an octagon instead of a circle, on the bang. I could probably stand to post those finalized styles, here, soon...