3

I am developing an intranet web application and have added in a couple of hotkeys such as "expand all". I have made sure to not use any of the same hotkeys as the browsers are already using. I found it interesting that the only way to find out what the existing browser hotkeys are was to dig deep into the help file.

My question is - what is the best way to disclose the hotkeys that we have in our site?

We do not have a help file, and I don't believe that this is the best way. Not everybody even knows that these kind of hotkeys exist and I am certainly not expecting people to look for this info on their own.

Improve this question
1
  • I assume you show links/buttons to offer same functionality as offered by the hotkeys. In that case how about using tooltips to inform users about corresponding hotkey.
    – Aziz Shaikh
    Nov 14 '12 at 14:05
6

I answered a similar question a while ago, here are some insights from the relevant part of the answer:

The big challenge about keyboard shortcuts is to make them learnable and discoverable. The former can be addressed by following conventions and "mnemotechnics", ie. HJKL for navigation, F for "Favorite" and L for "Like" and for the latter I can see two possibilities:

  1. Dialog/Alert Boxes: A good idea could be to make sure the user understands and uses the site regularly (via cookies, tracking, etc) and then show him a dialog box suggesting to use the advanced options.

9gag does this, although I think they do it right from the beginning:

9gag Shortcut Onboarding

  1. ? to show all the shortcuts: A very common pattern is to use ? (ie. Shift+/) to show a list with all the shortcuts, you can try it on Gmail, Twitter, Trello, etc. As a counter example, when the applications don't provide a quick and easy way to discover the shortcuts people tend to not use them, that happens with Tubmlr and Facebook.

Twitter Shortcuts

Interesting Resources

Improve this answer
2

One way to do it would be to alert the user with a unobtrusive notification somewhere on the page that says "hey, we've added some keyboard shortcuts for your convenience".(I've found the top center to be the best place to do this in my experience).

In this specific example, the text says "Did you know you could use keyboard shortcuts in this app? Go ahead, hit Alt and see what happens." Check the visual below.

enter image description here

Note that I've added a close button in the notifier section to let the user dismiss the alert. And if necessary, you can even add the "Don't show again" option in there.

And once the user hits "Alt", you can show the keyboard shortcuts overlaid on top of the controls they apply to. In your example, if they apply to an accordion control, display the tips on top that control.

In the visual below, I've displayed "Ctrl + t" on top of the Campfire image.

enter image description here

Once the user hits "Alt" and sees the tips above, you can change the text on the alert notifier to indicate that they can hit "Alt" again to dismiss the tool tip text. I've changed the background color of the alert to make sure the user notices that the text in it has changed.

This way the app offers helpful tips (no pun intended) but the tips themselves are unobtrusive to the user causing little resistance.

Hope that helps.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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