Command Palette
The Command Palette is a design pattern that provides a searchable list of commands in a popup window.
What is the Command Palette?
It allows users to quickly access any command within an application by typing a few letters of the command’s name. The Command Palette is commonly accessed using a keyboard shortcut, such as Ctrl+Shift+P or Command+Shift+P.
Elements of the Command Palette
The Command Palette UX pattern typically consists of the following elements:
Opening the palette — keyboard shortcut or access point. Command palette trigger can be visible in the interface as a button or a search bar, or it can be hidden, accessible only via shortcuts that users need to learn from tutorials or documentation. The most popular shortcuts I came across are command K or command+shift+P.
Search box — It allows users to search for commands by typing a few letters of the command’s name.
Command list — A list of available commands displayed in the command palette window. This list usually includes common operations. In some cases, users can access all the functionality of the application via the command palette. The list can be filtered and sorted based on the user’s search query. Many command palettes show recently used commands to make the workflow even faster 🚀. They also display shortcuts associated with commands so users can learn to execute commands without having to navigate through menus.
Visual feedback — After executing the command, it’s important to let the user know that something has changed. In many cases, the change is obvious because the state of the interface has changed, but if it’s not obvious, you can use a highlight, selection, or even a toast notification to indicate the change.
Why use the Command Palette? 🧐
Until recently, the command palette was a pattern we’ve seen mostly in complex tools for professionals, like IDEs for developers.
Nowadays, as all the products become more and more complex, offering a wide range of features, and as users get more familiar with technology, the command palette becomes a valid solution since it offers several advantages that make it useful and elegant.
#1: Productivity and efficiency — By providing quick access to commands and functions, the command palette enables users to complete tasks with fewer clicks or keystrokes. This can be especially beneficial for power users who rely on keyboard shortcuts and focus on efficiency.
#2: Flexibility — The command palette can be used in a wide variety of applications regardless of their complexity or feature sets. It’s a single entry point for all the functionalities that otherwise would need to take up screen real estate in traditional menus and toolbars or would only be accessible for the users if they navigate to a certain location or if they memorize multiple keyboard shortcuts.
#3: Discoverability — Providing a searchable list of available commands helps users discover features or functions they may not have known existed otherwise. This can be especially helpful for new or infrequent users who may not be familiar with all the features of an application.
When to use it? 🚀
The command palette, as wonderful as it is, should only be used in certain types of products that have users that really need it. We need to recognise that a command palette is a very specific UX pattern that is not yet well-known or universal so it needs to be used with consideration. I recommend using it for products that have:
#1: A large number of features or functionalities — If a product has many options or commands, it can be challenging for users to remember where they are located. It would also take up a lot of real estate on the screen to display them, and it would lead to cluttered UI. The Command Palette provides a way for users to access these features more efficiently and for us to keep the product tidy and not intimidating.
#2: Power users — People who use the product frequently for important tasks, focus on efficiency. They may prefer to use keyboard shortcuts or other methods of input to increase their productivity. The Command Palette can be a powerful tool for these users.
#3: A complex navigation structure — If a product has many layers of navigation, it can be time-consuming for users to move between different screens or menus. The Command Palette can provide a faster way for users to jump directly to the functionality they need.
How to design it - Concerns, mistakes, and good practices
Let’s talk about what to pay attention to when designing a command palette:
#1: Focus on frequently used commands — This rule applies on two levels. General, when it comes to choosing the commands to include in the palette. You can choose to include all available commands and show the most popular ones before users search for anything. This rule applies on the per-user level as well. Make the recently used commands available so the command palette increases productivity even more.
#2: Keep it simple — Avoid cluttering the window with too many options or features. Group commands by category if you need to display a long list.
#3: Make it easy to access — A secret keyboard shortcut is usually not a way to go. Hint about the command palette in the UI. At the end of the day, nobody is going to use it if they can’t find it.
#4: Provide an effective search functionality — Accurate and quick search is critical for the command palette’s success. If the search results are inaccurate or slow, users may become frustrated and abandon the palette altogether.
#5: Provide feedback on command execution — Let the user know when a command is executed successfully or if there was an error. This can be done through visual cues, like highlights or background animation, or by displaying a notification. The worst experience is when you keep the user guessing.
🌸 Examples
Let’s take a look at some examples to see how all of those elements are implemented in different products.
VS Code is an open-source code editor, one of the most popular ones. Even before opening the command palette you can see the hints about different shortcuts we can use, including cmd+shift+P for all commands.
When I open it, I can see the searchable list, with recently used commands on top. I can navigate through the commands or search for the one I’m looking for. Note that there are keyboard shortcuts available on the right for some of the commands
The interesting point here is that if I delete the ‘>’ greater-than sign from the search box, command palette turns into a regular search where I can navigate to a file, a line or a symbol. If I add the sign back, I’m back in the command palette. Very clever way of merging those two functionalities.
Figma is a design tool that I’m sure all of you are very familiar with. There is no hint in the interface about the command palette, at least, I haven’t noticed one yet 🧐. The shortcut is cmd+P. You can search menus, commands, and plugins so it’s very comprehensive.
At the top, you can see recently used commands as well. I can use the fuzzy search to look for commands. It gives valid propositions at the top; then I’m not sure how it determines the rest of them. It’s a little confusing.
After applying the command, it doesn’t really give any visual feedback or notification about success. I’m guessing that they’ve decided that it would be annoying for the power users, and the majority of results will be somehow visible in the UI. Plus, the command palette disappears after running a command.
This is a very interesting example because we have two command palettes we can access. As per this hint: we can press the ‘/’ forward slash to open the regular command palette. Notion has been using this pattern for years for general creating and editing, and we can press the spacebar to access the Notion AI palette that lists AI-related commands only.
The regular command palette — There are many options we can search through by typing. You can see that they are grouped by category: building blocks, databases, inline, embeds, etc. Also, they’ve decided to list the AI command palette preview here. Interestingly, we can also access this command palette by clicking on the plus icon next to the row.
The AI command palette — We need to press the spacebar, and now we can access the full list of AI-related commands. They are also grouped: generate from the page, edit, draft, etc. In the AI command palette, we also have the recent commands. This time they were placed at the bottom of the menu. When we start typing, we can either search for commands or simply create a free-form prompt for the AI. This takes the pattern one step further for this particular AI use case.
It’s an AI-powered document editor. It’s a fairly new product, so are many improvements done every release. I really like it for writing articles and video scripts.
The whole idea is that you can start with the AI-generated graft and then refine your work using AI commands. The command palette is clearly marked in the UI as a button. There is also the cmd+K shortcut available. You can see the hint in the tooltip.
If we click on it, we can see the searchable list of commands. I think it’s great for discoverability and learning the tool. It’s clear what you can do with your text.
Last updated