2

I see more and more animated buttons in service oriented web applications, especially in registration and completing an action. In the literature of persuasive psychology, moving objects are used for attracting attention of user for particular reasons.

In current project, I do not have enough users to conduct a study and would like to know more about this subject. Do you have any study, preferably A/B tests, showing whether animations are useful for:

  • Increasing the number of registered users
  • Increasing conversion rates
  • Completing a non-related purchasing action

I had some interview sessions and some participants stated that they find it a bit annoying which may lead a negative effect on overall flow.

Here are examples of the animated buttons I used during my interview:

Pulstate

6

Button animations serve a different purpose

Observations:

  • The purpose of the animation is not to draw the user's attention, but rather to provide feedback to the user.
    • This is sometimes called a clunk: a clear acknowledgement to assure users that you have noticed the interaction.
    • In the physical world users live in, interactions provide feedback (closing a door, pressing a button, lifting a fork), and without feedback users feel disoriented.
  • Once you understand this, then animations can be designed properly for behavioral intent, resulting in more natural micro interactions.
    • For example, a button may highlight itself or rise (using drop shadows) on hover, to provide users with feedback that the button is, in fact, clickable.
    • A button may flash, ripple or depress when the user clicks to provide "clunk" feedback.
  • In all cases, the animated feedback has to be designed to achieve the desired feedback, not to grab attention.
    • So a flashing button on click is more likely to feel weird to a user than a simple ripple or a depression.

With this in mind, there are a few reasons why your study may have led to incorrect results:

  • In the panel you used, you have several different colored buttons with different interactions in the same panel. Since there is no consistency of interactions between the buttons, users are likely to feel disoriented because of the unpredictability. So any animation would feel weird.
  • If your animations were designed without communicative intent to providing natural clunk feedback, it's not surprising that they would feel unnatural to users.

Google's Material Design has a nice explanation of how button animation is used to communicate with users.

Some demo Material Design buttons with good clunk animations are here.

It's very unlikely that there are publicly available studies on the link between animated buttons and conversions. But there are lots of studies on control micro interactions, and with a proper understanding of the purpose of the animations it should be much easier to understand why companies like Google (who DO perform extensive user testing) have opted to use natural animations for buttons.

  • Hi tohster, thanks for the answer. "The purpose of the animation is not to draw the user's attention, but rather to provide feedback to the user" is it only your observation or do you have any reference for that? I am aware of the general usage of animations with feedback loops. Currently, i am searching for if these animations made people to take into an action or not... – Abektes Mar 22 '15 at 17:10
  • @Abektes try doing a search for animated microinteractions. There are also books on this subject like this: amazon.com/Microinteractions-Color-Edition-Designing-Details/dp/… – tohster Mar 22 '15 at 17:26
  • yes, i have it, nice book. thank you for your time. – Abektes Mar 22 '15 at 17:31
  • 1
    @Abektes From the marketing perspective, animation is designed to draw the user's attention and entice them to perform an action. Usually there needs to be some balance between making a call-to-action visible and not drawing unnecessarily attention to it. – Michael Lai Mar 23 '15 at 0:21
  • 1
    @Abektes I don't know if you can find any authoritative studies about it because every product/service is different, and so are the users. I think the 'balance' point is to time or coordinate the animation so that it draws the user's attention a the appropriate time. Marketing people will want to do this more than what is required, and UX designers want to do it at exactly the right time, so it is probably going to be somewhere in between. – Michael Lai Mar 23 '15 at 3:59

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.