Grooveshark: a UI Case Study

Introduction

As UI designers, we spend a lot of time obsessing over small details. “Is there enough contrast on this button? Are users clearly understanding its purpose? How about that micro-copy, is it clear enough? Is there enough white space in between…” and so on, and so forth. There are many, many rules, best practices, and guidelines that help us to create interfaces that are simple and beautiful, and sometimes the sheer amount of things on our to-do list can be overwhelming. As an exercise, I decided to forget all of those rules for a bit. I decided to spend some time using one of my favorite web applications, Grooveshark, from the perspective of an average user. To users, applications and their user interfaces aren’t the works of art we might pretend they are, at times. They are tools, a means to an end. Once their given task is accomplished, they are ignored until they are needed again. This is as it should be. To analyze Grooveshark from this perspective, I set myself a few very simple goals. I set out to accomplish them, and along the way, I recorded my findings as I encountered aspects of the UI that stood out to me, made my life easier, or became a problem. The goals were these:

1. Find music that I already know, and like.
2. Listen to said music.
3. Find new music I might like.
4. Organize the music I want to listen to again.

About Grooveshark & First Impressions

Grooveshark, in case you haven’t already guessed, is all about music. Like many other services of this nature, you can upload your own, allowing it to be streamed to the whole community, which is considerably large. You can search for new music, create and save playlists, share your favorite music with others, and follow other’s preferences. Where many other websites of this nature look like information portals with media playing capabilities tacked on (I’m looking at you, LastFM), Grooveshark goes out of its way to look like a media player first.

In addition to keeping the playback controls constantly accessible, it reinforces the application’s purpose in your mind. I personally don’t think we see this enough in our application design. The controls are simple, but don’t be fooled. Grooveshark makes excellent use of context menus, usually available when hovering over an element such as an album cover, to provide access to a wealth of functionality.

One thing that bothers me and slows me down is the presence of rather huge banner ads that take up much of the vertical space on some screens. I understand that the ads are not shown if you buy access to the app’s “premium features”, and while I understand Grooveshark’s need to be profitable, I feel as though there might be less intrusive ways to advertise. On the upside, the ads are generally attractive and not too visually jarring. But enough about what it looks like. How hard is it to use this thing?

Goal: Find music I already know & like.

Older versions of Grooveshark had a nice, giant-sized search box on the home page. I miss that, but it’s not too hard to simply move my cursor up a few hundred pixels to the search box in the header.

In the end, this particular goal was met quickly and easily. In my opinion, there’s not much you can do to improve on the search box/list of results combo. One thing I did particularly like was that the auto-suggest feature was just that, a list of suggestions. Hovering over the various options did nothing to change the text you’d already placed in the search input box. This is especially important to me as a laptop user, where accidentally moving the mouse with the trackpad is a common occurrence. A change is only made once you indicate that you’ve made a decision by actually clicking.

Goal: Listen to said music.

So you have your list of songs to choose from. You see some titles you’d like to listen to, and adding them to the playlist is intuitive enough. You can click and drag the song down to your playlist, or hover over the album cover and click the “play icon”. Where I think the designers at Grooveshark got smart, and downright innovative, is the little playlist management toolbar at the top of the list that scrolls down with you, giving you instant access to playback options, library management options, and a quick means of filtering your search results.

My only niggling problem in the playback process is that when you click on a song in the playlist below, it doesn’t start playing that song, it takes you to the song’s “profile page”. To make it play, you have to hover over it, and find the rather small play icon. This makes sense for the accompanying context menu, but clicking on a song title should just play it, in my opinion.

Goal: Find new music I might like.

If you’re logged in, finding new music is a smooth process, as they’ve made this a priority. Grooveshark will provide you with several lists of songs, organized by genre and based on music you’ve listened to in the past, right on the home page. You can select songs individually by dragging the album covers down to the playlist, but I’ve downright fallen in love with the big play button provided for each genre. It will add eight or nine songs to your cue to give you a taste of what that genre has to offer, speeding up the process of discovery.

This pattern of making it as easy as possible to start listening to any music you find extends into the community section of the site. The site will provide you with a list of what other people have listened to recently, using conveniently-placed buttons and context menus to give you the option to start playing an individual song, or add someone else’s recent song history to your playlist.

Goal: Organize my music.

So you’ve found music you’d like to listen to again. Great! Just use the same context menus that provide playback options and look for the playlist options. Once your music has been added, playlists are wisely handled the way they are in most desktop apps. You can use various combinations of the CTRL & SHIFT keys to select multiple tracks and move them, remove them, and so on. Playlists are conveniently kept visible on the right edge of the interface (provided your monitor is wide enough), so you can access and change them at will.

Conclusion

Despite the niggling issues I encountered, I believe that Grooveshark presents a beautiful, excellent user experience overall. If there’s one thing I’d steal, it would be their almost insane dedication to making it easy for users to fulfill the application’s primary purpose. Are you a Grooveshark user? If so, tell us what you love or hate about the UI in the comments below.