Industry standard for button captions that use a Function Key as the keyboard shortcut

Question

If I have a button that has the caption _Save then when it shows up on the screen it will show the S as underlined.

This tells the user that Alt+S will make that button "press".

But what is the industry standard for something that runs off a function key?

We have started doing something like this: Save (F7)

But I can't recall seeing that in other applications. Is there an accepted/elegant way of conveying the short cut on the button?

(Note: We do have a hint that will tell the shortcut. However, this question is about telling the shortcut for the button without "hover effects"/tooltips.)

Answer 1

For the menus, the standard is to display the shortcut at the right of the command (and probably at the left for RTL locales). Example: Photoshop.

For the buttons and similar elements, shortcut keys are not displayed for a good reason: there is no enough visual space for it.

Don't forget that shortcuts should be configurable (especially if the default ones are chosen inappropriately, like in your case where Save command is mapped to F7 instead of Ctrl+S in the English version). What if the user chooses something like Ctrl+Shift+E or "Ctrl+E, Ctrl+D"? How would you be able to display that in a button?

Even with short keyboard shortcuts, visual clutter is terrible. See it yourself:

Without shortcuts:

With shortcuts:

How unreadable and ugly!

If you have actions which can be accessed through buttons and similar elements, but those actions are inaccessible through the top menu, then you may use one of those alternatives:

First alternative: tool tips

If the top menu doesn't provide Save command in your case, you may want to display a shortcut at the end of the tool tip.

Note that even in the tool tip, the shortcut is both unexpected and annoying. Users who are not familiar with keyboard shortcuts won't use them in all cases; users who are familiar with shortcuts will search elsewhere, for example in the top menu or the documentation.

Second alternative: on click

Another alternative corresponds to what is actually used in Microsoft Word since Office 2007. The Ribbon made ride of the top menu, but at the same time made it impossible to display shortcuts because of the lack of space. Still, the user can easily see the shortcuts by pressing the Alt key:

The designers of Ribbon made an outstanding work of redesigning the shortcuts usage:

• Instead of having to press multiple keys, like Alt+(F, O), you simply press Alt key then F, then O, making it possible to call anything with just one digit (having to press multiple keys at the same time can be difficult for some users and is an accessibility issue).

• You can access any part of Ribbon through consecutive keystrokes by using only Alt. Alt, R, J, D (reject all changes in a document) is pretty easy to remember if you have to do it frequently. It's much more difficult to remember if some shortcuts are starting by Alt, some others by Ctrl, some others by Ctrl+Shift, etc.

• Ribbon assists the user visually by reacting to the keystrokes while being in keyboard shortcuts mode.

  For example if in Visual Studio, if I forget what the keystrokes Ctrl+E, Ctrl+D do, the only way to find the answer is to use them and try to figure their effect from the result.

  In Microsoft Word, on the other hand, if it happens to forget what Alt, N, Q, F do, I simply press Alt, N, Q, and see where am I.

Answer 2

You should consider the function button mapping conventions of other applications, and within operating systems themselves, in case the user gets a unexpected response from a particular key. For example, F7 is typically used to run the spell checker function (in MS Windows at least), especially in word processors and other applications where text entry plays a central part. Other examples are F1 for Help, F2 for Edit or Rename, F4 for Redo and sometimes Find (where Ctrl+F runs a different function to Find), and F12 for Save As. These are the most universal examples I can think of and therefore most likely for the user to expect a different function to the one that your application will run.

Have you considered a way to show all keyboard shortcuts to the user in one go? E.g. a Keyboard Shortcuts option on the Help dropdown menu, or a list on the main help page shown by pressing F1, or a list shown by pressing "?" as in GMail.

Answer 3

Total Commander does something similar (look at the bottom):

In this case, the keyboard shortcut is first, because that's the primary way you're meant to use it (and because it mimics older DOS file managers), actually clicking on the button is the secondary way.