4

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

Improve this question
3
  • 2
    Perhaps "Annoying"?
    – Danny Varod
    Jun 26, 2012 at 9:47
  • @DannyVarod yes, but isn't that partly the point?
    – JonW ♦
    Jun 26, 2012 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, 2012 at 10:34

5 Answers 5

Reset to default
7

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

Improve this answer
1
  • That is anthropomorphism. Which can be very annoying.
    – Danny Varod
    Jun 26, 2012 at 9:50
2

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.

Improve this answer
1

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.

Improve this answer
5
  • Yes - good point - being user triggered is an important part of making this 'work'.
    – Roger Attrill
    Jun 26, 2012 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, 2012 at 9:19
  • @RogerAttrill thanks Roger, I like your take on the subject as well!
    – AndroidHustle
    Jun 26, 2012 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, 2012 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, 2012 at 10:05
0

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

Improve this answer
0
-1

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

Improve this answer
4
  • 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, 2012 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, 2012 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, 2012 at 9:56
  • I've added a comment above to reflect this.
    – Jay
    Jun 26, 2012 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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