Cover Flow and Collection Interaction on Library Websites

It’s my belief that library users are expecting more from their web browsing experience. I’m not talking social networks, I’m talking interactive web design. These users are used to websites that allow for dynamically changing content (content that may not require a new page to load) and for a feeling of interactivity with the page. Dynamic content shifts on the page, animates, and morphs into something it wasn’t previously. Let’s look at some examples:


The rectangular information boxes nicely animate in and out upon click of the left or right arrows allowing for new information to nicely slide in to place.


Apple’s start page uses the accordion effect to hide and show its content in the sidebars. Simply hover over, say, “Top Songs” and a top ten list shows up.


Vimeo, a social networking site about sharing video, smoothly scrolls in new videos that users like every couple of seconds on their “Right Now” page.

I’d venture to guess that a lot of us don’t even think twice about some these nice effects that we engage with during our daily browsing. But we have to recognize that they add to our experience, our “likability” of the pages we view. Understandably, library web pages need to be focused on presenting accurate, useable content; however, we can do these things and still not dismiss the opportunities we have to organize our information in aesthetically pleasing and engaging ways.

One of these engaging ways that I have been very intrigued by is the use of Cover Flow to present resources. If you don’t know what Cover Flow is, take a look at your iTunes library in Cover Flow view by choosing “View” and “Cover Flow View – it looks like this:

It’s easy to make the jump from collections in your iTunes library to the collections in your actual library website. A couple folks around the ‘Net have been thinking the same thing I have and have commented about it:

To my pleasant surprise, Lee (fellow TTW contributor), led me to an excellent implementation at Villanova University’s Digital Library.

VU uses Cover Flow to display photos of some of their digital collections in a highly interactive way. While I personally had no reason to look further into their collection, the fact that I was able to engage with the collections by browsing intrigued me enough to look further at their collections. This “doorway,” so to speak, is an excellent way to get more views at different collections by catching the user’s eye from the get go.

Not to be outdone by academia, Cambridge Public Library in Canada has also put together their own version of Cover Flow for over 20 different categories of their collection (nice!).

You can choose your category at this screen:

and are given a nice Cover Flow output when you click on the purple icon:

Some of these fancy, schmancy animations and graphics do take some more advanced knowledge of Javascript or other coding languages, but luckily enough most of these tools have such a great following by web designers and wannabe’s like myself that there is a plethora of resources created to help you whip one up. I’ll admit that I have no experience with Javascript but was able to create a couple really nice accordions like within Apple’s start page. If some of the creators of these excellent Cover Flows are followers of Tame the Web, I’d be really interested to read what you used to create your tools and the effort that went into it.

Some Javascript libraries of note for further research:

Posted by Kyle (TTW Contributor)