Wordpress, Coursera and others have the "shake fail" feedback (see Coursera gif below).
- Is there a name for this type of mimicry of a physical action (head shaking "no")?
- Is there any evidence of value or is it just for fun?
It's not just for fun - it's actually a really nice mechanism that attaches a delightful kind of human character to the website and stops the computer from being a box attached to a wire.
Yes, it's like the shaking of the head as if to say 'no, try again', but it's also like childhood sketching toys where it would clear the display if you shake it side to side. It's a bit like mobile behaviour where you can actually shake the device and on some apps, that will achieve an action like resetting a display. It's a bit like on a mobile device when you swipe a page too far and it bounces back.
These mechanisms emote a real world kinesthetic behaviour with a physical elastic energy-dissipating property which I think is really nice.
However, I do think that some of these animations can be improved so that they don't fall into a kind of uncanny valley due to striving to represent some kind of reality, but not getting quite close enough.
It's delightful, but it's not just fun. As for a name - as I've said before on here about things that are new and don't really have (or need) a proper name, different people will call it different things, but I think everyone will understand if you just called it a 'sideways shaking animation'.
I have seen it referred to as a 'Shake effect'.
The 'shake effect' is an example of motion or transition that have cognitive benefits that add to the user experience. The animation clarifies the interaction and draws attention when required.
The sense of fun comes from being a little unexpected but also being more intuitive. You get a sense of delight when you inherently understand it. It seems more human.
The broad term for this mimicry could be Affordance
EDIT: As pointed out, this animation is not pointing out the nature of interaction rather it is a signal that interaction is required. Therefore 'affordance' is not technically correct. Rather than Affordance the correct, broader term might be 'Signifyer'
For an excellent resource on UI animations and transitions and their affordance check out UI-transitions.com
Also check out this article from UXMag.com: Biological motion and happy interfaces
There's an issue with this specific example. While I prefer the bouncing effect to demonstrate an error, i really disagree with the position of the error message. There are two, actually even three (!) visual stimuli simultaniously. First, the unexpected red text apprearance. second, the position change to the form fields due to the appearance and third the bouncing effect. In this constellation, the bouncing effect is useless, because the user's eye will follow the appearance of the text, completely ignoring the nice bounce effect. Also because it changed it's position and is now lower that before.
Technically this type of animation is called a Bounce Effect. And it's one mean of attracting visual attention, much like flashing elements.
This approach is generally frowned upon in GUI design, as it's often perceived as obstructing the flow of natural user interaction.
In the instance above however the animation is user triggered, in which case other rules apply. Pop up notifications, animations and sounds are usually considered obstructive if they are system triggered (sometimes though it's justified, eg. if something happens that requires the users attention within a limited time frame, like an incoming call). If the same approach is used by user triggered actions however there is a larger margin for acceptance.
I think that it's mainly just for fun. It doesn't seem like there is a general name for this other than a "shake animation" simply because there are so many ways to get the same animation.
Here's a fun link: http://static.mbiosinformatica.com.br/jQuery