-
Notifications
You must be signed in to change notification settings - Fork 39
Glossary
This is a glossary of terms developed by the SecureDrop team.
The login dialog is a QDialog modal dialog that allows the user to either log into the client or view it in offline mode. For more info, see https://doc.qt.io/qt-5/qdialog.html#details.
Offline mode is a way for users to run the client without signing in. The user can view and interact with the client, but certain functionality that would require a network and/or authentication is disabled.
Issues in the securedrop-client repository labeled ux need to adhere to the UX Styleguide. The styleguide is broken-up into sections for Styling and Behavior.
Styling: What things look like. Most of this is provided in a combination of Zeplin Screens that you interact with in order to see CSS values for things like colors, fonts, padding, etc. Zeplin also provides pixel dimensions for size, spacing, etc. Pixel perfection, it's how we roll (types the designer)!
Behavior: What should this thing do when you click that? How long should the message show for, before it disappears? Details like that are shared in the Styleguide towards the bottom, in the Behaviors section. Invision prototypes are shared with bulleted notes and instructions for each.
A tool used to provide design mockups and specs, with CSS code that we use as specifications for securedrop-client work tagged with the ux label. These specifications are stored in what Zeplin calls Screens.
A cloud service used by designers, to easily make clickable prototypes from Sketch wireframes. Screens in an Invision prototype are made from static PNG images, with clickable "hotspots" the designer inserts. If you click inside any screen area on an Invision prototype, the hotspots will flash blue.
Reference this page for areas of the UI mapped-out by name.
Authentication Widget: The fully clickable & combined elements of an ID Badge, the user's name, and a downward arrow. In its "Opened" state it will offer users the opportunity to Sign Out. In future releases it will extend to include the user's account profile information. See area on this page
Files Pane: See area on this page
ID Badge: A colored square with the first two letters of a user's username in white text, on top of it. Post-Beta it is hoped these will be comprised by the user's first and last name initials.
Left Pane: See area on this page
Conversation Pane: The pane to the right where Source messages and files will show-up for Journalists. Also where Journalist responses are shown in the mine/yours messaging paradigm. Multiple journalists may correspond with a single source. Each journalist will be represented with a unique ID badge.
Messaging Bar: Nested inside the Top Bar. Displays compact/brief Error and Success messages.
Messaging: Communication from the system to the Client's user.
Conversation Bubble: If you are a Source, your message displays to the Journalist in in a Conversation Bubble aligned to the left side of the conversation pane. If you are a Journalist, your message and an ID badge with the first 2 letters of your username, display aligned to the right side of the Conversation Pane and in a unique color.
Refresh Button: See area on this page
Timestamp/Status: See area on this page
Reply Pane: See area on this page
Source List: See area on this page
Selected Source Header: See area on this page
Offline Icon: See area on this page
Top Pane: Really a "bar" but we're currently calling it this. See area on this page
Login Open: See area on this page
Login Greeting: The same screen as the Open screen, but after authentication and while messages are downloading/decrypting in the background. Now that the Client knows who the user is it replaces the input fields with a chipper greeting. It will display for a minimum of 5 seconds, to avoid the "ohai/bai!" driveby-flash effect. See area on this page
Visual Design: The design discipline of how to make page layouts elegant, information hierarchies clear, and everything look a certain way. Affordances, legibility, and cognitive cues matter, and all play a big role in usability.
Interaction Design: The design discipline of how to navigate users through a clickable experience.
Content Inventory: An issue page in the UX repo, with a table that has all SVG gradients and artwork.
Things out of scope for Beta, but in backlog items and some wireframes
Briefcase: The basic concept of a shopping cart interaction, but without the twinge of capitalism. The Briefcase (akin to a Cart) is a collapsible pane in that sits along the right side of the Conversation Pane, and functions as a staging-area of files to batch-export.
Error Queue: A persistent status indication at far-right of the Top Pane, to let users know if/how-many logjammed/pending errors there might be. Currently shown in some mockups as a pink hexagon with an exclamation point in the middle, and a numeral to the side.
Activity Pane: A pane that can display in an elegant, relevant, and usable fashion, all Client activity to any user. Button would be the backwards-refresh type arrow thingy, but as a hexagon and with clock hands in the middle.
Trash/Destroy Flow: Someday there might be a "Trash" step to triage deletion. TBD.