Crank My Projector: The Embarrassing Overuse of Scroll
CRANK MY PROJECTOR: THE EMBARRASSING OVERUSE OF SCROLL
If you want to identify an embarrassing trend that will iconify outdated, wrong-headed web design circa 2012 - 2014, you need look no further than this.
Though probably not in the way you expect.
For the better part of 2 years, and largely ushered to popularity on the back of scroll friendly platforms like iPad, scrolling has become one of the most useful but sorely abused and overused interfacing tools available to web developers today.
Like a lot of people I breathed a sigh of relief when it became clear that the tide had changed and the dark ages of "above the fold" had lost a fair bit of its gravitational strength. That scrolling had finally osmosed its fair share. Always important, but more articulately understood today than years past, the fold just doesn't have to work as autocratically as it used to.
Today, scrolling enjoys unfolding and metering stories and arguments as it was intended.
That said...As often happens in the world of interactive trends, when they get an inch, they take a mile. And for script-gimmicky developers (undoubtedly suffering from Flash withdrawal) scrolling has entrenched itself as one of the industry's latest misappropriated novelties.
Site creators have long embellished the basic scrolling function by creating parallax effects - where layers move at different increments; sometimes to create subtle, pseudo 3D effects.
And I bet you thought these were the sites I meant to deconstruct. Well, not today. The parallax effect is admittedly overused, but it's generally ambient, and doesn't overtly undermine the UX or content it carries. Despite parallax, users still scroll as expected, content may be consumed as intended, and no one is unduly surprised or confused.
The parallax effect is admittedly overused, but it's generally ambient, and doesn't overtly undermine the UX or the content it carries.
No, today I'm talking about the sites that take it further. Too far. To the point of utterly undermining the content and user experience. These are the most embarrassing of acclaimed executions.
These executions are characterized by something I call the "scroll-powered movie". Projects where the scroll function is employed to advance lengthy animated sequences to tell a story. And it's my opinion that use of this technique reveals a weak understanding of the medium. Here are some random examples. But you've seen many more of these.
Example 1 Example 2 Example 3 Example 4 Example 5 Example 6
Naturally, they even win web design awards.
I'm regularly bemused at the poor judgement web award groups display in selecting sites that are so clearly off the path to our future. It leads me to believe that these organizations have little in the way of a philosophical understanding or stance on interactive language to inform their decisions, instead apparently basing their awards on the interactive equivalent of "ooh shiny".
astaire
The Quest for Consistent Speed
As long as mankind has had the ability to record time-based images and sound on a medium that could be stored and played back later, we have well understood the need for a consistent, repeatable playback speed. Record players, tape recorders, movie cameras, projectors, VCRs and even video codecs all had the same dependency on consistent playback speeds.If the speed of playback was not identical to the speed of the recording, content was presented inaccurately.In analogue audio, playback too fast and you got the chipmunk effect (increased pitch and tempo), too slow and you sounded like James Earl Jones. On film the well-paced dramatic scene would lose any dramatic tension as the characters zip around like keystone cops. Even worse, inconsistent speeds result in all manner of warbling and stuttering. And with rare exception (say, the specific intention to poorly reproduce), none of this is "good".
But welcome to 2014, where such past obviousnesses are overrated - hey, we're in the future now, right? We use computers. Lessons from the past have no relevance here.
/sarcasm
Interactive, at its "true-use", is not about linear, prerecorded experiences. It's an art form based on gesture and response.
Even so, we often consume linear content within the context of an interactive experience.
And it's here, between interactive design, and linear self-play, that so many site creators continue to struggle; failing to find rational hand-offs between these sometimes opposing concepts.
And it's here, between interactive design, and linear self-play, that so many site creators continue to struggle
This struggle is iconified by the scroll-powered movie.
Despite its rampant popularity, the scroll-powered movie never (ok, rarely) serves a useful or even aesthetically superior purpose. In fact, as I will show, it usually diminishes the value of the content provided in these pieces.
(I say rarely, because there can be practical uses of the interaction, if, say, the user were enabled to carefully analyze motion or footage to some practical or aesthetic end: for example the way a film editor scrubs video to find a specific cut point. The problem is, the vast majority of acclaimed instances of this practice are not of this rational sort.)
How it Breaks
The scrollable "movie" contains a story, sequence, or idea that is expressed via a series of frames, or positions that were intentionally designated - laid out at specific increments or percentages from one another - to create a meaningful sequence.
But the careful relationship of all those increments and percentages are ultimately worthless in random users' hands.
A User is in the habit of scrolling however he or she prefers. Fast slow - jerky, smooth. And scrolling further dictates highly variable speeds from device to device, and from system preference to system preference. So immediately a wildly unpredictable "random speed generator" is introduced. Other technical functions play a role here too - browser, processor speed, network, all sorts of things impact the ramp up, momentum, speed, smoothness, and stop points of the scroll function. In short, there is an absolute guarantee that scrolling speed and action will be wildly unpredictable.
And yet all of that was generally functional until our young creator got the bright idea of tying those unpredictable variables to the speed and progression of his linear movie.
The comical result of this brand of "experience" is that users inch, inch, inch their way through some linear animated segments that would have rather benefitted hugely from consistent, smooth action. And at other times unpredictably zip through, skipping and stuttering past important segments, wholly missing key ideas and moments and losing all sense of dramatic pacing and timing.
To these site creators one might ask: what did you think you were giving the user control of, and to what end? What value has the user derived?
The lesson we need to take away from this kind of UX failure is that we must rather functionally honor the true nature of our content.
The lesson we need to take away from this kind of UX failure is that we must rather functionally honor the true nature of our content.
If what you have conceived is a linear movie - one that utilizes lengthy (more than binary or iconic) animated sequences to tell your story, then honor the inherent nature of that, embrace the linear "movie", and let the machine manage your ideal speed and pacing. With rare exception your linear story is never going to be improved by handing your user an inconsistent, kludgy interface, and saddling them with the job of managing consistent and smooth playback; in short, to be your virtual projector motor.
There is nothing wrong with letting a movie be a movie. It's how you handle users' potential desire to interrupt it that matters.
Embracing Linearity - A Successful Variant
Despite the failure of these continuous scroll-powered movies, there is a different scroll-based movie model that does work, one that more effectively utilizes the function to advance linear sequences.One of the most iconic of those today is Apple's Mac Pro site.
Here the true, linear, movie-like quality of a number of discrete animated segments is fully honored - even while the user is given the freedom to advance or back up within the greater story. In this case scroll is used as a trigger - instead of as the virtual motor. In this case, scrolling simply triggers an animated sequence, which is then displayed (powered by the machine) in as smooth and consistent a speed possible, until it comes to rest on a predetermined idle point. Although users might initially disorient as control is temporarily wrested away, the feeling is only initial and momentary. Here, one discovers that scrolling has become a page-turn or "next" button.In this first "scroll-as-trigger" model the vertical response we are accustomed to does not exist. The subject (a Mac Pro) appears to exist continuously on screen animating in arbitrary ways, somewhat in contrast perhaps to the expectation of scrolling up and down.
But closely related to this is a second model where the act of scrolling rather does move the subject up and down, but in a semi-automatic way, and here again, in a triggered, page-turn, manner.
The system, once instructed by the user to scroll, ignores the user's increments, and does the work of setting the speed and stop point of the scroll - usually ending when the next "fold space" is aligned perfectly in the browser window.
While I am not particularly an eager fan of the latter two techniques, they do represent sensible alternatives to the page scroll function, and can enhance the UX.But this of course is in contrast to the embarrassing scroll-powered movies employed by so many site creators today.
The time will come, and for some perhaps that time is now, that we will look back on these years of scroll-powered movies, roll our eyes and wonder with embarrassment what the Hell we were thinking.