Organizing keyboard shortcuts in your app
So I just spent a better part of a day organizing and adding more keyboard shortcuts to my help desk / customer support software, Eager.app.
To those who are thinking of adding keyboard shortcuts, here's a list of some things to look out for. Hopefully you'll be able to add this functionality without spending as much time as I did!
I'll assume you're (like me) using JavaScript to detect keyboard keystrokes. For me, I'm using a JS library called Mousetrap.
- You may have shortcuts that collide with each other. Instead of defining all your shortcuts into a single space, use the keystroke detection library to emit an event
- Let the event be picked up by whatever JavaScript is active on the specific page and act on it. This way, you can have the same shortcut performing whatever functionality makes the most sense.
- Be careful of using modifier keys. There are differences between Mac/Windows and it's quite confusing to test.
- For shortcuts that trigger a server request, I've found that it's best to have the callback emit a further event that gets picked up somewhere central in handling the action (sorry if this sounds confusing, hopefully it makes sense!)
Would be interested in hearing how others handle keyboard shortcuts. Power users seem to really this functionality.
Trending on Indie Hackers
The exact prompt that creates a clear, convincing sales deck
Post-launch lesson: traffic came, activation didn’t
For indie hackers: Outsource marketing or do it yourself?
I Stopped Browsing Reddit Randomly. Here's the Keyword Monitoring System That Actually Gets Me Customers.
Keyboard shortcuts can be surprisingly tricky when dealing with repeated key inputs. Testing how responsive a single key press is can help fine-tune shortcuts. Tools like https://thespacebarcounter.com/ are useful for checking speed and consistency of repeated presses, especially when gauging reaction time or hand dexterity.
We have done a lot of iterations on the keyboard shortcuts in Kitemaker (www.kitemaker.co) which is a keyboard first tool. We did use Mousetrap in the beginning, but we have ended up rolling our won thing, because there was just so many edge cases and the general purpouse library simply didn't cut it (we use a lot of the same internal mechanism, though).
You can do some simple rules to avoid confusion about Mac/Windows/Linux. For us, the main thing is that we have defined an internal key called meta, which is ctrl on Windows+Linux and cmd on Mac. Otherwise, shift and ctrl is more or less the same.
When it comes to choosing which keyboard shortcuts to use, we try to find common practices and look at what other hotkey-driven products use. There is a lot of muscle memory into having successful keyboard shortcuts and avoid reinventing the wheel saves a lot of your and the users time.
Great point about the muscle memory aspect!
Nice! A competitor of mine Linear has a great shortcut experience. Need to take some learnings and implement them.
I recently implemented keyboard shortcuts using the hotkeys JS library, but the React hook version of it called react-hotkeys-hook. Such a worthwhile feature for apps where users repeat a lot of the same actions.