1

I have a bunch of athletes that have their faces linking to their bios. On desktop computers where users don't have the ability to touch-swipe, arrows take over the job.

Static demo

Click here for a working demo

My question is this: how fast should the scrolling be?

Considerations:

  1. The website is responsive, so when the screen is less wide, the animation appears to move faster.
  2. The animation will occur at 60fps
  3. The browser's native horizontal scrollbar is not to be visible
  4. The animation does not need to be constant-speed, tweening is possible if the usability gain is worth the implementation cost.
Improve this question

2 Answers 2

Reset to default
3

As the most important thing when doing interaction on the web is to get the user in full control of it, triggering something by hover isn't a good idea at all. The risk of firing the event by accident while scrolling on the page or trying to click on the outer left or right element is pretty high. You really should switch to an on click event.

In general, every web animation should meet two requirements:

  1. Being fast enough to let the user continue using your application early.
  2. Being slow enough to let the user understand what changed.

If your animation doesn't feels boring (= too slow) or stressful (= too fast), you're probably in a good balance.

When firing the event on hover, you simply can't hit that spot. The reason is simple: You have to be so slowly to let the user still have control that it necessarily feels like not making any progress.

Improve this answer
2

Either 1 person per CLICK (not hover!) or x people per click, where x is equal to the total number of people that fit on the screen.

Improve this answer
2
  • Since the page is responsive, what should happen when the user resizes their browser window? The scroll quantization would be destroyed, and it would require hooking JS into the window.onResize event [bad practice!] just to keep it aligned. The decision to hook into hover was made to alleviate this issue.
    – Bryce
    Commented Nov 13, 2013 at 6:19
  • 1
    Nonsense. You're not "alleviating" anything with hover. It's crappy usability. One reason for this: you can keep your mouse on a button while looking at the content, and click whenever you want to see one more. Tie this to hover, and you're forcing people to look back and forth between the button and the content. As I said, from a usability point of view; move 1 whole box on click, or x where x is equal to the total number of boxes. For the tech aspect: stackoverflow.
    – Dirk v B
    Commented Nov 13, 2013 at 10:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.