How to suggest keyboard shortcuts in a web app?
July 15, 2009 8:36 AM Subscribe
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?
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?
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
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
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
posted by valadil at 9:27 AM on July 15, 2009
Best answer: 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
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]
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
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
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
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
This thread is closed to new comments.
posted by matthewr at 8:48 AM on July 15, 2009 [1 favorite]