Design detail: An easier music video directory

A mate of mine is a massive fan of 1990’s dance music. When I say a massive fan, I mean it – the guy can probably list all of the 90’s eurodance groups off the top of his head, and he even runs an online service called Dancentral, “the ultimate dance music video directory.”

He recently wanted to update the directory and asked me for some advice on the user interface. Here’s what Dancentral looked like at the time:

Dancentral original

The activity flow was as follows:

  1. Locate artist of interest, listed as the first item of each drop-down menu
  2. Click to open the drop-down menu
  3. Click to select track
  4. Click play
  5. Video opens in a new window

I found this quite cumbersome and started thinking about a different way of accessing the video directory.

I am a big fan of the “column view” in the Macintosh OSX Finder and quite quickly decided to borrow this proven design for Dancentral:

Macintosh Finder column view

Luckily for us, Christian Yates had done all the hard work by implementing a jQuery plug-in to turn hierarchical lists into a Finder-like column view.

I used Christian’s plug-in as a key part of the redesign. Here’s what the new Dancentral looks like:

Dancentral redesign

The new activity flow goes like this:

  1. Locate artist of interest in the first column
  2. Click to display available tracks in the second column
  3. Click to select track
  4. The music video starts playing automatically in the embedded player on the same page

Musical tastes and visual design aside, here are some of the benefits of the new interaction design:

  • The page offers a better overview of the available artists
  • It’s easy to switch between different tracks with a single click
  • There’s one less step in the overall activity flow
  • The video player is embedded and shown in the immediate context of the currently selected artist and track

The new page is a lot easier to maintain, too. My friend can upload the track list as a text file, which helps him manage the 700+ music videos available on Dancentral. There may be some search engine optimisation benefits as well, now that the tracks are listed as list items rather than being bundled inside drop-down lists.

Go have a look at Dancentral, “the ultimate dance music video directory!”

What do you think of the redesign? Are there ways to streamline the activity flow further?

This entry was posted in Interaction design, Online service and tagged , , , , , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

One Comment

  1. Posted 28/10/2009 at 7:36 pm | Permalink

    I’ve been watching & listening 90’s hits now for ~an hour, so I guess it means this is working… =)

  • Volkside products

    • Naview helps you create easier navigations through prototyping and testing
    • Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click
    • Tweetpond is an underwater-themed ambient visualisation of Twitter
    • More …