Utilitarian Animation & Bookshelves

Once only the product of Flash and clunky Java applets, accessible, plugin-free animation—via Javascript and/or CSS—has finally made it to the internet. Awesome! Then again… maybe not so awesome. As with Flash-based animation, moving user interface elements don’t always equal a great user experience. I believe the equation is typically something like: Cool Interface + Animation = Interactive Tragedy (CI+A=IT). The hope for dazzling visitors with moving interface elements—a spin here, a little flip there, lights on/lights off—too often results in inaccessible content and a bag of virtual hate mail sent to the offending web site (assuming users can catch and click the flying webmaster link).

A current project in the studio will bring a large collection of museum artifacts and stories online. The challenge was to create a visually rich, scannable navigation system that not only visualizes content relationships, but also indicates their density. Easy, right? Well, not without some exploration, experimentation and finally, that which I loathe most: the user interface in motion. [Pause for dry heaves]

The solution, as it turns out, is similar to a common non-web-based user interface: the bookshelf. Scanning books on a bookshelf both informs the user of content relationships (by section) and density (thickness and size of the books). But the concept doesn’t fully take shape without a few moving parts.

Using quick, subtle motion to expand and contract content blocks, a site visitor is clearly shown where they are, where they have been, and even get a sense for what’s coming next. No disappearing content on reload, no wondering if you’re in the same section. This utilitarian animation provides a grounding for site visitors with a familiar interaction.

The resulting navigation system has a fluid, application-like feel that allows site visitors to quickly move through related content. No pointless blinking, spinning wheels or other moving parts. Just 100% pure utilitarian animation. Best of all, it’s plugin-free.


Second Story creates enchanting, informative, and entertaining media experiences with innovative technologies that empower connections to ideas.

Tagged with: , , , ,
Posted in Design, Technology