Important note: if you can’t see any video above, it’s because you’ve rejected cookies. I’m afraid you’ll need to accept them if you want to watch my talk! Otherwise, you can go straight to YouTube and watch my UX Copenhagen 2023 talk there.
Hi, I’m Piccia Neri. In my talk at the conference UX Copenhagen in 2023, titled “Dizzy users close browsers: balancing creativity and accessibility”, I debunked the myth that accessibility kills creativity, and that the only way to be creative on the web these days is through animation.
TL;DR: I shared how my love for free diving led to discovering I have a vestibular disorder due to chronic ear infections, which makes me super sensitive to flickering lights—yes, even those pesky web animations. I spoke about the often invisible impact such animations can have, especially on folks like me with sensory sensitivities. I argued for more accessible and inclusive web design, so everyone can enjoy the web without hassle. It’s all about making sure our digital spaces welcome everyone, not just those who can handle the flash and dazzle.
The YouTube video above has auto-generated captions. I am adding the original text below, which is almost word for word, but not fully edited yet for easier reading (I am on it!).
Dizzy users close browsers: balancing creativity and accessibility
Transcript of talk by Piccia Neri, presented at UX Copenhagen 2023, Beyond Tellerrand 2023, and WeAreDevelopers Accessibility Day 2023.
Does anyone recognise the image below? Divers in the water with a village behind it. If you do recognise it, you probably love it as much as I do. Dahab is a tiny village on the coast of the Red Sea that’s the Mecca of scuba diving and freediving. It’s very relaxed, there’s a hippy vibe there, and I love it.
I also love it because when you’re anywhere in the water in Dahab you’re immersed in this deep blue wonder world, with gorgeous sea creatures dancing around over the corals in the sun rays. I am at my happiest when I’m in the water.
So that’s why I enrolled in a freediving course in Dahab: I wanted to do more than simply snorkel. I wanted to feel as one with the fishes; I wanted to glide silently among them; I wanted to explore the depths; and I wanted to practice meditation in motion, on a single breath.
In the basic freediving course I took they taught us the theory and safety in a classroom, and then the instructors took us into the water.
And that’s where my dreams came crashing down, dissolving like a headache tablet in the warm waters of the Red Sea.
I soon realised I had a big problem: I couldn’t equalise.
Simply put: my ears underwater hurt too much for me to get them to pop.
In order to get your Level 1 free diving certification, you need to dive down on a vertical line to at least 10 metres. I could not proceed any further than 3 metres. And even so, at the cost of considerable pain in my inner ear. This wouldn’t do. So the instructors sent me off to an ear specialist in the village working specifically with divers.
He examined me and then asked: where do you live?
I live in London, I answered – and I cycle everywhere.
Ah! That figures! He said. You have a chronic inner ear infection due to pollution. You may train your ears to withstand the pressure and not hurt when you dive, but that might take years.
I was crushed. I was so disappointed that my dream of swimming with the fishes like a silver-haired mermaid would not come true. However, at least now I had a diagnosis.
Then life went on and I moved on from my crushing disappointment. Unless I was in the water, I had no reason to think about this issue.
Fast forward to 8 years later, around February 2023, when I had to wait a couple of hours for some test results in a hospital waiting room, in Spain, where I live now, under extremely bright flickering fluorescent lights.
At the end of the second hour I had a major fainting fit.
I had to rip the mask off my face in order to breathe, I was overcome by a powerful wave of nausea, and I crumpled down on the floor in a dizzy heap.
I have to say, if you need to faint anywhere, it is definitely a good idea to do it in a hospital. I was rushed off to a bed and after a full set of tests they told me I was 100% fine and had absolutely nothing wrong with me that they could work out. So I called a family member to pick me up. The nurses wheeled me out to the entrance…
…and placed me once more under a super strong neon light. After 30 seconds, I was overcome by exactly the same dizzy spell and wave of nausea that had struck me down earlier. I am afraid to say that I had to stop the taxi and empty my stomach by the side of the road. Sorry for the gory detail, at least I’ve spared you a photo, but you do need to understand just how sick I was feeling.
Once I got better I researched a bit further, and I found out that light sensitivity is very common for people affected by vestibular disorders, and that neon lights have a flickering frequency that can trigger episodes just like mine.
On the very same day of this discovery I went to have some late afternoon cake with a friend in a coffee shop near my studio.
Guess what? That shop had made the same dubious choice of lighting as the hospital. After half an hour under harsh neon lighting, I had once more that same overwhelming wave of nausea, again.
There is no doubt left now. I have a vestibular disorder. Which I did know after all! I was diagnosed in 2015 by a world-renowned medical consultant. I just didn’t think it affected me unless I was in the water.
This is how the a11yproject explains the vestibular system. “Your vestibular system is the sensory mechanism in the inner ear that detects movement of the head and helps to control balance.”
The a11yproject website goes on to explain that “People with vestibular disorders have a problem with their inner ear. It affects their balance as well as – crucially – their visual perception of their world around them.” I left London 7 years ago [in 2016], to live in a much less polluted environment, so my condition has probably improved a bit, but it’s still there.
And that’s when I had an amazing lightbulb moment (forgive the various levels of punning here)
Finally, I have a good, sound demonstrable medical reason why I hate animations on the web! I’m not just a cantankerous old fart: I have a sound base for my dislike. And suddenly a whole new angle for my presentation at UX Copenhagen.
Your GIFs and your animations literally make me sick.
For some, this is is a truly disabling condition. And it’s an invisible one.
By the way, it’s definitely not just me. According to a medical study, 35% of US adults age 40+ (ca 69 million) present evidence of vestibular dysfunction. That’s the whole population of Thailand by the way.
That’s the equivalent of the whole population of Thailand, by the way.
Moreover, 4% (8 million) US adults report chronic balance problems. 1.1% report chronic dizziness. 80% age 65+ have experienced dizziness. (Source: National Institute on Deafness and other Communication Disorders (USA)
Like I said, not just me.
However, it is not just us oldies who will not like your web animations. ! ! There are many other categories that are negatively affected by reckless web animations.
2.2 billion with a vision disability
75 million on the autistic spectrum – the entire population of the UK
50 million with epilepsy – that’s the whole of Spain, throwing Andorra in for good measure.
I think I’ve made my point clear!
In short:
Your GIFs and your animations are making billions of us sick.
As I was preparing this talk I asked myself. Isn’t this already obvious? Doesn’t everybody who works in the industry already know all this? Am I preaching to the converted?
And then I received this email.
An email for a WordPress meetup, sent by people in the industry who have been working online for years – with as many as 6 gifs in it, that I couldn’t stop. And that made it impossible for me to take in anything at all about the meetup. The GIFs made me sick, without adding anything to the experience. Needlessly to say, I didn’t go to the meetup!
I actually do NOT think that GiFs are terrible tout court. Let’s say that when I saw the first one, which in my memory is this website for Batman Forever by the legendary Jeffrey Zeldman in 1995, I was very excited, just like everyone else. I could surely not have anticipated how ubiquitous they’d become. But more on this later. For now, this is the question that comes up for me now:
Is animation indispensable in this day and age? Can we be creative without animation being the protagonist?
And this question for me naturally evolves into: Can we be creative and accessible? Last year I gave a talk on accessibility to a Spanish audience, which was followed by an engaged conversation. A few people were saying: you’re asking us to let go of creativity when you tell us to be accessible.
At this point I am going to ask YOU: Are the two mutually exclusive? Can accessibility be creative?
Please let me know by writing to me: piccia at piccianeri.com
Then I thought: I can think of hundreds of thousand of examples of creativity that doesn’t use animation. Specifically because in the discussion I mentioned, many people seemed to equate creativity with animation.
Here is a detail from a painting titled The Garden of Earthly Delights by Hyeronimous Bosch. It’s an incredibly detailed and intricate depiction of humanity, animals and plants in bizarre combinations. It’s undeniably creative: and yet, it doesn’t move. I mean if we needed animation in order to have creativity, then we might as well set fire to the Prado in Madrid, Spain, where this painting is situated, just to mention one of the many museums that are full of completely static masterpieces of imagination and skill. And yes I do know that this is not strictly speaking accessible, because it’s not visible to blind people. However, it could be made accessible, and I can show you how.
This painting of St George slaying the dragon is in the Pinacoteca di Bologna in Italy, it’s a medieval painting by Vitale da Bologna, an artist active in the second half of the 14th century that I have always particularly loved. For someone who can’t see it, it can be described it in detail, saying that St George is on a dark grey horse in mid gallop with its neck elongated in a backwards movement and its head turned to the side, the dragon is on the ground with the knight’s spear down its throat and so on. But if someone is in the museum, there is another wonderful way to make it accessible, and here it is. This painting has a 3D companion: A faithful Braille version of the original painting. Isn’t it beautiful? I don’t need this touchable version in order to “see” the painting, and yet it delights me. So, yes, we could potentially have 100% accessible paintings that delight everyone, not just the people for whom they are indispensable. Once more: accessibility is essential for some, and useful for all. In this case, even delightful.
So then I thought: can we have creativity on the web that is the equivalent of the Braille version of a painting? That is to say creative, delightful for everyone, and 100% accessible?
And then I went and visited the main awards website, the Web Awards. Presumably this site is built by, and contains examples of, the top of the tops, the absolute best in the industry. Let me just insert a very important disclaimer here: none of the people creating these websites has asked for my opinion and I am not giving it. I am looking at the creative accessibility aspect with zero judgement and only great admiration for the often incredible skills of those who worked on these sites. There are quite a few sites around with my name attached to it that I had no control over, and I will bravely share one of them with you later. I know the constraints we are all under. We’re in this together.
The winner for the architecture, art and design category of 2022 is this amazing piece of educational content by the Getty Museum. You could qualify it as a 3D animation activated by scrolling.
I can use a keyboard to scroll, which is really good. And there’s some text appearing on the screen explaining what this is about.
And then we see images. The first one is this beautiful relief of a panel with a striding, a lion glazed ceramic. I carry on. All I’m doing is really scrolling. I’m not doing anything else. That’s where the interactivity stops. Then some text comes up, giving me further detail, and then we get into a museum room with exhibition pieces.
There’s more text that explains more, that gives a background into the exhibit. But it’s not entirely interactive, meaning that I can’t just pick and choose any object: it’s simply a 3D representation of certain objects that have text descriptions and can come up in full detail.
It looks great, doesn’t it? Beautiful, very informative and so on.
The question that arises here for me is,
could this have been a video instead?
All anyone can do on that site after all is: you can scroll. There was no particular other specific interaction that would’ve been indispensable.
We need to make an important differentiation here, which I feel is totally the crux of the issue.
When we build a website, an app, or a digital product of any kind,
they exist to be interacted with, we need them to learn, to inform ourselves about something, or to complete a task. The human-computer interaction is essential.
But when we create a video, a film, moving image, an art piece that uses this technology, then they exist to be passively received. No interaction is required.
Personally, I feel that that’s where the mistake is made with a lot of animation that’s on the web at the moment, because I am forced to passively receive it. But that shouldn’t be the case.
To me, the most important test to be done now is the screen reader one. The Mesopotamia site is visible to those who can use their eyes to see it, but is it invisible to others? In comes the accessibility check by Lazar Bulatovic.
Lazar is a friend of mine and also my speaking coach, interestingly, who’s blind from birth, and he’s been using a screen reader since 2004. Starting to work with him actually changed my life pretty much. Lazar’s response verbatim was: this is an extremely inaccessible website. The screen reader doesn’t announce a single thing.
Let’s have a look at another Web nominee, randomly selected from last year. I want to show you this because it is a typical example of what an award-winning creative agency site invariably looks like these days. I won’t make any comment as that’s not my place. I’ll just say that Lazar’s verdict is that he can’t really worked out what is going on in here. And I don’t need to tell you how it makes me feel.
You may be asking yourselves.
Do I hate animation then? Clearly, I don’t. I use it in my own slides to build text, with the aim of aiding attention and visual cognition.
And I had to use it in a site design recently, because the recent brand and identity required it. Music Patron is a music start-up that connects patrons and musicians. So this micro animation on the homepage of the two dots uniting reinforces the main concept of creating a connection. It stops immediately and it doesn’t bother me in the slightest, but does it make the site invisible to Lazar? Lazar passed this site with flying colours, which I am delighted about. So why doesn’t this animation bother people with vestibular disorders, while others do?
At this point, we need to look at animations. Broadly speaking, there are 2 types of animation: 1 is non-dynamic, non-interactive (GIFs, anything on autoplay etc), while the second one is dynamic, interactive, dependent on user input (Mesopotamia website). Generally speaking, you could argue that #1 is usually negative, while #2 is usually positive. However, that doesn’t always apply, because people like Lazar can’t even see the Mesopotamia website. So why did the Getty make the decision of creating a 3D interactive animation on the web, instead of a video?
I think this has to do with the fact that technological advances always shaped culture, art, and design. Oil painting was a game changer in art, and so on. This definitely applies to the widespread use of animation on the web right now. Animation today is the glitter of the web. The Getty won an award with their site: they might not have won it if it had been a video. To me this reflection is very strictly connected with another one:
Why do we equate creativity with visual effects? Surely creativity expresses itself in a variety of ways? There is a wider conversation here on what creativity actually is and how it helps us on the web: that might be a talk for the next conference.
But surely, being creative on the web can apply to so much more than just visuals, considering that visuals are actually invisible to so many people. After all, we mostly build digital products of any kind in order to to get customers to do what we want:
Conversions are what we’re after. Often that simply means, buy my shit. Take for instance home insurance. We all need that don’t we?
So let’s go visit Aviva, one of the biggest insurance providers in the UK. Let’s say I want home insurance. A solidly static website, very practical. Get a quote gets me to the form – and here you go, first big friction. I am so pissed off already by the request for a title here that I am immediately out, personally speaking. But let’s just have a look at the rest of the form. Dull as dishwater as well as straight out annoying. I know that they need to know my date of birth by the way, but they don’t tell me why and that is another big friction.
Let’s go instead to another insurance provider that’s now available in the UK as well. Lemonade.
let’s go check their site. Luckily they’re now in the UK as well. I don’t live there anymore. But if anybody does, that’s great. In stark contrast with the Aviva website, the experience on the Lemonade site when I am asked for personal details is frictionless and fun. They add the human touch by using the name and face of a person, Maya, asking us to interact with her. When we’re asked to tell them if we live alone or with others, the use of cute illustrations (two wine glasses for a couple, juice cartons for children, and water bowls for pets) makes it fun to answer, rather than intrusive. The added thrill of the micro animations in a bright pink accent colour brings delight and an immediate reward to out efforts. It’s also an inclusive way of asking, because there is nothing about sex or gender or age.
The important thing, once more, is to check whether Lazar can buy insurance from either of these providers: and the answer is yes. The accessibility check by Lazar Bulatovic is a “pass” for both sites. So well done both. However, I’m definitely with Lemonade and not Aviva, because I can see, and I am a woman who isn’t a Mrs, a Miss or Ms.
To me, Lemonade is a fantastic example of how to be creative on the web. Not the only one, but a great one. It has inspired me to create similar engaging experiences for my clients, sometimes combining the digital world with real-life spaces. I wish I could show you one but none are finished yet. Next year!
But if you don’t have the time or the means or, indeed, the need to create an interactive animated experience on the web, there is something else that you can do.
Use a concept. Quick example, my own website needed a redesign.
A friend suggested I use an expletive in my heading 1 on the homepage: a -ing good designer. Now if you spend more than 15 minutes in my company you’ll soon find out that I’m queen of expletives in at least 3 languages, but I did worry that that would come out as aggressive. So I countered with “A rocking good designer” which I feel is perfect for my personality and preferences. At that point, I remembered that years ago I’d done a number of playful photoshoots with my niece and nephew, dressing them up as rockstars.
This is it, Rocco, rocking it at 6 years of age (photo of a young child pretending to be a rockstar). I thought, perfect.
A sprinkle of punk aesthetic and voila. (the photo above transformed according to punk aesthetics). By the way, punk design was definitely heavily influenced by the technology available at the time, as we were saying earlier. The colours suit me because they are 3 colours from the CMYK process, and I come from a print background. It’s not much of course but it’s definitely creative, while it doesn’t move. And it does get me clients [who tell me this approach is what makes them want to work with me]. Before you all go accessibility testing, Lazar already did that and there are a few issues I need to sort out. Would a sprinkle of animation improve the UX this website? Well of course it would! Just as long as your animation:
- Reduces cognitive load
- Improves decision-making
- Helps the storytelling
- Improves usability
- Entertains and delights
Animation that destroys the UX:
- Takes away options
- Takes away agency
- Takes away well-being
- Doesn’t add much
- Is completely inaccessible
Before you do anything else, ask yourself this question:
Will this animation meaningfully improve the experience?
If the answer is Yes: do it
If the answer is No: don’t do it.
Simple!
And this question:
Will this animation make the whole site invisible to someone?
If the answer is Yes: don’t do it
If the answer is No: do it.
If you do do it, make sure that you:
- Follow the “Pause, Stop, Hide” WCAG guideline
- Set it to not contain either blinking or flashing
- Set Alt Text/ captions wherever possible
- Switch for a non-autoplay video
And finally, always ask yourself:
Can you use a still image instead?
On the web, Interaction needs to be usable.
You’re not creating a visual display or a piece of art.
You’re creating an interactive tool, something that’s there for humans to use.
A tool that everybody regardless of their ability needs to be able to interact with.
Say it with Tim Berners-Lee:
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect”.
