20

Android Enthusiasts recently got the redesign which also involved adding those very beautiful voting animations.

Here is my attempt at an animated GIF to illustrate what I mean:

(For a better representation, you can visit some question and try it)

That's oh so cute. Any plans on this? Please?

(They would be great on the sites which have similar circles around the voting arrows, but maybe somewhere else as well.)

  • 20
    This was our plan all along — if people liked them, we could begin to implement them elsewhere! – Kurtis Beavers Apr 3 '15 at 16:29
  • 4
    @Kurt AH that's great! Yes! Yes! Please? – nicael Apr 3 '15 at 16:51
  • @KurtisBeavers I don't have 10K on Android, but I like to imagine it also has animated delete votes. – user259867 Apr 3 '15 at 17:55
  • @pizza No, unfortunately :( Time to request? :D – nicael Apr 3 '15 at 17:55
  • I think they're awesome and add a modern feel to the site with all the AJAX 2 stuff out there. – dan Apr 3 '15 at 18:28
  • 2
    They resemble material design. But that only applies to Android. – Mooseman Apr 11 '15 at 2:50
  • @Moose Looks like every site got a somewhat material design... – nicael May 11 '15 at 18:09
  • @nicael Any specific examples? – Mooseman May 11 '15 at 18:11
  • @Moose Meta? SO? SU? WebApps? Apple.SE? Webmasters? AskUbuntu? etc... – nicael May 11 '15 at 18:13
  • @nicael Not like this... – Mooseman May 11 '15 at 18:15
  • Oh. But anyway those anims are gorgeous. – nicael May 11 '15 at 18:21
  • @KurtisBeavers Yeech, that's horrible. Please tell me that's a belated April fool. What the hell is that thing doing? When I click on a button, I want immediate feedback, I don't want to watch a video. – Gilles May 12 '15 at 9:56
  • 4
    @Gilles If you don't like it you should post your feedback on meta.android and see if the community feels the same way. – Kurtis Beavers May 12 '15 at 11:16
  • 1
    @Gilles apparently you have it - the score changes. Also, does you computer lag during the animations so you don't find the feedback to be immediate? :D I doubt. – nicael May 14 '15 at 16:10
  • 1
    @KurtisBeavers is this still planned to be be implemented on other sites? :) – ᔕᖺᘎᕊ Oct 31 '16 at 16:19
11
+250

I've got some of the CSS from Android.SE and made a CSS file:

All the code is from Android SE, I just condensed some of the selectors.

It does the pulsing for the voting and favourite buttons, and pulses on click as well.

The cool animation that happens when you click the button (as shown in your gif) doesn't work though. Instead, it goes sideways (rather than upwards/downwards). I'm no expert on CSS and don't know for sure why it doesn't work - although I'm pretty sure it's because of the way the SVG file is designed, and where the voting signs are positioned.

Anyways, here's what this CSS will do for you:

enter image description here

At least it's better than the current CSS :)

@keyframes pulse {
    0% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -ms-transform: scale(1.1, 1.15);
        -webkit-transform: scale(1.1, 1.15);
        transform: scale(1.1, 1.15)
    }
    100% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}
@-webkit-keyframes pulse {
    0% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -ms-transform: scale(1.1, 1.15);
        -webkit-transform: scale(1.1, 1.15);
        transform: scale(1.1, 1.15)
    }
    100% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}
@keyframes press {
    0% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -ms-transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2)
    }
    100% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}
