larlet-fr-david-cache/cache/7819c0e1ebcac9233cd503ab866467ec/index.md

title: Your Interactive Makes Me Sick
url: https://source.opennews.org/articles/motion-sick/
hash_url: 7819c0e1ebcac9233cd503ab866467ec

<p>Picture this: you’re sitting in a car, and the car next to you starts to pull forward. For a moment you feel like you’re moving backwards. That brief feeling of disorientation, where the world is moving in a way your body doesn’t quite process—imagine that you feel like that all the time.</p>

<p>Or picture this: you’re short on sleep, your head feels tight, you ate something funky yesterday, and everything in the world just seems <em>too loud</em>. Lights are too bright, colors are too colorful, and the clink of silverware against plates makes your eardrums throb. Imagine that you feel like this all the time.</p>

<p>Now picture this: A journalist has published a piece of work you’re interested in. Ooh, the teaser sounds good! You click over to the page and <strong><span class="caps">WHOOSH</span></strong> some sort of video moves unbidden behind the header. You scroll a bit and <strong><span class="caps">WHOA</span></strong> two different pieces of the page move with your scrolling. A graph animates! A wolf howls in the distance! You’re starting to get a bit overwhelmed, and maybe a touch nauseated. I don’t know what you’d do at this point, but I’m gonna close the page.</p>

<h3>Delightful Surprise! Or Maybe Barfing and Pain</h3>

<p>Browsing the web nowadays is a hairy business. There’s a lot of movement, a lot of noise, and most of it can’t be controlled by the user. For someone like me—who spends about half of any given month coping with chronic migraines—the web feels downright hostile, even dangerous. On days that I have a headache, my entire nervous system is…fragile. I can’t handle bright lights, sharp sounds, or repetitive motion. On days without a headache, I’m constantly on the lookout for something that might trigger the next one. Think of the kinds of things that overwhelm you or make you feel motion-sick: shaky camera work, sirens and emergency lights, sudden shifts in visual perspective. I have all those same sensitivities, but my threshold for bad reactions is much lower than an average person’s. </p>

<p>All this to say: you journalists, with your fancy interactive stories and animation libraries, are making me sick.</p><p>

Migraines, of course, aren’t the only condition that causes people to have </p><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">issues with animation and motion on the web</a><p>. People with vestibular disorders and visual processing issues often have a hard time with visual motion, and anyone who’s feeling a bit sensitive—due to morning sickness, a bad night of sleep, or a simple ear infection—can find unexpected movement problematic.

</p><p>The issue usually isn’t the motion itself, or the existence of animation. The problem is a mismatch between my expectations for what I’m going to encounter on a webpage and what actually displays on that page. There’s a sense of disorientation when my physical behavior—sliding my finger down a trackpad or screen, or pressing the arrow keys—triggers unexpected movement on the screen. When I try to scroll a few lines, and some other movement happens instead (like a horizontal slide-in, or a sidebar div sticking in place, or a parallax foreground changing at a different speed from its background), my brain gets very upset. </p>

<p>There are surely readers who are delighted by this subversion of expectations, who find it a pleasant surprise in the midst of their day. Others might be irked and scroll past the fancy bits until they get back to plain text. And then there’s me.</p>

<h3>When Scrolling Goes Horribly Wrong</h3>

<p>Let’s look at a few stories that exhibit some of these problematic behaviors. (Writers and coders, I’m sorry if I’m picking on something you created. I swear that the criticism is based in love: I want more people to be able to see and enjoy your work.)</p>





<p>As we scroll down this story, we reach the “Homeless relocations from <span class="caps">NYC</span>” and the vertical scrolling stops and is replaced by an animated horizontal graph. It’s unclear how much (or how long) we’ll have to scroll to reach the next section of the story.</p>





<p>The header images here are bright, colorful, and redraw themselves into five new kaleidoscopic collages as we try to reach the opening line of the piece. Later in the piece (and not pictured in our video), when the user reaches the phone frames displaying Twitter content, the left- and right-hand columns begin to scroll at different rates, and the phone flashes and redraws itself over and over as we move down the screen.</p>





<p>Moving the mouse around the screen shifts the camera angle on each story’s animated illustration. Sometimes the scrolling behavior matches expectations, and other times it speeds up or slows down based on where we are in the story. </p>





<p>The cursor has been turned into a navigation arrow (left or right, depending on what part of the image you’re hovering over). When we click the right arrow, images slide in from the bottom, not always into the same location. Some slides are auto-playing videos, with unexpected perspective shifts and flashing lights.</p>

<h2>Scrolling for Good</h2>

<p>I also see plenty of interactive elements that, despite their fanciness, don’t cause any vestibular or visual processing issues at all—for me, at least. </p>





<p>The right column scrolls normally, and the corresponding changes in the circle on the left aren’t animated. We get interesting visuals without disorienting movement.</p>





<p>The “High Voltage Penalties” section provides interaction on the reader’s own terms: a user can explore the data visualization as much or as little as they want. A video further down the page doesn’t auto-play, and waits patiently for a reader to indicate interest.</p>





