Annoying
Animations

Animation for the sake of animation has gotten out of hand

*Animation is one of the latest trends in app and web design. Well, maybe it’s not right to call it the latest trend anymore, because after all, animated content on websites has been around for quite a while now. Not only in the form of videos, but more and more in the form of moving interface elements. To a certain extent, this is definitely a sensible addition to the experience, which can increase the distinctiveness of websites and contributes meaningful additions to the interaction with the page. But on more and more sites I come across I pause for a moment and think: enough is enough.

Animation attracts attention

Our field of vision is trained for movement. This is so deeply ingrained in us that we cannot ignore it. As soon as something moves, we look more closely to classify the object. Or if something moves in our peripheral field of vision we turn our heads to see what it was. Therefore, moving objects on websites always attract our attention very quickly. It need not even be much. A moving circle can suffice. But hopefully the animations explain or create something meaningful with their movement and the attention they attract. Otherwise attention can turn into distraction very quickly.

Two types of movement

There is the movement that actually explains. It can make interactions or content easier to understand. It can supports the functioning of buttons, forms, loading processes and more in such a way that the user’s understanding is improved. This happens when the animation is done in such a way that it not only looks good, but carries meaning.

The loading bar

The easiest example for an animation that is meaningful is the classic loading bar. Together with the blinking cursor this is one of the oldest animations that exists in [[graphic-user-interface-design]]. But at the same time the loading bar is one of the most often abused animations. Who does not loath the loading bar that sits there hovering at 95% for hours after rushing to 90% in five seconds. Or the unzipping bars indicating that your file will be decompressed in 173 years.

The modern loading bar

Modern reloading on the web is not necessarily done with a loading bar. Most sites employ some sort of masonry layout on Pinterest or similar sites, where the content is “pulled up” from the bottom of the page when scrolling. This can even be further enhanced by then enlarging the pulled up items while placing them on the page as interactable entries. Such animations promote, for example, the understanding that these items have just been loaded all the while the contents are really lazy loaded in the background.

Animation as fluff

Fluff, so to speak, is the “padding” or the the “feathers” of a website. Fluff is all that does not contribute anything to the content or the interaction itself, but it conveys values as a vehicle to tell the brand story without words. This happens in the background and can increase user loyalty in the long run.

Animation can be annoying

However if you take the fluff element too far the animation can become increasingly annoying. Especially when a meaningful “padding” of the background story is no longer present and the animations seems to be created for it’s own sake. There may be edge cases where this is what you are aiming for, but more often than not it is just annoying. Even if the animation is of high quality. There can always be too much of a good thing. On top of that, the animations are becoming more and more extensive and consume more and more bandwidth, which is thus no longer available to the content. For most of our modern high bandwidth devices this may not be a problem, but depending on the extent of the animation this can even have an ecological impact: [[the-environmental-impact-of-design]]

When animation takes over control

As long as the whole animation thing happens “in the background” of a website and a user is able to engage with it or ignore it, there is no problem in including more animation. But a growing number of websites engage in a kind of “scroll hijacking”. Scroll hijacking is a form of tieing the animations to the user’s scrolling behaviour to the point where the scroll is no longer usable nor even controllable by the user. This is particularly annoying when it comes to very long web pages where you have to scroll a bit more often. In extreme cases this can even lead to torturously slow scrolling, where mainly animation is played with hardly any added value.

There is always a time and a place

Websites are available 24 hours (almost) worldwide. The creators of the website know neither when, nor from where we access a website. It is obvious that the developers of a website have to make certain assumptions about the target group the website is for. According to their target audience they have the responsibility to draw the line somewhere between backwards compatibility and user experience all the while focusing on the target goal and the intended use of the website. After all, if over 90% of the site’s visitors are from Western Europe and are using the latest versions of Chrome, Firefox and Opera, then there is no point in supporting Internet Explorer or keeping a close eye on loading times (although the latter is always recommended). Nevertheless, as website developers, we have a multitude of possibilities to gradually expand the functional scope of the website without compromising the user experience and usability of the site. On the contrary, incremental expansion (or “graceful degradation”) significantly enhances the user experience of the site. After all, in the age of fibre optic internet, who wants to see a loading bar on web pages? Especially one that only starts loading when the page is in focus?

I have made it a habit to open new websites in a new background tab and give the pages a few seconds to download all their content. (And even though our internet connection has steadily improved over the last years from 2Mbit to 8, 16, 25, 50, 100 up to 200Mbit, the loading time of websites has remained almost unchanged, but that has other technical reasons as well). This usually has more to do with the fact that I want the page to load first, than with the fact that I want to finish reading the current page before moving on to the new content. This “trick” worked for a few years until changes to the behaviour of requestAnimationFrame and it’s implementation were made. This is mainly a good thing for performance reasons (the background tabs no longer use up so much resources), but it has brought back waiting for page contents to load and looking at loading bars again.

