Grooveshark’s Drag and Drop: A Case for Color Transparency

by on 12/06/10 at 2:55 pm

If you’re a big fan of Grooveshark, then you’ve probably seen their new HTML5 interface. It’s a huge improvement from their old Flash one. It’s leaner, faster and smoother. Although I’m relieved that I no longer have to wait for the application to load to listen to some tunes, there is still one little thing that bothers me. The way they do their drag and drop feature has my head spinning.

The Drag and Drop Problem

At the bottom of the page, Grooveshark’s music player has a dock that shows you which songs you’ve selected for listening. The way to arrange the order of your songs is to drag and drop a song box and move it to the place you want. The problem with the way they do their drag and drop is that you can’t clearly see where you’re dropping a song box. When you drag a song box over another, the song box covers up the blue bar that highlights your drop place. You only see it if you lift the song box up and away from the dock. This forces you to hold and drag your mouse vertically and horizontally. This is more work and mouse movement for a drag and drop than you really need. Luckily, there is a simple solution that fixes both the visual feedback and extra mouse movement problem.

A Transparent Solution

By making the song box color transparent when it’s dragged, users can easily see the blue bar without having to lift the song box further up and away from the dock. A simple mouse movement horizontally is all that’s needed to arrange the order of your songs.  You get clear visual feedback on where each drop place is and you get it quick. You no longer have to drag and drop with uncertainty. You’ll also make fewer mistakes in dropping a song box in the wrong place because you’ll be able to visually follow the blue bar as you drag a song box across the screen.

Without using the color transparency, none of this is possible. This demonstrates how powerful and effective visual design techniques are when you apply them to enhance usability. How a design looks is one thing, but how it works is really the difference between a good and great design.

[Update: Grooveshark has now added the transparency to their drag and drop. Not sure if this article had anything to do with it, but I'm happy they fixed it.]

One Response to “Grooveshark’s Drag and Drop: A Case for Color Transparency”

  1. Ben Joffe

    Dec 8th, 2010

    My favourite way to do this is to have the surrounding items make space for the to-be-dropped item, this means nothing is covered up and hence no transparency is require (or any blue line equivalent either). This is how reordering of apps in the Mac dock work, as well as reordering tabs in google chrome (there are surely more examples). This technique is especially superior on touch devices as you can’t make your finger transparent!

Leave a Comment