J, K, or How to choose keyboard shortcuts for web applications

Keyboard shortcuts are a powerful productivity booster widely used in desktop software. How can we apply them in web applications?

Some 20 years ago I was finishing my diploma. Home computer was by far a luxury, so I worked by nights in a friend’s office. The friend introduced me to a powerful Windows 3.11 Word with tons of great possibilities that made writing a sheer pleasure (comparing to a typewriter!). Remember one thing, he said. Whatever you do, whatever you write, hit Ctrl+S right after you’ve finished typing. Other skills will come later. Ctrl+S you should master right now.

Why keyboard shortcuts?

Shortcuts accelerate common actions and are mostly used by experts. So basically any web application that supports a stable scenario of repetitive actions and aimed at professionals can benefit from providing keyboard shortcuts to streamline the process.

Overriding standard shortcuts

There are two categories of keyboard shortcuts you must be very careful of:

  • native browser shortcuts for the page content, like Ctrl+C, Ctrl+Z, Ctrl+F, spacebar etc.

Letters only shortcuts

There’s a very good option to spare yourself headache of selecting modifiers and avoid mixing them up with the native browser and OS shortcuts. Letters. One or two letter shortcuts are simpler and easier to remember, they won’t interfere with OS or browser.

Atlassian Jira’s shortcuts are easy to remember:
A similar issue tracker from JetBrains, YouTrack, has keyboard shortcuts with many modifiers

Restrictions

Combining one and two letter shortcuts

It’s better not to use both one and two letter shortcuts if they start with the same letter. For instance, you want to use c for comments, and cr for comment restrictions. The first keystroke will bring up the first action. Technically, you can add a delay after the first letter, to wait for a (probable) second key press. But this will delay the first action, and might look and feel like your application is slow. Just imagine that you press c for comments and the text area appears after half a second delay. Not so cool, is it? Better assign the rc for restrict comments instead :)

Using letter shortcuts while editing text

There’s also another problem - letter shortcuts don’t work when you’re writing. For this case you can either provide a simple way to step out of the editing mode (press ESC to switch modes, or Enter to finish editing, and e to edit again, etc.), use ‘smart syntax’ (Markdown or other formatting language), or append modifiers. For instance, you use / to set focus to the search field, but when you’re typing you’ll need a modifier for the same action, for example, Alt /.

Quickly find a command, Google Docs

Quasimodes

Keyboard shortcuts are also good for controlling temporary modes, or quasimodes. Quasimode is a term coined by seminal Jeff Raskin to describe a state when application can work in different modes but still stay modeless. To cite Wikipedia:

  • In Checkvist we use a quasimode for drag-n-drop - you need to keep the Shift key pressed to drag-n-drop list items with the mouse. There’s also another way of reordering list items, with Ctrl+up/down keys, which is more in accordance with the ‘keyboard-orientedness’ of the application, so the ‘mouse way’ is secondary and thus hidden behind a quiasimode.

Choosing the shortcuts

There are hardly any standards in this field, but if we wish to flatten the learning curve for our customers, we must consider current conventions.

Common shortcuts

Good ol’ desktop text editors

  • Ctrl+C/V/X/D - copy/paste/cut/duplicate
  • Ctrl+Z - undo
  • Ctrl+A - select all

..and more

  • ? - keyboard cheat sheet
  • / - set focus to the search field
  • up/down arrow keys (also j/k) - next/previous item
  • left/right arrow keys - collapse/expand tree nodes
  • Tab/Shift tab - indent/unindent for hierarchy (also focus in the form elements)
  • ESC - close any pop-up/dialog window
  • Ctrl+Enter - submit form

Discoverability

The common standard is to show the keyboard shortcuts window on pressing the ? key. If your application uses different shortcuts in different contexts (say, for preview and for editing a document), you can change the contents of the ? help window like Flickr does:

On the photostream page (hover the button to highlight the explanation)
On a single photo page there’re much more shortcuts
Atlassian Confluence
or Checkvist
Draft
Google Docs
Checkvist
Atlassian Confluence

One-line takeaways

  1. Don’t override native browser (or OS) shortcuts.
  2. Support standard shortcuts that don’t contradict the previous rule, and use one or two letter shortcuts for other actions.
  3. Always have a consistent system.
  4. Pay maximum attention to discoverability.

Pictures, conversations, and digital products. https://jetbrains.com, https://checkvist.com

Pictures, conversations, and digital products. https://jetbrains.com, https://checkvist.com