"Briefcase" flow (aka Export): First Take

[ninavizz]

Problem

In order to export or share a file, users will need to save it to a disp-VM (from the Client, w/in the Workstation VM) in a "triage" step—and from there, access it within Qubes File Manager. This flow was created in part as a security measure to allow USBs to only access a network-unavailable disp-VM, but to also workaround the horsey "Attach Device" flow.

Design ticket for SD-Client 21

Considerations

• An interaction model similar to shopping cart flows w/in e.commerce sites, has been envisioned.
• Because users are likely to want to save more than one file per session, this is also likely to provide users with the smoothest possible experience.
• Nautilus (GNOME) file manager is what's integrated with Qubes and will be opened in disp-VM
  • Erik video created to walk-through his Nautilus on his Qubes machine

Acceptance Criteria

• Clickable wireframe demonstrating intended functionality
• Visual design particulars resolved and shared in mockups
• This functionality added to Needs User Testing punchlist

---

This is a sub-task within #31 and #18

[ninavizz]

First Review

• UX Meeting: 07 Feb
• GDrive directory of mockups for review

Notes

• Jen: Is this intuitive enough?
  • Is the language "Add" intuitive enough? Should it be "Export?"
  • "Prepare for Export" or "Stage for Export"?
• Erik: "What's the 'folio' and 'portfolio' all about?" <—difficulty with that use of language
• Harris: Personally likes and got the 'folio' reference, but agrees with potential to not be the most intuitive use of language
• Cart
  • Erik: Clarifies technical intentions of flow, and that immediately sending each unique file to a Disp-VM in real-time with the user actions, is a bad idea for various reasons. Team agreement that the "Cart" w/in the Client will serve as a staging area, and will get sent to the Disp-VM in a single "Checkout" action.
  • No feedback on preference for overlay vs 3rd column treatment
  • Button language w/in cart should be updated to reflect actual functionality; maybe use of the word "Export" makes sense, here?
• Language
• Iconography
  • Erik: "I like the secret agent metaphor with the briefcase"
  • Erik: Treatment of briefcase feels too fussy... is that break between the top and the bottom really necessary?
• Decisions
  • Icon to be simplified/updated; but briefcase paradigm to be kept.
  • If word(s) are used to describe the Cart, call it a Briefcase
  • Extend flow to include the disposable VM's population, including how to show the user in-progress transfers (and how to manage their expectations).

[ninavizz]

Second Pass

Invision Clickable Wireframe

Interactivity Notes

• See interactive wireframe
  • Mind the pink arrows at the top
    • They're live (oooh!) and set to navigate step-by-step through the scenario
    • They can easily get lost behind horizontal scrolling if not using a big monitor
  • The "Briefcase" button at the top of the Client window, and the "Close" button in it, are live on all the screens.
  • The "Export Files" and "Cancel Export" on the two screens where that chasm is crossed, are also live; namely to evaluate the button state changes there.
  • Benign Artichoke is live at the beginning, and Cuddly Antelope is live towards the end of the flow

General Experience Notes

• Briefcase button in the window's upper-right has 3 states: "Populated/Closed," "Populated/Open," and "Empty"
• Briefcase remains populated across user sessions, until a user clicks "Export"
  • Peter Parker is currently signed-in. Lois Lane was the last user of the Workstation, prior to Peter, and put one file in the Briefcase that she did not Export. When Peter Parker signed-in, that file was still in the Briefcase and the Client opened with the Briefcase Button reflecting that populated state.
• Briefcase pane animates-open as a drawer, from right-to-left; no fade, just pop
• Click Path & Scenario(ish) for Prototype (rough)
  • User clicks "(Briefcase) Add" next to a file
    • Number on Briefcase button at in the upper-right of the Client window increases
    • Little green bar above Files pane pops-up
    • Text populates w/in that bar stating "1 File added..."
      • Option to Remove by clicking on "Remove" text
    • Briefcase icon and the word "Add" grey-out as disabled
      • I'm still on the fence if this is right. I'd tried putting the word "Remove" there, and that looked odd, too.
    • User clicks "(Briefcase) Add" next to a second file for the same Source
      • Text in the green bar above Files pane that says "1 File added..." changes to "2 Files added..."
  • Click "Export Files"
    • Option to cancel
  • Upon completion, click "Cuddly Antelope" and add file from there
    • See confirmation note there from file just exported in session
    • Contextual confirmations to only show for current session

