4

Recently, I’ve been noticing a lot of website homepage’s using fadeUp animations on the page content.

Spotify’s homepage is a good example.

I’m curious to know why they do this.

To me, it seems like a pointless use of animation. The site would work just as well without it. I imagine it would load a little faster without the animations. And it would probably be easier for readers to quickly scan the information on the page.

Has there been any research on this topic? I can’t find any articles discussing it.

3

First, let's call things by its name: in this case, when you say animation, you mean transition

Not everything has to have a function, aesthetics values usually mean more than function (sad but true). It's basically the history of mankind and civilization. A gold Rolex will give you the time as accurately as a cheap digital watch. But.... would you prefer a gold Rolex or a cheap digital watch? Even considering duration as a differential (a Rolex will certainly be more durable than a cheap digital watch), you could buy 1000 digital watches for the price of a gold Rolex.

Transitions are meant to create focus on elements, and as such, they're extremely powerful. Personally, in our studio we don't even consider a site without transitions: when we work on wireframes, transitions are included in the whole planning, including all parts of such transition (effect, time in, time out, etc)

From Enhance Your User Experience with Animated Transitions

Animations don’t only offer aesthetically pleasing goodies, but can be real user experience enhancers too. It’s key too find the right balance between fun and function and make sure your user flow is great without animations too. A good transition is one that is not obtrusive, enhances the user experience and is fun at the same time.

You gave Spotify's example, and Spotify's usability is known to be really bad, yet.... would you say they're doing bad because of this? Wouldn't you love to have just 1/100th of Spotify and hang on with the bad UX? And this is just an extreme example. You say transitions like these are pointless, yet it's evident some people think otherwise.

IMHO, these transitions call attention as content blocks (you'll see they animate on each click scroll using lazy loading, although this is just anecdotic, they could have loaded without this technique and just have a transition ), so they're grabbing attention to the content inside those blocks. To be honest, I would argue that not very effectively since they're focusing attention on the phones instead of the message, but well, the lousy UX is also part of their brand and I guess they might have tested this

In short, it all comes to each site's testing and research, then study the results: do the transitions affect the site's UX in a negative way? If so, then it's bad. If not, then why worry? If they bring something to the table.... well, the answer is obvious.

Additional Reading

3

I can't tell you the exact reason that Spotify have chosen to do this but I can tell you why I might use it.

The example page you shared here (Spotify) looks like it might be using an AJAX technique known by some as 'Lazy Loading'. This is where items are only loaded into the page just before they appear at the bottom of the viewport. Which means that the browser is only loading tiny chunks of information at a time rather than making the user wait while they load the whole page.

In the case of the example you shared (Spotify) the animation is completed using a combination of CSS and JavaScript (probably a form of JQuery) which means the animations are extremely light weight and only need to be coded and loaded once but can still be applied to all animated elements.

On top of that, the inclusion of subtle elements such as a little light animation, give the product a feeling that someone has taken care with design and construction as well as conveying more of the brand's 'personality'.

Subtle touches like these animations can make a big difference in the way users interpret the product.

1
  • 2
    I do believe this is the reason. The image wrapper in code has the classes lazy lazy-no-small indicating it is likely lazy loaded (I didn't feel like digging in deeper). The image only appears to be ~107kb but apparently they deemed that too heavy, so when they load it post-domready they don't want it just snap into view, and thus the fade it in. – DasBeasto Aug 15 '16 at 19:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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