Jump to content
noakd8601

OSD design/layout update request: a few mock-ups I put together. Opinions?!

Recommended Posts

noakd8601

The UI design on the android tv/fire tv platform is looking better and better! Thanks for giving it some attention! I especially like the ability to hide the card backgrounds on the homescreen, and the translucent gradients on the preplay screens with left justified text really lets the art shine through...it really provides a much more elegant look. Looking forward to video backdrops to really set off the overall experience. I'm THIS close to ditching kodi...

 

Anyway, the look of the new update inspired me to create some mockups of what I'd personally love to see changed for both the "Playback/Details OSD" and "Paused OSD" screens. In my opinion, these design concepts would really tie everything together for a more unified look. They also provide a little more elegance, and even provide an option for a little extra eye candy. Nothing drastic, I'm using all the same elements found elsewhere throughout the interface - text, formatting, etc - just moving/resizing a few things a bit here and there.

 

Here's how the options/paused OSD looks currently. See images depicting both TV and Movie media types. I've included shots of the details screen(s) as well just to show what I'm getting at in regard to consistency:

 

https://imgur.com/a/0zxEyiK

 

Here's my take on what I'd love to see instead: Remove the current translucent black "Playback OSD" panel in favor of an elegant gradient effect (also consistent with the preplay screens). I've changed the padding around the poster and increased the size a bit to really showcase the cool artwork treatment options that are available. Right now, the poster is butted up right to the bottom of the screen, with a sizeable gap between the poster and the edge of the screen on the left side. The current pause screen is kind of in line with this idea already- with the gradient behind the progress bar-but this takes it to the next level, providing some detail and eye candy options as well. These concepts also keep the padding between the screen edge and other onscreen elements consistent as well:

 

https://imgur.com/a/rMiJca4

 

There's a few different variations here for Playback OSD/Paused OSD screens, as well as Paused OSD style variations for shown/hidden progress bar, media flags vs text, and an option to display either discart or clearart (depending on media type). Emby server already provides the options to download these types of artwork, but the client apps don't yet really provide a useful but non-intrusive way to put them on display. Put them on the pause screen! And possibly an option for it to fade away after xx seconds for those that seem to feel they need an unobstructed view of the scene while paused....ahem <_< .

 

You could even take it a step further and offer this styling on a per-theme basis. Windows media center, holiday, apple tv, and emby themes shown below:

 

https://imgur.com/a/vzcyQpJ

 

What you think @@Luke ? Any possibility of implementing a change like this?

 

EDIT: Posted albums using link method for the time being...cannot get imgur albums embedded via media bbcode the way I intended...

Edited by noakd8601

Share this post


Link to post
Share on other sites
PenkethBoy

well if you like black blank images they are fine!  :P

  • Like 2

Share this post


Link to post
Share on other sites
maegibbons

Very, very very very dark theme!!!

 

Krs

 

Mark

 

EDIT:  THINK THERE IS AN ISSUE WITH HOW YOU ARE HOSTING YOUR IMAGES

Edited by maegibbons

Share this post


Link to post
Share on other sites
noakd8601

yeah...im having issues getting my imgur albums attached.  the bb code>media>link method isn't working...

Share this post


Link to post
Share on other sites
Luke

make sure it is the https imgur url.

Share this post


Link to post
Share on other sites
noakd8601

@@Luke yep...thats the link i'm using. 

 

Special BBCode>Media>Media URL>album https://address

 

i'm attempting to embed albums...is it a different process when its not a single image?

Edited by noakd8601

Share this post


Link to post
Share on other sites
Luke

I've never done this myself. Perhaps just embed one or two images into the posts directly, and then a link to the imgur to view more.

Share this post


Link to post
Share on other sites
noakd8601

@@Luke I realize I should have posted this thread in the feature requests section instead of Android TV/Fire TV.. as it really is a form of request anyway. Can it be moved? I imagined this topic getting more traction than it has. Thanks in advance!

Share this post


Link to post
Share on other sites
Luke

Done.

Share this post


Link to post
Share on other sites
ebr

These are interesting and they look nice but most of the feedback we've gotten for the OSD (especially the paused one) has been to minimize it instead of increase it.

 

A lot of times when people pause, they are looking for something specific in the video.

  • Like 1

Share this post


Link to post
Share on other sites
noakd8601

These are interesting and they look nice but most of the feedback we've gotten for the OSD (especially the paused one) has been to minimize it instead of increase it.

 

A lot of times when people pause, they are looking for something specific in the video.

@@ebr Fair enough- and valid point. That's where my thought of providing an option comes into play: for people that prefer to see more in the paused frame- the details fade away after x amount of time (perhaps to the existing paused OSD?). OR, just provide an option to choose between traditional (current style) or modern (updated style) paused OSD style. This way, people that enjoy those details/artwork can make efficient, constructive use of the available metadata, and possibly the additional library artwork types they've chosen to make available from emby server.

 

I would also find this new style convenient personally in a situation where someone joins someone while watching.. and whoever that may be asks what's on/what it's about/etc... Just hit pause! Even if you leave the room ... Anyone coming in while you're away knows what's up!

 

As far as the options/details OSD... I can't believe anyone would disagree that the concepts tie in well with the rest of the app, and are a little more pleasing to the eye :)

Edited by noakd8601

Share this post


Link to post
Share on other sites
CChris

I like the design concepts shown above!
And I like the Idea, that the overlays could be faded out after x Seconds ... :)

Share this post


Link to post
Share on other sites
cayars

These are interesting and they look nice but most of the feedback we've gotten for the OSD (especially the paused one) has been to minimize it instead of increase it.

 

A lot of times when people pause, they are looking for something specific in the video.

Exactly.  I fall into the "less is more" mentality for OSD.  When it's onscreen while I'm watching something I want it to be as small and out of the way as possible while still giving me the functionality I need/want.

 

I'd actually like to be able to move the current OSD (on the fly) from bottom to top.  I think this would be extremely helpful during sporting events like NFL where all the key information is typically at the bottom of the screen.  Right now the OSD covers up the quarter/time/score that is usually super-imposed on the screen.  This would aid in FF/RW operations when you can clearly see the NFL time remaining while FF/RW.  The design as shown here would make the OSD less then ideal for sports as it's using basically 1/3 the screen.

 

With that said, you did some FINE WORK in those graphics and my only complaint is the OSD size.  This of course is due to personal use and I'm sure others will disagree with me.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...