Explore improvements to Command Center mode switching

[daviddossett]

The command center interaction to switch modes could be more discoverable and intuitive to use. Tracking UX explorations here.

[daviddossett]

A couple of explorations:

With Tabs

Probably the most significant departure from what we have. This would make it much more discoverable to switch to the most often used modes.

With Icon In Text Field

Since users may miss the existing icon given that the quick pick covers it once the command center is opened, we could move the icon to instead be nested with or nearby the input itself. Icon used here is a placeholder. Not yet sure what would the best to use here.

Change Existing Icon

Simply uses a different icon with the same UX we have today to indicate that there are more options. Icon used here is a placeholder as before.

@misolori @jrieken thoughts? I'm most interested in the tabs idea despite it being a bigger change.

[eamodio]

I like the direction of the Tabs design, though I'm not entirely sure why but I'm not a fan of exactly how it looks. I think I'd prefer the tabs under the input, but hierarchically that wouldn't really be correct, as the input changes too. Maybe its the left alignment or size/style of the tabs.

[miguelsolorio]

Agreed that the tab approach feels stronger but I think it's missing the ability to switch modes based on the first character (empty for file search, > for command palette, @ for symbols, etc.) Would definitely be curious to iterate on that concept and making it seamless between switching modes. I like how this feels closer to Sketch Runner (which felt seamless).

Have you considered pinning entries into the quick pick for the modes?

[daviddossett]

I think it's missing the ability to switch modes based on the first character (empty for file search, > for command palette, @ for symbols, etc.)

I've been thinking about ways to handle this. For the permanently pinned tabs, we could just switch to that tab when the character was entered. For options folded into "More", we could do something slick like hiding the tabs or even just temporarily adding a tab for the active mode. Kind of like how tab overflows tend to work. I'll try a few options and will come back with some examples.

Have you considered pinning entries into the quick pick for the modes?

I had a sketch for something like this—similar to what you had in mind? Not sure about the input filtering behavior given the pinned mode entries but curious to hear what you had in mind here.

[daviddossett]

With Tabs

Here's a more complete idea of how tabs could work:

• Common modes are available as visible tabs
• Other modes can be entered by selecting from the "More" list
• Can use the input to automatically switch between modes (instead of manually clicking tabs)
• Clearing the input defaults to the "Go to File" list
• Tabs hide when the current mode isn't available as a visible tab

I also wonder if we could enable users to pin/unpin their own set of tabs.

command-center-tabs.mp4

With Pinned Entries

Also explored how this could work. Definitely a bit lighter and cleaner with the tradeoff that you would have to explictly select the files list now instead of it being the default list. That said, I like that the default view includes a flat list of recent searches/commands.

command-center-pinned-entries.mp4

[miguelsolorio]

Dropping some additional feedback even though we already talked about this offline:

Tabs

• I think, overall, this is a good direction to aim for the future with a possible setting to disable the tabs (for those who don't want them)
• I'd try to style them just like our panel tabs and use the tooltip for the keyboard shortcut
• Would be worth to think about how to tab between the different modes, I remember in Sketch Runner this was smooth, but it gets a little tricky with the first character indicator
• The tabs appear to take up a decent amount of vertical real estate, i wonder if we'd want to have a "compact" version of the tabs? We do that in the secondary side bar but use icons (less helpful here i think).

Pinned Entries

• This feels like a practical thing we could introduce today
• The first entry usually is "selected" in the quick pick, do you envision this starting at the file or modes section?
• A setting for this would also be nice

[daviddossett]

Latest options from this week. I have a strong lean towards the first one as something we could do today.

Prefix Pill + Placeholder Text

CleanShot.2022-08-18.at.14.55.47.mp4

A nice bonus here would be showing the name + keybinding on hover:

Tabs

CleanShot.2022-08-18.at.14.53.21.mp4

cc @jrieken @TylerLeonhardt

[miguelsolorio]

Love the simplicity of the character "badge" or "pill", makes it clear that it's the "mode" and can be easier to learn for new users.

[daviddossett]

Pushing the pill idea bit further with an idea from @TylerLeonhardt to show other mode options on click of the pill + a quick way to see more via the ? mode.

[Kroc]

The command centre's clickable region doesn't extend to the top of the window when VSCode is maximized; so it's not a good click-target. Enabling it also increases the title-bar height; which might be okay on HD screens but is yet more lost screen real estate on 1366x768!

[daviddossett]

The command centre's clickable region doesn't extend to the top of the window when VSCode is maximized; so it's not a good click-target. Enabling it also increases the title-bar height; which might be okay on HD screens but is yet more lost screen real estate on 1366x768!

@Kroc could you open a separate issue? I've scoped this one to the mode switching interaction now that there are several active command center UX efforts.

[daviddossett]

Cross-posting a demo from #158638 to showcase the latest ideas here:

• Use a "home" view of the command center to showcase available modes w/ friendly names
• Continue to use pills for prefixes, but only show friendly mode name + keybinding on hover/focus. No need for the context menu on click given the above change.

CleanShot.2022-09-06.at.14.28.25.mp4

[daviddossett]

Closing given the convergence with #158638. Will continue tracking the pill prefix idea specifically in #158064.