Designing for efficiency—keyboard shortcuts

There are many applications, websites, and digital media that strive to get your attention, allow you to be creative, and create a plausible experience. But more often than not, users don’t really care about building a relationship with a piece of software, they just want to get their job done. This is especially true for digital tools in the B2B world. There you don’t only want to work efficiently, but you also want your colleagues and employees to have the right tools for efficient work. Only then they can do their best.

Why keyboard interaction and shortcuts help with efficiency

Keyboard interaction helps you to be more efficient, since it takes less time to perform a keystroke over pointing and clicking on an object on the screen. Particularly, a keystroke seldom takes more than 0.3 second^[1] while a point-and-click interaction heavily depends on the item to be clicked, but can often take a second or more^[2]. Therefore we can assume that using a keyboard over a mouse can make us about three times faster. Also, moving hands from mouse to keyboard and back takes significant time.

Where it’s convenient to use shortcuts

There are several applications where it’s especially useful to allow keyboard interaction with shortcuts:

• When typing is the natural part of the action, eg. when using a text editor, IDE, or filling out a form. This is because the user won’t need to move his hands from the keyboard to the mouse. This can save some time and attention, too.
• When the action requires a lot of input, not necessarily in a form, eg. a table or any kind of setup.
• In software that is used for a significant part of the day, like accounting software, project management tool, or Photoshop. Even a little moment saved with every action can make a huge difference at the end of the day.
• For actions that tend to be repeated, like show next email or move the object to front or back, when working with a graphics editor. The more the action is repeated, the more time can be saved.
• For actions that do not require too much thinking. Thinking takes time which allows you to use even a clumsy UI while your mind is occupied. When the action is simple, a clumsy UI hurts more.

Types of shortcuts

As a product designer, you’ll probably be focused on the product shortcuts, but you should keep in mind how the other work, too.

OS and browser shortcuts

You are probably pretty familiar with many OS and browser shortcuts like CTRL+C, CTRL+V, CTRL+N, and CTRL+F. Keep in mind there are quite a lot of them and they may be useful and already functional in your application even if you weren’t fully aware of it (see shortcuts for Windows, Mac, Chrome, Firefox, Edge, IE, Safari).

Do not disable or change any of OS or browser shortcuts. If you are thinking of disabling or changing some of them due to security reasons (eg. disabling paste for enter password field) you may not only make the usage more annoying but also less secure in the end ^{[3] [4]}. Always try to find alternative ways to achieve your goal first.

You may think you should change these shortcuts in case you keep the existing functionality while significantly enhancing it (eg. opening a custom search field with additional functions when pressing CTRL+F in a browser). This may work, but make sure your solution is as robust as the default one. Also, for search, it’s better to use a separate search field on your site and use / as the shortcut for focusing the field.

Product shortcuts

Product shortcuts are specific for a product or a family of products (eg. Adobe products or Atlassian products). They can either work in the whole product or in a particular context or section and we can distinguish:

• Basic actions, like special kinds of saving, basic video or sound interaction (eg. CTRL+SHIFT+S for ‘save as’ in most graphics products or SPACE for playing and pausing video or sound);
• Changing focus, especially in web tools and products. An example can be using / for moving focus to search field on Facebook;
• Changing tools, like pressing and holding SPACE in Adobe family for changing actual tool to move;
• Changing product location, when a shortcut takes you to a particular space in the product, like CTRL+SHIFT+M in IBM products takes you to messages,
• and Product-specific actions which perform an actual action, like COMMAND+N creates a new note in Evernote.

These can either be a single key, combination of keys (whether you need to press them all at once or in a specific order), or holding a key while you’re using the mouse.

Contextual shortcuts

As you can guess from the title, contextual shortcuts are only available in the particular context of the product. This can either be in a whole section of a product (e.g. an article in a content management system or invoices section in accounting software) or a specific UI element like text field, modal, wizard, calendar and so on.

How to create new shortcuts

When you are creating new shortcuts in your product, there are some good practices:

