JQuery gestures | Hacker News Reader

JQuery gestures

random.friggeri.net

69 pointsbdfh4225 comments

That is most definitely the coolest thing I've seen using JavaScript in a while.

Seconded. Unfortunately this is one of those technologies that you hardly ever get a chance to actually apply in a real project.

We implemented gestures in an early version of ipaper. Unfortunately it wasn't very usable. The physical analog -- swiping pages -- is far more comfortable than the same motion with a mouse.

Incidentally we chose to watch cursor acceleration (removing the mouse-down step), which simplifies the gesture.

I think it would be much more comfortable, and useful, if the user were using a touch screen, and could use gestures on the screen. If someone were viewing ipaper on the iPhone, that would be the way to go for navigation.

I totally agree. Gestures on the iPhone work well because your hand is resting in a natural position. This is more or less true with track pads as well.

If you're going to support mouse gestures, the system must be sensitive enough to act on small, finger-driven, movements. That is, the user must be able to gesture without moving their wrist.

Gestures: [Press Ctrl] + Click + Drag

Old style navigation: Click

It's not hard to guess the winner

Sometimes it's nice not to have to search for the little button and press it that opens the next mail or goes to the next picture, but simply do a quick gesture. GMail actually has a labs setting for that.

I use gestures for navigation all the time, as a firefox plugin, so i don't have to press the back arrow, but simply do a quick gesture. It's much faster, for me anyways.

"Sometimes it's nice not to have to search for the little button and press it that opens the next mail or goes to the next picture"

Beats having to go look at the documentation to determine what gesture corresponds to the action you want to accomplish. Also, with gestures it seems to me there aren't very many intuitive gesture/action matches... I can only think of:

  left = go back
  right = go forward
  circle = reload
  X = delete
  left, right, up, down = pan in that direction

There's certainly others but not a lot I think.

For a web page, you're exactly right, but imagine a functional app that you use every day.

If you've done any amount of user research, you know that thigh-speed users hate using the keyboard and mouse at the same time. For most instances keyboard is king, but for a few, using a mouse exclusively is a great benefit...browsing pictures, for example.

(Just FYI I clicked to turn them on and didn't need to use Ctrl)

"thigh-speed" users? I've dealt with some unusual users, but this sounds like it could be interesting... :)

lol, gotta love those fat fingers of mine. :-)

Gestures: [Press Ctrl or Right-mouse] + Click + Drag

Old style navigation: Locate mouse cursor + Locate 16x16 px target icon + move your mouse across a 1600px desktop to the tiny icon + Click

I use StrokeIt ( http://www.tcbmi.com/strokeit/ ) for regular Windows apps and Firefox Mouse Gestures Redox for browsing and I cannot live without either. I close app windows and browser tabs by a single slash across the screen and it is so much more efficient than going to the top-right corner of every window or locating the tiny close-tab icon. Keyboards are always faster but 90% of the time, my hand is on the mouse anyway.

The gestures work because they can perform the standardized function regardless of the UI. I can configure a 'slash' to Ctrl+F4 for Photoshop, Alt+F4 for default Windows Apps, and Ctrl+W for my text-editor. I don't think each website having its own set of gestures that do different things will be as helpful in this regard so yeah, this library isn't as useful in its current incarnation. But everyone knows what came out of being able to drag an image inside of a div using Javascript (hint: maps) so who knows what novel application this concept can help power.

You could also map your mouse thumb button to Ctrl.

I don't like that you have to click for the gesture and that enabling gestures disables clicking on normal links. Other than that, I think it is pretty cool. I have seen things like this before, but never in such an easy-to-copy javascript implementation.

Whilst this is nice, some of the gestures are far too complicated. Moving between pictures is intuitive (similar to iPhone etc) but the other actions aren't necessary.

I don't look forward to the day where I have to remember four gestures just to change a help menu.

I guess it is here just to show the power behind the plugin. I agree with you, there is no reason to implement such a complicated way to toggle help. But enabling up/down/left/right to navigate through images is sufficient and intuitive (and awesome). And that's why this plugin is all about no ?

I think the idea was to draw a letter 'h' for help.

Or a question mark.

You, sir, draw a very strange question mark.

So maybe they could say to draw an 'h' starting from the top left.

The thought process behind this is the same as shortcuts. It provides advanced users with increased learnability and memorability design principles. After a user becomes accustomed to the application they can use these gestures much more quickly then finding their respective navigation.

I envision this being very useful for allowing touch features on a website - like a webapp on a tablet.

Didn't work at all in my browser (Safari 3.2.1)

Among all the awe here, I might add that this thing breaks horribly if you already have mouse gestures in your browser.

I'm not uninstalling Firefox extensions to use a webpage proper. Not today, and not any day soon. While I'm sure it's all cool tech, I personally hope this kinda thing will not take off ever.

They better be careful or Apple is going to sue them for violating their patent on swipe direction detection.

Reply on news.ycombinator.com