I'm making this issue a general BioViz-CyVerse usability testing ticket.

Add all results from usability testing in the comments.

Results from usability testing with Dr. Krizek on August 14, 2019.

General consensus was that the UI was easy to use and relatively intuitive. Some observations and recommendations below.

First assumption was that single-clicking would enter a folder. I noticed that when hovering the cursor over files/folders the cursor turned from an arrow to a hand. This may be causing confusion as elsewhere in the UI (such as the Home/Shared/Community) the cursor is a hand and single-clicking navigates to the selected location. Recommendation: do not have the cursor change into a hand when hovering on files/folders.

When tasked with changing metadata, was initially unsure about how to access metadata. Eventually found the three dot menu (did not attempt to right-click). Recommendation: need simple tooltips when mouse hovers on things like the three dots, similar to tooltips for buttons in something like Gmail.

Found color picker confusing (using Firefox on Chrome). Clicked on the foreground color button, selected a color (did not close the foreground color picker) then clicked the save metadata button (thought it was to save the color in that menu). Then clicked the background color button (the foreground color picker was still open, making it appear that it was now the background color picker). Recommendation: the current color picker is temporary, we need to make sure to implement a better color picker solution at some point. If the user selects a color and clicks outside of the color picker, the color picker needs to close. Need the Save/Cancel buttons to be in their own box/section.

Single-clicking files/folders highlights them. Double-clicking folders opens them. Double-clicking files currently does nothing. Let's make double-clicking files a shortcut to the metadata right-panel.

When asked to create a public link, initially navigated to Share menu. Recommendation: it may be worth considering making Share and Manage Link one UI. Or consider other options for naming Manage Link (Create Public Link, Get Shareable Link).

Create Public Link button was not working.

Recommendation: do not need the full file path in Manage Link or Metadata. Instead make it just the file name, and include a button to copy the file name.

Recommendation: change the Public Link box to look less like a fillable box, for example, make it just appear as test. There was some confusion as to whether the Public Link box was editable.

Took a second to find the Create Public Link button, as it was low and underneath all of the other text in the Manage Link panel. Recommendation: rearrange the Manage Link UI (this may change if we integrate it with Share) to make the Create Public Link button more prominent (higher up).

Some confusion over the term metadata. Recommendation: may need to rename metadata. Because we are only showing IGB specific metadata, may be worth changing it to something like "Configure IGB data" or "IGB settings".

Comment on color-picker usability:

The volunteer pretty quickly figured out that she could use the still-open color picker to change colors for fg or bg. I think the current behavior is OK because it lets users do what they need to do in fewer clicks.

I say: let's work with it, since there are technical limitations standing in the way of our original design.

Suggestion?

Create a widget (button?) on the UI that enables a user to open a color-painter-picker-tool. Make it a tiny image of the actual widget, if you can. (What you see is what you get!)

It stays open for as long until the user closes it. Don't close it unless the user closes it.

Change the meaning of clicking a color swatch: Clicking a color swatch selects it – and when a color swatch is selected, something about it changes to indicate it is in a "selected" state. (Maybe gets an outline or gets bigger or something.)

Once a swatch is in a selected state, user can change its color by interacting with the color picker tool.

Question: Can the color picker be configured to show a particular color as already selected?

For example, if I click a swatch to select it and THEN open the color-picker-tool, I would want the color-picker tool to show that the swatch's color is selected.

If I open the color-picker-tool-thing and THEN click-to-select a swatch, then my selected swatch would turn whatever color the color-picker-tool-thing is showing.

That could be super-cool because I could then use the color-picker-tool to click through all my files and make them the same color.

(Inspired by behavior of graphical editors such as PowerPoint and MS Word.)