This forum has been archived. All content is frozen. Please use KDE Discuss instead.

[Design help wanted] Plasma Media Center home screen design.

Tags: None
(comma "," separated)
fabianr
Registered Member
Posts
42
Karma
0
What about an plasmoid container on the homescreen the user can fill herself with plasmoids (weather, rss-feed, ...)?
bshah
Registered Member
Posts
77
Karma
0
OS
fabianr wrote:What about an plasmoid container on the homescreen the user can fill herself with plasmoids (weather, rss-feed, ...)?


Thats idea, we will support some kind of dashboard mode or something like that in little future.. :)
User avatar
alake
Registered Member
Posts
591
Karma
3
OS
bshah wrote:
fabianr wrote:What about an plasmoid container on the homescreen the user can fill herself with plasmoids (weather, rss-feed, ...)?


Thats idea, we will support some kind of dashboard mode or something like that in little future.. :)


Hmm, interesting. Would an autohide, scrollable, panel-style container thingy work for something like that? Just a random thought that popped into my head.
davidwright
Registered Member
Posts
153
Karma
0
OS
I don't know how well these are going to be received but here ya go.

Image

Main Screen

I've gone for a plain screen with a qml live wallpaper here. The idea being that if there is inactivity then the buttons will fade away and just leave the live wallparer as a sort of screen saver. Obviously an open plan front screen like this would allow for custom widgets to be placed.

Notice the games section? Because we all know that KBounce would be much better on TV screen.


Image

Music Visual

So moving onto the music section. As you can see the main buttons have ended up on the top of the screen. A nice transition animation from the main screen would work well here I think. The layout is similar to Andrews from here on in really. The idea being the you can easily flick through the sections with the up - down keyboard keys, with an enter to expand it. I would like it so that the sections availbe would be customisable, so if you're not interested in a playlist section you could go to the settings and remove it.

Image

Music Album
Album view now, we are one level in from the overall list of albums. Hence the breadcrumb in the title. Really the same as Andrews except I've added a play straightaway and add to playlist button.

Hope that makes sense! Can do more plans for the other sections / views if there is interest!
User avatar
alake
Registered Member
Posts
591
Karma
3
OS
shantanu wrote:* About the left panel hiding, maybe we can do what Blackberry folks do on Z10, just hide the text and only show icons. Sounds good?


I'll be sure to take a second look at that shantanu (it was the "collapsed" panel I mentioned before). The challenge when I tried it the first time wasn't so much the visual design with the panel already in a collapsed state (pretty straight forward). The challenge started to emerge when I started working through the visual and interaction design considerations that the resultant dynamic layout changes would introduce. Those considerations include identifying which states would correspond to the expanded/collapsed panel and designing the layout transitions between the expanded state and collapsed state depending on user input. An example of what I started to consider is how visual elements in the main content area should respond to the expanding left panel? Should it slide the visual elements off to the right, compress the visual elements, or should the expanding panel slide over the content? Should the focus change due to user input happen before or after the transition?

I definitely don't think the challenge is insurmountable though - there are definitely solutions we can come up with. I just wanted to share that the collapsed panel can potentially introduce some additional design complexity (and perhaps implementation complexity) that, as we find potential solutions, we would just need to periodically weigh them against the benefits they might bring. Like I said, I'll be sure to take a second stab at it. :-)

Again, thanks for everyone for the help, greatly appreciated.


No problem shantanu. Thanks a lot for your patience! :-)
User avatar
colomar
Registered Member
Posts
947
Karma
2
OS
alake wrote:
I'll be sure to take a second look at that shantanu (it was the "collapsed" panel I mentioned before). The challenge when I tried it the first time wasn't so much the visual design with the panel already in a collapsed state (pretty straight forward). The challenge started to emerge when I started working through the visual and interaction design considerations that the resultant dynamic layout changes would introduce. Those considerations include identifying which states would correspond to the expanded/collapsed panel and designing the layout transitions between the expanded state and collapsed state depending on user input. An example of what I started to consider is how visual elements in the main content area should respond to the expanding left panel? Should it slide the visual elements off to the right, compress the visual elements, or should the expanding panel slide over the content? Should the focus change due to user input happen before or after the transition?

I definitely don't think the challenge is insurmountable though - there are definitely solutions we can come up with. I just wanted to share that the collapsed panel can potentially introduce some additional design complexity (and perhaps implementation complexity) that, as we find potential solutions, we would just need to periodically weigh them against the benefits they might bring. Like I said, I'll be sure to take a second stab at it. :-)



