Rotate flash messages for same session sequential submissions

[ninavizz]

Description

Create a series of "rotating" confirmation pages in the Source UI, so that users always receive feedback affirming a new file upload or message submission.

User Impact

In today's Source UI, the confirmation message a Source receives after uploading a file or sending a message is like all messages—not the standard Javascript thing with dynamic info to speak to a user's specific actions, but a static bit of vague text. Which for single-action submissions, is fine.

For multi-action submissions in the same session, however (multiple files, a file followed by a message, a message followed by a file, multiple messages, etc.), the user receives no continued feedback. Freddy Martinez brought light to this crummy experience in a comment, in an older Issue. This issue, is a design solution to rectify that.

Considerations:

• Visual design. Depending on how this Issue is prioritized, it may need to revert to today's visual design; explos conducted abreast other design system tasks.
  • Messaging re: Tor could also stand to change, so—possibly prioritize this to be done in a full-experience messaging scrub on the Source UI? Would that hold it back?
• The message's salutation needs to change with each "new" refreshed screen, as this is what the user will see; the body copy does not need to.
  • 2nd, 3rd, and 4th recommended message, important to all "loop" well together.
  • Length differences of the changed text "hopping" between short/long is important, to demonstrate a change to the user.
• Tone/Voice will probably need to be discussed.
  • Intentionally crafted to sound human to avoid sounding robotic
  • Warm, but not cute; credible, but not robotic; usable and brief, but neither terse or abrasive. All, a broader and different discussion this work can inform—but should not hold up, if this work is considered urgent w/in Source UI 2019 priorities.
• Yes, these pages will/would likely add to the QA test-load. Considerably.
  • Would this change, therefore be worth it?

User Stories

As a Source making successive submissions in a single sit-down with a SecureDrop instance, I'd like to know a newsroom got my stuff ok.

[ninavizz]

To be considered with #4967

[DrGFreeman]

Hi @ninavizz.

I can work on implementing this. Implementing the message cycling will be quite straightforward provided we replace the different messages that depend on the type of submission (file, message or both) with the more generic "this information / additional information" as per your suggestion above.

Regarding the styling, I can implement easily in the current flash message style, with the changing part of the message in bold like below.

I believe updating the style of the flash messages should be treated separately as it would affect not only these messages but all flash messages messages.

[ninavizz]

Hello @DrGFreeman! I would personally love it if you took this on... however we have yet to discuss the solution, as a team. A few things...

1. Much of the user-facing friction this issue addresses will be mitigated when multi-file upload is enabled (which there is currently not an issue for, but it was discussed when this issue was first created). The small bits of casual discussion there has been around this, leaned towards doing the browser-based multi-file upload (either first or instead, it's been a while); which, as I understand it, won't be a trivial thing to test nor a trivial PR to get in. The team may well prefer that going in, as a priority over this—I truly do not know. Someday I'll learn how to read minds, not just study how they use computers. ;)
2. I suspect there may be other Source UI Issues that are both more urgent, or easier to test, while we're in our eleventh-hour get-past-the-finish-line phase with the Workstation project—which is a separate constraint for the broader team right now, altogether.
3. I could also get #4967 (the styling itself) into a finished state to hand-off... which could be an easier Issue for the team to get into the next release, than this or the multi-file upload.

Ok, I'll step-back from trying to read @eloquence or @redshiftzero's minds. They'll both be online in the AM (PST), and I'm sure will be happy to get your brain working on something.

It's great seeing you back, and I look forward to working with you some more on things! :)

[DrGFreeman]

@ninavizz, FYI I already have the message rotation working in a local branch so, apart from the PR review effort by the SD team (which I understand is not negligible), getting this change in would not take much off from my capacity to work on another issue that maybe more of a priority.

I understand the multi-file upload is a much more complex change, subject to team agreement on priorities. In this context, I believe implementing the message rotation would provide a worthwile initial solution to the problem raised by Freddy Martinez.

It's great seeing you back, and I look forward to working with you some more on things! :)

The pleasure is mine!

[eloquence]

I have concerns about maintenance and translation burden for this message rotation approach, especially with 4 messages. (Remember that we have to have automated tests for this as well.) I'm also not convinced the subtle variations of content are sufficient to help the user distinguish between subsequent upload actions; this is not an established design pattern, and I'm wary of introducing it into the UX untested.

While we can't safely use JavaScript in the Source Interface, we can use CSS. I would rather explore setting a one-time CSS on-load animation to highlight the message visually, instead of changing the message content.

[DrGFreeman]

Hi @eloquence, Thanks for the feedback.

From the maintenance perspective, I think this is roughly equivalent, as there are already four different messages in five gettext items, two here and three here.

This being said, I am not disputing that the message rotation may not be an established design pattern and its effectiveness may not be known.

Highlighting the message visually with an animation as you propose may indeed be more effective. I have never worked with CSS animations but I will research it out and try to come up with a proposal.

[eloquence]

I'm going to close this proposed solution as it's IMO too complicated for what we're trying to do here (give clear information that additional messages/files have been received), feel free to reopen if you disagree, but otherwise I think we should consider alternatives.