7
4 Comments

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.

  1. 2

    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.

    1. 2

      Great point about the muscle memory aspect!

  2. 2

    Nice! A competitor of mine Linear has a great shortcut experience. Need to take some learnings and implement them.

  3. 2

    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.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 17 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments