freedomofpress / dangerzone

Take potentially dangerous PDFs, office documents, or images and convert them to safe PDFs
https://dangerzone.rocks/
GNU Affero General Public License v3.0
3.49k stars 164 forks source link

Improve Overall UX #117

Open ninavizz opened 3 years ago

ninavizz commented 3 years ago

Purpose I have volunteered to develop a plausible (to reasonably implement) and intuitive ux solution to guide implementation of #77, in the GUI. After taking Dangerzone for an initial spin on my Mac, a host of usability quirks emerged that could be improved upon to support both #77 and single-file use of Dangerzone.

This issue is to track and collect feedback against work towards improving Dangerzone's general usability, in a light design sprint with occasional follow-up. This work is likely to include my asking some of questions, and my submission of wireframes and interactive proof-of-concept video(s) for review.

Scope Internews is funding some of my work on the SecureDrop Worksation project, through its Usable.Tools fund. DangerZone has emerged as a relevant tool in Worksation users' workflows, and we (the SecureDrop team) would like to contribute a few of my hours from the usable.tools award, towards making DangerZone more intuitive—and extending that functionality to support bulk file sanitization.

micahflee commented 3 years ago

Thank you so much @ninavizz! This is great news. Please ask if you have any questions.

ninavizz commented 3 years ago

Questions, @micahflee:

  1. Is there a reason folks would not want to save the artifact they create from DangerZone?
  2. What is the rationale for presuming folks would want to preview artifacts immediately after processing?
  3. Is there a reason DangerZone doesn't open Docker for the user, vs providing (awesome, and lovely!) instruction that they need to?

image

ninavizz commented 3 years ago

Ok, took a first spin. No proper "Visual Design," just looking at interactivity. Happy to iterate as desired, @micahflee — and/or to do a call to discuss. You know how to get a hold of me. :)

Some Notes

  1. I'm still uncertain if the app functions without manually opening Docker in advance, or not. It's been a bit buggy for me (heh).
  2. Naming the final output with "safe" as a default, could be misleading. If manual redaction is an important workflow step, as an example, that could create difficulties (cough, in my own activism work, that's really critical)? In my PDF I used "-dz.pdf" as an alternate file addendum.
  3. Presuming a not yet processed document to be "Dangerous" felt odd, but if you're really into it happy to keep that!
  4. Other annotations in pink, in wireframe at below link.
  5. Really hoping a PDF is ok—especially considering the project. :)

PDF Wireframes: DangerZone_NA01b.pdf

ninavizz commented 3 years ago

Quickly cleaned-up version with added read-only text, and without the tabbed pane toggling. Movie quotes are just for fun, and could easily be removed. Unsure of yr thematic interests, tbh.

DangerZone_NA02a.pdf

micahflee commented 3 years ago

Thank you so much!

Is there a reason folks would not want to save the artifact they create from DangerZone?

You might just want to open a file to see what it is with no intentions of doing anything further with it. Like, if someone emails you a Word doc and you're not sure if it's spam or something real, you might want to just open a safe version of it.

What is the rationale for presuming folks would want to preview artifacts immediately after processing?

I don't know if people typically use it like this or not, but Dangerzone can sort of be used as an "open in disposable VM" in Qubes, except not in Qubes. Instead of just opening documents in Word, Preview, Acrobat, etc, you can set your default program for all of these document formats to be Dangerzone, and whenever you double-click a document it makes a safe version of it and opens that instead, preventing you from opening untrusted documents by mistake. This is especially a good use-case for email attachments.

Is there a reason DangerZone doesn't open Docker for the user, vs providing (awesome, and lovely!) instruction that they need to?

Basically this is because I can't really control what's going to happen in Docker Desktop. The first time you open Docker Desktop on Mac it pops up a thing asking you to type your password to install a helper, and then it also shows you a getting started wizard thing. But subsequent times, it just opens without requiring you to type a password.

I think the dependency on Docker Desktop is the most annoying part of Dangerzone and it would be great to just build it directly into the app. I'm working on trying to do this, but it's quite complicated so I'm not sure how feasible it will be for all platforms, but I have high hopes I can get the Mac version to work: https://github.com/firstlookmedia/dangerzone/issues/118

