A couple of days ago I received an email from a user named Jen, a Firefox user and Java programmer:
… when firefox goes to a page where it wants me to enter a password, then a horizontal bar-shaped menu appears at the top and the entire page slides down about a centimetre to accommodate this bar … The problem for me is that the bar in firefox appears very suddenly and the movement of the page to accommodate it makes me feel very motion sick. There is currently no way to turn this page sliding off.
After several emails back and forth with Jen, who very patiently explained the issue. I learned that she and others actually do get sick to the stomach from transition affects in UIs. The fact that this is trendy among UI developers is no help. For example, Apple loves to use transition affects by default. At my request, Jen put up an article on how to turn transition effects off in some popular products.
Firefox 2 doesn’t have this issue. The recent Firefox 3 automatic upgrade had literally made Jen sick! For now I suggested to that she return to Firefox 2 and turn off automatic upgrades. Prior to that suggestion, she was in the midst of switching to Opera — that’s how real the issue was for her.
As it turns out, this is a topic you don’t hear discussed much in accessibility circles. It is, however, mentioned part (h) in the software guidelines of section 508 law as well as W3C’s UAAG (the user agent accessibility guidelines). When this topic is discussed it’s usually discussed along with its cousin — blinking. Blinking can cause seizures in people with epilepsy.
Both blinking and animations can also cause cognitive stress in some individuals. Perhaps that’s why I find these things annoying. I’m probably one of them, and I suspect there’s a scale between loving it, finding it annoying, being stressed by it, and getting sick from it. But also, I just want to get to my content!
Does this mean that these effects shouldn’t be used? No. Firefox needs to provide users with a way to turn them off.
And what about web apps? JavaScript toolkits like JQuery make transition affects really easy to do, and it appears that this is going to cause problems for many people like Jen. I’m not sure what the right mechanism should be for exposing preferences to web pages — we’ll have to follow up on that one later. It should probably be a standards discussion.
If anyone has more information on these issues or statistics, feel free to add a comment.
UPDATE: I’m also proud to have introduced Jen to AdBlock Plus — one of Firefox’s best accessibility aids.
Access Garage 
Just show the bar over the page content. In other words, don’t slide the content downwards to make room for the bar. This can either be done by just having the bar show on top with not fade in effect or have a fade in effect.
If the bar was animated using SMIL or CSS transitions, then we could just disable those features for a certain set of users.
JS libraries are a harder problem. Maybe add a read-only “smoothTransitions” property to the Navigator object?
Kurt, yes 🙂
This article is intended to describe the bigger picture so that developers, testers and user interface designers think about these things.
Thanks Robert. I think we’ll find that there’s a need to expose more than one property on user customization to JS libraries.
A colleague at IBM, Richard Schwerdtfeger, is looking into this for the e-learning community. There is a desire to customize content based on some sort of user profile.
I haven’t thought any of this through yet. IIRC, Vista has more detailed accessibility settings than other platforms. Potentially this information could be exposed for those web apps that need to customize content.
On the other hand there could be a privacy issue if we expose too much about a user’s content preferences.
great points. Actually the effects you refer to are transitions, not animations. You can do transitions using CSS following Apple’s proposed transitions approach (https://bugzilla.mozilla.org/show_bug.cgi?id=435441).
The benefit of using CSS for transitions is that a user stylesheet can override them using !important.
So, user interface effects like this should be implemented in CSS if possible. That way, they can be easily overridden by users.
Safari has a creative way of dealing with these types of notifications without sliding the page: the notification bar initially overlay the page content, but then you can scroll up in case you need to access anything that it was covering. One nice property of animation is that it captures the user’s attention, making it really useful for things like notification or a find in page interface. However, I totally agree that reaction to excessive animation can range from annoying to causing physical discomfort, and we should expose controls over any animation in Firefox’s UI.
Alex, yes I agree about it getting the user’s attention. I don’t think we should stop doing it — we just need to be able to turn it off.
What did you mean by “we should expose controls over any animation in Firefox’s UI.”
@aaronlev I believe Alex meant that Firefox should create and expose a way to turn those off through a preference. Though, the way he said it sounded a bit confusing: “… and we should expose controls over any animation in Firefox’s UI.” Alex, correct me if I’m wrong.
I totally agree that Firefox (and all Mozilla products) should do this. It’s never really bothered me, but those users it does affect should taken into account.
Really Good Post!!
I didn’t know all this…
I’m going to translate this post to spanish and italian if you let me….
Thanks
FlaPer87 — anytime! Go ahead and translate to Klingon even! 🙂
I suspect the biggest problem is the PAGE sliding down to make room for the notification bar, not the bar sliding down over the page. It disorienting to have what you were reading slide away from under your eyes.
This moving-the-page method has bugged me for a long time. I notice it when I have ONE page open and then open a “second” tab. The appearance of the tab bar causes the current page’s content to slide down. It’s horrible! Why not keep the page’s position in-place, and slide the tab bar / alert over the top of the page? Voilá!
Hi,
Thanks to you all for thinking about this. It was a real shock to discover that Firefox 3 was unusable for me, and that links to reinstall firefox 2 had all disappeared. It’s brilliant to discover that you are taking accessibility issues so seriously. I am in touch with a scientist who is writing a book on vision and these kinds of issues, so I will write and let her know about this blog, and about how helpful your community is. I think she will be really interested.
Thanks a million,
Jen
Kurt, Gecko currently can’t do what you suggest without painting artifacts. That will be addressed one of these days, but in the meantime it’s not really doable.
The behavior described by Alex Faaborg is something I’d love if we could support – I for myself have proposed a number of times that SeaMonkey should adopt the findbar typeaheadfind solution if it can be displayed in this way, so whoever implements a way of XUL/Gecko apps being able to do this gets a virtual hug 🙂
[…] recent comments about problems a particular user was having with the sliding effect that the Firefox notification […]
Important post. Just wanted to drop in to say we have a bug on file in dojo “Turn off all fx, animations”… Maybe you could drop in on that ticket to discuss the import of this issue.
http://trac.dojotoolkit.org/ticket/4683
cheers,
D
I also discussed this issue with a couple of web designers at a recent symposium I attended, and it turns out that not even many people deeply involved with web accessibility are aware of the fact that these transitions can cause physical discomfort. Yes, we all know about blinking, but this aparently hasn’t been raised much before.
Thanks to Gen for bringing this to our attention!
Thanks to you all for thinking about this.