I’m not a MySpace member myself but I tend to listen to one or another song once in a while. It’s a great way to discover new tunes or watch newcoming superstars grow as they publish their songs on MySpace.

Since MySpace is especially popular among musicians for its audio streaming capability, one could expect that MySpace designers and developers dedicate an extra focus to this functionality.

The user experience I’ve made with their embedded Flash player shows me they don’t.

In the following I compiled a list of things about the MySpace flash player that are completely bogus. But instead of just flaming and ranting about it, I’ll try to propose a possible solution for each design flaw. Maybe some will be regarded within the next makeover at MySpace. ;)

1. Pressing Pause on page load causes confusion

   

   Error: When the flash player has loaded, the first track immediately begins to play. If you press the pause button right after page load, the song as well as the time both stop advancing. But the status in the display says “Playing” anyway and also the equalizer is bumping some ranges.

   Solution: Stop the playback from the beginning or make it a user option. Not every visitor wants to listen to the music when he visits the page.

2. Graphic equalizer is completely fake

   

   Error: You don’t have to be an audio-engineer to recognize that the amplitudes the equalizer virtualizes have nothing to do with the sound that is playing. It just randomly dangles up and down – even when there’s silence at the beginning of a track. This can be tested when you listen to songs that feature calm & loud or slow & fast parts, such as tracks from The Beatsteaks or Peaches.
   You’ll notice that the equalizer always moves at the same speed and shows random amplitudes in random bandwidths. This is more confusing than useful — the equalizer is just for the sake of eye-candy, which is a drop in the polluted ocean of MySpace.

   Solution: Fix it or leave it out. Binding an equalizer to sound should be easy to do. I can remember doing tutorials for such thing in the days of Flash 5. More useful though would be a display of the remaining playback time or sth. like that.

3. Inconsistent Button Design

   

   Error: Why is there a “Pause” button? I could agree with the argument that people might look for such a button when they want to stop playback temporarily. But when a track is paused, you currently can resume it either by pressing “Pause” again or by pressing “Play” (the redundancy makes sense somehow). But when the player is in “Playing” mode the only button without a function is the “Play” button — this, however, is bad design because the redundancy gets inconsistent there.

   Solution: A better design would be to fuse the “Pause” and “Play” function into one button. When the playback is stopped, the button shows “Play”. When a song plays, it shows “Pause”. The playback buttons in iTunes also work like this (because Apple employs UI designers who know about interface modes).

   For further reading on modes (or states) of interfaces, I recommend the book Jef Raskin – The Humane Interface (Page 37 ff. Chapter 3.2 – “Modes”).

4. Progress Slider overshoots

   

   Error: I was surprised by this fact recently when I listened to a new mix from Diplo. When the track played until 4 minutes, 11 seconds the handle of the progress slider reached the end of the line. I thought “Hey, it does not sound like the song will end here every second…”, but the handle kept going and going. The song went on for 2 minutes and the progress handle was never to be seen again until I hit the stop button.
   It almost appears like this is coded “straightforward” into the player as 1 pixel per second: x_position_of_handle = song.played_time_in_seconds.
   Scrubbing the progress slider is disabled on most pages anyway (Don’t know if that’s a user option). So this element of the interface could possibly be dropped after the next makeover.

   Solution: Fix it, or leave the slider out of the GUI completely when scrubbing is disabled – only showing the progress bar.

5. Volume control indicator

   

   Situation: When you scrub the volume slider, a green indicator with growing vertical bars below the volume slider shows you where the volume really is. Does one really need this as feedback? In my opinion it’s absolutely superfluous, combined with the slider design.

   Solution: A better design would implement to replace the current slider track (the background) with a linear growing indicator. It’s color filling grows as you drag the volume handle.
   2nd alternative: Leave out the indicator completely or move it into the display area.

A Quick re-designed Mockup

While I had Photoshop opened, it took about 20 minutes dragging and removing a few elements to realize my improvement suggestions:

There’s now one button for play&pause, the volume indicator has moved inside the display with the look of the equalizer (which is now gone), the played time has moved inside the display, the volume slider is held as a plain slider, and there’s even slightly more space to each side of the button group. That’s it.

I wouldn’t even start researching design flaws in the rest of the MySpace site. That system seems so incrementally developed and patched everywhere that I’m sorry for the developers who will re-code it one day.

Posted in Design, Rants, Tags:Design, fuckedup, interface, myspace

Possibly Related Entries

• Twilightzone for the ringtone
• Gloss and Stripes
• Another Powerbook Ram-Slot story
• About
• If Architects Had To Work Like Web Designers…