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

Why keyboard shortcuts?

Overriding standard shortcuts

  • native browser and operation system shortcuts that affect the browser behaviour (not the contents of the web page), like Ctrl+N, Ctrl+O, Ctrl+S, Ctrl+P, Ctrl+W, etc.
  • native browser shortcuts for the page content, like Ctrl+C, Ctrl+Z, Ctrl+F, spacebar etc.

Letters only shortcuts

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

Using letter shortcuts while editing text

Quickly find a command, Google Docs

Quasimodes

  • Aza Raskin has a great (but long!) article explaining modes and quasimodes, definitely worth reading if you’re looking for more theory behind the concept.
  • 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

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

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
  1. Mention shortcuts in the menus:
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

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sasha Maximova

Sasha Maximova

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

More from Medium

Bankai Group wraps up ITW 2022 with an extended outreach and networking.

ReleaseOwl Winter 22 Highlights- DevOps for SAP

My Journey with Dilithe for Java Full Stack Development.(25 April 2022–30 April 2022)

Simple Shell