Keyboard shortcuts with Mousetrap

As a JIRA power user, I’m impressed by the dizzying array of keyboard shortcuts that are available throughout the product. It was the clear inspiration for a similar integration I added to a recent project, using a great little JavaScript library called Mousetrap.

I must confess to being a heavy keyboard user. When a keyboard shortcut exists for a function that would otherwise require mouse interaction, I consistently favor the keyboard for a number of reasons. It’s more precise. I find mouse movements and clicks more prone to error. It’s faster. My hands are normally on the keyboard, the act of moving a hand to the mouse and then navigating to a UI element takes longer. Depending on the program (Adobe Illustrator is my favorite example), using one hand on the keyboard and the other on the mouse is the hallmark of a true power user.

Of course, I’m not the first to argue about keyboard vs mouse. In an AskTog column, Bruce Tognazzini found that while users felt the keyboard was faster, the mouse was actually faster. Mind you, that was in 1989. Jeff Atwood did a nice follow up article, where he said (emphasis by Jeff):

However, as Tog himself notes, when the keyboard shortcut is already memorized and well understood, it’s a clear productivity win.

Given my experience with similar keyboard shortcut functionality on a recent project, it’s certainly the case. What I found:

  • Start small but plan well. You don’t have to go crazy with the quantity of shortcuts. Either with empirical analysis of access logs or other heuristics, rank your links from most useful/common to least. Work out what the shortcuts might be, and see where patterns emerge.
  • Follow conventions. After inspecting a number of other applications, I chose some of the same keyboard shortcuts, including:
    • ? for showing a list of the keyboard shortcuts.
    • / for focusing in a search form field.
    • h for toggling contextual help.
  • Be contextual. We chose to use the e shortcut to mean “edit this thing,” which changed depending on the current page of the application.
  • Document well. Reference keyboard shortcuts everywhere you can in the documentation and contextual help. For example, include tooltips on menu navigation items.
  • It’s ok to be selfish. Once implemented, some of my favorite keyboard shortcuts made my product demo workflows much smoother. I was able to bypass 4 or 5-click sequences with a single keyboard combination that made the demo feel more fluid, clear, and simple.

Using Mousetrap was very straightforward. Add the JavaScript dependency, and add shortcuts in the following format:

Mousetrap.bind('g h', function() { /* do something */ });

In our application, we bound the g h shortcut to mean go home, and added about 20 other shortcuts. It’s a pattern I’ll implement as I can in every project moving forward. Here are some links to get you started with your research:

Leave a Reply