The FlipBook user interface

The CoverFlow application is a technology demo that explores a clever way to browse your music collection. It attempts to loosely emulate the experience of flipping through a pile of albums or CDs. The application displays the album art for every album in your iTunes library sorted by artist or album title, and lets you click or scroll through that list in a glassy, 3D-looking showcase.

Most everyone is a fan of clever user interfaces, right? Even more so, we’re fans of clever UIs that are intuitive and efficient. CoverFlow achieves that to a remarkable degree. It superficially resembles Apple’s Front Row application, with it’s 3D icons on a glassy surface within an infinite black space. CoverFlow appears to predate Front Row, however, and in my opinion blows away Front Row for usability.

Interested? Well, CoverFlow is for Mac OS X 10.4 only and requires a modern video card. If that’s not you and you want to get a taste, take a look at my Flash implementation. I’ve recreated the basics of CoverFlow’s look in this functional prototype. This experiment is not specific to music, but instead is a general purpose navigation strategy. I’ve tentatively called this user interface a “FlipBook”. I’m not fond of that name, but I haven’t come up with one I like better yet…

Screenshot of FlipBook UI

Screen shot of the Flash implementation in action

My Flash version loads a list of items from an XML file. For each item in the list, the XML file specifies an image (JPG or SWF only), a label and an optional URL that is invoked on a double-click. The label is rendered in Flash’s subset of HTML and can accept one or more CSS files to style the text.

Currently (as of version 0.02), the user interaction is limited to clicking on items to center them and double-clicking on them to launch their associated URLs.

Is there a future in this? Maybe. Coverflow is very popular, and I can easily imagine the author making a nice bit of cash selling the implementation to Apple for inclusion in Front Row itself. As a general-purpose nagivation tool (i.e. not specific to music), this is a little harder since the one-dimensional nature of the flow of art is limiting. Nonetheless, this UI is more browseable than most online product catalogs. One could imagine a bookshelf implemented like this, showing book covers instead of album covers. Or perhaps a collection of videos of university lectures, organized by department and class.

2 Responses to “The FlipBook user interface”

  1. Andy says:

    Chris,

    You might want to take a look at where CoverFlow started, a post on my blog nearly a year old. You seem like you’d be particularly interested in the thoughts from which it sprang.

    http://thetreehouseandthecave.blogspot.com/2004/12/dissatisfaction-sows-innovation.html

    Please also note that the UI and general “flipbook” concept that you are discussing are protected my Creative Commons license. I really admire your thoughts and experiments in Flash, just know that the intellectual property has had carefully considered limitations put on it. These limitations apply to Steel Skies’ use of my concept as well.

    I agree with you that my UI would function well when applied to other types of media and content, and I LOVE that your flash implementation could be web based and run on XML. Very interesting…

    Please feel free to email me if you’d like to discuss this further.

    Cheers,

    A.

  2. dave says:

    hey really nice are you going to make the source available for download or purchase

    great job dave