SecureDrop UX Style Guide

Looking great - one note - can we add the hexagon icons from https://securedrop.org/news/ and include those colors in the style guide?

1 Like

Hi gang! Loved the presentation from @Anxhelo in today’s UX meeting. As I’m making notes from that meeting however, I have a question—after more closely reading the “Get Started” text.

Are all of the code components in the styleguide, dependent on Boostrap?

Asking, because in the Source and Journalist webapps, everything in both worlds should be able to elegantly display w/o degradation, in TOR w/o javascript. I’m not sure how Javascript dependencies are setup on the new website, but I’m assuming that core pages Sources may need to cross-reference when managing/posting submissions are setup to elegantly degrade?

There are of course a few exceptions in the Journalist and Admin interfaces, but in the Source interface it needs to be assumed our Sources have TOR security settings set for as high as possible. As such @Anxhelo, code snippets and CSS for things like the webapp icons, buttons, notification styling, etc., need to not depend on library call-outs. I’d also assume this is part of why there’s so much inconsistency… heh. :slight_smile:

Does TOR currently support SVGs in high-security mode? I recall there was an effort to integrate with FontAwesome a few years ago, to relieve dependence on the crummy PNG images—but because referencing its library required a teeny snippet of JS, that was shelved.

Apologies if this has all already been covered, or is somehow a non-issue. cc’ing @Harris @saptaks and @redshiftzero @eloquence just to be kosher.

Thanks again for all the awesome/hard work on this, Ura peeps!

@ninavizz I had actually worked pretty much a decent amount in degrading elegantly or converting entire JS based actions into CSS based components. If I remember correctly and given that is still in the same state, Source interface doesn’t need JS at all. There are still few in the Journalist and Admin interfaces some of which I was in the process to converting to CSS.

As of FontAwesome I had migrated to FA5 here. But it still uses SVG. And as far as I know, SVG is forbidden in high security level of TOR.

1 Like

Awesome, thank you! @saptaks!

@Anxhelo and @elioqoshi for the code-snippets, I don’t see much value in spec’ing “with Javascript” and “Without Javascript” versions of assets and typography for the Source UI… so if those code snippets could not depend on any external libraries, that’d be fab.

Also, much as I personally prefer SVGs, it seems to make sense to standardize the rest of the Source UI around TOR’s highest security setting… so, no non-native browser fonts (how can we make Ariel look awesome wrt spec’d font sizes, font weight, text decoration, line-height, and character spacing?), and if TOR still forbids SVG, then all PNG images. Which yes, makes my stomach cringe, too.

1 Like

Hello @ninavizz,

Sorry about not making it in the video call today, I am sick unfortunately :frowning:
I have made additional changes in the style guide, by fixing the SVG to show as PNG so we don’t have problems with Tor high security settings.

New buttons and alert types have been introduced, some small bugs were squashed and the voice and tone got some minor modifications.

Most of this is already online and more will be pushed tomorrow.

Awaiting your feedback :slight_smile:

Cheers,
Anxhelo

Sorry to hear that you are sick, Anxhelo! :frowning:
Please take care, and I’ll look over the SG tomorrow. Looking forward to it!
:slight_smile: n

@ninavizz Hi, just met Jen here in Mexico City at the Tor Meeting. I assume the main thing which is left is the Tone and Voice which you had some suggestions for right? We expected an Issue or Pull Request on our repo for this, could you go over that again please?

1 Like

Ensuring a non-dependence upon Bootstrap (or other) libraries that require JS, is probably the most important thing at this point. Second to that, is clearly available code snippets for developers to pull from for building things—as well as clear directives for setting-up page layouts. These were touched upon in our last meeting, but only at the very end. Yes, the Tone and Voice stuff, were also agreed-to items for follow-up iteration, but I suspect the code snippets and non-JS things need more discussion.

The #1 priority (for me, at least) that makes SecureDrop a unique design challenge—and that needs to be aced in forward-looking design standards, is a TOR-first approach. Kinda like how Mobile First flipped the paradigm of “Desktop first, mobile second.”

Unless I missed something, I don’t believe we agreed to request or to review PRs—or to interact with the styleguide’s repo itself (via Issues). Since both are very non-standard ways for designers to work, I’d not assume to do them with a design org, without explicit discussion and agreement ahead of time. I’m happy to do GH Issues, but I’m unclear where the value would be on investing the time for strategic or design feedback on PRs.

There’s a chance this next UX meeting might not be able to happen at the usual time—as we may have a research participant request that time slot. This upcoming Monday is a US holiday, so Jen and Erik will not be working—but I’ll be working. The week ahead is also set to be quite hectic, with user testing. I’ll chat with Erik first thing Tuesday AM, to see when might work for us to meet-up next. Are there times that could work well for Ura?

