{"id":254,"date":"2010-10-19T20:46:18","date_gmt":"2010-10-20T03:46:18","guid":{"rendered":"http:\/\/kai.mactane.org\/blog\/?p=254"},"modified":"2010-10-24T13:19:54","modified_gmt":"2010-10-24T20:19:54","slug":"motion-distraction-worse-than-the-blink-tag","status":"publish","type":"post","link":"https:\/\/kagan.mactane.org\/blog\/2010\/10\/19\/motion-distraction-worse-than-the-blink-tag\/","title":{"rendered":"Motion Distraction &#8212; Worse Than the &lt;Blink&gt; Tag"},"content":{"rendered":"<p>Once upon a time, Netscape invented the &lt;blink&gt; tag. And people saw the &lt;blink&gt; tag, and put it on their web pages, and thought it was good. And the rest of us saw the &lt;blink&gt; tags on those pages, and screamed, &#8220;No, you morons, it is <em>bad!<\/em> It distracteth the user mightily, for lo, our eyes are built to take especial note of motion and changes in light, for they might signal the approach of predators.&#8221;<\/p>\n<p>And so, in the fullness of time, most people learned to never, ever use the &lt;blink&gt; tag. And that was good, for a while. But more recently, people have started putting new&nbsp;&mdash; and even worse&nbsp;&mdash; moving doo-dads on their sites: Animated Twitter feeds.<\/p>\n<p>I&#8217;m talking about the kind of feeds that refresh or scroll every five seconds (or sometimes more frequently). You can see them all across the web. Here are just a few examples:<\/p>\n<ul>\n<li>Any <a href=\"http:\/\/whedonesque.com\/comments\/25096\">comments page on <cite>Whedonesque<\/cite><\/a> (Joss Whedon&#8217;s site). Try to read the text, and your gaze gets pulled over to the constantly-updating &#8220;Twitteresque&#8221; box on the right.<\/li>\n<li>Any <a href=\"http:\/\/www.wikihow.com\/Use-Apostrophes\">article on WikiHow<\/a>. You have to scroll down one screen before the &#8220;Recent Changes&#8221; box becomes visible on the right&nbsp;&mdash; but that just means the problem isn&#8217;t apparent to a cursory, design-level glance; it only becomes obvious when you try to actually <em>use the site for its intended purpose<\/em>, by reading the content that&#8217;s published on it.<\/li>\n<li>Even <a href=\"http:\/\/www.webmonkey.com\/2010\/08\/leaked-screenshot-shows-a-cleaner-simpler-ie9\/\">Webmonkey has gotten in on the action<\/a>. Again, you need to scroll down a screen (unless your browser is way taller than mine), but the &#8220;Recent Articles&#8221; box will try to grab your attention as soon as you read past the screenshot in the main article text.<\/li>\n<li>Like Webmonkey, you&#8217;d think <a href=\"http:\/\/techcrunch.com\/2010\/10\/16\/why-twitter-is-massively-undervalued-compared-to-facebook\/\">TechCrunch would know better than to do this<\/a>. Admittedly, they do put their &#8220;PostUp Beta World&#8217;s Best Tweeters&#8221; box further down the page, but their articles are longer, too.<\/li>\n<\/ul>\n<p>Why would someone put something on their web page that effectively says, &#8220;Hey, don&#8217;t waste your time reading my content! Go look at my Twitter feed instead! Or even at some total stranger&#8217;s Twitter feed!&#8221; I&#8217;m honestly mystified. (That&#8217;s why my own Twitter-feed widget, <a href=\"http:\/\/kai.mactane.org\/software\/hummingbird\/\">Hummingbird<\/a>, does not and never will have any kind of auto-scroll feature.)<\/p>\n<p>But what mystifies me even more is: Why would people who (I presume) would sneer in disgust at the very <em>idea<\/em> of putting a &lt;blink&gt; tag on one of their pages&nbsp;&mdash; even for just one or two words&nbsp;&mdash; then turn around and put a much larger, more annoying motion distraction on every page in their site?<\/p>\n<p>The fact that it uses AJAX and a Web 2.0, RESTful API doesn&#8217;t make a paragraph-sized chunk of never-ending motion any less of a design and usability nightmare. And this is not exactly a new concept: the W3C <a href=\"http:\/\/www.w3.org\/TR\/WCAG10\/#gl-movement\">advised against constant motion back in 1999<\/a>.<\/p>\n<p>At that, they were Johnny-come-latelies compared to Jakob Nielsen, <a href=\"http:\/\/www.useit.com\/alertbox\/9605a.html\">who called out &#8220;constantly running animations&#8221;<\/a> as far back as <em>1996<\/em>. In other words: The days of Netscape Navigator <strong>version 2.0<i>x<\/i><\/strong> called. They have some usability advice for you&#8230; that you apparently <em>still haven&#8217;t learned yet<\/em>.<\/p>\n<p>It can&#8217;t be that hard to figure out&#8230; can it?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Once upon a time, Netscape invented the &lt;blink&gt; tag. And people saw the &lt;blink&gt; tag, and put it on their web pages, and thought it was good. And the rest of us saw the &lt;blink&gt; tags on those pages, and screamed, &#8220;No, you morons, it is bad! It distracteth the user mightily, for lo, our [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[63,39,57,68,29,10,30],"_links":{"self":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/254"}],"collection":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/comments?post=254"}],"version-history":[{"count":4,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/254\/revisions"}],"predecessor-version":[{"id":258,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/posts\/254\/revisions\/258"}],"wp:attachment":[{"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/media?parent=254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/categories?post=254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kagan.mactane.org\/blog\/wp-json\/wp\/v2\/tags?post=254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}