Do animations help?

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Do animations help?
« on December 31st, 2010, 07:42 AM »
This is something I've been debating with myself. I've been adding subtle animations in my project lately(For example being, as the user submits the form, the form slides up and the confirmation screen slides down, or if a user changes an option which requires an alternative field to pop up then the current field fades out and the next field fades in), ofcourse this is for eye candy and offers no usability, but it looks good. Do you think it makes a difference?
The way it's meant to be

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Do animations help?
« Reply #1, on December 31st, 2010, 09:12 AM »
I disagree on the 'no usability' part, I actually think it does add something of usability, since what you're doing is encouraging a given behaviour.

By applying a transition effect, there is feedback directly and immediately to the user that their action did something, and it's feedback that not only has active consequences - new UI to click on - but passive ones too: it shows them that immediately the computer is doing something about what they clicked on in a visual, visible way.

I've watched people be thoroughly observed when they see an expand button suddenly open something enormous that they weren't expecting, and it was a visible user surprise for them. Sort of like how some websites have the really huge menu on-popup, it has a visible jarring effect. A subtle animation, however, smooths the transition - at least that's my experience.
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Do animations help?
« Reply #2, on December 31st, 2010, 09:53 AM »
You got a point, I also learned the sliding animations are useless on a large object(height wise, they get choppy) when compared to fades. That and jQuery UI effects library is more useless than anything(The core is 3KB gzipped :P, Apart from explode animation which is ok... but doesn't really have a good use).

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Do animations help?
« Reply #3, on December 31st, 2010, 09:56 AM »
There is only one reason I've ever even considered the jQuery UI Effects widget, and that's because for the one project I was doing recently, the standard easing didn't quite work for what I wanted and some of the less linear easings might have suited. As it happened, I realised that for the period of time involved, the easing changes didn't make that much difference.

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Do animations help?
« Reply #4, on December 31st, 2010, 09:58 AM »
You don't even need jQuery UI for other easing effects, what jQ UI does is that it incorporates the jQuery easing plugin(http://gsgd.co.uk/sandbox/jquery/easing/) by default, but in reality easing support is a default feature of jQuery(By default it only has easeInLinear AFAIK) and that plugin adds more easing options.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Do animations help?
« Reply #5, on December 31st, 2010, 10:06 AM »
*nods* That's what I meant, I wanted to try out the others provided since they seemed like they would do the job I wanted, but as it turned out, I ditched it and used the linear ease-in.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Do animations help?
« Reply #6, on December 31st, 2010, 10:27 AM »
My opinion: fade effects are very neutral regarding usability. They probably help it more than deter it. However they're very nice to the eye and thus are a positive to me. The only downside is the IE incompatibility. Basically -- jQuery has a bug in which fade animations remove font anti-aliasing unless you manually reset the filter style at the end of the animation. (See latest fix for fader.js) (BTW does SMF have this problem in IE6?)

Now, when it comes to ANIMATIONS, I'm of the opinion that they need to be very, very subtle. Quick reply animation is the most we can afford in terms of size. I'm very conflicted with the "More options" animation in the post box. I'm inclined to remove it, or only animate part of it, I don't know. Look at the stats page, too, open and close a month: the animation feels a bit out of place.
I'm of the opinion that once we're done playing with these, we'll (hopefully) naturally find the good balance that makes these "cool" and "not annoying".
What does XenForo do anyway?

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Do animations help?
« Reply #7, on December 31st, 2010, 10:28 AM »
I cannot see the latest fader.js fix for the obvious reasons ^_^, or any of the animations you mentioned as a matter of fact.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Do animations help?
« Reply #8, on December 31st, 2010, 10:43 AM »
Quote
(BTW does SMF have this problem in IE6?)
No, since they never use opacity anyway, they find the colour of the background and manually alter the colour to fade to it. Which is fine, provided there isn't a patterned background, and for that matter that the colour was specified as a full #rrggbb hex triplet.

Note that it isn't just text that has this issue in IE, images do too, as I discovered a while ago (I assumed it was related to PNG transparency, where pixels that are alpha-transparent becomes either fully transparent or fully opaque)
Quote
I'm very conflicted with the "More options" animation in the post box.
It's fine. It only grated on me a touch last night but that's because I was working with debugging/rewriting the attachment selector code and had to refresh it many times. In normal use it's absolutely fine.


I never really noticed what XF did. That reminds me I should probably upgrade to the current beta and hand out links to folks to have a play around.

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Do animations help?
« Reply #9, on December 31st, 2010, 10:44 AM »
Oh I just realised the bug you're talking about, I got its fix in my code(Don't know if it works though :P)
Code: [Select]
$.fn._fadeIn = $.fn.fadeIn;

$.fn.fadeIn = function(speed, easing, callback)
{
$(this)._fadeIn(speed, easing, function()
{
if ($.browser.msie)
$(this).get(0).style.removeAttribute('filter');

if (callback != undefined)
callback.apply(this);
});
};

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Do animations help?
« Reply #10, on December 31st, 2010, 06:38 PM »
@Pete> fader.js (SMF SVN), line 194:

Code: [Select]
this.oFaderHandle.filters.alpha.opacity = Math.round(tempPercent * 100);
("filters", not "filter"? Ooh, headache...)

Re: XF, I'd just like to know if they've added any features that are fresh ;)

@Dragooon> The removeAttribute() line can be done faster (with no jQuery interaction): this.style.filter = ''; (Also, avoid using get(0) and use [0] instead, it's a bit faster... And shorter!) You don't even need to test for IE because other browsers will simply ignore the line.

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Do animations help?
« Reply #11, on December 31st, 2010, 06:43 PM »
You got a point, its not my fix anyway I borrowed it from somewhere and changed it a bit to use the default fadeIn instead of a customFadeIn.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Do animations help?
« Reply #12, on December 31st, 2010, 07:35 PM »
Quote
("filters", not "filter"? Ooh, headache...)
Well, we never directly do that now, which is awesome. I don't remember them using opacity though :/
Quote
Re: XF, I'd just like to know if they've added any features that are fresh
That's the thing, I'm not sure what exactly is *new*, that we're not already thinking of doing (and/or doing better).