Briefcase Pane

• Opens when the user clicks the "4 files" button
• Closes when the user clicks "Close" at the top
• Animates in and out horizontally, from the right edge of the Client window
• Briefcase Window's Content
  • Briefcase window doubles as an activity log of who did what when, as it pertains to exporting files.
  • Yesterday Lois Lane placed 3 files in the cart, but only exported 2 of them
  • When the current user clicks "Export" the Splendid Bear file that Lois Lane had previously put in the cart, will also be exported.
  • On February 10th Sergei Fedorov exported one file from Scabby Carnation
  • A set number of entries should be available in this scrolling window, and all things beyond that should be made available in a crude .csv (or some other static) form from a "Download Briefcase History" link at the very end of the scroll-able plane.
  • If the current user (Peter Parker) were to delete the file LightsCameras.mov that Lois Lane put into the Briefcase but then never exported, that cross-user activity on a file that was never exported would not be retained/shown in the Briefcase history log (or in the pane).
  • All this, largely based on how the desktop version of iTunes manages "Downloads"
  • How's that for scope creep? ;)
    • Rationale: in user research it was observed newsrooms like to keep activity logs. We did not dive too deep into why and what value those logs provided, but at a cursory level we're assuming it was to track basic things the web experience does not surface today. This probably reaches far beyond that cursory value, but I also observed in the testing that newsrooms like to keep a 'tight ship' record of historic activity tracking with sources, in general... so if all of this is not hard to do (or to make visually accessible to users) I think it could add value. At a minimum, I'd like to be able to present wires/mockups and ask journalists if they'd find value in this.

Open Considerations