Also, the dependency on Docker is different on different platforms. Windows is similar to Mac, only installing Docker Desktop on Windows is a bit more cumbersome and requires rebooting, and also might not work on Windows Home, though I'm not certain. And Linux works in a totally different way.

With Linux you don't use Docker Desktop, and instead you install docker-ce from the package repository. Then once you have docker running, there are Linux-specific instructions like this:

Screen Shot 2021-06-15 at 2 31 50 PM

Hopefully some day I'll be able to remove the Docker requirement for all platforms and build it directly into Dangerzone.

I'm still uncertain if the app functions without manually opening Docker in advance, or not. It's been a bit buggy for me (heh).

Yeah, Docker needs to be running in the background for Dangerzone to work. Hmm, you can have a setting to start Docker Desktop when you login, but it looks like it's not a default:

Screen Shot 2021-06-15 at 2 36 14 PM
  • Naming the final output with "safe" as a default, could be misleading. If manual redaction is an important workflow step, as an example, that could create difficulties (cough, in my own activism work, that's really critical)? In my PDF I used "-dz.pdf" as an alternate file addendum.
  • Presuming a not yet processed document to be "Dangerous" felt odd, but if you're really into it happy to keep that!

A more accurate term than "dangerous" would be "potentially dangerous" or "untrusted". Unless you know that a document doesn't have malware (you created it yourself, or someone you trust gave it to you), then the document is "untrusted", meaning you don't know if it will to hack your computer when you open it or not.

I'm using the term "safe" to mean that you know for sure that the document won't try to hack your computer when you open it, e.g. it's safe to open. But I can see how people might think "safe" means more than just "this won't hack you when you open it", e.g. "this is safe to send to other people without compromising the source" or whatever.

I kinda like the terms "dangerous" and "safe" because it's a play on the name Dangerzone, but I'm totally not attached to it. If you can think of better terminology I'd be into using that instead.

And now looking at your wireframes

Oooh I love having it show what file formats it works with.

Screen Shot 2021-06-15 at 2 53 04 PM

Maybe after dragging documents into this first page a "Continue" button appears. If you right-click on a document and open with Dangerzone, it basically automatically adds that document and clicks Continue for you.

Screen Shot 2021-06-15 at 3 04 58 PM

If we're having people drag and drop individual files, or browse for individual files, we can make sure that unsupported files can't get selected, so I don't think we need to red unsupported style. But if we let someone select a folder, and Dangerzone recursively goes in and tries to convert all files in that folder and its subfolders, then we might need something like that.

Right now by default when you use Dangerzone and it creates the -safe.pdf file, it saves it in the same folder as the original file. So if I'm in ~/Downloads and I open sketchy.xlsx in Dangerzone, it will save as ~/Downloads/sketchy-safe.pdf, and it seems like this is what I want, rather than having it always put the trusted versions on my Desktop or somewhere else.

The settings in your wireframes will put all of the trusted PDFs in the same location, even if you dragged them from a bunch of different folders. I think in some cases this might be what the user wants, but in other cases it might not be... I don't know, what do you think?

I'd also be into simplifying things and not letting the user choose the output filename, just always saving it as the original filename with -dz.pdf on the end.

Oh and that's interesting, you're making it so you can save like different settings presets. I can totally see that being useful, but it might be overly complicated for how simple the settings are.

Screen Shot 2021-06-15 at 3 13 31 PM

I love the idea of having progress bars, but here are a few thoughts on that.

ninavizz commented 3 years ago

Hey @micahflee thanks for all the great feedback above! Some (maybe?) progress and additional follow-up questions. Also, FWIW—these are pretty ugly as they're wireframes. Can do visual design later on, but keeping it ugly makes for quicker iteration on core interaction/functionality, first.

Continue button?

Maybe after dragging documents into this first page a "Continue" button appears. If you right-click on a document and open with Dangerzone, it basically automatically adds that document and clicks Continue for you.

I'm curious to know why you would like a Continue button. That feels potentially clumsy or unnecessary to me, but I could well also not be envisioning something nifty that you are.

When I nixed the tabs in the first version, I really dug the clarity and focus of just the "Cancel" and "Convert" buttons at the top; disabled at the time of the app's launch, then enabled once the H1, read-only view of the settings, and list of files, appears. Happy to insert a "Continue" button or to factor-in other processing steps if you feel they'd be necessary.

I also envisioned the "Step 5" screen being what would open, if a user right-clicked on a file from a Finder or File Manager window (or if the Workstation auto-magically opened files into in an sd-sanitize vm, after being exported to it? Related prototype video I shared with a user last week).

InitialOpen

Incompatible Files

EDIT: I just re-read your comment on this, and saw your comment about selecting files. Yes, I'm also seeing this as a total edge-case necessity and desirable feature to eventually add, as it'd be weird as a user to select a folder with 16 items in it and only see 14 files show-up. I <3 the existing Mac pattern that grays-out unsupported files.

Docker

So... it took quite a while of Dangerzone appearing "frozen" on my Mac, for me to figure-out that I needed to launch Docker for it to work. The first time I launched Dangerzone, yes, I got the lovely messages. :) Subsequent launches gave me no indication that launching Docker was a functional dependency. Adobe automagically launches other of its own apps (Media Encoder, Bridge) with different commands in other apps—so I'd kind of expected this with DZ. Yes, you are just Micah and Adobe is a few thousand very well paid developers.

