Looking for a skin designer and fresh ideas (1 Viewer)

Fafnir

MP Donator
  • Premium Supporter
  • November 19, 2006
    203
    44
    39
    Germany Germany
    Country flag
    Hey there,

    what @wizard123 says is true: Have unified start point in which you kind of scroll through the functions.
    Since athena is a very well done step into this direction, I just want to also put the focus towards touch control of MP(1 and 2).

    A fusion of @wizard123 's idea of a centralized screen with a kind of card style (similar to the cover flow view in music or films). Vertical or horizontal scrolling could be used.
    Unfortunately I have no skills in producing mockups, but I'll try my best the next days.

    Regards Fafnir
     

    Scythe42

    Retired Team Member
  • Premium Supporter
  • June 20, 2009
    2,065
    2,703
    46
    Berlin
    Germany Germany
    Unified looks are good in general. Everything has to look like it's one application. Regardless of actual design in the end, something that feels like it doesn't belong in there is a no go.

    Between different "views" you are not forced to replace all parts or have them look totally different. In fact they should look as close as possible, so it is easy for new users to work with it.

    And even if you are not a designer and cannot produce mockups, just use placeholders to describe where you like to see elements or what you like to see for usage. If you have ideas, shows them or try to explain them.

    A general update can only be reality if ppl. share their thought or else everything will still look as it does for way over a decade now, beside different skin elements nothing much has changed in the usability approach of any media centre. And we all know from daily usage that the current approach is far from perfect.
     

    Fafnir

    MP Donator
  • Premium Supporter
  • November 19, 2006
    203
    44
    39
    Germany Germany
    Country flag
    My little girly kept me going all the time, so again no time for GIMPing something...

    Let's try description by writing:
    Oriented to the home screen of Athena you have a top line which shows the entries Music, TV, Pictures, Weather, Plugins,...

    Once the cursor (mouseover) moves to e. g. Music, the window area below will automatically show the music files.
    Push "arrow down" and you can navigate through your files.
    Move to the left margin to have the menu popping out.
    Push "back" or mouseover another entry to have focus on the top menu line.

    Like that similar for the other menu entries.
    This means:
    - a more touchable usage
    - less different screens
    - easier and free handling

    and of course it can be "nicified" with some effects, for example:
    - on the mouseover or scrolling mode, the top menu line could be enlarged to again increase usability/ touch control/ visibility and be minimized on going to the belonging page content
    - showing the menu line like a scroll-through card style similar to the view of Google+ or like cover flow view
    - view could also be setup like tabs in a browser
    - all other ideas that a skilled skinner could have...

    What do you think 'bout that?

    Regards Fafnir
     
    Last edited:

    Scythe42

    Retired Team Member
  • Premium Supporter
  • June 20, 2009
    2,065
    2,703
    46
    Berlin
    Germany Germany
    Oriented to the home screen of Athena you have a top line which shows the entries Music, TV, Pictures, Weather, Plugins,...
    Got you, a classic "Textbar" at the top screen location, where you can filter different categories. When you select them the below details automatically update.

    I see that makes sense for touch usage as well. Though if automatically update on selection makes sense or something like an "OK" is required to change where you are has to be prototypes, which in the end actually feel better. Both are viable options.

    Popout Windows (aka Hamburger Menu you know from phones) should be avoided as much as possible in general, they are just horrible in any usage context. Sure an option for usage with only cursor keys, as there cannot be much done.

    So we already have small usage difference between touch and remote. For Touch you really have to touch it, for remote usage a simple selection should be enough.

    Such navigation details on different forms of input have to be prototypes, no other way to actually find out what feels the most natural. No, not a ton of options because we cannot decide. That is never a good way to do things.

    Various animations are of course needed to show a selection to give a user feedback where he is or what is about to happen.

    Like that in general. It takes the classical StreamedMP approach for a large menu bar, but it will not wrap around, nor is the information displayed only a fanart. Means we are leveraging the screen estate.

    Classic remote as well as touch interface can leverage the same way of filtering content.

    Instead of a fanart actual content is displayed based on the selection. The details of selections of course have to be tested what works best in the long run.

    I like that so far.

    A navigation like top bar doesn't have to be text. Icons can as well be used. With PSD mockups alone you can play around a lot just with the top bar.

    So far we have for ideas:
    - Non wrapping consistent navigation bar and dynamical update of related content that can be used for remote as well as for touch interfaces (y)


    Let's stay with the navigation bar for a moment.

    What do we actually need inside it? We need to get our categories down next and these should have extensibility in mind as well. Sure, can be flexible, what will we give users as well. There should be hardly any need to change it for mosts users ever.

    This brings us directly to a related topic: What content filtering categories do we actual need? How far can we reduce it?
     
    Last edited:

    Fafnir

    MP Donator
  • Premium Supporter
  • November 19, 2006
    203
    44
    39
    Germany Germany
    Country flag
    Like that in general. It takes the classical StreamedMP approach for a large menu bar, but it will not wrap around, nor is the information displayed only a fanart. Means we are leveraging the screen estate.

    Classic remote as well as touch interface can leverage the same way of filtering content.

    Instead of a fanart actual content is displayed based on the selection. The details of selections of course have to be tested what works best in the long run.

    I like that so far.

    A navigation like top bar doesn't have to be text. Icons can as well be used. With PSD mockups alone you can play around a lot just with the top bar.

    So far we have for ideas:
    - Non wrapping consistent navigation bar and dynamical update of related content that can be used for remote as well as for touch interfaces (y)


    Let's stay with the navigation bar for a moment.

    This brings us directly to a related topic: What content filtering categories do we actual need? How far can we reduce it?
    In terms oft reducing elements, I do not totally agree.
    Of course those elements shall be brought down to what is necessary, but in the other hand, it should be done without cutting Mediaportal...

    Related to this I would also appreciate - how to say - self-arranging controls.
    Example: I often like to read the lyrics of a song, but always have to the left side menu and scroll down to the last entry, which is MyLyrics.
    Now it would be way respsonsive to have such often used buttons moving to the top of the menu...

    And also of course the menu line can be arranged as icons.

    Lol, btw. I did not know one calls them hamburger menues...

    Have nice sunday y'all!

    Regards Fafnir
     

    wizard123

    Retired Team Member
  • Premium Supporter
  • January 24, 2012
    2,543
    2,615
    United Kingdom United Kingdom
    Country flag
    Alternative horizontal filmstrip style layout but vertical scrolling through the different sections like movies/series/music etc.
     

    Attachments

    Scythe42

    Retired Team Member
  • Premium Supporter
  • June 20, 2009
    2,065
    2,703
    46
    Berlin
    Germany Germany
    Alternative horizontal filmstrip style layout but vertical scrolling through the different sections like movies/series/music etc.
    That would be the Netflix UI on the main screen.

    As a Netflix user I first found it nice but it became annoying on the first day. On Netflix you have the "Browse" menu, which in the end is a Hamburger Menu and then you just see the category in detail.

    The problem here is that quickly too much vertical scrolling takes place as you basically have unlimited screen estate. This means you are getting lazy and adding more and more categories as the easy way out. It isn't simple enough.

    The problem here is that a user get's quickly lost as you have no real reference points of orientation in your navigation anymore.

    Example: I often like to read the lyrics of a song, but always have to the left side menu and scroll down to the last entry, which is MyLyrics.
    Lyrics are like subtitles for music, so they need to be handled in the same way of turning then on and off, which would basically be the OSD or a subtitle button on your remote. No need to have this function in a side menu.

    Lol, btw. I did not know one calls them hamburger menues...
    Well, I mean this:
    lexicon-nuggets-2-ui-hamburger.png


    You find them in ton of apps where developers just tend to put in everything they don't know where to put elsewhere. It is usually a result of not thinking about your design and adding features later. It becomes especially worse if there are navigation elements inside it.

    If we take the usual menu lists (unsorted) of:
    • Live TV
    • TV Shows
    • Movies
    • Music
    • Pictures
    • Weather
    • Plugins
    • Settings
    This already seems too much. Can we combine stuff?

    For example Plugins. This is a direct result of them being independent and that is the whole problem. The functions need to be integrated with the "main categories". Let's take Trakt for example.

    Instead of being a separate plugin, you can provide information from it in the Movie or Series info. Again, instead of everything Trakt offers you probable only want a subset of the information as a lot of stuff isn't really helpful on a TV right away. Main purpose is too consume media easily from a larger library.

    So there will be probably be a "Misc/Plugins/Other" whatever thingy in the end for some special cases. But the question here is more about plugins actually enhancing and providing additional features instead of being like an app on their own started over some kind of launcher.

    Similar for Live TV. The classical "calendar" view which TV shows air next don't have to be in a separate plugin but should be integrated into TV right away.

    Pictures? Anyone really using this on a Media Center to show pictures to other or looking at them at home? Honest question as I never really saw someone using this.

    Music? Well, this is Audio only stuff. Radio should go in here as well maybe. Same for Audiobooks?

    Weather? Everyone likes weather information, but the weather aficionado checks his phone or tablet anyway. It's not a main function of a Media Center to show weather. A main Category is an overkill. So time and temperature should be enough here. It is not about "oh, we can display this and that as well", then we end up with trying to be everything, which never works out.

    Settings. Yeah, now and then we have to change stuff. But how often do you go in into settings? Well once everything is up and running probably not often. We have a nice setup button on a remote. So problem solved. Touch? Well no button here, so App settings need to be put where other app settings are or even provide a Settigs App, you can switch too maybe?

    See where I am going. I want to reduce stuff here. Remove the clutter and integrate stuff where it makes sense to be instead of "hey, something more independent here, cause the rest can't handle it".

    So what does our "main menu bar" actually need? The goal here is trying to make it as simple as possible. If we have issues putting something at a place, we need to see how it can integrate into a media center instead of being a category on its own. This is especially true for function we frequently access. Your example of Lyrics is spot on here. No menu anywhere needed. It's subtitles for music.

    So what would be the essential main and maybe sub categories we really need and cannot avoid at all?

    We can always expand. But let's try to reduce it first as far as possible and see where this leads us.
     

    Fafnir

    MP Donator
  • Premium Supporter
  • November 19, 2006
    203
    44
    39
    Germany Germany
    Country flag
    Alternative horizontal filmstrip style layout but vertical scrolling through the different sections like movies/series/music etc.
    That looks good, but in view I wonder where to have a menu...OK, could be a context menu but this feels a bit oldfashioned to me.

    Anyhow, this discussion is incentive!

    Byebye, Fafnir
     

    wizard123

    Retired Team Member
  • Premium Supporter
  • January 24, 2012
    2,543
    2,615
    United Kingdom United Kingdom
    Country flag
    The problem here is that quickly too much vertical scrolling takes place as you basically have unlimited screen estate. This means you are getting lazy and adding more and more categories as the easy way out. It isn't simple enough.
    The problem here is that a user get's quickly lost as you have no real reference points of orientation in your navigation anymore.
    I never implied adding lots of menu items, they would be static i.e.

    Livetv --> All things TV and recordings etc
    Music --> Music and radio
    Mediahub --> Houses movies and tvseries/online videos etc like in athena
    Plugins --> All plugins users find nessesary

    That's it no more than 4 vertical items so minimal scrolling.
    Although i show movies and series separate in really i would like them in the same menu item ( mediahub ) and just add a filter to choose movies or series

    That looks good, but in view I wonder where to have a menu...OK, could be a context menu but this feels a bit oldfashioned to me.
    You would not need a menu as such, you would just hit info to view options for the item you have selected then all the movie area would slide up to show options. Like how i have done the moving pictures details in athena clean theme where you hit right to view extra info and it slides into view.
     

    pünktchen

    Portal Pro
    October 26, 2010
    537
    201
    Germany Germany
    Country flag
    Lyrics are like subtitles for music, so they need to be handled in the same way of turning then on and off, which would basically be the OSD or a subtitle button on your remote. No need to have this function in a side menu.

    Settings. Yeah, now and then we have to change stuff. But how often do you go in into settings? Well once everything is up and running probably not often. We have a nice setup button on a remote. So problem solved.
    Button on remote? I really think this is the false approach!!!
    Beside the presentation with less subscreens, i think it is also necessary to consider how we can achieve the same functionality we have now with only e.g. 6 buttons on a remote.
     

    Users Who Are Viewing This Thread (Users: 0, Guests: 1)

    OP Similar threads Forum Replies Date
    C Looking at transitioning from SageTV, but have some questions Newcomers Forum 1
    Symphy Looking good! General 0
    johns11 Looking for 1.21 source code MediaPortal 1 Talk 2
    Rob Hexenmeister Skinning Online Videos question OnlineVideos 2
    Rob Hexenmeister Quick question - skinning MyPics General Support 7
    ajs [Info] 0.7 Beta - MPExtended, WebMP, Bootstrap skin by ajs - Hard way MPExtended 577
    S Touchscreen skin? MediaPortal 1 Talk 6
    azzuro [fixed] 5011: Version label in Splash screen - pos, size from skin MediaPortal 1 61
    catavolt [WiP] When changing theme in my skins, I always get this error message in logs MediaPortal 1 9
    joecrow MultiShortcut Plugin (Uavailable) in DWHD skin General Support 58
    V Skin With Menu Editor MediaPortal 1 Skins 13
    wizard123 New Skin Template ? MediaPortal 2 8
    Rob Hexenmeister [solved] Latest Media Handler - skinning buttons Fanart Handler 19
    CyberSimian [solved] MP1-4976 Built-in skin variables for current date MediaPortal 1 8
    Mr6686 [solved] Titan skin broken since update to 1.23 Installation, configuration support 6
    doskabouter Skin question Skins and Plugins Installer (MPEI) 1
    Y Titan Skin unter 1.23 nicht mehr so schön Allgemeines Supportforum 1
    framug 1.22.0 BasicHome Editor settings for DefaultWide HD skin not kept when update 1.22 3
    catavolt [solved] FanartHandler - Skin - Holiday and Spotlight support Fanart Handler 9
    ajs [fixed] 4936 - Strange behavior of the font in the skin MediaPortal 1 35
    ajs [solved] 4935: Add string.replace function to Skin engine MediaPortal 1 10
    ajs [solved] Latest Media Handler - Skin settings - Custom latests items number Fanart Handler 27
    Rob Hexenmeister [solved] Latests Media Handler - Skinning an updating window or control Fanart Handler 26
    T Skin Wechsel Installationsprobleme? 1
    JJDoherty Designing & implementing a new skin... Skins and Design 8
    Similar threads

























    Top Bottom