Murphy's dashboard

I recently made a music player mockup and wanted its search function to have a drop down list of results like this. Fortunately, I had put so much thought into this topic before that I already had lots of ideas for how it would work. I wanted to share some of the different ideas here.

First, I made the search box about the same size as the current one in Songbird, which means I had to make the drop down list much thinner. Since Songbird has been shifting focus away from the web browsing aspect of the program, I thought utilizing the existing search box instead of an awesome-bar might be more practical now.

Second, I tried to use icons to differentiate the types of results instead of typography, and I think it works pretty well. Songs utilize album art and an eighth note icon, albums utilize album art and a CD icon, and artists just have a person icon.

This is it (I am linking to the mockup on flickr in case anyone has specific comments for it):

I made this improved version while ago and thought I would share it. I tried see what it would be like if you had the player controls incorporated into the media view itself. It was just an experiment to throw some ideas out, but I thought that encapsulating the controls with the song itself might have some benefits:
- the song would sort of spring to life when play it because the pause button would appear, the progress bar would slide out, and the time would start ticking down, all of which would help you visually identify which one is playing
- it might simplify the interface by removing the large bar of player controls
- it makes the song progress bar just pixels away after you double click a song to play it, which would make it easier to play a song and jump to a particular part.

The second image in the set shows how the controls could fade in in the bottom bar if you navigated away from the now-playing list so you would still have control of the song and an easy way to return to it.

This is what it could look like with a playlist pane. – Murphy, on January 27, 2010 22:32

That would be awesome, especially if you had Songbird running on a touchscreen computer (but it would definitely work on a non-touch as well). – Murphy, on January 27, 2010 22:14

This is what the iPod app looks like on Apple's new iPad. Unfortunately, the grid view itself appears to remain unchanged, and it looks like it could really be a pain to scroll through a lot of albums without the artist letters on the side like the iPod Touch has.

I just wanted to post it because, while it is not technically part of the media view, I do like how they moved the song's now playing information to below the album art. They are both information about the now playing song, so it seems like it would be better to have them combined in the window. I bet they will update iTunes eventually to be the same way.

I agree. Truthfully, I like how the designs Firefox has been showing off lately maintain the full titlebar, rather than infringing on its space with tabs like Chrome does. Looking back at these mockups, I don't like how I lost so much of the title bar and changed the location of the close/min/max buttons. – Murphy, on January 08, 2010 05:37

They posted some Firefox designs a while ago with a unified menu button instead of having Page and Tools buttons like Chrome has: http://blog.stephenhorlander.com/2009...

It sort of reminded me of the mockup I made with the Songbird icon in the title bar, because it could have been a menu button. I really like the idea of consolidating all menu items into one menu, because then the user doesn't have to contemplate which menu has what they are looking for.

Maybe Songbird could do something similar to simplify the UI.


For the record, I really like Purple Rain and am just continuing to use the Aero theme because it is easier, and I slaved over it for weeks :). Also, the prominent forward and back buttons might not be as sensible now that the Songbird team is trying to phase out the browser aspects in the program, so just ignore those too.