Frictionless User Experiences: Add a Command Palette to your React Application

Although I’m not a user interface designer professionally, I have some rather strong opinions about how user interfaces should be implemented. After all, I use a variety of different software on a daily basis, ranging from Google Chrome, Firefox, Gmail, Google Calendar, Asana, Spotify, and many others. In my mind, user interfaces should be as frictionless as possible, and ideally look good while doing it.

One of the navigation functions that I’ve personally found most useful in digital user interfaces, is a prominent, Google-style search box that allows you to navigate across the entire range of an application’s functionality. This goes beyond just searching for data in the application; the search box should allow you to take immediate action, without having to jump through additional screens. Most applications these days don’t offer this capability, but a few do. Let’s look at some examples.

For starters, let’s look at a couple applications that don’t support this sort of navigation.

Amazon’s search box is fairly limited, seeing as you can only search through their product catalog. You can’t access your account management functions, such as Subscribe & Save, digital service subscriptions, historical orders, gift cards, initiating returns, and a plethora of other capabilities that are offered by the Amazon.com platform.

Okay, it’s great that I can easily search for products to place a new order on Amazon, but why can’t I use that same search feature to access other parts of the application, that I commonly utilize?

For example, let’s say I want to access Subscribe & Save. Let’s try to use the search box to access that feature.

Oops, that didn’t work very well, did it?

In a similar vein, eBay has a search box, but you can only search for product listings on their marketplace with this search box. You can’t use the main search box to access your historical purchases, look up shipment details and tracking numbers, or navigate to your saved items. While I understand there’s a natural emphasis on placing new orders to generate revenue for eBay’s business, customers regularly need to access other platform features. Hiding these “other” features under a confusing menu system doesn’t make my customer experience very enjoyable, and makes me less likely to come back to your platform to place my next order.

Just like Amazon, the eBay search box only has one useful purpose: finding a product to purchase. We can do better than that.

How should a user interface look, for ease of navigation?

We’ve looked at a couple examples of how not to build user interfaces. Now let’s look at a positive example.

One of the applications I use regularly, which sets a high bar for excellence in navigation is Microsoft Visual Studio Code (VSCode). What makes VSCode easy to navigate is that you only have to remember one keyboard shortcut to access 90%+ of the application’s functionality. For those of you who use VSCode, you know what I’m referring to: the Command Palette. As long as you can remember CMD + SHIFT + P as a keyboard shortcut, you can access nearly any function within VSCode by simply searching for it with a few characters. The application does most of the work for you by “fuzzy matching” a master list of commands against the few characters you’ve typed.

Once you’ve located the command you want to execute, you simply hit ENTER, and voila, you’re on your way. You might be prompted to select additional options from a list, or type some free-form parameters, in order to fulfill your request. However, the major benefit here is that you were able to access the feature you wanted to from a centralized, searchable location.

What should you do, as a designer or developer?

Start out by brainstorming all of the features that a user of your application would like to access. Write down all of these user workflows into a document. Ask different users what kinds of functions they commonly perform in your application, or better yet, use telemetry data to find out.

For example, someone logs into Amazon.com and wants to quickly access their historical orders. A different user wants to log into Amazon and send a gift card to a family member. Yet another customer wants to login and cancel a Subscribe & Save subscription. Depending on which application feature someone wants to access,

Once you’ve identified all of the user workflows, start adding these to a central “command repository.” This could be as simple as defining a JavaScript array of various commands that a user would want to perform. Keep in mind that each command may have more than one instance. A “previous orders” command isn’t enough. What if I, as a customer, want to navigate to a specific order? There needs to be a distinct command that is dynamically populated, for each order in my order history.

Once you’ve identified the commands that your users would like to perform, how do you actually expose them in the user interface?

Command Palette React Component

There’s a relatively new React component called react-command-palette that allows you to rapidly add a nice-looking command palette to your React application. The project only has 24 GitHub stars, as of this writing, but in my opinion, it should be nearly as popular as React itself. Just like VSCode, this component automatically binds the CMD + SHIFT + P keyboard shortcut to invoke the command palette. By following this de facto standard key binding, it is much easier for anyone who’s familiar with other software, with a similar navigation utility, to access the palette.

The default styling of the react-command-palette actually follows GitHub’s Atom editor’s styling, so it looks pretty nice out-of-box. For anyone familiar with JavaScript, adding custom commands to the command palette is straightforward. All you need to do is create an array of JavaScript objects, each containing a name property and a command method. You can get a lot more fancy than that, but I will let you read the documentation for further implementation details.

Here’s a sample of what a command palette might look like in your React application.

In short, you should seriously consider adding this capability to your application. It’s easy, and it makes your application more accessible to its users.