Looking great - one note - can we add the hexagon icons from https://securedrop.org/news/ and include those colors in the style guide?
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?
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.
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.
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.
Awesome, thank you! @saptaks!
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.
Sorry about not making it in the video call today, I am sick unfortunately
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
Sorry to hear that you are sick, Anxhelo!
Please take care, and I’ll look over the SG tomorrow. Looking forward to it!
@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?
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)
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?
@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)? Happy to do yea or nay.
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.
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
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.
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!
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.
Hey @elioqoshi, thanks for the updates! The toggle-able snippets are quite nice.
Tone & Voice: I’ve set aside some time to work on this section a bit tomorrow. Don’t expect huge changes, just want to clean up the language a bit. Per @anxhelo my understanding is that the best way to do so is to submit a PR directly against https://github.com/uracreative/securedrop-styleguide/blob/master/_includes/copywriting/voice.html .
Repo: Let’s discuss with @redshiftzero ; my suggestion would be to move it to a location like
freedomofpress/securedrop-styleguide, with a prominent note in the README that it is still very much WIP.
Iconography: How can we help you with this aspect? For the SecureDrop web app UI (which is our biggest concern for the style guide), I believe you should be able to start an inventory of your own by inspecting the templates in https://github.com/freedomofpress/securedrop/tree/develop/securedrop/journalist_templates and https://github.com/freedomofpress/securedrop/tree/develop/securedrop/source_templates .
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:
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 (https://github.com/freedomofpress/securedrop/issues/2508, 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?