Command Palette
The Command Palette is a design pattern that provides a searchable list of commands in a popup window.
Last updated
The Command Palette is a design pattern that provides a searchable list of commands in a popup window.
Last updated
💡 The Command Palette is a design pattern that provides a searchable list of commands in a popup window.
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.
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.
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.
The command palette shortens the path for the user and allows them to skip the linear information architecture.
#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.
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.
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.
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.
