I hereby decree

by David LeMieux

 

There is a not-too-recent design trend that websites are designed to not scroll but instead animate or change the information on the screen as the user uses the scroll wheel on a mouse or the scroll bar. A limited example of this can been seen on Dropbox's Carousel site.



As you can see in the video, as the use scrolls downward some animations play and at a certain point the page stops scrolling entirely and only the animations continue, even though the page is still scrollable. There are other, more extreme examples of this as well. Some sites seem to handle this new take on information disclosure in a way that makes sense but many miss the mark and become confusing.

This breaks usability. The animations are visually interesting and the end result (displaying more content) is essentially the same, but there is no longer a 1:1 mapping of the actions a user takes through the interface or the input device to what is happening on the screen. The timeline, for lack of a better term, becomes arbitrary. The different portions of content are harder to track because they lose their sense of placement on the page. If a user is using touch device to scroll then that relationship can be further harmed. (Though in the case of carousel, the site removes this and scrolls as you'd expect).

Timeline may be the right term to use inasmuch as the design of the pages treats the scrollbar like a scrubber going through the time of some animation or even a video, even though the presentation is interactive. If the designer wanted to present the user with a timeline of information then she/he should stick to a more readily identifiable mechanism for the same.

It can also be tempting to misuse animation. Animation really isn't the issue, though. The issue is the disconnect between the scroll action and what you see visually on the page in terms of mapping movement. You wouldn't turn the page of a book and have it only change the picture on the page you are on. That is a bad comparison, but the idea is the same.

Let pages scroll, otherwise use a different navigation mechanism and make it obvious.

 

blog comments powered by Disqus