For anyone that's recently visited the Apple website, you'll notice that they did a complete overhaul of the user interface. Apple must have some of the most talented design engineers on the face of the planet. I find their interface is sleek, well-organized, and actually somewhat fun to use. But this isn't a blog about them, it's a blog about the changes that I've made to the frontpage of the music section. Inspired by the new scrollbar widgetry that Apple has incorporated at the top of a variety of pages, I decided to embark on my own adventure to use this concept in a way that would make for a better user experience.
I've been considering doing some custom javascript scrollbars for quite some time now. It seems as though each time I got started, I was quickly derailed with other things. Not only that, but I couldn't seem to find any existing javascript libraries that would allow me to implement this without having to re-invent the wheel. My googling produced nothing substantial, well, not until I realized that I was missing the obvious. It's one of those situations where you search and search for an answer and it was just sitting there staring at you silently chuckling saying, "Boy, what an idiot". That answer was script.aculo.us.
Script.aculo.us is a collection of javascript libraries built on top of the Prototype framework. Considering Prototype is an integrated component of Rails, I'm not sure why I hadn't realized this was the solution all along. The script.aculo.us library contains a slider control that supported all the functionality I required to get my new idea up and running.
The basic idea was to replace the "Today's Popular Albums" section with something a little more user friendly. Using Apple's recent concept of a slider to scroll across different product lines, I began to pound my head against the keyboard hoping for a sequence of code that would do exactly what I wanted. Conceptually, I wanted to have about 20 albums available horizontally that you could view by moving the slider. The album name would be displayed the scrollbar and the selected album would be cleary identified with a marker above its image. Here's what I came up with.
Soon after implementing this change, I realized that the other elements of the page didn't quite fit with this new design. Great, more work! Therefore, the most recent update to the music section includes not one, but three changes. First, we have a new version of the popular albums widget. Secondly, I've updated the look and feel of the "Latest Music" section.
Lastly, I've ditched the concept of popular tracks in favor of displaying a list of available genres at the bottom of the page. I plan on adapt a version of this genre panel to the genres section of the site, only it will also contain lists of albums that were recently added within each genre. Here's a screenshot...
Please feel free to give it a whirl, I'm still fixing some minor incosistencies and bugs across browsers. And as always, please feel free to submit feedback.