Would the below be an option (but yes, with visually discernible states as the annotation suggests but the rough wireframe does not show)?

image

I think the dependency on Docker Desktop is the most annoying part of Dangerzone and it would be great to just build it directly into the app. I'm working on trying to do this, but it's quite complicated so I'm not sure how feasible it will be for all platforms, but I have high hopes I can get the Mac version to work: #118

Yes!! Mac users expect things "to just work," and many journalists use Macs. Windoze, I'd presume folks are more accustomed to having to restart and deal with things. I couldn't get Docker to install on Debian 10, 9, or on one of the Fedoras. Not your problem, but a problem I presume, for others. I shared my logs with Conor and I think he just said "Oh dear, I'm so sorry." Right before he went on his vacation, lol.

Progress Bars

Polling is a pain. I learned that with the SD team when doing the Workstation Updater. But, the Mac Dangerzone already spits-out a long garbly log (in real time, it appears?). I don't know if the other versions of DZ do this, but I spelled-out my thoughts a bit more in some annotations.

Some expectations management is better than none—and if you're not promising literal percentages and offering something more abstract, it could be nifty? If you'd rather not or would consider it scope-creep, happy to nix! My thinking with this, is that it'd also make it easy for users to say "Aack, I got hung-up at bright orange" and that could mean something to a support person.

image

Settings

Yep, thinking ahead, based on what I've learned over the past few years from newsrooms doing tip submissions. Totally happy to scale-back, as this is a LOT of scope-creep, I realize. :)

I'll be doing more SD Workstation user research in the weeks/months ahead, and am specifically focused on sanitation and export workflows at the moment. Getting something in front of users that allows for more flexibility with, say, one journalist triaging a tip submission system for many other journalists—or multiple users doing the same, from a shared machine at their org. While the latter is potentially unlikely in our new world post-COVID, I am considering DangerZone as an included tool for the Workstation, for all SD newsrooms... so got most of these ideas, from prior user interviews and research sessions.

FancySettings

micahflee commented 3 years ago

Continue button

I'm curious to know why you would like a Continue button. That feels potentially clumsy or unnecessary to me, but I could well also not be envisioning something nifty that you are.

There definitely doesn't need to be a continue button, but how else is Dangerzone going to know when you've added all the files you want to convert? Let's say you want to add Documents/some-file.docx and Downloads/some-other-file.xlsx. If you drag the file from Documents into Dangerzone, will it just automatically move to step 5 before you've finished dragging files in?

Cool video

I also envisioned the "Step 5" screen being what would open, if a user right-clicked on a file from a Finder or File Manager window (or if the Workstation auto-magically opened files into in an sd-sanitize vm, after being exported to it? Related prototype video I shared with a user last week).

