Victor Tsaran | guitars | music | technology | and more

Providing keyboard shortcuts in dynamic web applications is becoming an increasingly popular feature on the Internet. A robust keyboard access is useful not only for users who cannot use a mouse, but also for those who prefer not to use it (for example, heavy typists or programmers). Two of the most prominent examples of such applications are Yahoo! Mail and Flickr photo sharing service from Yahoo!.

Just as necessary it is to provide a set of intuitive keyboard shortcuts for complex applications, it is equally important to make sure that users can actually discover their existence and understand what the shortcuts do. Traditionally, the shortcut keys are communicated by ways of tooltips and/or by listing them on „help“ pages. Gmail, Yahoo! Mail and others introduced a ? (question mark) as a shortcut key to pull up the list of available keystrokes. Flickr team decided to go a bit further and turn the exercise into a somewhat playful experience.

Here are the steps to get to play with Flickr's „Shortcut Keys Panel“:

1. Go to Flickr web site and login with your username/password.
2. Once logged in, press a SHIFT+SLASH (question mark) keystroke.
3. A cute-looking keyboard will pop up and you will be focused on a checkbox to enable keyboard shortcuts which is already checked for you.
4. At this point start pressing various keys on your keyboard to experience shortcuts and what they do.
5. The keys will be highlighted on the screen and, if you are using one of the modern screen readers, spoken to you along with the functions they perform.
6. When you are done, press the ESCAPE key to dismiss the on-screen keyboard.

Please note: the keyboard shortcuts are context sensitive, so you may see a slightly different list depending on the page you are viewing.

What do you think of this way to expose and teach the user about available shortcut keys? leave your comments below.