• Should the Briefcase Pane visibly descend to the bottom of the client window & atop the Compose Reply box, or remain tucked behind it?
• State color/things w/ the Briefcase button?
• Briefcase VM Questions
  • Is it possible to have the Export disp-VM that is created for the files to copy-into, be created with a specific name (My Files) vs the auto-generated Qubes numeric-name (that is just not memorable for our users, tbh)?
    • "Reading Room," "My Files," "Session Files," and "Briefcase" have all been kicked around as possible names. Should the name hard-reference the ephemeral nature of the locale? What might thematically work with the secret-agent theme happening with a Briefcase as an implied vehicle of transport? "Mrs Peel's Coffee Table"?
  • Is it possible for a user to click on "Open File Manager" in the later screens, and have that take the user into the [disp-VM] Briefcase—and then open File Manager in that Disp-VM (basically, the implied interaction—so the user doesn't have to poke around to figure-out how to open File Manager)?
• What should "Briefcase" be: the new disposable VM, or the staging 'cart' within the Client?
  • Does it make more sense to message to the user "Added to Briefcase" and "Exported from Briefcase to [disp-VM] 432348," or "Added to Export Staging" and then "Exported to [disp-VM] Briefcase"?

[ninavizz]

Second Review

From 26 Feb 2019's UX Meeting

• Allie:

  • Briefcase sharing (between users) may be weird?

• Jen:

  • This looks great
  • Feels it will require training
  • DispVMs cannot be named
  • "Add" is not obvious on first inspection
  • Briefcase icon is nicer
  • May not be totally obvious that this is how to get files off Workstation

• Harris:

  • TMI; too many things happening?
  • Curious for user feedback
  • Not clear what greyed-out italicization signifies in the items that are greyed-out/italicized

• Erik:

  • Agrees with usefulness of historic, though frames as "Audit Log"
  • Feels historic/audit-log a good thing, but misplaced in Briefcase
    • afterthought-y or stuffing it somewhere w/o clear purpose?
    • "Is this a different workflow?"
  • Expresses dubious feeling wrt 2 different per-file state indicators (disabled "Add" and checkmark)
    • Wants to test
  • More or fewer visual cues to help?
  • Concerned too many metaphors are being used
  • Decoupling Briefcase from session could be an option

• Jen:

  • Agrees concept of historic could be useful
  • "Exported By" is also an option to add into "Seen By" things
  • Feels expectation would be that Briefcase is per-session
  • Cites threat concerns w/ security sensitive documents
    • What if Alice puts into the Briefcase an especially sensitive doc, then logs out, and it unintentionally ends-up on Archie's USB when he does his export in the next session?
    • Harris: Log-out warning for items in Briefcase?

---

Action Items & Decisions:

• Cart to be per-session amnesiac
  • Per-user, per-device
  • Flash yoohoo dialog to users if exiting a session is sought with items in the Briefcase
• De-couple historic from Briefcase
• Explore files-stack more deeply
  • Hover state options
  • "Seen By" and "Exported By" exposure?
  • Parade of visual indicators... are they all clear or easily evident to users, or TMI?

[ninavizz]

Third Pass

• Invision Prototype

[sssoleileraaa]

I'm having trouble finding the screen that shows the "qubes is opening a new disposable VM" message:
https://projects.invisionapp.com/share/E7QW28V9HCU#/screens/ <??? what goes here ???>

Update: Just found it!

[sssoleileraaa]

Workflow feedback:

• As a journalist, when I click Export, I would expect to only export items that I added to the briefcase. If I'm Benign Artichoke I would be surprised to see files from Cuddly Antelope's session:
  
• I think we could separate Export info from the Qubes VM info. I would personally rather see a message popup in the upper-right-hand corner that says "Qubes is opening a new disposable VM..." before the side Export window comes into view, otherwise the window will sit there for awhile with the download bars not moving. My thinking is that it'll feel a little more responsive and zappy if we wait to show info once there is some kind of change/event. Also, the qubes message could also go in the activity view once that's a thing, in case the popup is missed.

[ninavizz]

Hey hey!

So...

1. Cuddly Antelope and Benign Artichoke are both Sources. As a user, you're Peter Parker (via auth widget in the upper-left).

2. The scenario the prototype is built against, is that you're first putting files into the Briefcase from Benign Artichoke, then Cuddly Antelope.

I didn't have an opportunity to post the scenario or the click-path for the prototype, so you didn't know that. Invision prototypes basically navigate from screen to screen, and are just static JPGs. They know no states. Yeah, that's why I'm learning Framer. 🗡

3. The "Qubes is opening..." bit has an animated "Q" logo, and should only show for about 30 seconds. Qubes flashes an assload of its own black-bubble overlay messages, so we wanted to keep all the Client messaging contextual to keep down on the visual-confetti/rave/zomgwtf effect.

I wasn't feeling well this afternoon, so will be posting the scenario & click path first thing in the AM. :)

[sssoleileraaa]

Cuddly Antelope and Benign Artichoke are both Sources

Whoops! That seems obvious now.

Ah, so that window is to show the progress of file exports and to capture what Qubes is doing in the background since it might be happening too fast to know what's happening. Makes sense.

[ninavizz]

REALLY Third Pass!

• Invision Prototype

Follow below clickpath. Things will "hop," but states are fudged into a zillion static screens.
Note: You may click-through with the briefcase open or closed; everything should work in both. All screens also have live open/close and Briefcase toggle functionality, too. :)

Benign Artichoke is selected, and the Briefcase is empty.

• On Benign Artichoke...
  • Open Briefcase
    • Pane in "Empty" state, with 411 text
  • Close Briefcase
  • Add "grinder.mov" to Briefcase
  • Add "transcript.doc" to Briefcase
  • Note: with either file-add, you may click on the "Remove" link in the contextual confirmation, and it will empty the Briefcase.
• Select on Cuddly Antelope
  • Add the file "timecards..." to Briefcase
• Select Benign Artichoke
• In Briefcase, Click "Export Files"
• Scroll all the way right to click-through with pink arrows
• After the Export is complete, Add "POLICY_Tyson..." doc to Briefcase

Same prototype as before, just debugged & some things updated

• Updates from Thursday's UX Meeting:
  • Updated VM name to random numeric ugliness
  • Tweaked the "Dead progress bars" thing when "Export" is clicked

NOTE: The pink Qubes logo will animate, in the "Qubes is opening..." window. Will paste that animation here, shortly.