Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

Coursea login

share|improve this question
2  
Perhaps "Annoying"? –  Danny Varod Jun 26 '12 at 9:47
    
@DannyVarod yes, but isn't that partly the point? –  JonW Jun 26 '12 at 9:52
1  
Put the big red error message next to the button instead of far above it and don't shake my UI! :-) –  Danny Varod Jun 26 '12 at 10:34
add comment

5 Answers

up vote 7 down vote accepted

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'.

share|improve this answer
    
That is anthropomorphism. Which can be very annoying. –  Danny Varod Jun 26 '12 at 9:50
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
Yes - good point - being user triggered is an important part of making this 'work'. –  Roger Attrill Jun 26 '12 at 8:44
    
I'm not sure if your point that this is frowned upon is correct. It Isn't random and IS triggered by user interaction - submitting the form. I would think that it attracts attention at an appropriate time. When the user is required to return to enter the correct details. –  Jay Jun 26 '12 at 9:19
    
@RogerAttrill thanks Roger, I like your take on the subject as well! –  AndroidHustle Jun 26 '12 at 9:25
    
@Jay hi Jay, it IS generally frowned upon to use flashing and moving elements in a GUI, that is unless the animation directs user attention to a control that requires the users attention in accordance with the best interest of that user, like with an incoming call. If you add flashing or movement into a GUI "just to have it" it is severe malpractice, and will annoy more than aid the user. And if you read my answer again I'm sure that you'll see that I've already recognized that the example in the OP IS user triggered and therefore should be considered OK. –  AndroidHustle Jun 26 '12 at 9:34
    
@AndroidHustle Again on reflection I agree. I misread that initially as you were suggesting this interaction was 'system triggered'. I generally agree that animation should serve a solid purpose and should be used at the right time. The devil will be in the detail and of course should be used sparingly. In my defence I was considering this example to have some benefit. –  Jay Jun 26 '12 at 10:05
add comment

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

share|improve this answer
add comment

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

Affordances "suggest" how an object may be interacted with.

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

share|improve this answer
    
I'm sorry but this shake effect has nothing to do with affordance. the bulge of press-able buttons, the underlining of click-able links and the navigational arrows of a pan-able surface are instances of affordance. This is system feedback of user interaction. –  AndroidHustle Jun 26 '12 at 9:40
    
@AndroidHustle On reflection I think you are right. I was referring to Affordance in the sense that it is a signal for possible action. Technically this relates to HOW you can interact with something rather than a signal that simply draws attention to suggest action. It is, as you say feedback of interaction, just utilising motion for additional utility. –  Jay Jun 26 '12 at 9:48
    
yes, it's more of a stimuli to attract the users attention back to the button again. But again, calling this stimuli Affordance would be incorrect. –  AndroidHustle Jun 26 '12 at 9:56
    
I've added a comment above to reflect this. –  Jay Jun 26 '12 at 10:18
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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