@-webkit-keyframes press {
    0% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -ms-transform: scale(.8, .8);
        -webkit-transform: scale(.8, .8);
        transform: scale(.8, .8)
    }
    100% {
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}
.vote-down-off,
.vote-up-off {
    position: relative;
    transition: all .1s ease, background-color .4s ease, background-position .4s ease;
    -webkit-transition: height .1s ease, background-color .4s ease, background-position .4s ease;
    -moz-transition: all .1s ease, background-color .4s ease, background-position .4s ease;
    -ms-transition: all .1s ease, background-color .4s ease, background-position .4s ease;
    -o-transition: all .1s ease, background-color .4s ease, background-position .4s ease
}
.vote-down-off:hover,
.vote-up-off:hover,
.star-off:hover,
.star-on:hover {
    -webkit-animation-name: pulse;
    -webkit-animation-duration: .5s;
    animation-name: pulse;
    animation-duration: .5s
}
.vote-down-off:active,
.vote-up-off:active,
.star-off:active,
.star-on:active{
    -webkit-animation-name: press;
    -webkit-animation-duration: .5s;
    animation-name: press;
    animation-duration: .5s;
}

It's on Github and you can append it to the head with $('head').append('<link rel="stylesheet" href="https://cdn.rawgit.com/shu8/SE-Answers_scripts/master/coolMaterialDesignCss.css" type="text/css" />');.

If you want it in a userscript format (to auto-add the CSS to all SE sites), get it from the dev version of my SE Additional Optional Features userscript at StackApps.

  • Thanks, but before asking this, I've tried importing animations from Android. And found it not enough. – nicael Jun 14 '15 at 22:09
  • @nicael welcome back :) Yeah - I know they're not perfect - but they give the overall feel of AndroidSE's style :) This is only until SE start implementing this in all sites! – ᔕᖺᘎᕊ Jun 15 '15 at 6:13
5

Ouch! What the hell is this?

An animation has no business being triggered by a routine, obvious event such as clicking on a button at the location of the animation, or hovering on that button. Animations attract the user's attention. Attracting the user's attention to what is under the cursor is pointless: the cursor is already there. Attracting the user's attention to a routine action such as voting is wrong, especially since it's merely providing feedback that the button has been clicked.

You should attract the users's attention if something happens that calls for them to react. An animation to confirm clicking doesn't only make no sense, it's actively wrong.

You may find the animation pretty. I don't, but prettiness is in the eye of the beholder. Either way, that's the wrong question. The correct question is whether it's good user experience. An attractive user interface can be good for user experience, but it isn't the determining factor. The primary factor in good user experience is whether it makes the site easier to use. These animations make the site harder to use: when I've voted, something forcefully grabs my attention for an extra second or so. This is a complete waste of attention.

If you want fancy animations, write a userscript. Or play a game. These animations have no place on a functional interface.

  • 1
    How quickly are you going through questions and voting that a .2 second animation is slowing you down ? – User112638726 Jun 8 '15 at 8:59
  • @User112638726 The animation lasts a bit more than .2 seconds, but it isn't the duration of the animation that's the problem, it's the capture of attention. The cost is that it interrupts my visual concentration, so I need to focus again on what I was doing, which costs 5–10 seconds. – Gilles Jun 8 '15 at 9:59
  • 2
    I'm not being funny, but you might have ADD if a simple animation is causing you to lose focus for 10 seconds every time you see it. – User112638726 Jun 8 '15 at 10:08
  • @User112638726 No, this has absolutely nothing to do with ADD. Human visual cortex is attracted to motion at the edge of the perception zone, like many other animals. – Gilles Jun 8 '15 at 10:52
  • Why would the animation be at the edge of your vision, you are clicking the button. Do you not look at it when you click? And even 5 seconds is a long time for a normal person to be distracted by a simple animation, especially after seeing it multiple times. – User112638726 Jun 8 '15 at 10:58
  • @User112638726 I look at the button when I click, then I move my attention back elsewhere. This can be immediate when the button is fixed, but not when it's animated, because the sudden animation grabs my attention. It doesn't help to have seen the animation before: the distraction is at a lower level, before I've processed the “seen before” bit. The very fact that I'd process a “seen before” recognition is part of the distraction. – Gilles Jun 8 '15 at 11:28
  • 3
    I was actually saying it may take longer because someone isn't used to it or finds it interesting the first couple of times. After that though if its taking up 5 seconds everytime you click it then there's something very wrong. I personally don't like or dislike it but i really don't think its distracting at all. – User112638726 Jun 8 '15 at 12:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .