Keyboard shortcuts, often called 'hotkeys', are keys or combinations of keys that perform an action in a digital product like a website or native application.
Depending on the platform, many keyboard shortcuts are available natively. For example, in OSX
⌘ + S is the hotkey for "Save".
There are many reasons — but these are the three reasons why I personally invest the time to learn keyboard shortcuts, and why I think its worth it to take the time to provide them.
Conversely — you can use system defaults if you're providing a similar experience. For example — I find myself always hitting
⌘ + F in the Figma home screen hoping to activate the Search. To date, this does not work and my right hand has to make the grueling journey to the trackpad and click on the Search field, and then enter my query.
If the product you're working in isn't a native app, you have to be aware of browser defaults as well — again, it's possible to override them (as long as it makes sense) just note that there are costs to be weighed.
Research common conventions for your audience — depending on your project this can be fairly vague (e.g. people in a certain age group), to specific (e.g. designers who are used to apps like Figma, Sketch, etc).
For example, we recently implemented Algolia's DocSearch in our design system documentation. My first thought was to use the hotkey pattern that I'm always reaching for in VS Code —
⌘ Shift F.
After implementing, I heard from a couple people that it was kind of clunky — so I ran a poll and turns out — literally 80% of the team preferred an alternative, the
/ pattern popularized by Google in pretty much all their apps now — Gmail, YouTube, Drive, etc.
Once you've decided what combination of keys to use — you have to consider how you'll account for them across operating systems.
Almost everyone knows the classic "undo" hotkey —
⌘ + Z (or
ctrl + Z for Windows/Linux users). While the
⌘ key and
ctrl key are often interchangeable between Mac/Windows, they aren't always. Apple keyboards also have a
For example, if you want your hotkey to use the
⌘ key in OSX and you don't specify one for Windows, the default corresponding key will be the Windows key — which is often not the most ergonomic choice so you'll most likely want to set it to the
It's important to remember that keyboard layouts vary from country to country. And key codes don't always line up. In my earlier example
/ in American/English keyboards the key is directly left of the shift key — but in Spanish keyboards, the
/ is typed by combining the
This presents a couple issues — ergonomically, it could be more difficult (or at least unexpected) for someone using a Spanish keyboard to use
shift + 7 than it would be for an American audience. In this specific case — I went to GitHub Docs to see how they handled it. They maintained the
/ across languages, so either they didn't consider it or they tested it and it's fine for their audience — which is good enough for me.
Technically, it's an additional expense. You'll need to localize the hotkey either way — by setting the alternative (in my case, I set
shift + 7 as another trigger), OR creating a custom hotkey per locale (I briefly entertained the idea of using
- for Spanish but that introduced another layer of technical complexity that I wasn't willing to embrace for this example).
In addition to keyboard layouts, if your shortcut is based on the first letter of a word, an alternative could be considered. For example
⌘ + F opens up the "Find" dialog in most apps, however in the Spanish edition of Word, the hotkey is
⌘ + B (buscar).
This level of localization isn't common, however it's still something to think about if your basing your hotkey choice in a word (semantic) vs. a key position (ergonomic).
Designing keyboard shortcuts isn't too different from designing anything else — you need to have:
And — of course it never hurts to get feedback from your audience along the way.