<p>The movement triggered by scrolling has the same physics as regular scroll behavior, and the popups aren’t sliding in or staying sticky to a window location.</p>

<h3>Good News: You Can Fix It</h3>

<p>I’m not suggesting you shouldn’t make more cool interactive news stories, or use motion in interesting ways. But I’m advocating here for some guidelines to help make your story a better experience for <em>all</em> your readers.</p>

<h4>1) Respect the Physics</h4>

<p>These articles are intended to be experienced inside a web browser. Browsers have had consistent scrolling behavior for years, even across vendors and platforms. There’s an established set of physics, and if you muck with the physics, you can assume you’re making some people sick. </p>

<p>For each animation or interaction you’re planning, ask yourself, “If this effect was stronger (much faster, or bouncier, or swoopier), would it be disorienting, or make me feel motion-sick?” If the answer is yes, then you can rest assured there are plenty of people in the world whose threshold is already low enough to be bothered.</p>

<h4>2) Remember that We Call Them “Readers”</h4>

<p>Right now, in 2018, part of respecting the context of the web is remembering that a large portion of your audience is interested in <em>reading</em> your story. Not watching, not immersing, not “experiencing”: reading. For every person thrilled by a video or animated chart, there’s another who would prefer a plain-text transcript.</p>

<p>This doesn’t mean you should abandon videos and interactive features, but remember that for many people, those fancy features are <em>enhancements</em>, and what they’re really here for are the words. Make sure that the features don’t get in the way of people who really want to read your words.</p>

<p>In a magazine, newspaper, or book, readers get to choose their journey through a story: one person may prefer to read the whole piece and then go back and review the image captions, where another will jump all around from story to image to chart to story. The linear format of a website removes a bit of this choice (just as paper size does in print), and it’s up to you to make sure you don’t remove any more.</p>

<h4>3) Ask for Consent</h4>

<p>This third guideline is so important, and so powerful, that if you do it well, you can ignore all my previous advice about browser physics and parallax and fancy interactive features. It requires only one thing: ask your reader what they want. Let them decide what experience they want to have.</p>

<p>You could provide controls on each individual element of a story, allowing the reader to decide whether they want any given video or animation to play and loop. Animated charts and infographics could include a “skip to the end-state” shortcut. I’m not generally one for blanket statements, but I feel comfortable proclaiming that <em>any element that moves or animates needs to include a pause/stop button</em>. Every reader’s triggers are unique: a movement that bothers you might be fine with me, or might be fine on my laptop but difficult on my phone. Providing element-level control means the user can stop any particular piece that’s giving them trouble. </p>

<p>Consider whether the default state of your interactive elements will be on or off. Are you going to assume consent, and require users to do work to stop scrolling behaviors or animations they don’t want? Or will you build a story that works without the fancier features, and allow readers to opt-in to animated charts and videos as an enhancement?</p>

<p>If you’re implementing consent at the element level, you can give users the option of reading an <em>entire</em> unadorned version of your interactive story: plain words, static images, unanimated charts and graphs. Like the olden days. </p>

<div class="image-full-width-wrapper"> <img src="https://s3.amazonaws.com/media.opennews.org/img/uploads/article_images/fml.jpg" alt=""/><p class="caption">The Huffington Post’s <a href="http://highline.huffingtonpost.com/articles/en/poor-millennials/">Poor Millennials feature</a> is extremely challenging but includes a text-only version that limits the damage.</p></div>

<h4>Also Some Code</h4>
<p>I’d be remiss if I didn’t mention a code solution to movement issues. <a href="https://ericwbailey.design/">Eric Bailey</a> has a <a href="https://css-tricks.com/introduction-reduced-motion-media-query/">nice write-up of a relatively new type of media query</a>: the “prefers reduced media motion” declaration. You can wrap low- or no-motion experiences in this media query, and readers who have set that preference in their browser will see the simpler version of your story. I caution against relying too strongly on this, since many people (especially those with a temporary or situational disability, like browsing with an ear infection or on a lurching train) won’t know the setting exists. If you decide that your story will assume consent by default, this media query would be a great way to swap the state of each element to “off” instead of “on”.</p>

<h3>It’s Not Actually In Your Control Anyway</h3>

<p>As an industry, tech has a particularly stubborn blind spot when it comes to assuming we know what our audiences want. It goes something like, “<em>I</em> want it, so therefore <em>they</em> must want it too!” </p>

<p>It’s not true. It’s never been true, and will never be true. Yes, some people want what you want. Plenty of others don’t. To paraphrase the wise words of <span class="caps">UX</span> leader <a href="https://karenmcgrane.com/">Karen McGrane</a>, “You don’t get to decide how users will experience your content: <em>they do</em>.” </p>

<p>Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through? Taking the time to look at each element from an accessibility standpoint, and ensuring that users can control their own level of engagement with a piece, will make your stories stronger and available to a wider audience of readers.</p>