What is the reason to show animated numbers counting towards the final number?

Question

In some apps, when navigating to a page that has number showing one or more different numbers it will animate from zero to the final number in about 0.5 seconds, counting upwards. Till example if the final number is 15, it starts on zero, 1,2,3,4,5,6,7,10,11,12,13,14,15 changing the value every for example every 100 millisecs.

Is there any user interface reason to do this? Is it because it looks cool, or the user will direct more attention to reading numbers that were animted instead of static when entering the page? Is it reserved for numbers with specific meaning, like it does it make sense to do this animation to a phone number?

(If anyone finds an example GIF, its greatly appreciated)

Answer 1

In game scenarios specifically it provides "excitement" and a sense of "action" around something. e.g. your coin count at the end of a level.

If you just saw the final static number of 37,865 it doesn't seem so cool... but if you got 15,000 for completing the level... 5,000 bonus for doing it in under X seconds... 2,500 for rescuing all 3 pandas, 1,000 for finding the secret key, 450 for blah, blah, blah... it becomes very rewarding (just like collecting reputation credit in any StackExchange related site)

I think herein lies part of the rationale. Users are used to these concepts in video games (and generally like them) thus there is hopefully an increased sense of satisfaction when the user is presented with a growing number of {whatever} in other contexts.

In an extremely odd variation of this... when I fix an old Windows computer that has a virus infection on it... once I see that there is at least 1 virus... I actually get pleasure watching in real-time as the number grows! Not that I like having viruses - but I get more pleasure out of fixing a bigger problem vs. a tiny issue.

Answer 2

The animation definitely attracts the eye. If that is not the purpose, an animation like that should not be used.

It can be used in combinations with other animation effects (including colors, size, and change-interval size) to clearly show how "much" this number means.

There could be more uses of it, depending on the application. I used it once as we were accumulatively adding up the numbers of items that we had to collect from another module of the system, which was slow. The GUI received "mid-results" during the collect-and-count process, but waiting for the final result, the total sum, could take several seconds, so in that scenario the number doubled as a process indicator.

Answer 3

I think it depends a bit on context, but in general you hit on some of the main reasons. One would be that animations do draw a user's attention - so if the fact they they jumped several pages is important enough to warrant special (although minimal) attention, this would be one technique. Another is that this animation visually indicates the number increasing or decreasing in value, mentally enforcing the magnitude and directionality of the change (more rapid animation = larger change).

But it seems you are asking specifically about cases where this animation happens on page load. I would certainly see less utility in this and more just visual flair.

For a phone number, I would lean even more towards no unless you're going for the "coolness factor" just to add a bit of visual flair. Since the values of the numbers in a phone number don't have any sequential meaning, it isn't as useful from a cognitive perspective to show them increasing or decreasing in an animation.

Answer 4

Mark Hazlewood makes some very good points, but I want to add to it - specifically regarding the "cool" factor.

Donald Norman put forth a theory of aesthetics in usability called Emotional Design. The basic premise of the theory is that attractive interfaces put us in a good mood, and ugly interfaces not so much, and when we're in a good mood, we think more creatively (versus more focused for "bad" moods) and are thus more able to navigate unfamiliar interfaces. That is a very simple description of a fairly complex theory, so I suggest you take a look if you're interested.

There has been a large body of research done that shows that improving the aesthetics of an interface - without changing its functional design - directly improves the usability of a system. Here is an example.

The point I am trying to make here is that while, yes a good chunk of the flipping numbers is to look cool, it's not just to look cool. There is function in it. It enables a more open mind in the user, and helps to establish a rapport, so that the user is more likely to forgive any issues that may be present.

Answer 5

When it comes to transitions and UX, you have to think about how our brains functions and interprets our environment.

The purpose for animation is to illustrate transition by making small changes over time. To our primitive brain, action tells us, "Hey, this thing is moving. Let's pay attention to it to see if it's a threat."

Think about how movies work (still images viewed in quick succession). It wouldn't be enjoyable to watch a film at a frame rate because it would be jumpy and unnatural. A jumpy movie makes you think harder as you have to parse together the disjointed scenes. In UX terms, jumpy transitions increase cognitive load.

When you use a smooth transition, the message is more logical to our senses (objects in our environment don't just jump into existence after all). When you make the numbers animate, you are promoting a familiar expectation from the user, which is comforting. As a user, I know how the numbers are connected to each other in a logical manner without having to manual piece together the relationship.

Answer 6

There are a lot of details missing in your question, like what the number is for, and if the application might be accessed where there is a potential for slowness. The number one GUI reason for displaying incremental numbers is so that the user can see that is something is happening when a process is running or loading. Depending on the application, if the user is not aware there is a process running or loading in the background; they may assume something is broken. This can lead to help requests where there is nothing wrong, or in the worst case a user may do a hard restart resulting in unforeseeable issues.