Kontact Touch (the Kontact version for the Nokia N900) introduced so-called "menu flaps", which are basically menu overlays dragged over the content from the left screen edge withoug changing the content. They haven't been implemented in any Plasma Active application yet, but we formally introduced the pattern in an HIG
(https://community.kde.org/Plasma/Active/Development/ActiveHIG/MainMenu). It surely needs some visual design love, but interaction-wise, it worked pretty well and since Kontact Touch was done in QML, we know that it works from the technical side.
davidwright
Registered Member
Posts
153
Karma
0
OS
colomar wrote:Kontact Touch (the Kontact version for the Nokia N900) introduced so-called "menu flaps", which are basically menu overlays dragged over the content from the left screen edge withoug changing the content. They haven't been implemented in any Plasma Active application yet, but we formally introduced the pattern in an HIG
(https://community.kde.org/Plasma/Active/Development/ActiveHIG/MainMenu). It surely needs some visual design love, but interaction-wise, it worked pretty well and since Kontact Touch was done in QML, we know that it works from the technical side.

[/quote]

I'm not sold on a sliding menu on a TV. My second monitor is a TV and I can tell you from experience that you really want to keep things as simple as possible. I used to use XBMC but I found its complexities just got in the way of viewing; I now use VLC. Fundamentally the menu system is a means to an end; you want to go from launch, to media, to full screen viewing, in the quickest and most painless way possible.

The best navigation system I have ever used was that on PS3. Such a simple and quick experience, but that was also it's drawback, it was a too simple in some places.
User avatar
notmart
KDE Developer
Posts
220
Karma
1
OS
joaob wrote:
alake wrote:OK, here's a first stab at the design for a few screens.




If PMC is to have a Home section like this it should a "recently added" section, not sure if this is possible or even implemented at code level but it was just a thought I had. It would give the user easy access to recently added media right from the home screen.


first: the mockups looks damn pretty ;)

but, does a "recently watched" thing really make sense? what i just watched is pretty much the least likely i want to watch next.
a section like that would make sense if pmc would have some "predictive" engine that can do some heuristic like to see what are the latest episode of a tv series i just watched, so suggesting the next one.
but this looks more like a future feature?
User avatar
alake
Registered Member
Posts
591
Karma
3
OS
notmart wrote: does a "recently watched" thing really make sense? what i just watched is pretty much the least likely i want to watch next.
a section like that would make sense if pmc would have some "predictive" engine that can do some heuristic like to see what are the latest episode of a tv series i just watched, so suggesting the next one.
but this looks more like a future feature?


Yeah, I was mostly thinking of the case where you were watching a movie or a tv show and didn't finish watching it (had to leave, fell asleep, whatever), or you watched a cool video clip that you wanted to show a friend. Yeah, a fancier algorithm to show the recently watched tv shows that, when selected, could either resume the last episode if you didn't finish it or start the next one if you did would be cool too, but I imagine a little trickier to implement. Netflix appears to use a combination of the simple what-you-last-watched filter and the fancier algorithm for tv shows - both quite useful occasionally.

Ultimately though it's just the home screen so if what's on it isn't exactly what you're looking for, the user can still browse (or search - which I need to add to the design). In a certain sense keeping it simple, if less useful, till we can make the more complicated stuff work at least as well, might be the best approach. :-)
davidwright
Registered Member
Posts
153
Karma
0
OS
alake wrote:Yeah, a fancier algorithm to show the recently watched tv shows that, when selected, could either resume the last episode if you didn't finish it or start the next one if you did would be cool too, but I imagine a little trickier to implement. Netflix appears to use a combination of the simple what-you-last-watched filter and the fancier algorithm for tv shows - both quite useful occasionally.


Dragon player seems to remember where you were in the last video after you shut it down, so at least part of that problem has been solved before in some way.
bshah
Registered Member
Posts
77
Karma
0
OS
notmart wrote:but, does a "recently watched" thing really make sense? what i just watched is pretty much the least likely i want to watch next.
a section like that would make sense if pmc would have some "predictive" engine that can do some heuristic like to see what are the latest episode of a tv series i just watched, so suggesting the next one.
but this looks more like a future feature?


Okay, IMHO two things can be done,

1) something like favorites which user can select
2) recently watched section which will appear only when some moview was stopped in middle. I think from code point of view its just key pair value with URL which can be set when pmc is closed if something is playing

Tomorrow I will try to hack something like favorites backend for PMC from existing codebase available. It can be reused with new design afterwards.. ;)
User avatar
alake
Registered Member
Posts
591
Karma
3
OS
Thanks again for your patience on this. Ok, based on the feedback so far I tried a little harder at sorting out the design with a collapsed panel and how it would transition between collapsed and expanded.

Of course transitioning from expanded to collapsed would just be this reversed. The content area width stays the same and simply moves right/left as the menu panel expands or collapses. It also hopefully better differentiates between selected and focused states.

I also took a stab at the video playback with the controls overlay:


and image viewing with the controls overlay along with a strip-detail navigation pattern (all of which would fade out after a few seconds and reappear when a button is pressed):


and then a proposal for what picture albums/folders might look like along with the title of the currently playing media in the side panel:


Thanks again for your patience and hope this is helpful! :-)
User avatar
andreas_k
Registered Member
Posts
561
Karma
0
The designs are beautiful. well done.

Can you post the svg file as well. I'd like to play with the "workflow" and maybe there are some tiny changes possible.

For the search put a search field in the sidebar and the search results will be shown in the right area. ordinary you search in the selected section (audio, video, pictures)

torrentbutler.eu has a realy nice search.
AGuiFr
Registered Member
Posts
77
Karma
0
OS
The updated version really look nice !

andreas_k wrote:For the search put a search field in the sidebar and the search results will be shown in the right area. ordinary you search in the selected section (audio, video, pictures)


I think the left panel should be for global actions only. If the search field provides only results for the section currently selected, then it should be in the right area and not in the panel. What about a drawer on the left ? It could include the search field, the ability to sort songs by artist, album, genre, etc... The content area would slide on the left, below the colapsed panel, maybe hiding a little of the content, and options would be revealed as if they were below it. Some future options like retrieving album covers on the internet could be added there.

This could also be used while playing a movie to allow the selection of an audio or subtitle track.

This drawer concept works well with a touch interface like in Plasma Active, but maybe with a remote controller, it would not be discoverable and easy to use. That's just an idea.

edit: Actually, Spotify's current web player is close to that concept : a left panel always visible, and sliding "cards" of content one on top of the other. I didn't find any video of it, but if you have a Spotify account, you can try it at play.spotify.com.
User avatar
anditosan
Registered Member
Posts
157
Karma
0
OS
What would you think of this?

Image

The idea is that when you have the menu on full view, you use only text and when the menu is shrunk or hidden, it would take on the icons instead?


Bookmarks



Who is online

Registered users: Bing [Bot], daret, Google [Bot], Sogou [Bot]