Color Transparency for Drag and Drop

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

If you’re a 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.


Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

One Response to “Color Transparency for Drag and Drop”

  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