Recommended 0.4 SOURCE UI Fixes #1536
Comments
|
Awesome write-up! SD is going to look way more bomb after we make these changes! Regarding 8h and 9h, can you get back to me on #1477 (comment)? |
|
Hooray—progress on the process front @justintroutman! :) Looking bomb is the shizzle... users more confidently using SecureDrop and with greater success, is the net win. Grateful the devs I worked with 12 years ago, trained me to compose run-downs like the above, for their Bugzilla (ugh) tracking! :) |
|
Hey guys. I'm going to take a crack at a bunch of this stuff now that #1349 is merged. I'll try to keep it to a single change per item so you can cherry-pick what you like vs. what you don't. @ninavizz, you have one of my email addresses before, so if you have any wire frames or whatnot, send it my way plz. :D Edit: And by "whatnot," I mean the SVG or icons like the lamp, the hand, etc. |
|
Making notes to keep me (and maybe someone else organized): 9f. is covered by PR #1534 |
|
If any of y'all are working in parallel, this branch has my changes. Thus far, items 1 and 4 are done. https://github.com/heartsucker/securedrop/tree/ui-fixes |
|
item 5 also fixed. |
|
As a note, the CSS for the index page on the journalist interface is pretty horribly borked. I'll probably have that fixed tomorrow.
|
|
Ok, I lied: ARTWORK IS HERE! Funny how the enthusiasm of others implementing things I cannot, inspires me to do more... 💃 Blue desk lampActive: Light flowing from blue desk lampActive: Light = Upload To DriveColor: |
|
This list looks like a really nice place to get started on contributing to the SD project. If that's the case, what's the best way to note a set of changes I'm working on so that I don't step on anyone's toes? |
|
Probably the most helpful way you could do it is:
... A UI/UX Github Project might be a great way to organize work on this since a lot of people seem interested. I originally suggested making this a checklist, but copying the columns from our other projects would let us track progress even more granularly (TODO, In Progress, In Review, Completed, Blocked). Think you could help out with creating that and creating "sub"-issues of this one for each task @justintroutman? "UI/UX", "source interface", and "help wanted!" labels seem appropriate. |
|
@ninavizz CSS fixed, but I think the color around the star is wrong. Suggestions?
|
|
@heartsucker That confuses me... :/ Is the thing next to the checkbox, supposed to be an indication that this item is starred, with the things above it all being controls for items on the full page? So, an analogous product that handles this kind of interaction really well imho, is GMail. Look at it, if you have it. They're a good product to reference for basic best-practices in managing list controls. GitHub probably, too. Per how GMail does it, the star should be to the RIGHT of the checkbox (assuming it's an indication that that item is starred, and that the star is selected?). It should also be a solid color w/o a background (if selected—if not selected, a grey outline of a white star), and not the same color as the buttons. There is not currently a secondary color in the SD interface, so let's just call it yellow, since that's the norm... but then that background grey behind the line-item is too dark, behind the star, so lighten it to Lots of fussy issues with the clustering of other buttons and actions, on an aside. If you send me a screenshot of the full page, I can whip-out a mockup of a recommendation, this afternoon. Just got up and my fella wants to take me out to breakfast (and I'm not gonna say no to that!). Thks for the ask for feedback. This is all I do, so it's suuuuuper easy for me to look at these sorts of things and blab-out a list of best practice reccos. :) nina |
|
@fowlslegs @justintroutman I've been thinking about how to do this, a lot, over the past week. I wanna create a set of global standards to publish in a playbook, that volunteer designers and all FOSS projects can follow, longer-term. I don't think a separate GitHub project is necessary—it seems like extra overhead. Let's maybe put our heads together sometime next week to tackle this? Tentatively, my macro-thought is that issues/items flagging a UX concern need to be distinguished from ones that are implementing a determined UI solution. Currently everyone seems to use the #UX tag for the two combined, so a different one for flagged UX issues seems to be the way to do it. Keep the #UX tag for folks executing/doing frontend work, and create a new flag to get the attention of a designer. @marcua Welcome!! :) For now, maybe just add a comment, here, saying what you're working on and when you expect it to be done... then update that comment as that ETA nears or you complete it? Thank you!!! |
|
@heartsucker Just updated the PDF here, with tweeked interaction recco for that lamp-lit passphrase widget. Thanks for wanting to take that on! Artwork, is in a comment above. w00t! |
|
@ninavizz Yes, the star means it's been marked as "noteworthy." The current UI is below.
The checkbox is for selecting items for use by the buttons above (e.g., delete).
A dotted 1px line above what? I'd need to see a mock up I think. |
|
@heartsucker See #1540 for notes on the Journalist flow screens. Mockups w/ notes, included. |
|
9b, 9d, 9e, 9f, 9i, 10a, and 10b are in PR #1534 |
|
See the all-new, shiney #1552 UI STANDARDS, for more global, less-granular guidance on building-out UI for other screens. |
|
If #1538 gets merged, the remaining tasks will be: 2, 7, 8b, 8c, 9c, and 9j. |
ghost
added
|
Superseded by improvements proposed here: |
Creating this as a new issue, and breaking-up different parts that can be more clearly referenced by @fowlslegs and @redshiftzero in their subsequent #helpwanted PR UX directives. :)
———————————
UX Implementation Recommendation: Should PRs be created with an interest in any of the below UX reccos implemented, cut-and-paste the listed items as sought, below, and include the PDF (or PNGs of the PDF), in the PR (sorry, I know devs hate PDFs!). I’m thinking that’d be the easiest way to make sure everything gets pushed thru smoothly? I’ll make art as it’s sought for implementation, just ‘cc me on those PRs. Will usually be able to do those SVGs w/in a few hours, s'long as it's not the middle of the night. :)
Please reference the wireframes here, for change implementations. FILE UPDATED Sunday afternoon... Danke Shoen!
SD_SourceOhDotFour-02b.pdf
All Screens
Left-Align each of the headers and change their color to
#7985AA. Note: center-aligned content is spoken to in additional points. It should all get left-aligned, the center-align stuff is getting outta control—tho I presume made sense with fewer page items.If a user is using a passphrase for the first time, number the H1s on the New Passphrase and Submit Stuff screens 1-2-3 so that users are more clearly lead through a path and know to return later, for getting replies (see page 3 of the above PDF).
Add a secondary-action button to all screens, to the left of the “Submit” button. Please style as shown—white fill w/
#7985AAstroke. The primary action button needs to be “Submit” with “Cancel” a clear secondary action (unless a different secondary action is specified) on all screens.DONE! Thx @heartsucker
Change all button text to be all-caps, regular weight (not bold), with generous character-spacing (as shown).DONE! Thx @heartsucker
Kill all button iconsChange “Log Out” to “Exit”
Pick one: either implement the weeble lockup for the exit button or the codename/lamp widget & exit button lockup.
“Get Codename” screen particulars:
8a. Left-Align the header and change its color to
#7985AA8b. Change header text to “1. Welcome!”
8c. Add instructional text below “1. Welcome!” header: This codename is what you will use in future visits, to receive messages from our journalists in response to what you submit on the next screen.
8d. Kill the lock on the grey line. It’s more confusing than beneficial.
8e. Change codename font to bold Courier, with 2px character-spacing.
8f. Add supportive text below the codename bar: Because we use none of the traditional means to track users of our SecureDrop service, using this codename with future visits is the only way we have to communicate with you, should we have questions or are interested in additional documents. Unlike passwords, there is no way to retrieve a lost codename.
8g. Add yellow tip highlight block: Please either write this codename down and keep it in a safe place, or memorize it.
8h. Kill all button icons
“Submit Materials // Get Replies” screen particulars
9a. Left-Align the headers and change their color to
#7985AA9b. Change headers text to “Submit Materials” and “Get Replies”
9c. If it’s the first time a passphrase is being used, number each “2. Submit Materials” and “3. Get Replies” as wireframe shows
9d. Add supportive-text below the header: If you are already familiar with GPG, you can optionally encrypt your files and messages with our public key before submission. Files are encrypted as they are received by SecureDrop. Why?
Note: the place for “FYI with this step” text on a screen, is always just below the H1 that buckets the functionality. Also, I removed some of the existing text. Just stop at the end of the last sentence, and have “Why?” As the link-out to support docs that will answer all addtl questions.
9e. I recommend a different icon than the cloud (it’s soooo confusing right now, that cloud links are discouraged in support documentation, yet there’s a graphic of a cloud on that screen. Also confusing for users thinking they’re safe because there’s no cloud services involved). Either a laptop with an upload-arrow, or the shown stack of discs. Should a PR request be created to change this icon as a part of it, please ‘cc me, indicate this is an included ask, and I’ll create the SVG art.
9f. PR #1534 —> Add the “Cancel” button next to the “Submit” button.
9g. Change all button text to be all-caps, regular weight (not bold), with generous character-spacing (as shown).
9h. Kill all button icons
9i. Change “Log Out” to “Exit”
9j. Pick one: either implement the weeble lockup for the exit button or the codename/lamp widget & exit button lockup. Artwork, below.
“Login” screen particulars:
10a. Left-align header, change color to
#7985AA, and update text to read “Enter Codename”10b. Add a “Cancel” button next to the “Continue” button, and styled as a secondary button as shown.
The text was updated successfully, but these errors were encountered: