Creation: “Songapore” A Media Player UI Concept

Basically I’m a huge music lover who’s tried almost every media player imaginable over and over throughout the years, from Windows Media Player, Sonique, Winamp, iTunes, and Songbird, to Amarok, Totem, Sony SonicStage, TDK mix master, and a bunch of others that you’ve probably never heard of. Do you know which one I keep going back to? VLC player. Yes, that’s right, little VLC player. Why? Basically because it’s simple. So a week ago I decided to design my dream UI for a media player. Something simple.

Here’s what I want to avoid. The “Excel Spreadsheet” look.

Winamp:

 

iTunes (might be different from latest version) (screenshot by nickh from modmyi.com forums):

Songbird using a custom skin:

What I want in a simple media player:

  • 3 panes: Artist, Album+Song, Now Playing.
  • Options for each pane right under that pane’s heading.
  • No unnecessary information.
  • No scrollbar jungle.
  • Player controls that are right above the songs that are currently playing, the way I feel they should be. Not at the top or the bottom away from their corresponding content, but together.

So this is what I came up with:

and Final Version #2:

Let’s take a detailed walkthrough:

Letter Shortcuts – Browsing is easier but slower than search for something but comes in handy when you’re not sure what you want or have available to you. All the artists are in alphabetical order with letters to the left of the first artist of each letter. Instead of scrolling down to the artists begining with “T” you can just click “T” up in the letter shortcuts section (to the right of the search box) and the artists will automatically scroll up to the begining of the “T” artists. Black letter shortcuts mean that letter is currently in view, greyed out means it’s out of view, and if you don’t have any artists beginning with “Z” or other letters then those letters won’t even be clickable. Simple, yet informative.

Instant Search – As soon as you start typing the Search Box and top of Artist and Album+Song is highlighted orange and the contents of Artist and Album+Song panes are cleared to make way for the search results. As you type, matching results for artists will flood the artist pane and matching results for songs will flood the songs pane. Click (X) to erase the search results and return to the normal view.

Easy Album/Song Sorting – Once you click on an artist the songs and albums of that artist will load up in the album/song pane. You choose to sort the songs by favorites (heart) or by album name, song name, or song length. They’ll all sort ascending (a-z) by default (down arrow highlighted) but if you click again they’ll sort in descending order (z-a). Favorites (heart icon) can only be sorted ascending because there’s no reason to sort favorites by descending. Unless a bunch of users complain and want that feature. If you sort by Album (which very few people might) only the grey Album names pop in and you have to click on each album to unroll (see) the songs it contains (songs in black and indented underneath them). Sorting by song length or song name makes the albums labels disappear and only shows songs. If all sorting options are deselected then by default Album names are shown in order of release (or alphabetically) and songs are displayed underneath in track order (or alphabetically).

Play Immediately / Add to Playlist rollover icons – Rolling over the songs / albums / or even the artists will make “play now” or “add to playlist” icons appear next to the text. Self-explanatory.

Favorites – Heart icons will only show up to the LEFT of songs that are in the Album/Song and Now Playing panes. Clicking on it will turn it red and make that song a favorite so you can find it easier later on.

Now Playing Options – Volume, Equilizer, Song Speed, Player Options, and Help/About are located above the player controls. I didn’t make mockups for each feature individually but you get the idea. Rolling over them will turn them black.

Player Controls – Yes, I left out the stop button because I felt it was unnecessary. I don’t think I’ve ever used it really. If I want music to stop I pause it or exit the player. Anyway, When NOTHING is playing, All buttons are grey/darkened just like the Repeat and Shuffle ones in the picture above. When songs are playing the Play, Next, and Previous button symbols light up white. I put in a lot of time to decide where to put the Repeat and Shuffle buttons and I found these locations to be the most suitable. Shuffling means going forward so I put it in front of the Next button, and repeat means staying put on the current song so I put it behind the Play button. I was thinking of putting the prev and next buttons on the outside but decided against it since users are most likely used to them being near the play button.

Remove Rollover Icon – Oh how I wish all media players had this, I hate having to select something and right click or press delete on my keyboard, it takes longer. So behind every song that’s currently playing is the option to remove it from the playlist.

==================== ! Rough Drafts Below ! ====================

(This was before I properly spaced, shaded, and polished the mockups.)

 

Left Aligned Headers:

Folded Magazine Paper look:

Black Folded Paper look:

All white + Rounded header font:

All white + Robotic font:

Top gray ribbon + Rounded font:

Top gray ribbon + Robotic font:

Earlier concept of Grayed out options + Robotic font:

Experimental, not looking very good.

With seperator:

Text left aligned.

Of course there’s an unlimited combination of different styles, colors, and fonts, that you could use. Unfortunately, I don’t have time to do more polishing or work on this. I sure wish this was what VLC player looked like.

The mockups I created used a few icons I found at IconFinder.net that were published under creative commons attribution licenses from the following people: