Hello again my fellow VDGers!

I'll be working on the design for a music player application and have put together some designs to get going.

For this application, we already have a developer lined up.
Of course if there are any other devs that would be interested in helping out, please please step forward - the more help the better.

Ok, so here's where the design is for the moment.


For the top-level applpication layout, I'm using just a menu button command pattern with a list-details and a view-properties navigation pattern for the content. See the layout guidelines for help with the layout patterns.

In "party-mode" the playback controls bar would slide down:


There's lots left to do: saving and editing playlists, album views, visualizations, setup, adding and editing audio streams, and more. We might need an additional navigation pattern here or there for the deeper structured content like genre.

I'll share my progress on every aspect of the design here and, of course, I welcome your ideas on making the design and, ultimately, the application, amazing.

+1 to your design so far. Not a UI person but I definitely don't mind working on the internals of this. I can see this surpassing Amarok in the future.

While you're looking for more developers, it'd be awesome if there could be some on help on Plasma Media Center where there are quite some developers crying for design help viewtopic.php?f=285&t=121705

Me likei very muchei The "party-mode" design would also work pretty well as a video application.
The only thing that i would make a little different is the left panel/sidebar.
I would split that list in to three main categories(tabs? - top?left?right?bottom? - or something else)
1) Playlist - I'm a heavy playlist user so a separate list for me please
2) Filters - Recently played, frequently played, artist, ..., etc. with the ability to make your own "filters"
3) Online/streems - doesn't need explanation.

I wanted to add to what Andrew made here. There was a conversation about visualizations and I wanted to see if implementing that would be easy. I tried making a separate button for it and also tried integrating the selections from its menu within the interface. I know these images are still, but the idea here is that when you click the visualizations button, the content on the center panel moves to the right and also uses animations to change visualizations and disappear.



Full Size http://i1108.photobucket.com/albums/h41 ... d89def.png

For the sidebar you can use headers to categorize the items like you know it from dolphin or most other software (Gwenview, ...)

what is the background image? every time the same? how would it look like you use the album icon with a blur effect.

left to the shuffle and repeat mode I would implement a view icon to switch between different views. Album view, list view and so on.

great work

* Custom and smart playlists.
My whole music listening habit revolve around playlist. I use both custom playlists and smart playlists. I think iTunes/Banshee are a great example of players that revolve around playlists. Playlists are on left panel and single click on them would bring you the songs in those playlist in the songs window. Currently, I have to use Banshee because none of the Qt or KDE players including Amarok, Clementine or JuK have such a facility. Playlists aren't treated as first class citizens. They are clubbed together in a playlist tab that you have to constantly visit and then add/remove music from there. I think playlists should be on left side pane and music files should be as shown in the middle pane.

* Auto import and auto organize music.
I have some mp3 files in ~/Download folder. I click auto-import in the music player and select the mp3 files which imports the mp3 files and stores them in some sort of hierarchy (Artist/Album/Songs) in ~/Music folder.

* Sort media on basis of metadata like album, genre, artist, stars, etc.
I currently use name, artist, album, genre, time, and playcount metadata to sort media. I am not sure if left panel is the best place to sort files. A one-line-thin-panel above the media list would be better use of space. So the left pane can be used for listing playlists.

* Single click to launch media.
In Amarok, I have to right-click media files and click Add to Playlist. And I have to click Remove from Playlist to remove music files. I think this is unnecessary complexity. Left pane should just have a list of playlist and single click on them should bring music files to playlist. Clicking on other playlist would bring their files. There is no need to constantly add and remove music in playlists.

* Queue
This is the place where folks could mix playlists and music files by added and removing them to create new playlist or organize music for let's say a party.

* UI elements should not move.
I think UI elements should not move. They should remain static and immovable in a screen. Moving UI elements break hand-eye coordination. It is fine for different activities to have different layout but a pause or a play state shouldn't change UI of the same screen.

* Search bar.
Search bar is a must.

The design is nice, and from the educational perspective it is a good example for simple applications. But from the usability POV it lacks IMHO on a clear and user-centered functionality (like many other music players). It presumes a way of organization (playlists), a particular use-case (party mode), and a restricted scope (streaming?) that is not based on surveys, I guess. I can break down my concerns to the simple questions: 'Who looks at the player when listening to music?', 'How much music files does the average user have on her computer?', and 'On what basis is music being selected?'. (Probably, there are some more aspects to consider.)

Heiko Tietze wrote:The design is nice, and from the educational perspective it is a good example for simple applications. But from the usability POV it lacks IMHO on a clear and user-centered functionality (like many other music players). It presumes a way of organization (playlists), a particular use-case (party mode), and a restricted scope (streaming?) that is not based on surveys, I guess.

Thanks much for the feedback Heiko. Regarding scope, the proposed design is for a music player that plays music from a local library as well as allowing the user to listen to an online stream (like a shoutcast station). It is not restricted to streaming.

I'm certainly curious about the specific usability criteria for user-centered functionality you might have in mind. Do you have access to specific survey data, or other validation information, that would invalidate organization by playlists or preclude the "party mode"?

I can break down my concerns to the simple questions: 'Who looks at the player when listening to music?'

Someone who might be interested in what song is currently playing or which band is playing. That person may or may not be interested in changing the track or seeing the entire playlist or browsing the music library. At a party or other gathering, in my experience, folks are often interested in what song they're listening to or which band is playing (credibly validated by the popularity of Shazam and other "what song is this" apps). I've also noticed that folks are interested in what the next song will be. Sure, one could suggest my experience may not be representative and we could certainly do a new survey to validate these design choices. (I would like to suggest though that there are multiple methods by which to validate design decisions). I honestly don't think the design is out on a limb here though.

'How much music files does the average user have on her computer?',

From my own understanding and experience designing and developing a media player, this varies from gigabytes to none. An informal survey of my circle of friends both online and offline seems to confirm that. But I'd certainly welcome information from a more formal survey (or other validation methods).

'On what basis is music being selected?'. (Probably, there are some more aspects to consider.)

The selection list on the left betrays two things: the way I think people currently select and play music and the way I think they might like to select and play music - based on their activity of playing and rating music. Sure, it's possible that I'm wrong but, given the prevalence of successful designs establishing the current selection methods and the precedence of successful designs that provide selection based on user activity, I don't think the design has gone too far out on a limb.

I don't have any valid data, just me as some kind of opposite user. I just want to warn about development driven by design. Or by a single person (therefore I don't talk about my personal preferences). Any new application should start with a vision, target users, goals in terms of technical requirements (hard features) and users' needs (soft features). Your vision could be to create the next default KDE player (JuK2) or to build a replacement for most known present apps. A good vision cannot be achieved in fact; perhaps you want to think about video clips too (which could be an aspect of the party mode). The target user seems to be simple, but beside the recreational purpose you could address creative people too or you have background music in a bar in mind. And about soft features: Should the player be as simple as possible (which implies a limited functionality, unusual for KDE) or does it have to be visually pleasing primarily?

alake wrote:

Who looks at the player when listening to music?

Someone who might be interested in what song is currently playing or which band is playing.

And you show all controls, all playlist entries, all options for this purpose? I'd say it's the young girl in the subway who browses through her collection and plays just a few seconds (usually on a smart phone).

alake wrote:

How much music files does the average user have on her computer?

From my own understanding and experience designing and developing a media player, this varies from gigabytes to none.

It is very important how many items a list have to hold (maybe it must not be a simple listview). The player should offer a sophisticated access method If someone has 10^5 pieces.

alake wrote:

'On what basis is music being selected?

The selection list on the left betrays two things: the way I think people currently select and play music and the way I think they might like to select and play music - based on their activity of playing and rating music.

Functions should be associated with a persona and a use case. Something like "Susan heard a song on the radio and wants to play the whole album from her collection." or "Matt plans to throw a party and wants to prepare a playlist for the whole evening with the option to respond to the vibes."

Heiko Tietze wrote:

alake wrote:

Who looks at the player when listening to music?

Someone who might be interested in what song is currently playing or which band is playing.

And you show all controls, all playlist entries, all options for this purpose?

Umm.. That's why the "party mode" hides much of the browsing interface.

Heiko, thanks much for taking the time to share some functionality and layout considerations as well as some specific development methodologies with us. It's a great way for all of us to learn more about approaches to succesful design. I'm actually quite familiar with the methods you've mentioned, as well as a multitude of other product development methodologies, from conception to delivery. To wit, these first set of mockups aren't simply an attempt to put pretty pixels together with concern for nothing else. Of course that hardly means that I necessarily considered everything, which is why the feedback here is exceptionally valuable. As we flesh out the design here together, more mockups will be posted that covers many of the things already acknowledged as currently missing and incorporate some of the feedback provided here.

