5 ms·

What motivates web designers to tell stories by repurposing the scroll mechanism instead of, say, using video? This type of "scrollmation" feels incredibly clun

What motivates web designers to tell stories by repurposing the scroll mechanism instead of, say, using video? This type of "scrollmation" feels incredibly clunky to me. I have never got to the end of one. If you need that much animation on a page to tell your story, isn't it a good sign that video might be more fit for purpose? Video was designed for storytelling, it will work on most devices, and it has well-established UI and conventions, such as a play button and progress bar. If you're going to provide a play button in your scrollmation to automatically advance the action anyway, you've already recognised how irritating it is to manually page through an animated story by scrolling or swiping. So why then go to the trouble of creating a scroll-based animation that repurposes a 20+ year old convention and attempts to reinvent a tiny proportion of what video has to offer? Is it just for the novelty value? Is it because it makes you feel smarter? How is it better for users trying to understand your story? I'd love to hear from anyone who's considered both video and scrollmation and chosen the latter.

GoldfishCRM 13y ago
I think scrolling is better in the way that it does not aquire audio and user can controll the speed of information. This part is boring and I get it, lets skip to the next part. Video has no way for that.
- modernerd 13y ago
  > I think scrolling is better in the way that it does not aquire audio That's a good point. There is a general expectation that playing a video also means playing audio, and some environments – like offices – aren't great for that. > ...user can control the speed of information. ... Video has no way for that. I frequently skim through video by dragging the head in the progress bar, or skip three or four minutes ahead in longer videos. With scrollmation, the default scroll speed is normally much slower than the equivalent video speed of 30fps, it results in jerky movement, and the speed of the video is directly proportional to how hard I am prepared to work to make it go faster. Good UX designers don't make users do shit work.
- srikrishnan 13y ago
  +1. I think it is definitely valuable to allow the user to control the speed of information.
nwh 13y ago
I've made this sort of stuff before at request, and I can't stand it either. It quickly degrades the one thing that users can expect to do; control the vertical position of the page.
paraschopra 13y ago
I'd say it is mostly novelty. Video could do the same job, maybe even slightly better. We have considered adapting it into a video as well, but then everyone does that. Second important factor after novelty was integration of signup form and other interactive elements within the story. With video, that's not possible.
- modernerd 13y ago
  Perhaps you should do a split test. I've seen great results from the signup forms that http://wistia.com http://wistia.com allows you to embed anywhere in a video. I'm not affiliated, but am impressed with the product; check out their "Call to action" and "Turnstile email capture" features in the embed builder on this page: http://wistia.com/product/superembeds http://wistia.com/product/superembeds
karma_fountain 13y ago
I'd usually agree with the scrolling mechanism comment, but this time it's very well done. The initial page clearly explains that you can scroll down for more content, or click play, or click a button to get to the next page. The story and graphics are fun and keeps me interested.
L4mppu 13y ago
Also this scrollmation pages load very slowly.
reedlaw 13y ago
I've closed websites with nothing but a video on the landing page because I didn't want to wait for a video to load. This landing page, on the other hand, is the best product presentation I've ever seen. It's simple and clear and doesn't have boring narration to waste my time.
- chinchang 13y ago
  Glad you liked it :)
- alan_cx 13y ago
  Fair enough, but I closed that page after 3 clicks. For me it was wasting my time. Not saying I'm right and you are wrong, just that people have different irritants, as it were.
  - acoyfellow 13y ago
    You might not be the target audience for this page. I think this is more about educating people who don't know what A/B testing is. (edit: if you are on HN, you probably don't need something this juvenile to explain the concept) A lot of people will need something thats this simple to digest on their own speed, though. I will be sending this link out to a few past and potential future SMB clients. The amount of people like "Bob" who are running their own website is astounding. They need simple things like this that help introduce them to the idea of A/B testing.
    - MartinMcGirk 13y ago
      One would hope that at some point previous to this they had a video on a separate version of the page and did a bit of A/B testing themselves.
huhtenberg 13y ago
There's a good reason. Two of them, actually. This particular animation in a video format would take 10 seconds of running time. It would also take few seconds to load and initialize whatever video playing widget it'd be using. That would make it for an oddly short video and one of those "What? That's it?" situations. So it simply wouldn't work as the only content on the page. OTOH, if you present it as an interactive animation, it will take users longer to work their way through it and so it would feel more substantial. Secondary reason is that it makes the page more memorable and helps it stick in more people's heads than some yet another embedded video. The goal of the page is to engage people. This is the reason why you'd want to have things presented rather than just thrown on a page in black and white Times New Roman / 12px. You want your page to engage and clicking on Play Video is not engagement, it's a reflex. So by forcing visitors to do something out of their routine the page, effectively, makes them to pay more attention than usual.
- mhb 13y ago
  Neither of those reasons is compelling. A short video is a feature and a long video is a disincentive to viewing it. Not everything that's memorable is good. I was happy to see the "play" button alternative to the scrolling interaction. I used the play button, enjoyed the video and believe I will remember it without experiencing the annoyance of having to manually play it using the scroll bar.
