Recommendations for the Media Companion GUI

First of all, great tool Billy. Thank you very much for your efforts.

You asked for feedback on your tool in another thread and I did not want to bury this on page four of that thread so I am starting a new one. Hope you don’t mind.

I am pretty new to XBMC and decided to do a thorough evaluation of all the media tagging tools available before choosing one. I am phenomenally anal about proper tagging (I look at every poster and fanart option for every movie) and the movie tagger I choose is easily as important as the XBMC itself to me. I looked at MIP, Ember, and MC closely (and ruled out a few others very quickly). Your tool won hands down, mostly due to the superior GUI. That is not to say the GUI is flawless, but it is by far the best one out there. I have three types of recommendations: GUI Improvements and Usability, Features that other tools provide that can be duplicated, and New Features.

This is just a quick first pass at this and I will try to elaborate further later.

GUI Improvements and Usability

The GUI is very good, but there are some usability issues. I suspect you just have not gotten enough feedback on the new version as some of these are small changes. The problem is that some of the functionality is not intuitive enough. I just finished designing the GUI for my company’s new product and I am in GUI design mode, so I hope you aren’t offended by my feedback or get the impression that I am being critical.

As a new user I can remember all of the issues I had figuring things out that I will have forgotten in a couple months of using it, since one you figure out how to do everything in an application you forget how hard it was to learn and it becomes natural to you. In order to reduce the learning curve for new users like I was, I would make these changes:

Most importantly, the double row of buttons at the top is confusing. Since they are the same size it is not very intuitive that the top row controls the bottom row. Sure after using it for a while it becomes clear, but this should jump right out at you. IMHO, the top row buttons should be twice as thick as the bottom ones and the bottom ones should not be buttons at all they should be tabs. In addition the top buttons should be in a bold font to show their importance. As you chose between the top buttons this way you can see the tabs change below and see how they tie together more easily.

While I like that the bottom row of buttons is in a separate box, it is too subtle a cue that they are a separate group. The wasted space in making the top row of buttons larger will be well spent in the usability improvement and will be recouped later with other recommendations I have.

The second issue is the content of the buttons themselves. Buttons of similar function should be grouped in a set of tabs, but buttons that have completely different functions should be found elsewhere. For example, some of the current second row buttons are global controls, some are movie specific, and some are viewing preferences.

The third issue is that some of the buttons act like tabs and some act like buttons yet are all mixed together. This is definitely confusing.

I will go through my recommendations for change to improve these issues broken up by view: Movies, TV Shows, Preferences, and PayPal. (Once a Music tagging option is available it would be here too, after TV Shows). Let’s start with the most important, the Movie Button.

Movies

Right now in movie mode, there are three buttons that control the view of the browser screen, six buttons that apply to the currently selected movie, and three buttons that are global options. The current set up is very confusing for a new user. I recommend the view options and the preferences options are moved elsewhere and the remaining buttons get changed to tabs that are all movie specific.

I propose that the first three buttons (Main Browser, Wall, and Table) get moved to the section below in the main browser view, above the list and sort options, and is replaced with a single tab called “Browser.” All three of these buttons control the view of your entire list of movies; they are just three view types. If you are in the “Browser” tab you should be able to choose between the three views but these options should not be mixed with the individual film options on the tabs, especially since most users will prefer one over the other and keep it in that view.
(More on this when I talk about the ‘view and sort’ section).

There are also several buttons that are global options:

• Movie Sets
  
• Search for New Movies
  
• Folders
  
• Movie Preferences
  

Of these, three should be moved to the preferences section (Movie Sets, Folders, and Movie Preferences). Three are only two tabs there right now and lots of room for more tabs. The only one that should not be moved there is the “Search for New Movies”. This is a very important button that will be used very often by users. I think this button should remain on the same row as the remaining tabs but moved all the way to the right and stay as a button. Changing the font to bold on this button would be nice too, to make it jump out.

It is a bit confusing to have buttons that act as buttons and buttons that act as tabs all mixed together.

That leaves the movie specific buttons:

• Fanart
  
• Posters
  
• IMDB
  
• File Details
  
• Rescrape Movie
  
• Change Movie
  

Of these, four act like tabs and two act like buttons. The two that act like buttons (Rescrape Movie and Change Movie) should be moved within the browser window to the upper right to the right of the save changes and view movie set buttons. The movie name and credit fields will then get appropriately resized. There is more than enough room here for them there. That way the three buttons that act like buttons (these two plus ‘search for new movies’) from the current second row will all appear be stacked on top of each other in the upper right. (The save button and the list movie set buttons that are currently there will be discussed later).

That leaves us with the five remaining tabs under movies view: Browser, Fanart, Poster, IMDB, and File Details.

Now that I have covered the arrangement of tabs and buttons I would like to review the layout of the browser window. There are a few changes that I think would be beneficial here.

Starting in the upper left there are several buttons there and I would like to add three that are being moved from the second row (Main, Wall, and Table views). That is going to make an already button heavy area even more button heavy. I think both types of buttons here can be handled in dropdown menus since they already act like radio buttons. The list function is already duplicated in a dropdown menu anyway. Making these two functions dropdown menus will save loads of screen real estate that will allow a long list of movies to be shown and will not reduce usability at all.

