4 minute read · Published February 24, 2022

Introducing user-customizable shortcuts

Latest Update April 16, 2024

Previously, CommandBar allowed apps to set default shortcuts for commands. This was a great first step in making more apps keyboard-friendly. And we still recommend apps set these default shortcuts, since sensible defaults can greatly increase shortcut adoption and usefulness.

Today, apps using CommandBar can enable their users to change the default keyboard shortcuts for all of their commands, or attach shortcuts to commands that didn’t have any default.

Enabling this feature gives anyone interested in shortcuts the ability to make an app feel like home, customizing shortcuts according to how they use the underlying app. It also provides a much-needed solution for international users who often cannot take advantage of default shortcuts engineered for English keyboards.

MOTIVATION

Those of us who’ve worked with complex desktop applications are used to being able to edit default keyboard shortcuts to make our workflows as efficient as possible. That could mean changing a specific shortcut to use a convention we prefer (like G THEN for navigation) or attaching a shortcut to an action we perform a lot that may not have had a default shortcut.

Shortcut customization in the Logic Pro X desktop application

In contrast to desktop applications, web applications almost never allow users to customize the default bindings. This gap can be a serious roadblock for anyone who uses the app a lot and wants to take advantage of shortcuts.

At CommandBar, we build UX infrastructure for modern apps, we’re uniquely positioned to bring shortcut customization to a massive amount of users across many popular web apps.

ENABLING USERS

To the delight of many users, modern web apps are starting to embrace keyboard-driven navigation. A list of keyboard shortcuts frequently takes a prime spot in documentation pages. However, as mentioned, in web apps these shortcuts are rarely customizable. This creates several problems.

The first issue is shortcut fatigue. Even the most advanced users struggle to learn dozens of different keyboard shortcuts for every web app they use. What often ends up happening is users will learn shortcuts only for the apps they use most often and ignore the others. Giving users the option to change apps’ default bindings enables them to use the same set of shortcuts across the different apps they use professionally, significantly reducing their mental overhead.

The second issue is one-size-fits-all shortcuts. Not every command in an app can have a shortcut; shortcuts should be reserved for commonly performed actions. But some users may use some commands more often than others. With non-customizable shortcuts, an app is stuck catering to the average user. Customizable shortcuts allow users to choose which commands should be shortcut-able based on their own usage. And because remapping is easy, they can change their shortcuts as their own usage changes and they start using a different subset of features heavily.

FIXING KEYBOARD LAYOUT ISSUES

Even worse, many software users across the globe are unable to use a good portion of web apps’ keyboard shortcuts on their keyboards. The reasons are that their keyboard layouts simply do not contain the required keys and that processing key presses with JavaScript is complicated and error-prone.

With web apps becoming increasingly complex and replacing desktop applications, complaints about this problem have become a recurring theme in support forums.

Giving these users the ability to change the default shortcuts provides an elegant solution for any keyboard layout. Instead of fixing the problem for a particular layout or key, users across the globe can set any shortcut to whatever works on their end.

HOW IT WORKS

If you use an app with a CommandBar with this new feature enabled, you can customize the keybindings right away. You don’t even have to dig deep into the settings.

To set a shortcut, just open the application’s CommandBar and search for the command that you want to set a shortcut for. Then, use your mouse to hover over the left side of the default shortcut and click “Edit.” You can then use your keyboard to record any shortcut (or sequence) you like.

Users can also assign shortcuts for commands that don’t have a default binding. This capability is especially helpful for complex software with dozens or even hundreds of commands.

As an application developer, you no longer have to create a default for every niche command, as end users will be able to prioritize and set bindings for commands they need often for their personal workflows.

THE ROAD AHEAD

Keyboard shortcuts are a surprisingly-rich domain, and we plan to keep creating tools that let app builders and users take advantage of them.

We’re so excited about letting end users customize their CommandBar keyboard shortcuts with the release of End User Shortcuts. If you have any other ideas on how to improve keyboard shortcut handling on the web, we’d love to hear from you!

HOW TO USE THIS

If your app has a CommandBar and you want to be among the first to leverage User-Customizable Shortcuts, shoot us a message! Soon, you'll be able to enable the feature from the editor yourself.

Copy icon
X logo
LinkedIn logo

Want more

tips like this?

Subscribe to Quick Product Tactics

Email Icon

Never miss another
fabulous article.

Subscribe to stay up to date

Email Icon
Continue Reading

Up Next

Why we built Copilot

Read Now

What's hot