Update JI/AI Flash Messaging Styles

[ninavizz]

Child issue w/in #5766

Description

Update existing CSS classes so Journalist and Admin users can more quickly grok the gist of flash messages through semiotics alone, relying less on having to read stuff.

Most urgently, this issue was created to track the updating of the flash-success style, but follow-up community PRs to update the Info and Warning styles, would be lovely follow-up opportunities.

User Research Evidence

From Safe Delete. Recognition of semiotics w/o requiring user to "read" anything, proved to reduce cognitive friction and facilitate smoother execution of tasks; most noticably, with alleviating "omg am I doing this right?" anxiety. Summary Here on first page, with more details around messaging mid-document. More details, on Synthesis Spreadsheet linked-to in Summary.

User Stories

• I am working on Safe Delete and only need to update the Success messaging stuff.
• I am a community contributor and would like to add the additional few lines of CSS to update the other two message types (error and info).
• I am a Journalist, Admin, or Source user, and want to be able to more quickly parse a flash messages on page-reload, as that helps manage my anxiety when doing such sensitive tasks as working with SecureDrop always is.
  • Semiotic recognition, first: Did I do it right or wrong? Actually reading the content, an optional second: Ok, what are the details...

[ninavizz]

Success Flash Restyle

To match the positioning/general-size of the screenshot from Nina's browser hack, far below; and the inner-message/text styling from the nbly prototype (immediately below).

NOTE: In the HTML on all JI pages right now, the confirmation bubbles are classed as flash.notification which delivers the blue bubble. The green bubble is flash.success. My proposal for Safe Delete, is to re-class all flash.notification styled confirmation bubbles as flash.success; this will also ensure the styling is carried over to the Admin Interface. Yep, below JI screenshot shows the opposite, which I only did to ensure the padding/color/margins numbers were all correct.

Icon

• Show in the UI at 100%: 20x15
• Artwork created at 300% to be condensed to display at 20x15, because yay, pixel-density.
• Note: In the production build, all the icons are a little vertically off-center from the text in the messages. Ideally, they can all be vertically-centered... at least visually?

Typography:

• New classes
  • success_bold {
    font-size: 0.9em; font-weight: bold; color: #0CA116;
    }
  • bubble_body {
    font-size: 0.9em; line-height: 1.4em; color: #333;
    }
  • bubble_bold {
    font-size: 0.9em; font-weight: bold; line-height: 1.4em; color: #000;
    }

To make it square, big, and green:

/* journalist.css | https://demo-journalist.securedrop.org/static/css/journalist.css */

.flash.notification {
  /* border: 1px solid #8ed9f6; */
  /* background-color: #e3f7fc; */
  /* font-size: medium; */
  /* font-weight: normal; */
  /* margin-bottom: 10px; */
  background-color: #F6FFDF;
}

.flash {
  /* border-radius: 10px; */
  /* margin: 10px; */
  /* padding: 10px; */
  margin: 0px;
  padding: 20px;
}

...so, yes, I want the contextual/inline bubble in the Admin interface shown immediately above, to match the limoncello-green big-check styling we'll be giving to the JI. And yes, my spelling for apostrophe is incorrect.

[ninavizz]

Error Flash Restyle

Icon

• 9x30 @ 100% (so maaaybe this is a touch big for pixel-density compensating?)
  

Stylez

• Typography
  • error_coral: font-size: 0.9em; font-weight: bold; color: urgent_coral;
  • message text: bubble_body
  • bolded words in message (when/if applicable): bubble_bold
    • Note: I doubt error messages are likely to cite source names or specific areas of the UI to fix things on, but that is the goal with bolded text w/in the message... assuming such areas of the language could remain to 30% or fewer of the total words.
• bubble color: add to sass bub_error: #FFF7F7

Design rationale

• Same core semiotic as today, simplified and easier to recognize form
• Color use optimized for accessibility and to visibly "pop" for quick recognition from users
• Same implementation scope as "success"
• Not required for Safe Delete project; keeping here in case a community contributor wishes to pick it up

[ninavizz]

Notification Flash Restyle

Icon

• 35x15 @ 100%
  

Stylez

• Typography
  • info_blue: font-size: 0.9em; font-weight: bold; color: perky_blue;
  • Add perky_blue to sass: #0075F7
  • message text: bubble_body
  • bolded words in message: (when/if applicable) bubble_bold
    • Note: I doubt info messages are likely to cite source names or specific areas of the UI to fix things on, but that is the goal with bolded text w/in the message... assuming such areas of the language could remain to 30% or fewer of the total words.
• bubble color: add to sass bub_info: #F3FCFF

Design rationale

• Same core semiotic as today, simplified and easier to recognize form
• Color use optimized for accessibility and to visibly "pop" for quick recognition from users
• Same implementation scope as "success"
• Not required for Safe Delete project; keeping here in case a community contributor wishes to pick it up

[zenmonkeykstop]

Deferring for discussion, seems like the flash messages should all be updated to be consistent rather than just "success"

[ninavizz]

@zenmonkeykstop I don't disagree in principle. At all. It was honestly hard for me to even advocate for updating only one style, for exactly the reasons you cite.

The only reason I wanted to push for the "Success" ones now, are that the restyling did clearly have an anxiety-management impact on users in testing, which mattered a lot to me. Even just seeing the existing styling in your PR today, was helpful to see—like, yes, if I take the time to "consume" the content, it's already a lot clearer having a small bluey-green vs the blue. But it was still exciting to hear users go "aaahhh..." with the much-quicker recognition the updated design approach offered.

I'll get updated styles for the other two, posted here this afternoon, to facilitate discussion on Tuesday. :)

[zenmonkeykstop]

Working on this today - one thing to note is that the use of "i" for the notification icon is kinda Anglocentric. It might be cool to see if it does in fact work internationally or if there is a more general alternative.

[rmol]

It's part of ISO 7001, and according to the Wikipedia article, "The set is the result of extensive testing in several countries and different cultures and have met the criteria for comprehensibility set up by the ISO." Depending on how you feel about the comprehensibility of ISO standards, that could be enough of a recommendation.

We could also ask in the LocalizationLab channel over at IFF Mattermost.

[zenmonkeykstop]

That's good enough for me!

[ninavizz]

@zenmonkeykstop I adore your flag on anglocentricity, and @rmol I adore your check against ISO standards. Extra feels of warmth and awesome, knowing this conversation was had and resolved as it was, while I was out of commission. :)

I actually agree with you, Kev. Only went with the "i" to stick with the existing gist of the prior styles. Goal, being to keep recommended updates as un-controversial as possible with the broader team, and aligned with existing semiotics. Accessibility, ease of quicker visual recognition, and supporting tweaked updated text formats, were their only purpose.

Thx for tackling this one with Safe Delete, y'all! :)