As a matter of fact I think it will improve usability. Currently, there are two sets of buttons that act as independent radio button panels, but there is not enough of a visual cue as to how they are grouped without actually reading the buttons. To make it a bit more confusing there are two other buttons here independent of the two sets of radio buttons, one is a single push button “Reset Filters,” and one acts like a checkbox button “Invert Order.” At first glance there is no way to figure out how these buttons work; you need to experiment with them.

The functionality they provide is great…I use them all the time. I just think it will be clearer in a dropdown list. Instead, actual radio buttons would work too.

Below that I would move some of the filters that are in the genre filter section but are not genre filters. I think these will be commonly used and deserve to be at the top anyway.

As far as the rest of the genre filter options I do not think they are important enough to always be at the bottom. Yes you could resize it away, but it is a pain pulling it up and putting it back down there. I may be unique in this but I will almost never use them anyway. I often use them on my XBMC to find a certain type of movie, but on my tagging tool I am not sure why I would use them. I think they do have occasional value though so I think they should be in an appearing tab as shown in the mock up. That way it is not wasting screen real estate all the time, but can be called upon at will.

In the main screen there are a few changes too. As mentioned earlier, there are two new buttons in the upper right. These are the two moved from the second row. They are specific to this movie and they feel more ‘right’ there. In addition the save button is missing. Maybe there is a technical reason as to why this is required, but I find it kind of annoying to have to click save every time I make a change here. Is there any reason that once you enter something in a field here to have it save after you hit enter?

I realize it is easiest to parse the genre with a text field like you have, but it is much more user friendly to be able to check and uncheck genres. I have added the check boxes in my mockup. I am sure there is a way for your parser to populate these check boxes instead, but will be harder to program.

I am also not a big fan of how the actors list is done. It forces you to click on it to see the main actors. I prefer a list you can see at a glance the main actors in the movie instead of just one.

I have also added budget and revenue numbers for the movie since they are parse-able.

The way I think it should be laid out is:




Uploaded with ImageShack.us

Well I have a lot more to say, but I though you may want to digest this
first and tell me if you would like me to continue. This went on a lot
longer than I expected.

Any comment Billy?

Sorry about the delay in replying, I somehow missed the original post.

You have some good points, although I don't agree with everything.

Firstly, the minimum page size of MC is limited to 1024x550. This is not my choice, it seems that a good number of people use MC on a netbook and I got a number of requests for Media Companion to fit on them. The low height in particular is a problem. Here is a mockup of how I would like it.

You have Main View, Wall, and Table as radio buttons in the navigation panel. I'm not sure that is useful, as neither the wall or table view hava this panel. It would work with another set of tabs, but this again reduces the height of the display, as does the fixed status bar.
I really am limited in real estate here.

The preferences were updated about 6 months ago, they were originally seperate from the main browser, but people were getting confused so I moved them to a tab within the appropriate section.

I do like what you have done with the actors display, I may implement that.

The location of the search for new Movies Button is nice, but not possible using the standard tab controls, the tab bar will not allow controls to be placed on top of it.

Either way, you have given me a lot to think about, and I dare say many hours work, although it will have to be when I have more time. There are a couple of things that I wanted to be finished weeks ago but I just have not had the time.

Once again, thanks for your feedback.

Billy

Thanks for the reply Bill.

I don't expect you to agree with all my recommendations, but wanted you to have a chance to see another view on things. Feel free to use, or not use, what you want from this.

I did not know that was the resolution you were shooting for as a minimum spec. I will mock up towards that going forward.

As far as your feedback, I am not a fan of the tabs within tabs view. I think it is confusing, and what I was working away from with the buttons over button view you currently have. If you prefer it that is fine of course, but it uses a lot of screen real estate, especially with a 550 height.

I know one of your concerns is that neither the wall view or the table view have this panel, but I have a solution for that; I just haven't started mocking up the other views yet. I actually think they should both have this panel. I know it would use a lot of screen real estate, but without it there is no way to filter those views. All filtering is done on this panel. I have almost 2000 movies on my system. I understand that is more than most, but actually less than some people. Without filtering the wall view is useless to me (and to be honest is really just occasional eye candy anyway, I think). The table view has sorting options by column, but filtering would be a big help there too.

I don't think it should be always there in those views wasting space on lower resolutions though. If it would auto hide to the left, or at least click hide, that would be ideal. That way it is out of the way most of the time in those views unless needed.

When you consider usability it is sometimes hard to balance the needs of the majority, with the needs of the vocal few. I am willing to bet that over 90% of your users never leave the main browser view ever (and 75% of all statistics are made up on the spot). That means that since 90% of the users will never use this option it should be unobtrusive, not stealing and entire row of tab space across the whole screen at all times. There will be some who love this feature of course, and they must be satisfied with an easy to find and easy to use control of this function. That is why I think radio buttons use the least screen real estate. It also ties into what I see as a need for the filtering panel being available on the other views as well.

As usual, consider this one man's opinion and take it for whats it worth.

So do you want me to do a few more mockups?

PS - "The location of the search for new Movies Button is nice, but not possible using the standard tab controls, the tab bar will not allow controls to be placed on top of it." - Didn't know that. Sorry. That's a shame though because on larger screens, especially wide screen displays, the empty tab space after the last one is a lot of wasted space. So be it I guess.

So do you want me to do a few more mockups?

Guess not...

Too bad, I'm a new user as well and was very confused about the ui... Took me a while to understand it.