Create interactive UI prototypes

[eloquence]

We should create a series of interactive UI prototypes that allow us to get rapid feedback on the first iteration of the workstation client.

A minimal prototype will only showcase the functionality described here. We must complete such a prototype as part of the development process for the 0.1alpha release.

A more advanced version can also demonstrate some of the ideas collected on our user stories page, which are informed by user research. Most importantly, it would showcase a client that completely eliminates the reliance on an OS-level file manager to manage submissions.

There are a number of different approaches we could take:

• prototyping on paper (can be made fairly interactive, but difficult to collaborate in distributed team)
• working directly with Qt (least accessible for non-designers)
• working with HTML/JS (easy to make interactive, and reasonably accessible)
• working with an open prototyping tool like Pencil
• working with a proprietary prototyping tool

Pinging @ei8fdb as he and other members of the UX team may be interested and available to get involved in this process. My bias would be towards a clickable wireframe for now, i.e. low fidelity but interactive.

[eloquence]

For the minimal workflow (must-have features for 0.1alpha), here's a first stab at the "source collection" workflow in a clickable wireframe format (made with Pencil, source file here).

https://eloquence.github.io/workstation/

Note that not all buttons are clickable (and I didn't showcase login errors etc.). Try the Select All -> Download or Select All -> Delete workflow.

Feedback welcome, e.g.:

• stuff that's confusing
• stuff that's impossible in Qt
• stuff that's impossible in Qubes OS (or that we could make more user-friendly)
• stuff that's missing at this level of the UI

I'll take a crack at the "Show Details" views next, which is for looking at an individual source collection and replying to messages.

[eloquence]

Updated prototype:

https://eloquence.github.io/workstation/#login_page

I've added a "Show Details" view for a single source ('benign artichoke'). I've also switched to a more desktop-like template for the prototype. You should now be able to click through the whole flow of downloading source collections or replying. Of course this doesn't retain state - it's just dumb clickable wireframes.

I've not added download/delete actions for individual documents or messages by a source, which seem sufficiently similar to the "source collection" view".

Overall, this minimal version is deliberately a very close approximation of the web interface. My reasoning is that since we're likely still tied to the file manager for viewing submissions/messages in the first release, we should stay close to that mental model initially. In later versions, we can experiment with a more intuitive flow.

[eloquence]

Added a "Flag for reply" flow to simulate the behavior under a DDoS attack, and added "Last updated" timestamp to the source view.

[eloquence]

Made a few more tweaks:

• Made the window size consistent when navigating from source to detail view to make it clearer we're not opening new windows.
• Distinguished between "Flag for reply" and "Flagged" state (should not be possible to click the button repeatedly).
• Added an example of filtering by codename (you can't actually type, but if you click the "filter" field now it'll show you what it might look like).

[ghost]

Do you have a usability test scenario to leverage this prototype? I'm very green on that, what I mean by usability test scenario is a sequence of tasks that someone would ask a person to perform using your prototype. Maybe not exactly the right terminology but hopefully you get my meaning :-)

[eloquence]

We've not developed a research plan yet, and help doing so would be very much appreciated! What I'm thinking would make the most sense:

• Identify at least 2-3 current SecureDrop users. (Our assumption is that the minimal prototype, being modeled after the current web UI, should at least be understandable to current users of SecureDrop. It deliberately does not introduce any major conceptual shift.)

• Perform an in-person or screen-sharing session using the live prototype. Ask them how they would perform a set of simple tasks (e.g., download an unread submission, reply to a submitter).

• For any areas not discovered as part of that process, ask follow-up questions, e.g., "What do you think would happen if you did X?"

• Wrap up with overall feedback. (Areas of improvement. Areas that seemed intuitive.)

Does that make sense? Hope we get a chance to dig into this further with the whole UX team, as well. :)

[eloquence]

Here's a first stab at what the top-level layout could look like for a more integrated client that combines a view of locally downloaded files and what's available on the server.

https://eloquence.github.io/workstation-advanced/

It only shows the two top-level tabs plus the login flow for now. This prototype hints at two advanced features, tagging (only on the user's workstation) and assignments. Note that features that require a connection to the server are rendered disabled until you go through the login flow.

As always, I would appreciate early feedback before we go further down this particular road. Does the "tabbed" view make sense? Is it understandable how files would be downloaded/updated? Does it need a friendly animated box-shaped assistant? :)

The fact that the user has to keep switching tabs to find out the status of their source on client vs. server is an obvious drawback of the approach in this prototype. I considered a two panel view (which would have the added benefit that we could call it SecureDrop Commander :). I'm however worried about the additional complexity (lots of additional information on one screen).