- mattmanser 13y ago
  I've consulted for a video production company and seen them do these, there's no way this would be a 10 sec video. Try speaking it clearly and slowly as a voiceover artist would as you go through the slides. 'Meet Bob. Bob is a fisherman. He runs his own store and has an online store [boom, there's your 10 secs]'. Memorable isn't good if they don't get to the sales ptch, which most people wouldn't. Personally I completely agree with modernerd, this would have been a waste of time and money if it wasn't novel enough to get featured on HN or /r/programming or stuff for a few extra sales. For its stated purpose, it's useless.
bjz_ 13y ago
A back/forward button would be enough for me. The scrollimations always work confusingly on platforms with smooth, momentum based scrolling (like OSX).
dgunn 13y ago
Does anyone else just want a written description of things? Make it look pretty. Create beautiful pictures/characters throughout the page. I don't care. I just want a good explanation of what a service offers. - It's user-friendly. - Compatible with everything. - I can read as much or as little as I want. - If I want to re-read something, I know exactly how to do that and it doesn't involve clicking a play head trying to find the place it was in. I feel like people keep trying to bring back reincarnations of flash interactivity and since it uses html5 and other buzzwords, it's ok. Well, it's not. Every time someone "fixes" the experience of what should just be reading online, they make it much more cumbersome and annoying. One day everyone will look back at what people did with html5 and laugh the way we all look back and laugh at flash intros and playing music on load.
mbesto 13y ago
With stuff like this I always refer to how my mom uses computers. (Note - This a person who thought when you copied text on her iPhone that the text magically went into her finger, only to have to click paste with another finger so the text didn't get lost in her finger...) I agree. There is no way she would know to scroll properly in this interface and in most cases would get confused and give up. The objective of the presentation is to make it easy for someone (like my mom) to understand A/B testing. Make it a video, or at least provide a link to a video version. EDIT: This akin to Amazon's usability - http://www.nngroup.com/articles/amazon-no-e-commerce-role-model/ http://www.nngroup.com/articles/amazon-no-e-commerce-role-mo... i.e. once some behavior is establish on your site, keep it that way, but doesn't mean you need to emulate it.
pelario 13y ago
I'm not a "UI" guy, but I loved it. For me, it feels like a presentation, but the transition from slide to slide make it feel like a video. My 20 cents.
nutanc 13y ago
Maybe there should be an A/B testing version. One with video and one with animation :-) Personally, I liked the animation.
run4yourlives 13y ago
What motivates web designers to tell stories by repurposing the scroll mechanism instead of, say, using video? I can only speak for myself, but I rarely, if ever, watch website videos, especially at work. I made it through this entire thing by scrolling. While I understand video is sometimes the best way to convey an idea, I fricken hate it. It would need to be something very, very intriguing for me to watch. 99% of websites selling things don't fall into that category.
- Myrmornis 13y ago
  Strongly agree. It's getting more and more irritating having to watch videos to get information instead of being allowed to read at my own pace.
ulisesrmzroche 13y ago
These are questions worth A/B testing though. I'm on team video, but if anyone has a link to the research, let me know.
gojomo 13y ago
Video forces me to go at someone else's pace -- the creator or expected 'average viewer' -- which is often too slow. It also makes skipping or rewinding a matter of finely-navigated clicks into tiny target areas, whereas the best hardware scrolling controls offer giant, forgiving action-areas yet that still enable nearly pixel-level resolution and fine steps of speed/acceleration. Depending on your device, scrolling in many directions might be very, very easy. Large trackpads, the Apple 'Magic Mouse', and most touch screens can make scrolling far more easy, adaptive, and intuitive than even 'forward' and 'back' buttons. I tend to think people most peeved by scrolling as a major navigational technique (in both space and time) are still using tiny trackpads, mice with nubby scroll wheels, or even (shudder) ThinkPad-like joysticks or keyboard arrows. Stone knives and bearskins! Does this apply to you?
- austenallred 13y ago
  I honestly never watch demo videos. They go too slow, they're usually painfully cheesy, and I hate that I have to listen to them. I read much faster than the narrator talks. A video for this demo probably would have lasted 1:30 or so. I was able to scroll through in about fifteen seconds, didn't have to find headphones to do so, and got all of the same information.
