New UX command bar-based replacement for command dialogs

[franknoirot]

Proposal Video

cmdbar-demo.mp4

Background

In order to confidently input modeling commands, a user must be given the chance to:

1. Input each of the required parameters for the command
2. Review their inputs
3. Add and review any additional optional parameters

Dialogs have been the traditional way to solve this in CAD tools. Here are a few great examples from Onshape:

1. Extrude:
2. Boolean:

The problems I have with this approach are:

1. It requires the user and the developer to solve the problem of a new little UI for each additional tool
2. It requires a lot of clicking
3. It takes up more screen real estate
4. It doesn't demand attention, splits focus

Since we already have set the goal of allowing almost every action in Modeling App—modeling or otherwise—to be reachable from our Command Bar via ⌘K or Win + /, I've been exploring ways that we can augment the command bar to handle the 3 problems with complex commands outlined above. I believe we can by doing the following:

1. Covering the toolbar with the command bar when open
2. Showing the user the parameters needed for a command as visual "tags" in a simple wrapping layout
3. Stepping through each parameter's input individually, instead of showing all at once
4. Only showing the "confirmation dialog" form of the command bar after all required parameters are met
5. Showing optional parameters as toggles in the footer of this confirmation step
6. Providing hotkeys to toggle optional parameters / initiate their command bar flows
7. Allowing editing of any completed parameters by clicking or Tabbing to the parameter tag in the dialog

Let me know your thoughts, thanks!

[franknoirot]

Shoutout to @jgomez720 for talking through this with me this week 🤝

[franknoirot]

I found two difficulties with this approach while exploring the Extrude command.

1. shortcuts for multiple choice required params

What keyboard shortcut should I press to edit these circled items? I have been avoiding adding field names to these param "tags" because they add to the visual density and could lead to a wall of text that is as hard to read as code. But my keyboard shortcuts have relied on being a letter in the field name. This works fine for optional params, which the user can see the name of, but not for required ones.

2. Redundant text with optional parameters

By having the footer of optional parameters, once they are added their names are redundant with the tags in the command.

I think this could be solved with the following:

1. All parameters are given a digit hotkey starting with 1
2. All optional parameters are given an additional letter hotkey starting with their first available letter
3. Optional parameters appear in the command bar "footer" area with a plus icon before they are added
4. After being added, optional parameters are removed from the footer area
5. Hotkeys for all parameters are shown as small dots in the upper-left corner of its tag

• Toggling this off should probably be a setting?

6. Tapping any hotkey enters the editing flow for it
7. To remove an optional parameter, the user can either hover over it to reveal an X icon or tap the hotkey followed by Backspace

Here's what that looks like:

[franknoirot]

A note about some other logic in these latest mockups:

1. Child arguments get grouped and don't have shortcuts. You have to redo the "Direction" flow when you edit it.
2. Selection args get color border (edit: went for a small circle instead based on feedback, open if no selection closed if there is one)
3. Values don't get any border

[franknoirot]

Okay this represents what I'm going to be targeting for a first "complete" command bar interface. Still very much would love community feedback on the flow though:

Some feature requirements, in no particular order:

• The command bar can be accessed by:
  • clicking the button next to the available tools list, labeled either Cmd + K or Win + /
  • Typing either Cmd + K or Win + /
• The command bar appears near the top of the page, covering the available tools bar when in the modeling view
• Available commands can be searched for
• Settings commands can be included or excluded from command bar searches (which is a setting in itself)
• Entering a command will work through all of its required arguments before a step to review and submit
• Command arguments can be of type:
  • selection: one or more engine entity IDs
  • string
  • select: one or more pre-set values
  • number: in future we will split this into number and unit, which lets the user specify units other than the default ones directly in the prompt
  • object containing any of the above as values
• Entering a command, all of its arguments are shown in the bar as small tags, with the current (first) one highlighted
• Every argument has either instructions or input labels:
  • selection has an instruction, with a fallback of Make a selection if none is specified in the command bar config
  • all other types use their argument name as a label on the input
• All argument tags can include a label and a value
  • required arguments don't show their label
  • if a label value is of type selection, a small colored dot appears to its left in the tag
    • the color of the dot is set in the command argument's meta, and determines the highlight color of the entity in the 3D view
    • if the selection is empty, the dot is shown empty with just a border
    • if the selection is not empty, the dot is filled as well
  • in future, argument types can display these values in a "prettier" format, such as degree values having a º placed after them
• From the review stage, all arguments can be edited by either:
  • clicking on the tag
  • using the arrow keys to focus on the tag, then hitting Enter
  • typing the argument's shortcut (more below), then hitting Enter
• All arguments can be reached from the review stage via one or more hotkey shortcuts:
  • All arguments are given a digit shortcut in order that they appear
  • Optional (and therefore labelled) arguments have an additional letter shortcut, which is underlined in the tag. Letters are chosed by the first unused letter in the label
• From the review stage, all optional arguments can be deleted by either:
  • hovering the tag and clicking the small X icon that appears
  • using the arrow keys to focus on the tag, then hitting delete
  • typing the argument's shortcut, then hitting delete
• The command bar can be exited at any time by either:
  • hitting Cmd + K or Win + /
  • hitting Escape
• The user can go back at any point by:
  • emptying the input and hitting delete while in a text-based input step
  • hitting delete in any other step

[franknoirot]

@Irev-Dev asked a good question about selection-based arguments, and whether they automatically advance once something is selected:

• In a selection argument the user can advance in one of two ways:
  • if the selection accepts at most 1 item, the command advances immediately on click/selection
  • if the selection can accept multiple items, each click only toggles adding to/removing from the selection. The user can advance once at least 1 item is selected by hitting Tab or Enter