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:

76 Comments

  1. Blooker says:

    Have you tried Windows Media Player with a codec pack? Just make sure it’s set to “Show List Pane” and you have exactly what you want.

  2. The foobar2000 audio player has a completely configurable panel layout, and could probably be set up in this exact fashion. It wouldn’t look as nice as your mockup, though!

  3. eebest8 says:

    “Damn Okay, let’s move on. He returned to the Chargers is just plain ridiculous.”

  4. Say, you got a nice article post.Really thank you! Will read on…

  5. find out says:

    Appreciate you sharing, great blog post.Much thanks again. Much obliged.

  6. software says:

    Say, you got a nice post.Thanks Again. Keep writing.

  7. Thanks for the blog.Much thanks again. Much obliged.

  8. smart home says:

    Thanks-a-mundo for the blog article.Much thanks again. Will read on…

  9. Muchos Gracias for your blog.Much thanks again. Cool.

  10. Thanks-a-mundo for the blog post.Thanks Again. Great.

  11. I cannot thank you enough for the post.Really thank you! Much obliged.

  12. Thanks a lot for the blog post.Much thanks again.

  13. chef wear says:

    Really informative article.Really thank you! Want more.

  14. Im thankful for the post. Cool.

  15. Appreciate you sharing, great article.Much thanks again. Really Great.

  16. I really enjoy the article.Really thank you! Really Cool.

  17. Thanks for the post.Much thanks again. Keep writing.

  18. Say, you got a nice blog.Much thanks again. Will read on…

  19. Very informative article.Much thanks again. Awesome.

  20. Boxbedarf says:

    Thanks so much for the article post.Thanks Again. Awesome.

  21. dafabet says:

    Thanks-a-mundo for the blog post.Really thank you! Great.

  22. Im grateful for the blog.Really thank you! Fantastic.

  23. “Im grateful for the post.Thanks Again. Much obliged.”

  24. Really informative article. Will read on…

  25. Thank you for your post.Really looking forward to read more. Really Cool.

  26. “Thanks for some other great article. The place else could anyone get that type of info in such a perfect approach of writing? I have a presentation subsequent week, and I am on the look for such info.”

  27. I am so grateful for your post.Really looking forward to read more. Really Great.

  28. Great, thanks for sharing this article.Thanks Again. Cool.

  29. “I must express my thanks to the writer for bailing me out of this particular circumstance. After researching through the world-wide-web and finding ways which are not helpful, I figured my entire life was done. Living devoid of the strategies to the difficulties you’ve fixed all through your main site is a crucial case, as well as those that could have in a negative way affected my career if I had not discovered your website. Your personal skills and kindness in maneuvering a lot of things was tremendous. I am not sure what I would have done if I hadn’t discovered such a stuff like this. It’s possible to at this time look ahead to my future. Thanks very much for your expert and amazing help. I will not be reluctant to refer the website to anyone who would like assistance about this issue.”

  30. Strap on says:

    “Thank you a bunch for sharing this with all of us you actually know what you are talking about! Bookmarked. Please additionally consult with my website =). We may have a link alternate arrangement between us”

  31. “Hello! This post could not be written any better! Reading this post reminds me of my good old room mate! He always kept talking about this. I will forward this write-up to him. Pretty sure he will have a good read. Thank you for sharing!”

  32. “Hello, I log on to your new stuff regularly. Your story-telling style is awesome, keep it up!”

  33. “wow, awesome article. Great.”

  34. I really like and appreciate your blog post.Really looking forward to read more. Great.

  35. “Really appreciate you sharing this article post. Keep writing.”

  36. bam penis says:

    I think this is a real great article post.Really thank you! Will read on…

  37. Awesome article.Really thank you! Fantastic.

  38. A round of applause for your post.Thanks Again. Fantastic.

  39. A round of applause for your blog article. Will read on…

  40. Very informative article post.Really thank you! Will read on…

  41. Looking forward to reading more. Great post. Keep writing.

  42. I truly appreciate this blog post.Really looking forward to read more. Want more.

  43. Fantastic article.Really looking forward to read more. Much obliged.

  44. dildo says:

    I am often to blogging and i really appreciate your content. The article has really peaks my interest. I’m going to bookmark your website and maintain checking for new information.

  45. I am so grateful for your article post.Really thank you! Much obliged.

  46. penisring says:

    Thanks for sharing, this is a fantastic article.Really looking forward to read more. Cool.

  47. Anal Prep says:

    “Thank you for another great article. Where else could anyone get that kind of info in such a perfect way of writing? I’ve a presentation next week, and I’m on the look for such info.”

  48. Thanks so much for the blog post.Much thanks again. Fantastic.

  49. dmca says:

    Wow, fantastic blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is wonderful, let alone the content!

  50. best site says:

    Great, thanks for sharing this blog article. Much obliged.

Leave a Reply

Your email address will not be published. Required fields are marked *