by anthony 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.