The Parable of the Preloader

By Jamie Kosoy

Big Spaceship loves preloaders. We think they’re a beautiful, expressive prologue to a site, a bit like the digital equivalent of a movie’s opening credits. But there’s one preloader – *the* preloader – that needs its story told. It’s the story of the most popular preloader there ever was. It looks like this:

The story of this preloader starts in mid-2005. Adobe recognized the uniqueness of some of the preloaders we had put in our Flash sites and asked our Minister of Technology Josh Hirsch to explain how we made them. Josh obliged with an eloquent writeup on the process we used. The secret? In place of complex trigonometry, Josh leveraged the timeline and a simple math equation:

targetFrame = preloader.totalFrames * (bytesLoaded/bytesTotal)

 

If targetFrame was less than the current frame of the loader’s timeline tell it to play; otherwise tell it to stop. The brilliance of this can’t be overstated – designers could make that timeline as long or as short as they wanted and have anything on the screen reflect the percent loaded. Anything. Guns building themselves on the screen, a pixelated Will Ferrell running around naked, the Da Vinci Code cryptex spinning to spell secret messages. The preloader equation perfectly illustrated how Big Spaceship leveraged tools to create meaning.

Naturally, we started using that circular preloader as a placeholder in newer projects. It quickly became apparent that this seemingly innocuous time saving act would spell disaster.

Technologist: “Don’t forget that you have to replace that loader. The site is launching in 3 weeks.”
Designer: “Right, thanks for reminding me.”

[2 weeks pass]

Technologist: “Hey, have you come up with a new loader?”
Designer: “Oh yeah! I keep forgetting about that. I’ll get to it.”

[3 more days pass]

Technologist: “You have to give me an updated loader. The site is about to launch.”
Designer: “Actually, let’s just use this one. It’s good enough. I actually kinda like it.”

Our designers weren’t the only ones who thought that preloader was “good enough” though – it wound up on tons of bad Flash web sites around the Internet. Virtually every bad hotel or restaurant web site we went to seemed to have that gray circular loader sneering at us; ESPN still uses it for their baseball live stat tracking application. We saw it on a Disney site. Remarkable.

To borrow from our friend Branden Hall, this is an abuse of the Beautiful Default. The Beautiful Default is a visual trap – it’s something that looks “good enough” to be deployed as is without modifying it’s out-of-the-box look. One the one hand the Beautiful Default allows you to create beautiful things quickly and easily, which is awesome! On the other hand it also makes the thing you’re making look generic. It’s vanilla. It’s the same thing everybody else is making and doing. Think about that, and then think about the majority of iOS apps you’ve seen. Think about all the websites you’ve seen that use Lightbox or Isotope. There’s a sameness to them that’s comforting and easy to use, but there are also opportunities to be expressive and interesting that are lost. There are too many developers and designers giving up on craftsmanship to build “good enough” sites and apps.

We’re proud of Josh’s preloader and revel in its hidden role in Internet history. In fact, we’re proud of the history of preloaders in general, so much so that we built and curate a virtual museum celebrating them. We created Pretty Loaded because we wanted to celebrate how one of the most seen, ignored, and sometimes hated graphics associated with the Internet could be turned into something fun and positive. We believe innovation starts with deviating from the defaults. It’s about finding opportunities to create little moments of meaning for end users. Innovation is in the details.