This is Signal vs. Noise, a weblog by 37signals about design, business, experience, simplicity, the web, culture, and more. Established 1999 in Chicago. Visit the Product Blog for more information on our products.

Why HJKL ? The Big Picture uses them as well Are they a holdover from a long forgotten text editor? J as next and K as previous still don’t map correctly for me.

Regardless, as a ffffound user I find them wonderful to have, and I was considering implementing this on my own site, now I can!

You can see the same type of effect on We Love Typography and also on my site Get The Eye.

I forgot to mention that those sites use the arrow keys instead of the hjkl keys.

Long forgotten text editor? VI lives! :) These keys can be used for navigation in many *nix programs.

We’ve been mapping the left / right arrow keys to the next page / previous page links in our sites for quite some time now.

I agree with Jake that the HJKL keys don’t seem the most obvious choices.

Using the left/right arrow keys is a bit fiddly with focused form field where you might use those keys, but other than that we’ve experienced very little undesired behavior.

Can anyone think of any reasons why using the arrow keys might be a bad idea? Do any browsers already assign shortcuts to those keys that you know of?

J and K are also bad choices because they break when Firefox has “search as I type” enabled (though Google Reader overcomes that somehow). The rarely-used left/right arrow keys are much safer.

I just had to look it up.

It turns out that vi was developed with this keyboard: Keyboard for ADM3A terminal.

And then vi went on to become the main Unix editor for a long enough time, so that other editors picked up those shortcut keys.

(the code is on github here)

Thanks for posting this Ryan (!), as mentioned in the comments on your much earlier post – there is a reason for using jkhl (see some of the comments summarised below)

In any case, people will have their own preferences/ideas as to how this should work, I simply chose what seems to be the accepted default right now.

Also my code on github is abstracted with a config object for changing which keyboard shortcuts do what (using HotKey.js for handling key events)

Why jkhl?

”... because j and k are on the home row. Most keyboards have a little nubbin on the j so you can find it by touch. There’s also some precedent for the pair. j and k move the cursor up and down in vim for example.”

”.... Google reader uses the same keys. ...”

”... The j, k, l, and ; were the movement cursor keys in vi. So you should probably ask Bill Joy. He started this trend 1976…. “

”....Earlier computers had no need for arrow keys, so all the basic vi commands use keys you’d find on a very limited keyboard….”

”....But they’re also very nice since it’s where the right hand sits when you’re a touch typist. j and k take almost no effort to type…”

”... page up/down and cursor keys are not always available on every keyboard, or can be hard to find on laptops or shortened keyboards …”

I think there is a interesting article to be written about application design and how it’s moved from those little monochrome screens with all keyboard navigation (high speed & high learning curve) to “slick” GUI ’s (low speed, low learning curve) and now, maybe to a best of both worlds.

If I were a better writer I’d give it a go…

Can anyone think of any reasons why using the arrow keys might be a bad idea?

You have to move your hand to use the cursor keys.

Can anyone think of any reasons why using the arrow keys might be a bad idea

The up and down arrow keys are already mapped to moving the page up and down incrementally in all browsers.

Remapping them could cause confusion and also remove existing functionality for moving a page up / down

But can anyone tell me why in the world h and j are used for next and k and l for previous? What happened to left-to-right navigation? This has always bugged me with Google search (experiments), and I even remapped the two in Gmail, because it just makes so much more sense…

There’s a reason gamers use WASD for games… the right hand is usually on the mouse.

I second random8r. It makes no sense to use keys on the RIGHT side, because that hand is on the mouse for web browsing! I think in this case, the WASD paradigm makes much more sense.

Also second breaking in Firefox with quick search turned on.

I like the idea of trying to bring quicker browsing via keyboard shortcuts, but would rather see people work on developing UX to make such things unnecessary.

now with added JQuery support and library abstraction, (latest at github)

On Russian websites a de-facto standard for using Ctrl+left/right as pagination shortcuts has emerged.

It’s a bit more work for fingers than HJKL or ASDF but is more intuitive and less likely to be pressed by accident.