Designing Command Palettes

From time to time the design team puts together short talks on various things. They could be a work-in-progress feature, a new design pattern or just something of interest.

With my sabbatical coming up I decided to put together a quick recording about command palettes. For this talk I decided to walk through some ideas around designing command palettes. Enjoy!

---

Hey everyone! For those who don’t know me, my name is Sam Solomon. I am a staff designer here at Salesloft.

I mostly work with RNB on our design system.

Now command palettes generally take the form of a search input.

The main difference between traditional search and a command palette is that command palettes aren’t just for finding things—

they are for doing things. They are for taking action.

Command palettes tend to benefit power users—those who spend a ton of time with the software and know what it can do.

So, instead of hunting for actions in menus—copy, rename, delete. They bring up the command palette and tell it what they want to do.

Now you might ask—why not just have a shortcut to do those things?

And that’s a great question!

Let’s talk about Keyboard focus.

If your application is large, it’s likely not possible—or reasonable—to have a shortcut for everything. And it probably shouldn’t.

Command palettes fill the same need, but allow more flexibility than shortcuts.

When developing a command palette, the starting point should be the same as keyboard shortcuts. You should start with how you’d expect the user to interact with your application using their keyboard.

Handoffs are an important piece to this. It defines where your command palette ends and your traditional UI begins.

You can pull more of the action into the command palette. In VS Code for example, if you run the rename command it asks for the new name right in the command palette. On the other hand Obsidian, closes the palette and auto-focuses the Name field on your current document.

I don’t know that there is a right answer to where the line is drawn, but pulling more of those interactions into the command palette will increase complexity a good deal.

Context awareness
Context awareness is key to building an effective command palette. Global commands are a start, but knowing what the user will want to do in a given situation is where the super powers will come from.

If you’re on a person record. And you want to send the person an email, the command palette shouldn’t expect a blank compose pane. It should expect that you want to send that person an email.

One potential trap product teams might fall into is conflating search and command palettes. The UI is similar, they can use similar components, but functionally you need to be clear about where search sits structurally.

If search is an important feature in your application, you likely want them to exist on the same level. Search is very important in Salesloft—so if you’ve played around with our newly released nav, you’ll notice search and actions side-by-side.

If you have a smaller app or search is not important, you can make search an action within the command palette. So you’d select search and that would make the search input appear.

The distinction is subtle, but important.

OK, with that said, let’s look at some examples.

VS code is a text editor.

Here you can see the rename option appear inline with the command palette.

Obsidian is what I use to take notes.

Watch the difference in the rename function here. It will close the palette and focus the name on the document.

GitHub adds additional symbols to further specify search.

Also, they allow specific commands like change theme to be executed from the command palette.

I know the gears are probably turning, I’d like to focus that and share some ideas about how some of this might apply to Salesloft.

For actions—we might expect a handful of global actions.

• Send an email
• Make a call
• Create a task

The real magic will be this contextual actions. Imagine you’re on the cadence detail page that might be

• Import
• Rename
• Add step

If you’re running the workflow maybe there are task actions. Run, skip, reschedule. As I’m saying that—those might even have their own shortcuts.

• Designing a Command Palette by Timur Badretdinov 
• Command K Bars by Maggie Appleton 
• Command Palette Interfaces by Philip Davis

OK, here are a few great articles on the subject for those who want further reading.