3

I'm building a pretty simple Question and Answer game. It's in the beginning stages now, but I would like to know what your thoughts are on the background animation I currently have.

1) Is there too much going on in the background? Should I go with more similar colors for all the lines and/or reduce the speed of the animations? Maybe use some transparency with the lines?

2) Do you think this would be safe for people with epilepsy to play?

3) I'll probably add a disclaimer that I do not take any responsibility for seizures possibly caused by playing my game. And also have them click "I understand" before they can play? Is that doing enough?

4) What are the things to watch out for when doing animations like this? To keep them safe for all to view?

enter image description here

Here is a jsFiddle so that you can see the animation for yourself. I don't think it's too bad, but as a disclaimer DO NOT VIEW IT IF YOU ARE PRONE TO SEIZURES.

Please Note: I only have it set to run twice in the fiddle, but it will likely run non-stop during the actual game.

3
  • If you are doing something that requires a disclaimer, most probably is wrong and should be done in some other way.
    – PatomaS
    Feb 23, 2014 at 8:03
  • There is no need for the bars moving, I'm sure you can do some other animation that will make the background interesting, but not distracting or annoying.
    – PatomaS
    Feb 23, 2014 at 8:04
  • Why do you want to use this animation?
    – unor
    Feb 25, 2014 at 13:00

2 Answers 2

3

W3C’s WCAG 2.0 has a guideline about seizures: Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures.

In Understanding Guideline 2.3 it says about warnings:

Warnings do not work well because they are often missed, especially by children who may in fact not be able to read them.

To reach level A, you must fulfill 2.3.1 ("Three Flashes or Below Threshold"):

Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.

(See the definition of flash.)

More information and possible techniques to achieve it: Three Flashes or Below Threshold: Understanding SC 2.3.1

2

Sorry if I do some english errors, I'm french.

Well, in my opinion, the background is moving too much, it distracts the user, makes It pretty difficult to read and write text. I advise you to get rid of it, or at least making it moving slower and/or only at the beginning or using It only at some specific moments (for example when the user validates his answer), or a mix : making It fast at the begging and making It very slow for all the rest. Or why not creating a totally different animation. But to be honest with you, I don't think that It's a good thing to have an animation around when your user needs to read/write some text.

Although I'm not a doctor I effectively think that there is a risk for your users touched by epilepsy/seizures. If you want to keep your animation as It is right now, or if anything on your website is moving quite a lot, that would be a good idea to enable them to disable/reduce animations. Again, only a professional will be able to give you a real medical answer, but in the doubt, I recommend you to create this option.

About the disclaimer I think It's pretty good, but again, I'm not a professional to answer to those sort of legal questions, I advise you to draw inspiration from what already exists In some professional video games. As I told you above, why not placing a button labeled "Continue without animations" or "Continue with reduced animations".

1
  • If the dev REALLY wants a set of moving lines I'd suggest subtler contrast and broader bars. Feb 24, 2014 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.