Accessible design and animations

George Koultouridis
2 min readOct 13, 2014

--

A couple of days ago I saw a very good post on how zooming and motion effects can actually make some people feel nauseous, dizzy, or give them a headache. I’m talking about healthy people now: for someone with vestibular disorders it can become a real nightmare.

This was a big issue in iOS7: it’s slim zoom, parallax and sliding effects literally made some users sick. Apple quickly solved this problem by allowing users to turn those effects off. Well, may be they should have invested more in accessibility testing, because in iOS8 the dizziness problem came back, this time because of the predictive search.

What do we know about accessible UI? I bet every designer knows that all the UI elements should be big and contrast enough, that every text should be easily readable. Almost everyone knows about color blindness, but very few designers actually check how their mockups look for colorblind people. And when a designer relies on color coding too much, some users will experience problems or won’t be able to use the product at all.

Well, the same applies to visual effects. The thing is: there is a lot more to disability than blindness. I’m not saying that we shouldn’t use animations in our UI. We need animations. They help us to attract users attention to important stuff or to explain animations at all. They also make our UI look fun, modern and stylish. But it doesn’t mean that we should be using all the visual effects we can fit on one screen at once. Sometimes when you open a website it’s all so fancy and attractive that it gets hard to see the content.

What I’m saying is that we should be using animations consciously, we should be aware of when and why we are using them. We should keep our designs balanced.

One very good article on animation usability suggests that when designing an animation one should consider its goal, its frequency of occurrence, and its mechanics. I would also say: consider it twice if your users don’t have an option to turn this animations off.

I would like to finish with a quote from Jef Raskin, author of “The Humane Interface”:

“The first principle. When using a product to help you do a task, the product should only help and never distract you from the task.”

Some further reading on accessible design and animations usage:

Accessible design: Which “everyone” do you mean? http://www.youtube.com/watch?v=I1Rz-6fKacQ#t=36

Motion sickness & the new Apple iOS parallex mapping design: https://vestibular.org/news/09-27-2013/motion-sickness-new-apple-ios-parallex-mapping-design

15 Tools if you are (not) colorblind: http://www.color-blindness.com/2008/12/23/15-tools-color-blindness/

Animation for attention and comprehension: http://www.nngroup.com/articles/animation-usability/

A nearly one page summary of design rules: http://www.mprove.de/script/02/raskin/designrules.html

--

--