Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.)

share|improve this question

migrated from programmers.stackexchange.com Feb 15 '13 at 17:03

This question came from our site for professional programmers interested in conceptual questions about software development.

    
I remember it being &Save myself, although that was Visual Studio. –  Joe Z. Feb 15 '13 at 14:21
    
I nuked the wpf tag since, as a UI question, I don't think it's necessarily relevant, but feel free to add it back if you're asking about this convention in that context. (we do have a wpf tag, I just prefer to use it sparingly) –  Ben Brocka Feb 15 '13 at 17:10

3 Answers 3

up vote 9 down vote accepted

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.

enter image description here

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:

enter image description here

With shortcuts:

enter image description here

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:

enter image description here

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.

share|improve this answer
    
What does Ctrl+E, Ctrl+D do? –  StuperUser Feb 15 '13 at 14:00
    
For buttons and options like the ones in your "ugly example" often Mnemonics are used. Underline one character and trigger the shortcut with Alt + the underlined character. –  Laoujin Feb 15 '13 at 14:07
    
@StuperUser: in Visual Studio? With my configuration, it auto-formats the source code. But this may not be the case for other people, given that the configuration depends of what was chosen when originally installing VS, and that every shortcut may be changed later. –  MainMa Feb 15 '13 at 14:24
1  
@Laoujin: The poster of the original question already knows that and already uses mnemonics for Alt-type shortcuts. –  MainMa Feb 15 '13 at 14:25
    
I love how the Ribbon exposes the shortcut keys, definitely a great way to show the information to power users, but it has a discoverability problem (which the ribbon of course solves by being clickable w/ icons). –  Ben Brocka Feb 15 '13 at 17:06

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.

share|improve this answer

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

Total Commander screenshot

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.