How to expose the keyboard shortcuts of a web application to the user?

Question

I just added some basic keyboard shortcuts to a small website I am developing. I am wondering what is the best way to expose these to the user? I noticed that Gmail shows an overview if you press ?.

Is that the best / typical way to do it?

Answer 1

Tl;dr: Use tooltips.

---

I agree with Adriano that the way Google does it in Gmail is one of the worst way to expose keyboard shortcuts to users. Why? Because a giant list of every shortcut provides absolutely no context. In order for a user to begin to use keyboard shortcuts, he has to go to the list, find what he needed buried among a bunch of other non-relevant keyboard shortcuts, and then memorise it. If the user forgot what it was, he needs to go back to the list and find it again.

For an example of this style of keyboard help well done, take a look at Stack Overflow's shortcuts help, which is, in fact, contextual, unlike Gmails. See the bottom of this answer for a screenshot.

Now I know from checking your question history that this answer is not going to solve your problem specifically (if your shortcuts are limited to J and K and only serve to scroll the page, then I think you can safely assume that nobody but you will use these shortcuts), but it does answer the question as it relates to keyboard shortcuts on the web in general.

I suggest sticking with what users already know. Take Windows, for example. The OS is sprinkled with shortcut keys literally everywhere, many of the context-specific ones are always visible (almost, see below), and they don't interfere with the UI at all. They are so unobtrusive that people who only use the mouse won't even notice them.

Single Letter Access Keys

Frequently, web shortcut keys are one-letter access. For example, pressing the S key in GitHub focusses the search bar (I only know this because I have a BlackBerry, and in the BB10 browser the S key opens the Find on Page tool and this interferes with that--otherwise there's no indication of this except from the ? tip sheet). In Windows, nearly all context menu items and dialogue buttons and options have one letter access keys that are indicated by underlining the corresponding letter in the label. Menu items are activated by pressing just that letter, while dialogue windows use Alt+letter. (Later versions of Windows require holding Alt to show the underlines, unless the option to always show them is enabled in Accessibility Settings.)

(I would show you a screenshot of the context menu too, but I'm running the Windows 10 Insider Preview and Microsoft seem to have broken them in this most recent version.)

Single letter access keys work well for the web because web apps are usually much simpler than their desktop counterparts, and the action can almost always be activated with the mouse too. That means that it is easy to throw in an underline for a character in a label, or a tooltip over a button.

Furthermore, single-letter keyboard shortcuts have the advantage that they do not interfere with browser or operating system shortcuts (in most cases: see GitHub and BB10 above for the exception).

Multi-key keyboard shortcuts

Some of the most common muli-key shortcuts are completely ubiquitous, so if you have them on the web, you shouldn't change them, and you don't always need to document them. That means Ctrl+B for bold, Ctrl+I for italic, Ctrl+A for Select All, etc. But others will need to be explained to the user somehow. You can't use the underline trick in this case because that only covers single letters. So in this case there are several options:

1. Gmail-style, show a list of all keyboard shortcuts.
2. Show a tooltip when you hover over the mouse control (e.g. button).
3. Show the shortcut beside the menu item, a la Notepad below.

(Note that in this screenshot there are in fact two types of keyboard shortcuts displayed: context-specific access keys (work only when the menu is open), and non-context-specific shortcuts (work anytime).

Clearly, #3 won't work on the web, because the usage of "menus" like in Notepad is rather limited or non-existent. And Gmail's solution is poor, as explained above. So we're left with #2. Using tooltips for this purpose is actually quite common: even Stack Overflow does it in its editor. And it is very elegant. It doesn't clutter up the UI, and it's there whenever the user needs it. It is discoverable, because tooltips are well-known, and once they find out that one button has a tooltip, they'll know that others probably will too.

The only problem with this is that tooltips do not work on touch screens. However, since the user is using a touch screen, that probably means he's on mobile and that he doesn't have a keyboard in front of him, and so it is not really a problem because he cannot make use of those keyboard shortcuts anyway. There are exceptions to this, obviously, such as BlackBerrys and touch screen laptops such as the Microsoft Surface, but those are edge cases that can be safely ignored.

Perhaps even more important, it is dead simple to implement tooltips. It is simply a matter of setting the title attribute on the HTML element in question.

Here is another example of tooltips well done, even though it's on the desktop (in Microsoft Word):

---

One more thing. Using tooltips doesn't rule out Gmail-style help sheets. In fact, if you can, do both. Some power-user shortcuts such as selecting the first, second, third, etc. option by pressing Ctrl+1/2/3/... simply can't be explained any other way. Plus, putting the shortcut tip sheet behind ? is not something new. Even though not a lot of people know about it, there are a few high-profile sites such as Gmail and GitHub that do this. Just make sure that there is some other way to access this help sheet other than by pressing ?.

I just realised that even Stack Overflow has a ? help sheet (it seems that of all the SE sites, SO is the only one to get these keyboard shortcuts for some reason). You may have to enable them in your profile settings first. Here's a screenshot:

Answer 2

I noticed Google shows an overview if I press '?'.

It displays keyboard shortcuts as an help page where you have all of them, one after the other. It's kind of on-line help.

Is that the best / typical way to do it?

There isn't a standard or typical way to display keyboard shortcuts on web. In my opinion what Google does is the worst way (second only to do not provide any help at all).

• There isn't anywhere an indication that ? will open that help page. If you need it you have first to click Settings menu (!!!), open Help and then search inside help for that list.
• You see all available keyboard shortcuts. No more, no less. It doesn't matter if they're available in the page (or status) you're now.
• GMail has few keyboard shortcuts but for a bigger web application list may be incredibly long. From Google a small search box would be a nice favor (at least I don't have to read them all to find what I need).

Is there a more proper way to provide keyboard shortcuts?

I think it's possible, also keeping in mind that they may be more or less important according to your intended audience. First few points to remember:

• Casual e-mail client user may not use any keyboard shortcut but a power-user of, for example, a power plant dashboard may use those shortcuts to speed-up his work. They must be easy to reach for power users but unobtrusive for the others.
• Even power-users won't use only keyboard shortcuts. They'll probably mix mouse and keyboard interaction (according to their habits and where their hands are). Keyboard and mouse must interact with each other seamlessly.
• Every single action must be available regardless your input method. Mouse gestures, touch, keyboard navigation/keyboard shortcuts: there must not be only one way to perform an action. This is especially important for users with visual or motor impairment.
• Users will learn to use keyboard shortcut then a progressive approach and features disclosure may help them to learn.

With all these prerequisites what we should then do to provide a good experience for keyboard aficionados?

• A pop-up help page may be appropriate, unfortunately we can't use F1 to open it then ? may be a nice fallback.
• Do not rely only on a keyboard shortcut to open keyboard shortcuts help. There must be an always visible button/link to open that page. If you have fat footer then it may be a nice place for that.
• You may consider to display keyboard shortcuts for visible elements when user presses an hot-key. For example when he presses SHIFT small popups will appears near each page item, describing keyboard shortcuts you can use. Right hot-key isn't an easy choice, I suggested SHIFT only because it may happen they press it by case, discovering this hidden feature. It may also improve their feedback for your application because of this easy to discover feature (do you remember Don Norman?) About this see also the other answer: if it's applicable then use tool tips! It's not always possible for complex controls but it's better than nothing.
• Do not show every possible keyboard shortcut in your application. Never. Full categorized list can stay in your on-line help but in this quick pop-up help you must show only currently available shortcuts.
• Categorize shortcuts. If you have a really long list and category is arbitrary then also provide different presets for grouping and a natural ordering (even alphabetic is OK).
• Provide a small search text box. You can skip this if you have just 5 or 6 shortcuts.
• Note that search may also match aliases and similar words. Moreover it has to work also for paged (not scrollable) content. This is what makes search box different from plain Find that your browser offer for in-page searching. Again this is useful only if you have enough shortcuts.

I know, it is a lot of work just for keyboard shortcuts help. Alternative is to put a small section in your on-line help where you briefly describe them all. Which one is better? It depends on who your users are.

Answer 3

Just refer the google inbox for web on providing the shortcut, you will get better idea. They have consolidated all shortcut to a modal page. It's easy to understand, the way they placed the shortcut list is clear and easy to scan. ( we don't read the text, but we scan - cognitive process of scanning text)

Refer the attached screenshot for more info

Answer 4

If it's a small website Dribbble is a good example. They have a simple minimal bar at the bottom of shot pages to highlight the shortcuts you can use.