Command Bars

These are a thing these days.

Maggie Appleton put a point on it in a recent article: Command K Bars. She makes the point that they date back quite a way, to “Spotlight” in macOS Tiger. Twenty-two years later, we still have Spotlight:

Tools like Raycast and Alfred arguably take this same concept up a level by doing more and offering more customization.

That’s OS software, and it makes great sense there, but these Command Bars are making their way to the web as well. For example, just in React-land, there are three major projects:

• cmdk
• kbar
• react-cmdk

The SasS startup CommandBar productizes the whole idea and helps you add the feature to your app including integrations with other services. Other software considers it a big feature release when they ship a Command Bar (see Polypane). And yet other attempts to jack in Command Bars into other software that could use it (see Turbo Admin for WordPress).

What do these Command Bars do? I think of it as a potential three-punch:

Run, Jump, or Search

As in:

• The app does things, so if the app, say, calls people, and someone types “tasks” into the Command Bar, it should get them to the interface for tasks. “New task” would at least attempt to interpret what the user is trying to do and do it (bring up the task-entering UI). Run a command, as it were.
• Quick navigation is another possibility. The more complex an app, the more places to get to, the more a user might appreciate being able to jump somewhere based on some entered text. “Latest invoices”, for instance, could jump you to a page of the most recent invoices sorted that way.
• Search might be the primary activity for a Command Bar, but I also generally think of it as the fallback. If there is no other clear match for something to do, execute a search.

This means the results of a Command Bar need to be ranked. Ranking is hard. To compound the hardness, fuzzy searching should work (e.g. common misspellings should be worked around) and general human-language input should be accepted (e.g. “go to contacts” means they are trying to get to contacts, not that a search for that exact phrase should be done… probably). Tough stuff — good luck!

What these bars do will highly vary on the app itself. I can imagine situations where search isn’t particularly relevant so it’s only a navigational thing. Or that it has been decided that search is an entirely separate experience. And we can see with stuff like Spotlight that it’s almost entirely search — you don’t run commands at all.

I do want to dwell on the command to activate the Command Bar a bit, as that’s pretty crucial. Sometimes they have no UI whatsoever and rely entirely on a keyboard command to bring them up, so if you hope users actually use it, education on the keyboard command is crucial. “Standardizing” might behoove us all.

What keyboard command do they tend to use?

We can see from Maggie’s article and from the three React components that Command – K seems to be the front-runner. But allow me to take a gander at some software (mostly that I personally use so I can test it):

Software	Command Bar Keyboard Shortcut	Jobs
Front	Command – K	“Go To”
Slack	Command – K	“Jump To”
GitHub	Command – K	“Search or Jump To”
Notion	Command – K	“Search [workspace]”
Discord	Command – K	“Search for servers, channels, or DMs”
Spotify	Command – K	“What do you want to listen to?”
BusyCal	Command – K	Creates New Task
Vercel	Command – K	Run, Jump, Search
Framer	Command – K	Run, Jump, Search
Linear	Command – K	Run, Jump, Search
VS Code	Command – T	Go To File
VS Code	Command – Shift – P	Run Command
Sublime Text	Command – P	Go to File
Sublime Text	Command – Shift – P	Run Command
Nova	Command – Shift – P	Run Command
Chrome DevTools	Command – Shift – P	Run Command
Safari DevTools	Command – P	“File or Resource”
Firefox	Command – K	Focus the Search/URL bar
Arc	Command – T	Jump to Tab, History Item, Extension, or Search
Polypane	Command – K	Run, Jump, Search
Warp	Command – P	Run Command (or @ to Jump to Session)

Clearly a lot of consolidation around Command – K, but deviation in coding tools. If VS Code started defaulting to Command – K, that would really lock it in. I could see it happening, as best I can tell Command – K doesn’t currently do anything by default in VS Code.

I’m a little surprised that more apps don’t have more prominent UI for activating and using Command Bars, relegating it to a keyboard command only. If the app has a Search Bar, be bold! Turn it into a multi-capable Command Bar! Or some kind of icon button to activate it.

Maybe Command Bars should attempt a “standardized” icon as well. Like it or not, the hamburger icon has really locked itself in for site-level menus. Could happen here.

Where do Command Bars really help?

It seems to me they are almost always “bonus UX”. Rarely are they ever the only way to do things, they are just another way to do things. But if they are well done, they might just become a better way to do things. Better — in that, once you have that one keyboard command memorized, it becomes essentially a shortcut for anything you want to do. The more complex an app, the more benefit (stares intensely at Photoshop).