• If there’s an existing shortcut for that in a similar product, just reuse it. Check defkey site and this list of shortcuts to find what’s existing.
• Do not override OS shortcuts and browsers shortcuts (better check all major OSs and browsers your audience uses). In case there might be a user with a screen reader^[5], make sure to avoid common screen reader shortcuts like G, Q, H, L, or R.
• Do not use shortcuts that are similar to OS and browser shortcuts (eg. CTRL can easily be confused with ALT when the shortcut is used not so often).
• Avoid shortcuts consisting of too many keys. They are difficult to remember.
• For the general audience, prefer shortcuts consisting of letters over CTRL, ALT, SHIFT and COMMAND. This will help you to avoid OS and browser shortcuts collisions. Also, it’s easier to remember them as the user could confuse which modifier to use and you can use starting letters of the actions you want to perform, even a combination of letters if there are more of the actions (G, then M for ‘go to messages’)^[7]. However, the easier the shortcut is for remembering, the easier it can be accidentally invoked which lessens accessibility. Therefore, you may still want to use the modifiers.^[8]
• Do not use shortcuts for destructive actions as they may be invoked accidentally. Use an undo option for action shortcuts.
• Document unique keyboard shortcuts and make them visible for the user.^[9]

Shortcuts for text editing

When editing text, the need for shortcuts changes from the rest of the product, especially when many of the shortcuts consist of letters. There some options how to cope with that:

• Have shortcuts to exit text mode (ESC for edit pages, ENTER for form fields) so you can easily get to the context where you can use regular shortcuts, or
• allow to use shortcuts even when editing text. There you again have two options:
  • Modify the general shortcuts so they don’t collide with the characters you want to type, eg. add a modifier (this will change / shortcut to ALT+/ when you want to refocus to search field)
  • Keep the general shortcuts and use markup for the symbols you use as shortcuts, eg. when / refocuses to the search field, you will need to write ‘>/’ to use ‘/’ in the text.

Commonly used shortcuts

Some of the existing shortcuts became so common that your users may automatically try them in your product without the need to learn anything.

Working with files and items

Navigation

Messaging

Working with video

Discoverability

Once you have your shortcuts in place, make sure they are discoverable. They don’t need to be very visible, though, since you don’t want to disturb novice users. Most common places to show them are menus and tooltips on buttons. These are useful since the user can learn about them without actively trying to find any shortcuts.

Less common, but similarly (if not even more) useful are tips in modals, pages and in context you may need to use a shortcut. They can also notify you on how to do the action you already did in a more efficient way next time.

A cheat sheet can tell you about all shortcuts available in the software as well as in the particular context. It’s useful to have it not only available under ? button, but also from the UI where the user may find it without knowing about shortcuts at all.

But what about the experience?

Maybe shortcuts are not as visible as neat graphics, they actually really help with experience. When used well, they have the ability to turn the frustration from repeating tasks and complex systems into the feeling of capability and control. And at the end of the day, that often matters more than beautiful graphics and it’s often way easier to implement it, too.

See also

• Sasha Maximova on choosing keyboard shortcut with more detailed explanations
• Anna Kaley from NN group on how shortcuts fit into UI copy and what are the basic principles
• List on various shortcuts across the most common web products
• Database of shortcuts from more than a thousand programs and games with decent cross-search options

References and notes

^[1] Dawn Xiaodong Song, David Wagner, Xuqing Tia: Timing Analysis of Keystrokes and Timing Attacks on SSH, page 6.
Note: This is not a research particularly on average keystroke but provides enough data on keystroke pairs where most of these pairs took less than 150 ms and almost all were under 300 ms. Therefore I believe it’s safe to assume a keystroke shouldn’t take more than 0.3 s.
^[2] R. William Soukoreff, I. Scott MacKenzie: Towards a standard for pointing device evaluation, perspectives on 27 years of Fitts’ law research in HCI
Note: There’s even harder to get a proper reference on totally average point-and-click interaction time, but this study can give you an idea what such interaction can take, based on different results from studies based on Fitt’s law and alternative theorems:
^[3]Sacha B, The National Cyber Security Centre: Let them paste passwords
^[4]Troy Hunt: The “Cobra Effect” that is disabling paste on password fields
^[5]In case your target user is somebody else than a pilot or a driver, there's quite a chance some of your users use a screen reader. Around 20% of people from US accesing web sites have some kind of disability and it cannot be easily tracked in analytics. Tim Frick: How Many People With Disabilities Use My Website?
^[6]Andrew Nevins: Learning common keyboard shortcuts for screen readers
^[7]Sasha Maximova: J, K, or How to choose keyboard shortcuts for web applications
^[8]IBM developer guidelines: Checkpoint 2.1.4 Character Key Shortcuts
^[9]IBM developer guidelines: Accessibility and Compatibility Features