[SIP-62] Explore control panel Drag & Drop Interaction patterns and new design

[mihir174]

This SIP(Superset Improvement Proposal) outlines a set of guidelines for drag and drop interactions on the Explore control panel.

Product Many of you may have noticed this project mentioned in the Superset community roadmap and the changes that happened lately in the repo. The development team has started implementing some Drag & Drop interactions in the Explore control panel to reach feature parity with Click to Select behind a feature flag as a first step. As we're slowly rolling out and replacing the data visualization in Superset, Drag & Drop interaction will be fully supported in all relevant controls this year.

This project aims to improve the general UX of no-code query building in Explore, unlock advanced data analytics functionalities that could benefit from Drag & Drop, and drive Superset one step closer to BI industry standard.

Design

First, why should we use a drag & drop interaction pattern?

• Streamlined workflow order
  • Users will not need to drill down into popovers as their initial action - instead they have the ability to directly manipulate objects that are already visible in the columns/metrics sidebar
  • The columns/metrics sidebar being read-only helps navigate large datasets, but then demands additional steps to be actionable - eg. re-typing or re-selecting an identified column or a metric or copying and pasting its name
• Faster workflow when adding multiple metrics and columns
  • Fewer clicks for small datasets - It takes fewer steps to add several metrics for small datasets when all columns and metrics are visible in the sidebar
  • ‘Stickiness’ of sidebar results - It takes fewer steps to add several metrics for large datasets in cases when a single search term returns multiple relevant columns and metrics that the user wants to add
  • Hierarchical search is less conducive to being contained within a dropdown menu within a popover than being contained within a sidebar. The sidebar’s real estate provides better opportunities for presentation of search results as well as repeated access to the same search results without having to search twice.
• Delight - the interaction feels light and modern

Screen recording of main proposed solution:

https://user-images.githubusercontent.com/64227069/114668412-8f2c7080-9cb5-11eb-8331-d22e4f8b4f62.mov

Breakdown of components and states:

Draggable item (source) - the column or metric item that remains in the sidebar Drag item (moving) - the column or metric item that moves with the user's drag action Drop zone (valid) - inputs in which draggable items can be dropped Drop zone (invalid) - inputs in which draggable items cannot be dropped

Draggable items - Visual/interactive elements & States

Drop zones - Visual/interactive elements & States

What we have currently here and here (++ suggested changes or additions)

• On Hover - source item
  • Change in color to darker gray
  • Hand pointer cursor ++ Open hand cursor
  • ++ Drag handles on metric
• On Click
  • Standard cursor ++ Closed hand cursor
• On Dragging - drag item
  • Ghost state with drop shadow
  • ++ Drag handles
  • Available drop zones highlighted in blue
  • Unavailable drop zones highlighted in red ++ Unavailable drop zones disabled at 50% opacity
  • ++ Specific drop location indicated with blue box
  • Reordering supported ++ With visual indicator of shuffling
  • ++ Ability to drag to another available drop zone input in case user dropped in the wrong place
• On Dropping
  • ++ Item appears in drop zone for immediate feedback
  • Popover appears with immediate error ++ No unnecessary error until user exits popover via “Add” or “Done”
  • ++ Changed “Add” CTA in metrics popover to “Done”
  • ++ Hand pointer cursor to indicate click+drag ability
  • ++ Clicking outside popover does not delete the item

---

There were some concerns around the ghost button persisting:

• it may make the control panel appear too busy
• it will add an additional 24px of height for each populated input field

Alternate solution

https://user-images.githubusercontent.com/64227069/114668613-cb5fd100-9cb5-11eb-9289-e7fdd942735a.mov

Here's an alternative that:

• hides the ghost button as soon as a field is populated
• creates a visual affordance for a drop zone with a blue line + highlighting drop zones on hovering over a draggable item instead of dragging

Pros:

• saves some vertical space and visual business when we have many inputs (eg. without dynamic controls)
• less 'jumpiness' of the field expanding when dropping the first column/metric into an input (but there will be the same jumpiness when adding more than one)

Trade-offs:

• blue line indicator is not an obvious indicator of a drop zone
• misses persistent drop affordance - if the ghost button disappears after one column/metric is added, it might seem as though the input is 'full' and will not accept any more columns/metrics
• does not support users with accessibility issues or users who prefer not to drag and drop

To address the issue of a weak indicator, we can support the user with a tooltip on their first time. Here's an example:

[robdiciuccio]

I appreciate that the click to add (metrics, etc.) mechanics are being retained, as this has a higher accessibility factor than drag-and-drop only.

[junlincc]

We should definitely preserve Click-to-Select if the actual product/business needs are validated, to make sure we are addressing a real concern - accessibility in Superset.

• Are we aware of other BI tools that offer both, and why they do and don't? Can we do a brief competitive analysis.
• Dashboard creation is DnD only since inception. Does it mean that if there's an actual accessibility concern, it would have been raised, and we should address in both Explore and Dashboard?

@robdiciuccio @mihir174

[mihir174]

I think we should maintain both methods of adding columns. If we had to maintain either select or d&d (since it seems that it's very expensive to maintain both), we should maintain d&d. Drag & drop + the columns and metrics panel (and its search capabilities) enable much quicker workflows than individual selection for each field. There are ways of making d&d accessible. There are even libraries that have this built in.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. For admin, please label this issue .pinned to prevent stale bot from closing the issue.