Keyboard shortcuts for blog navigation

Question

Actually this is inspired by 9gag.com's browsing style and as well as some Google sites (like Gmail and Reader.) These sites use keys like J and K keys as a way to browse through posts -- probably it's positioned where the right index and middle fingers are supposed to be when using the keyboard.

With that, is it recommended (or is it even necessary nowadays) to use such keyboard shortcuts for navigation? Up and Down keys are also fine. But regardless, how do I make the users aware that such functions exist?

Answer 1

Yes, I would recommend using keyboard shortcuts for scrolling to specific breakpoints if you have compelling content that can be scanned or viewed in rapid succession (photo blogs are a particularly good example).

Is it necessary? No, but bare in mind that it does provide additional accessibility. Some people have trouble using a mouse or otherwise scrolling - providing an alternative means to reveal new content in a convenient manner can only help.

I would recommend not overriding the Up and Down keys as users already have some expectation of what they do.

Making the user aware could be as simple as telling them :) The Boston Globe Big Picture photo blog just has a hint at the top of the page.

Answer 2

With that, is it recommended (or is it even necessary nowadays) to use such keyboard shortcuts for navigation?

It is always a good idea to provide users, and specially power users, advanced options that allow them to improve their experience by making it more efficient and thus faster to perform frequent actions, and keyboard shortcuts are an industry standard to do this. You can see them in operating systems (eg. Alt+F4), desktop applications (eg. F5 or Ctrl+R on browsers) and also inside web applications.

Keyboard shortcuts aren't constrained to navigation, they can be used for different actions, for example liking an item, closing an overlay, etc.

Up and Down keys are also fine.

As Matt said, modifying the standard behavior of the keys can be a little bit misguiding. You should be aware of being consistent and follow conventions, it might seem obvious but if you map Ctrl+C to something different than Copy it will cause problems for some users that are used to that shortcut, that's why using J and K tends to be the best choice for navigation.

As a quick side note, the usage of J and K is related to the fact that some of the first computer keyboards didn't have arrow keys and those functions were mapped on the HJKL letters.

How do I make the users aware that such functions exist?

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:

2. ? 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.

Interesting Resources

• The Web is the new Terminal: Are you using the Web's Keyboard Shortcuts and Hotkeys?
• Whitepaper: Keyboard shortcuts and Usability