I think you guys should really install Rhythmbox and play around with it for design cues. It is a wonderful music player. The three categories on top (genres, artists and albums) make navigating even large libraries easy. It is a very straightforward, effective and functional player with no design flaws in my opinion. Also, the party mode in it is brilliant: fills whole screen, shows all songs but when you click song, it goes to playlist instead of starting playing right away. Has been a huge hit at parties since guests can just go to my computer and easily add whatever they wish to party playlist so everyone gets to listen what they want without breaking constant playback.

https://dl.dropboxusercontent.com/u/111 ... ox-3.0.png

I don't care much for such huge colourful top bar with no function as shown in your design, alake. It just wastes space. Sorry for being so blunt.

There is also a thread about amarok Status/Toolbar improvements

viewtopic.php?f=285&t=121372

Amarok is a realy great player with advanced features but, as you can also read in the thread the layout is inconsistent and sometimes realy difficalt to understand. For me I never know how to change the playlist style.

I also like the Rhythembox feature with the three categories on top.

So it would be realy wonderful to put all into a black box and look how we can use the good feature from this players.

The mockup could be nicer but for the understanding it will be hopefully ok.



Left Panel
I play a bit with the left sidebar. I think you need tabs instead of groups in one panel.

Right Panel
As in alake wonderful mockup the right panel should be a information panel. I prevere also the information from the party mode on top should be in the right panel. When you think about amarok, there are some more informations about lyrics, wikipedia, ...

Party Mode
This is realy cool, I like them also from bangarang and this is the only think I miss in amarok (maybe there is an addon). Also the implementation on the mockup is nice. I don't draw the top panel, because I have to copy you. when people think it is waste of space, maybe we can have an botton. Navigation without party mode and listen with party mode. For the party mode I would have a configuration like for plasma. so I can put on that widgets (next song, playlist, lyric, ..)

Search
the selection from rythembox is realy very nice, so we could use this for the search. when you click the search botton, you can search by text (please with autocomplete like the new kate) or by mouse with this three sections (genre, artist, album).

To complex
when you want to listen a song, use dolphin and dragon player. KDE software is feature rich, customizable and easy to use without loosing your choice.

Known Problem
I don't know If this works fine for people use playlists. I don't use playlists, so please make comments.

daedaluz wrote:I think you guys should really install Rhythmbox and play around with it for design cues. It is a wonderful music player. The three categories on top (genres, artists and albums) make navigating even large libraries easy. It is a very straightforward, effective and functional player with no design flaws in my opinion. Also, the party mode in it is brilliant: fills whole screen, shows all songs but when you click song, it goes to playlist instead of starting playing right away. Has been a huge hit at parties since guests can just go to my computer and easily add whatever they wish to party playlist so everyone gets to listen what they want without breaking constant playback.

https://dl.dropboxusercontent.com/u/111 ... ox-3.0.png

I don't care much for such huge colourful top bar with no function as shown in your design, alake. It just wastes space. Sorry for being so blunt.

Here is the issue different users different needs...
As for the "colourful top bar" it adds a little bit of life to the application and there is no objections to add a toggle button to show/hide it.

For me the unmatched player is foobar and unfortunately i wasn't able to find a decent alternative for it...
Lightweight, customizable and powerful.
https://www.google.com/search?biw=1436& ... 842FHo-MLs
Only the users imagination and skills is the limit
Through the years i tried dozens of configurations and ended up with something simple on the outside but very powerful that fits my needs and allows me to manage my library very well.
http://wstaw.org/m/2014/08/06/foo.jpg
It's not as nice as 99% of the google search results but it works better than any other app Managing files directly from foobar, powerful tagging options, statistics, powerful filters, plugins, etc.
Since 99% the window is hidden i don't care that much how it looks like more important for me is what can i do with it when the window is actually opened

Personally not a fan of rhythmbox UI especially the split view also find It a waste of space . The only time when i browse my library is to make a new playlist or when i tag new entries. And that is pretty rare, since to create a new playlist i simply use a search box which automatically creates a list with matched entries