Very cool SecureDrop Workstation video!

Docker

So... it took quite a while of Dangerzone appearing "frozen" on my Mac, for me to figure-out that I needed to launch Docker for it to work. The first time I launched Dangerzone, yes, I got the lovely messages. :) Subsequent launches gave me no indication that launching Docker was a functional dependency.

They should have! You probably hit a bug in how Dangerzone tries to detect if Docker is installed and running in the background... I just quit Docker and tried running Dangerzone and I got this:

Screen Shot 2021-06-21 at 1 48 09 PM

If I start Docker, then start Dangerzone again, it works. If I quick Docker while Dangerzone is already opened and then try using Dangerzone it fails without any indication that it's because Docker is closed, but it didn't actually freeze:

Screen Shot 2021-06-21 at 1 51 31 PM

I like the idea of adding the little Docker icon in the corner to indicate the status of Docker running in the background -- at least until I can remove the Docker dependency altogether.

Adobe automagically launches other of its own apps (Media Encoder, Bridge) with different commands in other apps—so I'd kind of expected this with DZ. Yes, you are just Micah and Adobe is a few thousand very well paid developers.

Haha. Also not only am I just Micah, but Docker Desktop is a totally separate product made by other people.

I couldn't get Docker to install on Debian 10, 9, or on one of the Fedoras.

Soon there won't be a Docker requirement at all for Linux. It's going to use podman instead of Docker, which is more secure and it will just "just work": https://github.com/firstlookmedia/dangerzone/pull/120

(Also though, Debian 9 and 10 won't be supported, only Debian 11 because that's the first Debian that has podman in its repositories. And it will only support Ubuntu 21.10 and newer, though it should work in all the current Fedoras.)

Progress bars

But, the Mac Dangerzone already spits-out a long garbly log (in real time, it appears?). I don't know if the other versions of DZ do this, but I spelled-out my thoughts a bit more in some annotations.

So you have a better understand of what the different stages are, here's how Dangerzone works in all OSes, and also what the different stages of sanitizing a document are.

Dangerzone does all of its conversion magic in Linux containers, specifically in this container image https://hub.docker.com/r/flmcode/dangerzone with source code here https://github.com/firstlookmedia/dangerzone-converter/. Because it's using a Linux container, this means that what Dangerzone does on Mac, Windows, and Linux is actually exactly the same -- it downloads the same container image from Docker Hub, and then uses either docker (in Mac and Windows) or podman (in Linux) to run this container.

The stages are:

Step 1: Download the latest container image from Docker Hub

This takes a long time because it needs to basically download like ~650mb Linux OS that's going to be doing the real work. If you do this directly in the terminal at least you get some progress bars (see issue #41) but it turns out it's really hard for me too see those progress bars when I make the Dangerzone GUI run the docker command to download the latest image. I definitely want to improve this step and have a progress bar at some point.

The good news is you only need to download the container image once, then you can use it as many times as you want. It makes sense check for updates to the container image each week though, since dangerzone-converter automatically builds updated versions of the container each week, basically so you're sure you're using the latest and most secure versions of all of the tools it relies on like LibreOffice, Poppler, etc.

Step 2: Convert the input document to a safe output PDF

This step needs to run for each file. And this step is split into sub-steps below. I'll estimate roughly what percentage of time each sub-step should take.

Step 2.1: Convert the input document to pixels

This step takes about half the total time, distributed like this:

Step 2.2: Convert the pixels to an output PDF and compress it

This step takes the other half the total time, distributed like this:

Right now it does indeed spit out real-time output telling you the progress (like, "Converting page 5 to pixels" or whatever). Making a progress bar will just require doing this in a way that's machine-readable and not human-readable, so Dangerzone can parse the output from the container and turn that into progress bars.

Settings

Yep, thinking ahead, based on what I've learned over the past few years from newsrooms doing tip submissions. Totally happy to scale-back, as this is a LOT of scope-creep, I realize. :)

Maybe let's scale back the settings for this first iteration of UX and save it for a later iteration. I do really like the idea, but it would be nice to work on smaller chunks at a time.

