Wedge
Public area => The Pub => Off-topic => Topic started by: Dragooon 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?
-
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.
-
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).
-
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.
-
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.
-
*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.
-
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?
-
I cannot see the latest fader.js fix for the obvious reasons ^_^, or any of the animations you mentioned as a matter of fact.
-
(BTW does SMF have this problem in IE6?)
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)I'm very conflicted with the "More options" animation in the post box.
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.
-
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)
$.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);
});
};
-
@Pete> fader.js (SMF SVN), line 194:
this.oFaderHandle.filters.alpha.opacity = Math.round(tempPercent * 100);
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.
-
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.
-
("filters", not "filter"? Ooh, headache...)
Re: XF, I'd just like to know if they've added any features that are fresh