Color Transparency for Drag and Drop

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

Grooveshark has a new HTML5 interface. It’s faster and smoother compared to their old Flash one. Users no longer have to wait for the app to load to listen to tunes. But the way they do their drag and drop function is a huge problem for users.

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.


PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATES

Elegant Themes Shopify

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

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