stash icon indicating copy to clipboard operation
stash copied to clipboard

[RFC] Edit Modal - Improving bulk editing workflow

Open echo6ix opened this issue 1 year ago • 0 comments

Summary

This RFC proposes a UI/UX change to the bulk editing workflow of multiple items/objects (i.e. Scenes) and their multi-field input values on the Edit modal windows. To replace the current method of using tabs with a simpler, less redundant, and more commonly used system that will improve familiarity with the workflow.

Current Workflow

At present, the bulk editing of multiple Scenes' multi-field input values uses tabs atop each field. Users must select one of three tabs to inform how they will manipulate the input values:

Overwrite all values. Add new values. Remove existing values

The functionality of this approach is inefficient, as only one of the three functions can be utilized per input field at a time. This layout may also be confusing to some users, as I do not think it's a generally adopted approach for UIUX.

Proposed Workflow

The new workflow would use a more intuitive and commonly adopted method to manipulate multiple values of multiple items simultaneously. This is done by displaying checkbox states (checked, unchecked, intermediate) adjacent to each respective input value.

As in Windows, and other operating systems and browsers, the checkbox states denote the following:

  • Checked state. Denotes the value is selected for all items, or added to all items. For example, if the input tag field shows a tag chip that reads [✓] Red it would mean all the selected items being edited would either have the tag value of Red, or that the value Red is being added to all items, which is essentially both the same thing. When adding new values they would receive a checked state, the equivalent of the Add tab.
  • Unchecked state. Denotes the value will be removed from all items. The opposite of the checked states. Unchecking chips is how users would remove values. The equivalent of the Remove tab.
  • Intermediate states. Denotes an inconsistent value across all items selected. Some items have this value, but not all items. This is displayed as a dash rather than a checkmark, i.e [-] Blue. No change will occur to this value when the user saves their edit. Clicking this item cycles between checked, unchecked, and back to the original intermediate state.

This system eliminates the need for separate tabs and allows users to manipulate the multi-field values in one go. Reducing clicks, improving familiarity.

image

This functionality will remove the need to have the "Remove" label or x on tag chips when multiple items are selected, since it would be redundant with the Unchecked state.

echo6ix avatar Oct 03 '24 01:10 echo6ix