The Tor first approach has been clear from the beginning and also how we approached Reproducible Builds or I2P in the past. This and the JS part is something @anxhelo is more into however and I might miss some details.

In one of the past meetings we wanted to move forward with an updated Tone and Voice page, including passive voice and some other items. That was one of the UX meetings and might not be noted anywhere. It would be great if you could bring that up again in written so we have a reference. That’s mostly due to SecureDrop having a quite specific vision on how it wants to represent itself (and you have more experience in Tone and Voice than me most likely) :slight_smile:

Totally with ya on the Tone and Voice stuff—and yep, totally remember it being discussed in the meetings.
What do you need to continue forward with Tone&Voice stuff, from us?

Also happy to take-up the code-y things with @anxhelo. Need to connect with @redshiftzero and @eloquence to ensure we’re all aligned on goals, etc.

@elioqoshi Would it be helpful to connect on Tone/Voice things in this week’s UX call (in ~15 or so hours from writing this)? :smiley: Happy to do yea or nay.

1 Like

Re: PR to the repo, I had promised some language fixes to the T&V section in PR form – sorry, I’m behind on those, will prepare ASAP.

1 Like

Sure, I can be there! It seems @anxhelo and I took shifts as I just got the flu yesterday as well. Manageable however. Let’s just ensure we note down the things we decide on :slight_smile:

Thanks for the call today! To summarize next steps:

  • @anxhelo will decouple reusable components from Bootstrap so they can be reused independently. The style guide itself will still use bootstrap as it’s easier to maintain (works fine in Tor High Security Mode as well)

  • We will remove outdated color swatches and adapt any remaining legacy color with the new SecureDrop blue

  • The color section will be tweaked to support 8-12 columns so there is better overview

  • Logo assets will be also tweaked to 3 and 6 column view as currently the height is way too large

  • We will update the Alert components to be more consistent with current alerts used in the software, however adapted to the refreshed design language we are aspiring to.

  • Tone and Voice will be updated according to suggestions from SecureDrop ‘stakeholders’ ( @eloquence @ninavizz ) with another last review from us.

  • We also want to include an Iconography section to include Icons used in the Website and Web Interface and explain their semantics. I think this can go last.

Let me know if I forgot anything, will sync up at the next week’s call!

@eloquence @ninavizz do you have updates on the Tone and Voice?

As @anxhelo mentioned in the last call, he updated the components and displayed snippets with a graceful non-JS fallback as well. Please have a look and let us know (we updated it since the last call).

Also we would need the list of icons used so we can display that as well.

For logistical reasons, we are required to wrap up reporting of the project this month. We can do more tweaks afterwards as well if you have anything else. Let us also know where we should transfer the repo to or whether you want to clone it on your own (non-GitHub) infrastructure.

Thanks!

1 Like

Hey @elioqoshi, thanks for the updates! The toggle-able snippets are quite nice. :slight_smile:

Yes, that would be perfect!

A style guide is WIP by design I’d say but we should do something along those lines sure. We can transfer the repo to your organization once you give the green light.

Seeing that, generally FontAwesome 5 is used, right? So we should probably just include that. @anxhelo might have more details about how FontAwesome supports displaying icons without JS enabled / SVG displayed or whether SecureDrop did some custom thing to configure it this way?

OK, PR for tone and voice is ready for your review here:
https://github.com/uracreative/securedrop-styleguide/pull/1/files

That’s true; my main concern is that we want to be clear that, if someone built a PR right now applying the style guide as-is to the current web application UI, we would likely not accept it just yet. There’s still some more internal auditing we want to do on various aspects of these aspirational recommendations, so it’s important to avoid misunderstandings.

BTW, would you mind replacing the off-topic boilerplate README (it still refers to the Reproducible Builds style guide) with a summary of this project, and (importantly) Jekyll setup/build instructions?

yep I think every image except the hand holding thumbprint image here: https://docs.securedrop.org/en/release-0.10.0/_images/source-logout_flashed_message.png is from FontAwesome 5. To display these FontAwesome icons in the journalist and source applications we converted the icons we need to PNGs so that they will be displayed in Tor Browser with the security slider set to high.

Note that when you look through the SecureDrop web interfaces you’ll also see this database icon with up arrow https://docs.securedrop.org/en/release-0.10.0/_images/source-checks_for_reply.png icon, but users have flagged it as confusing (Source interface: data store icon is confusing · Issue #2508 · freedomofpress/securedrop · GitHub, the icon will probably go away in the next release) so we should not include it in the style guide.

Thanks for the input! We are working on the iconography page right now. Is there any other last tweak you’d like to see?

1 Like

As mentioned, cleanup of the README in the repo would be nice, other than that, I think we can take it from there! Thanks a lot for all your work on this, @elioqoshi and @anxhelo :slight_smile: