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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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.
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).
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:
(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:
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).
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:
With all these prerequisites what we should then do to provide a good experience for keyboard aficionados?
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.
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)