Icon and UI mockups

[JasonLG1979]

I designed the new Pithos icon and made a few UI suggestions that made it into version 1.0. I'd love to do a few mockups.

[JeffHoogland]

Feel free, always open to suggestions.

[JasonLG1979]

Here's a very crude mockup.

[JasonLG1979]

I'm not a huge fan of tabs in a main windows unless you absolutely have to use them. I think their best use is settings menus.

The Scrollable playlist/history box would function pretty much like in pithos except there's really no need to show song time info. You should be able to like and ban songs in a right click menu.

[JasonLG1979]

I'm also looking for maybe your thoughts on the icon. Style, shape, theme, color palette?

[JeffHoogland]

The second for song name/artist/album name is likely to constrained. These can be long at times.

While I agree tabs in the main UI aren't ideal, I also wanted to keep the window fairly compact while still providing as much information as possible. Your mock up would make the window considerably wider.

[JasonLG1979]

Like I said it's a very crude mockup it's not suppose to the show size or proportions of the UI elements, just relative placement. Like for example the buttons don't need to be that huge. You could squeeze all that into a window no wider than 500px if you wanted to. I'll dummy something up in QT Designer here in awhile, daddy duty calls at the moment,lol!!!

[JasonLG1979]

Something kinda like this. It ends up being about 400x325px. Everythings in the same place as the previous mockup except the song info button is moved to top row of buttons.

[JasonLG1979]

Or yet another slightly asymmetrical to allow for more horizontal space in the playlist/history box and with the buttons below the song info.

[JeffHoogland]

I like the second one better there than the first, but still not sure how much I liked it better than my current layout. I kind of like the large navigation buttons because they are the main thing the user is interacting with on a regular basis - so why make them so small and out of the way?

[JasonLG1979]

The buttons are 25x25. I personally would use icons for buttons instead of raised buttons 24x24 icons are plenty big enough or you could go up to 48x48. Any bigger is just a waste of space uunless you're trying for touch screen friendly. As far as placement goes traditionally play controls are arranged horizontally. The space between the album artwork and above the buttons would be occupied by the current playing song info.

[JasonLG1979]

space below the album artwork

[JasonLG1979]

Here's one with 50x50 buttons. I don't absolutely hate it, but I still think the buttons are huge at 50x50.

[JasonLG1979]

Here's one with 24x24 icons on 40x40 buttons. I actually like this one. The icon theme is oxygen but the theme isn't important I just wanted to show scale. The yellow undo arrow represents the "tired of this song" option in Pandora.

[JeffHoogland]

I like this last one. Can you share the .ui file for it?

[JasonLG1979]

Sure but it's not functional at all,lol!!! It's totally just dummied up. https://www.dropbox.com/s/abi76o76cwffr4j/qAndora4.ui?dl=0

[JeffHoogland]

Fairly easy to just change button names and add a few of my own widgets though :)

[JasonLG1979]

Tear it up man,lol!!!

[JeffHoogland]

Working sample:

I think I like this.

[JasonLG1979]

Not bad at all!!! What about moving the time info down into the song info area so it doesn't cover up the album cover?

[JasonLG1979]

Another thing I noticed is that in the history tab in the old layout the songs populate from bottom to top. They really should go from top to bottom so it looks like a playlist. It would also be nice to grab the next few songs so you know what's coming up next.

[JeffHoogland]

Newest tracks get added to the top of the history widget. This is how it should work IMO.

I also really dislike showing the upcoming songs. No other pandora player does this and I don't like that pithos does.

[JasonLG1979]

Showing upcoming songs is a very nice feature. It allows you to ban/like/skip songs before they play. As far as the playlist goes. that's just the opposite of every audio player I've ever seen. We read from top to bottom.

[JeffHoogland]

The point of pandora is discovering new music - not banning songs before you get to them. If you want to pick exactly what you are listening to use spotify.

[JasonLG1979]

If i want to discover new music I create a station based on an artist or gene. Otherwise I listen to one of my own stations which I have had for a VERY long time. I have banned and loved the crap out of them so much that they pretty much only play songs I've heard before and generally like.(example: I have a modern-ish Rock/Metal station that never plays Nickelback or Disturbed songs anymore) Showing upcoming songs lets me know what's coming up next so I can decide if I want to skip them for now.

[JasonLG1979]

Well I guess we'll have to agree to disagree. Anyway here's another mockup. I started with your ui file and tweaked it a bit so things lined up a little better. I also moved the track time to the song info section.

[JeffHoogland]

Looks good. Make a merge request.

[JasonLG1979]

Ok, give me a second to figure out how to do that,lol!!!

[JasonLG1979]

Done, I think,lol!!!

[JeffHoogland]

Merged the latest, cleaned it up a small bit and made the icon images work again. Try the latest source code.

[JasonLG1979]

Looks good except maybe right justify the track time with the history box.

[JasonLG1979]

Oh and center the station name in the dropdown.

[JasonLG1979]

I'm pretty happy with this, you? Any thoughts on the icon?

[JeffHoogland]

I've center aligned the station name and right aligned the track and fixed the window icon.

The issue with right aligning track titles is that when we get a long title that causes horizontal scrolling it moves ALL the tracks off to the right, which looks worse than having everything left aligned IMO.

[JasonLG1979]

No, don't right justify the track titles. They are fine the way they are. If a title gets long enough to cause it to scroll set it truncate instead. The titles would have to be ridiculously long before they'd truncate. The only thing I wanted right justified was the time.

As far as the icon what I'm asking is did you have any icon idea as far as a design?

[JasonLG1979]

Don't much care for that style box in the station drop down. Was that on purpose?

[JeffHoogland]

That isn't optional. QComboBox doesn't natively support center aligning, so what I've done there is a bit of a hack that changes it to that style.

[JasonLG1979]

What about this? http://stackoverflow.com/questions/23770287/how-to-center-text-in-qcombobox

[JeffHoogland]

That is the hack I am using. Making it editable changes the style.

[JasonLG1979]

Well that sucks. It looks worse than having it left aligned. If I had to choose between the 2 I'd say left aligned.

[JeffHoogland]

I actually don't mind it.

[JasonLG1979]

It's up to you I guess,lol!!!

[JasonLG1979]

So you reverted the UI?

[JeffHoogland]

Just trying different layouts. qAndora-2.ui is the one we worked on here. If you want to use it rename it to qAndora.ui and run the buildgui.sh

[JasonLG1979]

Awesome. I've been actually wanting to learn python so maybe I'll play around with my fork to see what I can break,lol!!!

[JasonLG1979]

Here's another slight tweak. I shrunk the buttons to 36x36 and shrunk the song info section a bit and made the album cover bigger. The icons don't work though. It would be nice if the icons honored the system theme.