UI - Develop & Refine Guidelines on Sidebar List Item Interactions & Action Menus

[katehollowayconfluent]

Users

The primary user for this is the Developer on the VSCode Extension team adding features to the VSCode Extension so they can practice good usability and make quick decisions with less design input.

It could also be helpful to members of the Confluent Documentation team when they are documenting VSCode interaction patterns for end users.

Problems

1. Lack of clarity around the preferred interaction patterns of the extension sidebar
2. Not enough design resources to oversee all features being developed
3. End users described wanting slightly different interactions in usability testing

Solutions

1. Quick reference guide for the developers when they want to add an action to a sidebar list item
2. Design will be able to point to these guidelines when asked to provide their opinion on a new feature
3. Follow up with end user feedback & determine what is expected behavior by VSCode users in that ecosystem

Goals

1. Document VSCode expectations & behaviors with examples from other VSCode Extensions & native VSCode functionality
2. Document & categorize existing actions available in the VSCode Extension
3. Document the general UI strategy for actions on list items specific to the Confluent VSCode Extension
4. Provide thresholds for when these guidelines need to be updated

Non-Goals

1. Address every edge case, list-item type and action specifically
2. Address the categorization of future list items with actions

Background

We've reached a critical point where the number of actions is starting to overgrow basic categories. The team has diverging opinions & expectations of how list items work and interact due a lack of knowledge and strategy in this area.

Some Specific Questions to Answer:

• What are the expectations of list items for primary & secondary actions?
• Where are "more" menus expected?
• What is standard for a single click, right click or double click on list items and does this change for leaf versus tree items?
• What is the difference in the interaction expectation for list items and header items?

Proposal

This feature should be implemented as documentation accessible to the Confluent Development team & any external developers, likely on Github, though the initial brainstorming & development of this work will be conducted internally.

[shouples]

One thing we may want to also determine is whether or not some of the existing design/API limitations warrant using "webview views" (example, API ref), which would give us the full HTML+CSS+JS capability we see from webviews (which we're currently using for project scaffolding forms), just in the (sidebars/panels) view area.