dirkgently 13y ago
If they had used video, they would have lost me in 5 seconds.
brandoncapecci 13y ago
Lots of personal preferences in this thread. As an A/B testing company - they should have A/B tested a scrolling site against video and then been transparent about their results.
Sujan 13y ago
> What motivates web designers to tell stories by repurposing the scroll mechanism instead of, say, using video? Control for the users.

GoldfishCRM 13y ago

I think scrolling is better in the way that it does not aquire audio and user can controll the speed of information. This part is boring and I get it, lets skip to the next part. Video has no way for that.

modernerd 13y ago
> I think scrolling is better in the way that it does not aquire audio That's a good point. There is a general expectation that playing a video also means playing audio, and some environments – like offices – aren't great for that. > ...user can control the speed of information. ... Video has no way for that. I frequently skim through video by dragging the head in the progress bar, or skip three or four minutes ahead in longer videos. With scrollmation, the default scroll speed is normally much slower than the equivalent video speed of 30fps, it results in jerky movement, and the speed of the video is directly proportional to how hard I am prepared to work to make it go faster. Good UX designers don't make users do shit work.
srikrishnan 13y ago
+1. I think it is definitely valuable to allow the user to control the speed of information.

nwh 13y ago

I've made this sort of stuff before at request, and I can't stand it either. It quickly degrades the one thing that users can expect to do; control the vertical position of the page.

paraschopra 13y ago

I'd say it is mostly novelty. Video could do the same job, maybe even slightly better. We have considered adapting it into a video as well, but then everyone does that. Second important factor after novelty was integration of signup form and other interactive elements within the story. With video, that's not possible.

modernerd 13y ago
Perhaps you should do a split test. I've seen great results from the signup forms that http://wistia.com http://wistia.com allows you to embed anywhere in a video. I'm not affiliated, but am impressed with the product; check out their "Call to action" and "Turnstile email capture" features in the embed builder on this page: http://wistia.com/product/superembeds http://wistia.com/product/superembeds

karma_fountain 13y ago

I'd usually agree with the scrolling mechanism comment, but this time it's very well done. The initial page clearly explains that you can scroll down for more content, or click play, or click a button to get to the next page. The story and graphics are fun and keeps me interested.

L4mppu 13y ago

Also this scrollmation pages load very slowly.

reedlaw 13y ago

I've closed websites with nothing but a video on the landing page because I didn't want to wait for a video to load. This landing page, on the other hand, is the best product presentation I've ever seen. It's simple and clear and doesn't have boring narration to waste my time.

chinchang 13y ago
Glad you liked it :)
alan_cx 13y ago
Fair enough, but I closed that page after 3 clicks. For me it was wasting my time. Not saying I'm right and you are wrong, just that people have different irritants, as it were.
- acoyfellow 13y ago
  You might not be the target audience for this page. I think this is more about educating people who don't know what A/B testing is. (edit: if you are on HN, you probably don't need something this juvenile to explain the concept) A lot of people will need something thats this simple to digest on their own speed, though. I will be sending this link out to a few past and potential future SMB clients. The amount of people like "Bob" who are running their own website is astounding. They need simple things like this that help introduce them to the idea of A/B testing.
  - MartinMcGirk 13y ago
    One would hope that at some point previous to this they had a video on a separate version of the page and did a bit of A/B testing themselves.

huhtenberg 13y ago

There's a good reason. Two of them, actually. This particular animation in a video format would take 10 seconds of running time. It would also take few seconds to load and initialize whatever video playing widget it'd be using. That would make it for an oddly short video and one of those "What? That's it?" situations. So it simply wouldn't work as the only content on the page. OTOH, if you present it as an interactive animation, it will take users longer to work their way through it and so it would feel more substantial. Secondary reason is that it makes the page more memorable and helps it stick in more people's heads than some yet another embedded video. The goal of the page is to engage people. This is the reason why you'd want to have things presented rather than just thrown on a page in black and white Times New Roman / 12px. You want your page to engage and clicking on Play Video is not engagement, it's a reflex. So by forcing visitors to do something out of their routine the page, effectively, makes them to pay more attention than usual.