The "sync" paradigm from cloud-based file management solutions doesn't really make sense given that we may wish server and client to deliberately fall out of sync as submissions are deleted from the server as a matter of good security practice. So I've avoided using terms like "sync".

Next up feature-wise is showing the detail view, messaging flow, as well as read/unread status.

[eloquence]

For the next sprint, we'll explore building an interactive wireframe that's closer to the conceptual model in #89 but that showcases more features. This splits into roughly three tasks:

• Basic "conversational" workflow as described in Design of securedrop-client UI #89, including reply/starring/deletion/search, but not including conversations with other journalists.

• Additional UI layer (perhaps a panel) for managing all the files associated with a source and handling file-related interactions (e.g., export to USB drive)

• Experiments with some alternative UI ideas for presenting the list of sources, for handling assignment-related features, tagging, etc.

The top priority is to build out a messaging-style workflow, so we can user-test it and use it as a starting point for an architectural conversation.

[eloquence]

I've started on a base template for the new messaging-like prototype, here:
https://eloquence.github.io/workstation-messaging/

(It doesn't show anything yet, except that clicking the sync icon would initiate a sync.)

This is very much following the conceptual model in #89. Will next build out some of the menu actions.

[eloquence]

https://eloquence.github.io/workstation-messaging/ updated.

Revised:

• simplified layout, added scrollbars

Added:

• a clickable menu
• "keep in archive" toggle
• "Delete" action that triggers a popup which varies based on whether or not "keep in archive" is set.

There's nothing past the dialogs yet. But wanted to show one possible way to go about the "archive"/"cold storage" issue discussed in #89.

[eloquence]

https://eloquence.github.io/workstation-messaging/ updated again.

Revised:

• Changed archive behavior. "Mark as archive" in menu to mirror language in prompts. Omit archive indicator in the sidebar until a source has been deleted.

New:

• "Delete" now shows a progress bar and different results depending on whether or not the source was marked for archival.
• Try clicking the "Download" button for the first file that is shown. The inline progress indicator suggests that the user would be able to initialize multiple download actions.

Next up are other actions for the file menu, as well as an example "View" action.

[eloquence]

Today's updates to https://eloquence.github.io/workstation-messaging/ :

Revised:

• Chose a more appropriate menu widget for all menus
• Increased click surface for sync action

Added:

• Added an example "open in disposable VM" flow once a file has been downloaded
• Added per-file menu actions

Next up:

• Indicate who's communicating with whom in multi-user conversations
• Show what a couple of per-file workflows could look like
• Switching between sources
• Online/offline mode

[eloquence]

Today's updates to https://eloquence.github.io/workstation-messaging/ :

Revised:

• Small bugfixes to click surfaces

New

• You can now "log out" by clicking on the tiny logout icon (I've skipped the actual username/password/token flow for now); actions will be disabled/grayed out. We still show the stars (grayed out) but the assumption is that you can no longer star/unstar. Similarly, the only action we assume you can take per-source in offline mode is "mark for archival".

We should talk more about what deletion actions we want to support, e.g.

• Deletion of individual documents from the workstation. I assume there's no harm in supporting a "delete from disk" action for downloaded files, which would still retain file metadata but restore it to the "undownloaded" state. The same would presumably happen if there's a record for the file in the client DB but the file cannot be found on disk.

• Deletion of entire sources from the workstation but not from the server. This one is trickier, as the source would just get downloaded again on the next sync. It might be more useful to think about "emergency wipe" features for the workstation.

[eloquence]

Today's updates to https://eloquence.github.io/workstation-messaging/ :

• You can now switch between the sources "benign artichoke" and "last unicorn", just to make it clear what that switch interaction could be like.

• Journalists now have avatar icons, to make it more apparent that this is a multi-user conversation (we may still want to add an example of a conversation with 3 users).

• Small layout fixes.

[eloquence]

Updates to https://eloquence.github.io/workstation-messaging/ :

• You can now click the "Filter by codename" box to get an idea for that interaction.

• All of the initially shown sources are now clickable, to flavor a few different types of interactions, including one with two journalists.

Again for emphasis, since these are just dumb screenshots with click maps, don't expect too much from the "interactive" part, but this should be helpful for guided feedback sessions. Will proceed to schedule a couple of these now.

[eloquence]

May make further tweaks based on feedback and leaving the task open, but not tracking this work on the sprint. The next step is #117 - gathering some initial user feedback.

[eloquence]

Closing this issue; we can track individual improvements to the existing prototype (or creation of new prototypes) through new issues.