You’re reading Signal vs. Noise, a publication about the web by 37signals since 1999.

Google had those same keyboard shortcuts in Mail and Reader for quite some time. Seems like fffffound just took them.

The Big Picture at Boston.com implemented this a while ago and I have to agree that it’s one of the most brilliant design decisions one can make when developing an image-based site.

There’s even a bookmarklet to let you do the same thing (without the nifty pagination features) to just about any site.

Wanna give me an invite? Pleez? @beamercola

I’ve enjoyed the same shortcuts, on The Big Picture.

The addition of pagination to the keyboard shortcut though, that’s genius. Love it.

I thought this was clever about 12mts-1.5yr ago when Google Reader did this… Useful nonetheless.

I wonder if they’d consider a little script that would measure the height of a user’s window & (if the image is too tall) adjust the image’s height accordingly (while still establishing a minimum height, so they don’t shrink too much).

Ony an engineer / power user would be so obsessed with keyboard shortcuts… I don’t really see why this is that cool for regular people.

Opera does the pagination automatically ON ANY SITE ! Just hit the space bar :)

Opera > *

yup this is borrowed from Google Reader. Google reader uses the same keys. Reader also does a similar thing with pagination—but instead of loading a new page, they dynamically load more results once you get close to the bottom.

Hashtags has similar keyboard navigation for browsing. Including navigating the menus and tags themselves. Just an FYI

I like the way they write the shortcuts on top so everyone can know about them.

@Ted: huh? Ever heard of Vi or Vim???

Awesome. We do the exact same thing on powerset.com – just enable keyboard shortcuts using the toggle to the right of the search bar (on a results page).

Why j/k? Why not, for instance, +-?

Great post just wish i could try it out for myself. So I will ask nicely does anyone have an invite to ffffound? I have been looking & posting for a long time now. I am beginning to think maybe i am just not cool enough to join the club….. :(

I think GReaders approach with no pagination is even better – content which changes every few seconds is worse than useless to paginate (compare it to 4chan pages – once you hit Page2 you will see the same contents of Page1 because of the massive input). But might be a bandwidth issue of course.

However, there seems to be a bug, at least in Safari. ‘j’ will take me to the next image if I keep pressing it frequently, but if I stop to look at an image for more than about a second and hit ‘j’ again, it takes me back to the top of the page.

Yep, nothing new under the sun. Specially coming from a site where general usability seems to be conspicuous by its absence, even if you look into the bright side and try to focus on small tiny details like these.

I had never seen this before and don’t use Google Reader so this was great.

The interesting thing about UI (both User Interface & User Interaction in this case) is that it doesn’t matter if it’s brand spanking new and innovative.

The important thing is using the right UI for the right situation. When a task is paired with the proper UI solution/pattern it is a strong design. So whether or not this is the first time you’ve seen this particular interaction pattern it is noteworthy for having the appropriate implementation.

I found myself wanting to hit J to move to the next comment here, but unable to do so. That would have been a nice touch :)

That is very nice.

One minor update but its nit picking. I would have chosen ‘f’ and ‘d’ purely generally most people are right handed and therefore the left hand rests on the keyboard and the right on the mouse.

Just a thought.

I love those shortcut keys on Gmail and Google Reader. The pagination is definitely a nice touch. I guess J and K are becoming the standard for this sort of thing.

Why j and k?

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.

I prefer a monolithic flash interface. Bring on the non-standard Previous and Next buttons that reposition themselves with every new image. I’d also like some needless cross dissolves and an unsigned Active-X control.

LOL @ Craig – me too :)

Innovation? LOL

@Erik: Here’s an example of what you’re talking about: quis.cc.

We’re doing the same thing in WordPress 2.7 for comment moderation on the backend. j and k move you around, and then you can e (edit), q (quick-edit), a (approve), s (mark as spam), d (delete), u (unapprove). It makes a tedious chore a great deal faster and less tiring.

I did a Greasemonkey script a while back that lets you navigate any page like this.

It can be configured per-page (e.g. Google to navigate between results) using XPath expressions.

By default, it checks what type of header (h1-h6) is most common and navigates between those.

Great video! How did you make it?

Just watched this and tried the same shortcuts in Bloglines (Beta) and it cycles through posts in a tidy fashion! Awesome! Thanks for the tipoff!

Good idea but implemented sort of counter-intuitively:

Basically they implement a “next” and “previous” functionality. Which actually translates into a “forward” and “back” on the image level. In a browser, those are typically mapped to keys in a “back”= left hand side key and “forward” = right hand side key.

So actually, I don’t understand why they didn’t match “J” to back/previous/up and “K” to forward/next/down.

Am I the only one who pronounces it “fah-fah-fah-found?”

I wonder how much longer the keys on his keyboard are going to last after that pounding? I felt the concussions all the way up here in canuck-land,.

@Jemaleddin I say “fuh-fuh-fuh-found”.

This is exactly what lookbook.nu has been doing for a year, except they have endless scrolling too.

google reader use the same shortcuts. i really hope that this kind of browsing will become a standard for blogs, photos sites etc. .

This could have been better if they simply applied this behaviour to the PGUP and PGDN keys instead of J & K. Who wants to learn new keyboard shortcuts specific to a single site?

Eoghan, there are a couple of good reasons to not implement your suggestion. First is a problem with the Page Up/Page Down keys: They’re not very convenient on laptops. I have watched many laptop users not use Page Up/Page Down even if they have them, and it’s worse on some notebooks like the MacBook Pro I am typing on right now, where thanks to Apple minimalism, Page Up/Page Down are not even labeled although the function is there if you press the Fn key plus up/down arrow key. So the existence of Page Up/Page Down cannot be assumed, and where those keys do exist, they aren’t always perceived as available by the user.

The second issue is your statement “instead of J & K. Who wants to learn new keyboard shortcuts specific to a single site?” If you read the other posts, JK is already used on other sites. And JK is not unknown, rather, JKL has long been well-established in the professional video editing world (maybe audio too) as a shortcut set for shuttling around time-based media. J is back, K is play/pause, and L is forward. The spatial value of the home row keys makes JKL so valuable for the frequent task of navigation, that a video editing app that lacks JKL support is considered to be unfit for power users.

Great job Ryan. I love to see you do more videos like that.