• Media Player 20.09.2008
    The perfect media player main window v2

    The perfect media player main window v2

    OK, I have redone some of the graphics. Not too much but still things that will matter. The top gray background is now striped. I think it looks more fresh. I am still not 100% confident on the new look of the track’s play progress bar. Blue made it more prevalent which is good though.

    Unfortunately Adobe Fireworks does not do subpixel anti-aliasing on the text. This makes it look more blurred that it will in the finished application. Nothing to do, but it hurts my eyes.. 😉

    As you can see I have added side bars. This is how extra information that you might or might not want to have visible at all times will look. The example bar is the playlist editor/player. I have opted for a Outlook stackbar look. I think it will work better than the tree structure in iTunes. iTunes mixes playlists, sources and the library in the same sidebar. I think that is a suboptimal setup as it will make it quite cluttered and too multipurpose to be really user friendly. For instance I never know where to drag stuff in iTunes…

    The lower tabs (in blue) will pull out another type of sidebar, or rather bottom bar.. It will look like frosted glass and be more informational in nature. One could argue that I should go with white here as well, but that makes the whole GUI a bit too blended IMO.

    The reason that the playlist tracks list looks the way it does is that I wanted to move away from very long names. The user must be shown both the track and the artist’s name, but quite commonly you will play several tracks from one artist which makes the artist name redundant for each track. Having the artist above in bold makes the tracklist look more clean and artisty and less computer-use-every-pixely, if you know what I mean.

    I don’t really know how the “get it” buttons should look like and I have tested several looks, none of which makes me warm and fuzzy. You will see them change again I for sure.

    I have also added arrows to the very custom scrollbar. Note that they should fade in when the mouse is over the scrollbar and then fade out again some five seconds after the pointer leaves it. Arrows will never be really “clean”, but they do serve a usability purpose in large lists.

    The player should minimize nicely of course. You do not want that big window open all the time. Currently I am using a model where it will minimize in three steps. Mini, micro and nano. More on that later.

    Posted by admin @ 13:09


  • 5 Responses

    • obinna henry says:

      hi, this is really cool. m tagging right along.

    • Tom says:

      As it goes with matters of opinion and taste; I feel the buttons (play, etc) do not trigger visually that they are buttons. Soft grey on white is more like a watermark, a decoration (like the grey you use in the topbar).

    • Mikael Grev says:

      Tom, yes you are correct. I am not 100% convinced they are correct and will stay this way when it comes to the actual application.

      I do think that the well known “play” symbol will help the user to understand. There should be a mouse over effect for sure and it will look more like a button. This is one of those hard cases where one must weigh usability vs style… Lets see what happens. 🙂

    • David says:

      That’s looking pretty good so far, the question becomes how will it look maximized?

    • […] his blog with a series on creating a multi-media player in Java. The first two entries (entry 1, entry 2) are yet to show the code, focusing instead on the process of sketching and refining the mockups […]