How to suggest keyboard shortcuts in a web app?

July 15, 2009 8:36 AM

Have you seen any clever ways that keyboard shortcuts have been exposed or suggested?

For example, if you press Alt in Word it'll float tooltips over available shortcuts, most desktop windows show shortcuts beside actions, and I remember Gmail used to list a selected few at the bottom of their app.

Have you seen any other clever ways to suggest shortcuts, without being obtrusive?

posted by jacobjacobs to computers & internet (10 answers total)

In most well-designed Windows dialog boxes, UI elements have hotkeys denoted by an underlined character. You can jump to the element by pressing Alt+key. In XP and above, the underlines are only shown when you press Alt.
posted by matthewr at 8:48 AM on July 15, 2009 [1 favorite]

Videogames sometimes suggest shortcuts only after the user does something the "long" way a few times. This context-sensitive suggesting is a very clever and good practice, since it's never in the way, at all, if you already know and use the "short" method.
posted by rokusan at 8:59 AM on July 15, 2009

Corel Draw and Ableton Live have dedicated information panels for this sort of thing in the bottom of the screen. Select a tool, and there sit a few nice suggestions on how to modify it with ctrl/alt/shift/whatever. Not terribly clever, but very effective.
posted by fake at 9:14 AM on July 15, 2009

I like how google does it. Press question mark to get a list of shortcuts. It's not all that clever, but it gives me my reference exactly when I want it and requires minimal thinking on my part.
posted by valadil at 9:27 AM on July 15, 2009

Seconding the Alt+underline thing.
posted by box at 10:23 AM on July 15, 2009

Adobe suite apps: when you hover over a tool, it shows shortcut key in brackets e.g. Rectangle (R).
posted by rainy at 12:11 PM on July 15, 2009

Seconding rokusan's suggestion.

Let the users do it the "long way," such as using the drop down menu or selecting the tool, three or four times. By then, you can probably assume they will have familiarized themselves with how that tool or actions works, and would presumably like to access it faster.

Then, you can pop up a little box in the corner (like the finished downloading box in Firefox) saying something to the effect of "You can do ____ by using Ctrl+___." Do this three or four times. After that, don't show it again. Either the user will have read it and understood it the first few times, or they don't care and don't want to be bothered.

Many applications do this sort of thing with a dialog box and a check box saying "Don't show this again," but that's obtrusive and interrupts the work flow. By just popping up the box in the corner and letting it go away after a short delay, you are giving the user the freedom to pay attention to it, or just go about their business.
posted by arcolz at 12:17 PM on July 15, 2009 [1 favorite]

jacobjacobs: …and I remember Gmail used to list a selected few at the bottom of their app.

Not only that, but much more: if you click on the ‘Google Labs’ button in the top right corner and enable ’Custom Keyboard Shortcuts,’ you can view and edit all 47 Gmail keyboard shortcuts.

Sorry if this doesn't answer the question (I don't know exactly what you're looking for; were you hoping to get a web app to add some shortcuts for you?) but personally I like to be able to set shortcuts for a large number of various actions, so I find scripting works very nicely. AutoHotkey is a very basic yet useful scripting language that accomplishes this pretty quickly and efficiently; for example, in AutoHotkey, to make a box pop up with the message “Hello World!” every time you press Alt-h, you just run a script that says

!h::
msgbox, Hello World!
return

—simple. It's also very well-documented; I find this command dictionary extremely handy. It's not tough at all, and it allows you to make up hotkeys for every situation. I've got a bunch for MetaFilter, in fact: they replace straight quotes " ' with curly quotes “ ‘ for me, auto-format quoted comments (like yours above) for me, and automatically add URLs to links for me. Very handy.
posted by koeselitz at 12:20 PM on July 15, 2009

Oh, see I completely misunderstood the question. Arg. Sorry.
posted by koeselitz at 12:22 PM on July 15, 2009

Uh, the Opera web browser lists the most common keyboard shortcuts right next to the menu options. For example, right-click shows the back/forward/reload/etc. shortcuts on the right side of the menu option themselves; the standard file menu bar at the top shows all the related keyboard shortcuts too. Most people can ignore these when choosing the menu option they want, or they'll just pick it up immediately upon seeing it the first time.

I don't find these obtrusive since they're in the menus where people would normally look for commands, and eventually if a user picks up these shortcuts from the menus, they can skip using the menus altogether, which is what I've done.
posted by Ky at 7:50 PM on July 16, 2009