mhb 13y ago
Neither of those reasons is compelling. A short video is a feature and a long video is a disincentive to viewing it. Not everything that's memorable is good. I was happy to see the "play" button alternative to the scrolling interaction. I used the play button, enjoyed the video and believe I will remember it without experiencing the annoyance of having to manually play it using the scroll bar.
mattmanser 13y ago
I've consulted for a video production company and seen them do these, there's no way this would be a 10 sec video. Try speaking it clearly and slowly as a voiceover artist would as you go through the slides. 'Meet Bob. Bob is a fisherman. He runs his own store and has an online store [boom, there's your 10 secs]'. Memorable isn't good if they don't get to the sales ptch, which most people wouldn't. Personally I completely agree with modernerd, this would have been a waste of time and money if it wasn't novel enough to get featured on HN or /r/programming or stuff for a few extra sales. For its stated purpose, it's useless.

bjz_ 13y ago

A back/forward button would be enough for me. The scrollimations always work confusingly on platforms with smooth, momentum based scrolling (like OSX).

dgunn 13y ago

Does anyone else just want a written description of things? Make it look pretty. Create beautiful pictures/characters throughout the page. I don't care. I just want a good explanation of what a service offers. - It's user-friendly. - Compatible with everything. - I can read as much or as little as I want. - If I want to re-read something, I know exactly how to do that and it doesn't involve clicking a play head trying to find the place it was in. I feel like people keep trying to bring back reincarnations of flash interactivity and since it uses html5 and other buzzwords, it's ok. Well, it's not. Every time someone "fixes" the experience of what should just be reading online, they make it much more cumbersome and annoying. One day everyone will look back at what people did with html5 and laugh the way we all look back and laugh at flash intros and playing music on load.

mbesto 13y ago

With stuff like this I always refer to how my mom uses computers. (Note - This a person who thought when you copied text on her iPhone that the text magically went into her finger, only to have to click paste with another finger so the text didn't get lost in her finger...) I agree. There is no way she would know to scroll properly in this interface and in most cases would get confused and give up. The objective of the presentation is to make it easy for someone (like my mom) to understand A/B testing. Make it a video, or at least provide a link to a video version. EDIT: This akin to Amazon's usability - http://www.nngroup.com/articles/amazon-no-e-commerce-role-model/ http://www.nngroup.com/articles/amazon-no-e-commerce-role-mo... i.e. once some behavior is establish on your site, keep it that way, but doesn't mean you need to emulate it.

pelario 13y ago

I'm not a "UI" guy, but I loved it. For me, it feels like a presentation, but the transition from slide to slide make it feel like a video. My 20 cents.

nutanc 13y ago

Maybe there should be an A/B testing version. One with video and one with animation :-) Personally, I liked the animation.

run4yourlives 13y ago

What motivates web designers to tell stories by repurposing the scroll mechanism instead of, say, using video? I can only speak for myself, but I rarely, if ever, watch website videos, especially at work. I made it through this entire thing by scrolling. While I understand video is sometimes the best way to convey an idea, I fricken hate it. It would need to be something very, very intriguing for me to watch. 99% of websites selling things don't fall into that category.

Myrmornis 13y ago
Strongly agree. It's getting more and more irritating having to watch videos to get information instead of being allowed to read at my own pace.

ulisesrmzroche 13y ago

These are questions worth A/B testing though. I'm on team video, but if anyone has a link to the research, let me know.

gojomo 13y ago

Video forces me to go at someone else's pace -- the creator or expected 'average viewer' -- which is often too slow. It also makes skipping or rewinding a matter of finely-navigated clicks into tiny target areas, whereas the best hardware scrolling controls offer giant, forgiving action-areas yet that still enable nearly pixel-level resolution and fine steps of speed/acceleration. Depending on your device, scrolling in many directions might be very, very easy. Large trackpads, the Apple 'Magic Mouse', and most touch screens can make scrolling far more easy, adaptive, and intuitive than even 'forward' and 'back' buttons. I tend to think people most peeved by scrolling as a major navigational technique (in both space and time) are still using tiny trackpads, mice with nubby scroll wheels, or even (shudder) ThinkPad-like joysticks or keyboard arrows. Stone knives and bearskins! Does this apply to you?

austenallred 13y ago
I honestly never watch demo videos. They go too slow, they're usually painfully cheesy, and I hate that I have to listen to them. I read much faster than the narrator talks. A video for this demo probably would have lasted 1:30 or so. I was able to scroll through in about fifteen seconds, didn't have to find headphones to do so, and got all of the same information.

dirkgently 13y ago

If they had used video, they would have lost me in 5 seconds.

brandoncapecci 13y ago

Lots of personal preferences in this thread. As an A/B testing company - they should have A/B tested a scrolling site against video and then been transparent about their results.

Sujan 13y ago

> What motivates web designers to tell stories by repurposing the scroll mechanism instead of, say, using video? Control for the users.