Category Archives: User Interface

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.