Did you know the French have over 300 words for “ennui”? It’s true. Similarly, a designer has over 14,000 words for nit-picky things that annoy them that nobody else in the world cares about. In this case, 300 words.
Hooray! I’ve found a new thing you won’t care about! Prepare to have your eyebrows melted.
Designers, do you see anything wrong with this spinner I found on the web?
It’s pretty subtle. Look close! The problem is specifically with frame five:
All the segments should get lighter as the spinner rotates. But, in frame five, the trailing segments of the spinner get darker, for a single frame. (I think the designer accidentally left two layers on at once.)
Now look at that 16 x 16 sample again. You’ll see a brief, dark flash at the very top of the spinner, once per rotation. And, if you’re anything like me, you’ll never, ever be able to un-see it. Ever.
If I were to find this on just one website, I’d be all, “Huh, that’s pretty annoying!”. But here’s how this thing reached a level 8 nightmare: I started seeing this flashy goofball spinner everywhere. Everywhere!
Alaska Airlines. The Associated Press. Google. The St. Petersburg Times.
I was beginning to think I was losing my mind. Then I Googled for “spinner creator”, and… mystery solved. So:
Dear Ajaxload.info,
Please fix frame 5 of your “Indicator” spinner, because everyone on the internet uses it.
Love,
Cabel
For you, Panic reader, here’s my clean 16×16 Spinner.psd [6k] ready to be colored and gif’d. Enjoy!
PS: If you’re drawing a spinner like Apple’s, take heed: the inner caps are rounded, not just the outer caps.
PPS: And don’t get me started on this kind of business:
angelday1
10/18/2010 11:14 AMMy thoughts exactly.
Trevor Price
10/18/2010 11:15 AMDo you own an iPhone 4? Next time you turn it off look close at the shutdown spinner. It’s not high resolution for the retina display. I feel much better now that I vented about that. I think I’ll go post it on twitter as well. Thanks!
@trevorep
Jake
10/18/2010 11:19 AMCabel I exported that PSD and am still seeing some glitches? http://meltwizard.com/stuff/spinner.gif
Scott McMillin
10/18/2010 11:21 AMHaha, as soon as I saw your tweet I knew what you were talking about. I manually fixed that spinner myself, as well.
David Stewart
10/18/2010 11:22 AMI feel your pain. Here at Webtrends we’ve got spinners everywhere (we call them throbbers for some reason only known to our front end architect). I’ve got 16×16, 11×11, 32×32 and many other random sizes. We actually made our own version using a filmstrip method with a PNG (for transparency). I spent DAYS struggling to perfect it.
Eventually, I made them in illustrator although the exact method wasn’t documented. In the end, the easier solution was to just make our data faster. Email me and I’ll send you the source.
Brian Bates
10/18/2010 11:25 AMThe manhole cover made me laugh. Great post for a monday!
Andrew Poole
10/18/2010 11:32 AM>> Do you own an iPhone 4? Next time you turn it off look close at the shutdown spinner. It’s not high resolution for
>> the retina display. I feel much better now that I vented about that. I think I’ll go post it on twitter as well. Thanks!
It also has a similar glitch to the spinner in Cabel’s original post. Look at the segment in the North-North-West position. It stays brighter than the rest of the spinner all the time.
Thanks Cabel. Now I’ll always be seeing these glitches in spinners! :)
Chriztian Steinmeier
10/18/2010 11:34 AMOh man, this is the stuff. Manhole kills me :-)
Richard Kimber
10/18/2010 11:38 AMLove it, thought I was the only one. Rich
Ben Cochran
10/18/2010 11:47 AMI stopped using that very spinner for that very reason. Also, it’s all jaggie and just generally doesn’t quite look right.
limeonaire
10/18/2010 12:01 PMYeah, I always thought that one looked too jaggy anyway. But great catch on the messed-up frame.
Garrett Murray
10/18/2010 12:17 PMThis has bothered me for YEARS. Thank you for pointing it out. Also, your closing sentence is exactly what I hear in my head every time I see something like that manhole situation.
Shum Stra
10/18/2010 12:27 PMThe YouTube spinner (the one that shows up while it’s initially loading a video) also has an obvious defect, which you have to be blind and in a hurry to let slip through. Except this spinner is seen by millions and millions every day. Go load a video and look for yourself.
Aaron
10/18/2010 12:49 PMAlaska Airlines calls it interstitial-animated-dots.gif. :D I think someone was having a laugh.
Eric Peacock
10/18/2010 1:02 PMI’m sort of in the camp of using any spinner/throbber that doesn’t copy the Apple one just because when Apple does something it actually feels like it’s their brand no matter where it shows up. Of course Panic makes Apple apps so it’s probably arguable that they should use the native OS spinner for web sites.
I suppose if one was lazy and geeky at the same time they could simply snag the frame source TIFFs from the OSX system package and use that…
Josh Monroe
10/18/2010 1:04 PMAlso, would owners of the older Honda CRVs please make sure that you put your spare tire cover back on straight. It drives my wife nuts.
Neovov
10/18/2010 1:23 PMHi Panic,
I followed this post to the Ajaxload.info creator who I know very well.
The web is such a small place :).
Have fun boring yourself as much ;).
Cheers from France.
Julian Schrader
10/18/2010 1:24 PMEpic.
Oh, and thanks for posting this, Cabel. It’ll make me mad as well now.
fluffy
10/18/2010 1:24 PMI noticed the glitch too! And I’m not even a designer! I’m just OCD.
Thijs van der Vossen
10/18/2010 2:12 PMThere ya go: http://stuff.vandervossen.net/temporary/spinner.html
Duncan
10/18/2010 2:44 PMActually, manhole covers are heavy. Really heavy. So heavy that not many people are going to bother putting them on straight. And besides, they’re main design requirement is to not fall back down the hole, thus they’re circular. They should just take pains to never paint them is all.
Paul Mison
10/18/2010 2:48 PMCabel should probably not visit http://misplacedmanholecovers.co.uk/ despite its nice, understated presentation.
d.enke
10/18/2010 3:36 PMwow, I absolutely agree.
but much worse than that are colored gif-spinners with white alpha-transparency fill on non-white backgrounds.
urgh.
Andy Couch
10/18/2010 3:45 PMAs someone who is a stickler for details, are you bothered as much as I am about the “official” feed icon (http://www.feedicons.com/)? The way the two lines aren’t symmetrically aligned with the dot drives me crazy. It was correct in the original 14×14 icon that Mozilla created, and actually still is correct in that one size on the site, but all other sizes have the asymmetrical lines! It’s maddening!
Derek Anderson
10/18/2010 4:26 PMI whipped this together to get a deep feeling of the spinner situation: http://mediaupstream.com/sandbox/spinners
Rob Russell
10/18/2010 8:10 PMThank you very bloody much. Now I’M going to see this all of the time.
Enough to make a man want to go and sit on the beach and forget all about computers…
:)
Burger Party
10/19/2010 1:58 AMSee these mistakes all over the place, YouTube had one if I remember rightly (which you see all time because their Flash player gets buggier every revision and now barely resumes playing without re-clicking the timeline play head) and it’s like nails on a chalkboard every time I see it.
Photoshop CS5 wait cursor spinner bugs me as well because spinners are clearly meant to be a black to alpha transition and theirs is a weird black to solid white transition to show up on black backgrounds… but it looks so wrong I wish they’d just done a modern version of the OS9 BMW logo spinner
loll
10/19/2010 3:39 AMCabel, that is classical, now I am sitting here trying to explain to my wife, who naturally has her eyebrows raised already , what is so funny!
Rob
10/19/2010 10:59 AMDerek, your page (http://mediaupstream.com/sandbox/spinners) makes it so clear—the whole thing flashes. Nice.
ikir
10/19/2010 12:03 PMGuys, you’re the best :)
ssp
10/19/2010 11:35 PMAnd the fact that the spinner looks a bit like a blurry pixel mess, particularly on a white background, doesn’t irk you?
Biberkopf
10/20/2010 4:37 PMThe devil’s in the detail … and if you run it backwards you’ll actually get a glimpse of him. ;-D
Oliver
10/21/2010 3:21 AMJust saw the exact same issue on a spinner yesterday!
Sooo great to see that I am not alone!
If Monk cares – we should, too! :)
Jeremy
10/21/2010 7:00 AMI’ve met the guy behind the website last week! I’ll try to ping him!
Grover
10/21/2010 9:31 AMAAAAAAAHHHHHHHH….I DIDN’T NOTICE IT THE FIRST TIME AND THEN I CAME BACK AND NOW IT STICKS IN MY EYE!!! WHY WOULD YOU DO THIS TO ME? I AM YOUR FRIEND!!!
Steve
10/21/2010 9:32 AMI love that I’m not the only neurotic person on the planet.
Scott
10/21/2010 11:07 PMI hate you.
Phil
10/22/2010 8:54 AMGreat, now something that would never have annoyed me because I wouldn’t have noticed it does. Everywhere. :(
Logan
10/22/2010 6:05 PMOh! My god. You has written a new script for The Big Bang Theory. Bazinga!
facupuig
10/25/2010 2:11 AMCalling my doctor to take a look at my eyes… I need surgery to have it removed from my eyes!! I can´t stop :(
Radu
10/25/2010 1:24 PMThis is why I love Panic.
Waldo
10/25/2010 6:38 PMI’ve seen this spinner before, after you see the stutter of one full rotation, it’s all you see
JaredRDavis
11/6/2010 10:02 PMCabel,
I have to say this post made smile more than anything I’ve read all day. I needed the boost :) Cheers.
Thanks,
JaredR
Nate
11/7/2010 6:45 PMI love that last photo!! HAHAHAHA!! You guys so rock!!
Toby
11/11/2010 9:44 AMThey have this spinner on the videogame Split/Second. It’s everywhere!
natevw
12/9/2010 11:05 AMSpeaking of pixels, is there must the text in this post be so extreeeeeemely fuzzy in Safari 5.0.3?
natevw
12/9/2010 11:05 AMUh, yeah, I can’t grammar.
lammoth
8/24/2011 5:08 AMhttp://fgnass.github.com/spin.js/
Eelco
9/21/2011 7:12 AMFound another incident on the NS Hispeed website in the Netherlands when you are searching for traintickets.
http://onlineboeken.nshispeed.nl/img/nshispeed//progressbox/progressbox_loader.gif
Thanks to this post, I’m this close to mailing the webmaster since I also cannot un-see it. Ever. Aaargh!
Timur
10/1/2011 1:54 AMWell, why don’t you just switch to http://preloaders.net instead of ajaxload. It’s gone far ahead of it in this industry
Andrew
5/7/2013 10:16 AMThanks. I can’t unsee this now. You’ve ruined the internet for me.