ninavizz commented 3 years ago

@micahflee Moar moar...

Docker

¡¡WOO!! wrt removing dependency in Linux! For Mac/Windows, however, are the 4 states for an icon that I proposed above, feasible from a technical perspective? The icon would only "matter," if it could signify to a user that they do or do not need to do something.

Settings

Absolutely! That's usually how things "get done" with UX ideation ("See how it can be done with super scope creep! Cool, let's then pull scope but move the design in that general direction, so we can support those things as time goes on") will totes scale-back for a next-round iteration. :)

Drag-n-drop

This is a video I recorded of how drag-n-drop works in my GDrive. The pattern, is:

  1. When "nothing" is in a directory, the pictoral "empty" state screen shows, instructing users how to add things
  2. When a file is dragged atop that UI, the screen shows a state indicating that the user may "drop" the thing they've dragged onto the UI, to have it uploaded into the directory
  3. When the first file is dropped into the directory, the "snackbar" message in the bottom-right appears, showing the upload progress—with the pictoral "empty" state screen remaining in the background.
  4. Upon the upload's completion, the pictoral "empty" state screen disappears, and the item shows as listed.
  5. After an initial item is listed and the instructions to let users know they may drag-n-drop is gone, users may still do that same behavior.

I also recorded a video of Facebag's drag-and-drop. It has a slightly different pattern.

  1. Empty-state screen with instructions is shown
  2. When a file is dragged atop that UI, the screen shows a "Drop" state
  3. An (unclear) "uploading" state where a ghost of the image shows, and it indicates that it is uploading
  4. A "uploadED" state, where icons to act upon an uploaded image are shown
  5. After the first image is uploaded, the instructions remain.
  6. Repeat steps 2-4, and step 5 goes away

Google and Facebag both test and iterate on their interaction patterns, extensively, with an amazing UX design and research group—so I trust theirs to work well. While, yes, taking everything with a grain of salt for both, that both organizations love predatory dark-patterns to "drive engagement" (gag), and that Facebag has some issues with politics and individuals with egos sometimes overriding ux recommendations.

I don't know what your frontend development capabilities are, nor how much "work" you want to invest into making the entry experience to DZ fabulous. I also recorded a video of Dropbox's D&D, for reference. All of the videos are here.

While Dangerzone does no "uploading," it does do queuing—which is where I'm seeing the parallels. For Dangerzone, I'd envisioned a skeleton pattern between the moment when a user "Drops" their file(s) (or when the screen opens from a right-click invocation of DZ from a file manager), and when the file is shown in the queue.

If any/all of the above are things you're comfortable developing/coding, let me know. If not, let's chat where to cut corners.

For continued user research of the SecureDrop Workstation and exploratory work in support of an sd-sanitize VM, I'd like to make a video demonstrating multi-file GUI stuff in Dangerzone on Qubes, similar to the video I shared, earlier. But, I don't want to stuff into that prototype, that you wouldn't desire nor be able to scope into development.

Progress Bars

Sooo... are progress bars something you'd like to do for an initial implementation of multi-file processing, or hold off on? If the prior, what are next-steps you'd like to work through for design?

Visual Design

I'd also like to polish the visual design of DZ just a touch. I really love the firey/SRL aesthetic you seem to be leaning towards with the branding and website, and keeping things clean and usable within that was what I've been thinking.

General

I can also back off on all this work, if it's too much for you to manage right now—or, set time aside when you have more availability, to do a more collaborative design sprint. All of this is funded work for me, and of interest to do in support of the SecureDrop Workstation project.

ninavizz commented 2 years ago

Sketch file from this work, added to SecureDrop's Figma so that future design hire can also contribute to this fine project (I of course will, too!)! :)

https://www.figma.com/files/project/50956073/Dangerzone!?fuid=726510982281435744

deeplow commented 1 year ago

For the next release in particular, one of the goals (if we manage to make it stable enough) is to implement a simplified version of Nina's plan (detailed above):

deeplow commented 1 year ago

When adding the multi-document support I have decided to add something that wasn't on the design spec: an "are you sure you want to exit" prompt:

prompt-user