Web Aplications with Keyboard Shortcuts

by Blackstone Media on May 18, 2009

I discovered this on the site and thought, “Wow, talk about offering users more responsive and interactive user interfaces, this is sure one cool technique.” Just as with classic applications, this little feature of integration of keyboard shortcuts for navigation can significantly improve the work flow for users and make it easier for them to find what they are looking for. (Rick, I think you will find this site interesting.) uses shortcuts for basic navigation. Users can switch from thumbnail view to to list view and vice versa using “v”, back to top with “h”, previous “k” and next “j” through images.

My guess is, that shortcut keys should be logical or self explanatory.  What I mean is that it wouldn’t make sense to make the shourcut letters for “previous” and “next” too far apart from each other on the keyboard. There should probably be some common conventions for keyboard shortcuts used throughout variouse websites. But of the few sites I’ve found, I see none.

How are shortcut keys setup. This might be best answered by Chris. But, what I’ve discovered in my research is, let’s take for example: All images in the gallery are labeled with the class bpImage in the markup, with JavaScript pointing to them. The onKeyPress event triggers the scrolling window in the background and the window’s browser is manipulated wsing the window.scrollTo() function. Here is the XHTML:


The JavaScript:


I’d like to see shortcuts implemented in our new site design. However, I think we need to clearly make sure to clearly communicate that keyboard shortcuts are available and that they can be used to perform certain task more efficiently. I haven’t seen any navigation like this on any websites that I’ve come across that utilize shortcut keys, but I think it would be a good idea to include the shortcut commands in the navigation. Like so:


contact us

find out what Blackstone can do for you

Louisville 502.276.7921 455 South 4th Street, Suite 910
Starks Building
Louisville, KY 40202 directions
New York 212.951.0834 1 Rockefeller Plaza
11th Floor
New York, NY 10020 directions
Facebook Twitter Google+

no spam here. scouts honor.