In most cases, however, I will not tolerate these loading bars and simply close the page. Over the years, I have made the experience that loading bars only justify the loading times in the fewest cases, and that behind them there are usually only websites with a lot of multimedia fuss and little content, which often also have a confusing, slow-functioning (because over-animated) navigation. It is particularly annoying when, in the few cases where a website with a loading bar is not closed immediately, you want to go to another sub-page and another loading bar is thrown at you. What did you do to deserve that? And if an annoying loading bar is displayed on the page at all, then please can at least all the headers of the possible links that can be reached from there be loaded at the same time? Another “pet peeve” should be mentioned at this point: Loading bars that first load up to 100%, but then never disappear because some last byte in some JavaScript was not completely downloaded.

Touching my own nose here

Yeah I know, this is the point were I have to acknowledge that I use a lot of heavy resources on the very site you are reading right now. But this site here is my personal playground for experimentation and to [[further-your-skills]] by [[developing-my-craft]] so you have to deal with it (although I try to [[practice-what-you-preach]] and try to mitigate as much as possible).

When to use loading bars

If loading bars are used, then only complex multimedia content, such as games or extensive, interactive graphics, should be hidden behind them. In those cases they are actually needed, because the functioning of the interactive experience necessitates all content being available to the user. In those cases the user should be informed beforehand that longer loading times may occur and to what extent and what the benefit of waiting is. By agreeing to such a dialogue beforehand, I already know roughly what is coming so that I can decide for myself whether I want to use it or not. Because if I have a rough idea of what is coming (which can be conveyed via image, text or short teaser video), then I am much more willing to wait for the loading time and look forward to the content in the meantime. This is another example of improving the user experience gradually instead of making all users wait until they are at 100%. Even extremely performance-hungry sites are welcome to give a little hint about this, or better yet, offer an additional low quality version for those on slower connections or less powerful devices.

Outdated protocols are to blame for slow websites

The outdated HTTP/1 protocol causes many problems when it comes to waiting for complex multimedia content. Others can explain better how exactly this works, but we have numerous ways to minimise loading times on websites. Or at least making users “feel” as if they are shorter.

Best practices are often neglected

What’s wrong with loading the header area of a web page “above the fold” first and then adding the following content bit by bit? What’s wrong with telling the browser the expected dimensions of the content so that the display doesn’t jump back and forth when you start reading? What’s wrong with displaying images and videos in a highly compressed form first and then replacing them with a higher quality later? Why do I have to download megabytes of ad and tracking scripts on newspaper websites before the article is displayed to me (well, that’s obvious…)?

There is a long list of issues that arise in the context of animating site and scroll hijacking that one would expect there to be so many articles on the relevant web design and development websites by now that these problems should have been gradually eradicated. But this does not seem to be the case.

Instead, even with such tools as Google Light House that help in spotting errors on webpages as well as giving very useful hints to correct and improve them still a large portion of heavy animated websites ignore those best practice

Unrealistic Dribbble shots

And despite these problems, which still plague a large number of websites, one continues to see countless such negative animated website examples on Dribbble and Behance. As a potential user I immediately ask myself what implications this has for me and fervently hope that these exaggerated animated representations are never used on real websites.

Of course, I also know that Dribbble, Behance etc. or one’s own portfolio are not about depicting realistic designs. That would be boring as hell. Rather, these portals serve above all to show potential clients or customers what could be achieved and to explore the limits and possibilities anew and perhaps even push them a little further. In the end, something good can always develop from these visual trends. And new approaches can only result from [[experimenting-at-the-fringes]] and [[push-the-boundaries]] And strong trends such as [[skeuomorphism]], [[flat-design]], [[material-design]] or [[colourful-gradients ]] have always brought something new that has remained ever since and enriched the web world as a whole. However, you have to be careful that you don’t lose sight of the actual goal.

The internet has grown as a technology

[[the-internet-has-grown]]

Despite everything that has been said, I am not against the expansion of the user experience through high-resolution multimedia content. On the contrary. It enriches the web and brings interaction to a new level. It has fundamentally transformed how we interact with the internet as a medium by elevating it’s status among the entertainment media. But I don’t really see anything that speaks against letting this expansion proceed gradually. The internet is a fluid medium where you can find anything if you look for it. And if you think back twenty years, it’s actually a wonder that I’m writing this article today, because after all, I remember too well how long it took to retrieve full-screen JPEGs in 800x600 pixel size via a 56k modem. But the internet has grown up as a technology. And therefore, when developing a new site, we should always check whether it is an experiment where anything goes or whether we are developing a grown-up e-commerce solution, a news portal, an agency/company site, a portfolio, etc. We should then base our development on this goal. To achieve this goal as best as possible we should then use the appropriate tools and technologies to provide the best possible experience for the users while meeting our objectives in the best possible way.

Taking control of the user’s actions or making them wait unnecessarily long is something that is out of place in the interactivity of the internet. This medium does not thrive on passivity, but on the self-determination of its users.