Fullscreen Interface Mockups (ALERT: Images inside)

[DreamStatic]

Hey pedia gurus,

First off let me just say that I know you (Conor, Nora, and the pedia gurus) will have some WAY cooler offering for the fullscreen than my little mockups. I just thought I would throw out some ideas and start getting some feedback on what we all want. So to everyone else feel free to discuss what you would like to see in the Fullscreen Media Center part of DVDpedia. I know there are a few threads on this already. So I apologize if another is overkill. I just didn't want to hijack anyone's thread.

Most media centers are basing their navigation around some sort of iPod or finder column view navigation. While this works, I think there could be faster ways to navigate your collection. Here are my attempts to express what I mean. Enjoy.

Anyhow, I will do my best to explain what I was thinking when I mocked these up.

CLICK FOR LARGER SIZE:


Obviously, this is VERY similar to what is built into DVDpedia already. This is because I like what is built in already. I only want to make navigating it quicker. And to mention a couple of features I wish it had. On all these mockups you will see the two new "Sorting Rows" as I will call them. The Genre Sorting options and the Alphabetical Sorting Options. The first one, obviously, allows you to sort by your genres + one Custom which could be chosen in the preferences. In reality you would have actually two custom choices. Right now when you open DVDpedia in fullscreen it will sort the items based on how you currently have them sorted in the tableview. So that in itself is a custom sort, then you could have one more predefined in the prefs. Just a thought. The idea is you press the up arrow on your remote and it would go from highlighting the movie choice up a level to the alphabetical choices for sorting, with another press up on the remote and it would go up a level to the genre sorting options. And, obviously, once in the sorting options choosing say "Action" would make it "WHITE" showing it is selected and then resort your collection showing only Action genre movies. Once your choice is selected it would resort and move your focus back to the first movie. Navigating back up the levels and highlighting and selecting the "X" would return you back to the sorting you started with when you opened DVDpedia. Essentially showing all your movies again.

Obviously, pressing up to the alphabetical sorting options and choosing "B" would resort and show only movies starting with "B". And move your focus back to the first movie in the list of "B" movies, hehe. Pressing up to the alphabetical sorting options and selecting "X" would resort and show all your movies and again move your focus back to the starting movie.

On to the next little thing I tweaked. Instead of all the coverart staying the same size, I thought it would help show your focus to increase it's size and place a border around the focused movie. Similar to coverflow, etc. Also, instead of showing the play triangle in the lower righthand corner, I attached it to the bottom of the currently focused movie. Seems more balanced this way. And will help in my TV mockups below. Just like the current play triangle, if no links exist just a focus border would show. No play box.

And finally, I added the pedia switcher along the bottom since Conor mentioned this would be an option in upcoming updates.

NOTE: Focus is represented by the large white outline. In all the mockups the focus is on the movie and Play options. If the focus was on one of the sorting options it would make the large oval outline white and the movie focus ring would be the gray color. Also, per the mockups my selected sorting option is "Custom" which in my case is my Collection IDs. And, of course, along the bottom "DVDpedia" is selected. Notice how they are white instead of the muted gray.

Now for a few visual variations. I did these since Core Image (I understand) could tweak the coverart on the fly in the below manner, no problem. And I think it adds even more focus to the selected movie.

CLICK FOR LARGER SIZE:


On the above mockup, I merely am asking Core Image to "desaturate" all the cover artwork making it black and white, but the one in focus.

CLICK FOR LARGER SIZE:


On the above mockup, I am asking Core Image to desaturate and lower the opacity. Making the focused movie stand out even more.

CLICK FOR LARGER SIZE:


On the above mockup, I left the other cover artwork in color, but lowered the opacity to enhance the focused movie once again.

CLICK FOR LARGER SIZE:


On the above mockup, I tweaked a version showing a possible option for TV shows. In my collection I have my TV shows ripped either in full disc video_ts folders or individual episodes. This mockup shows what might occur when selecting a TV show with 24 individual episode links attach to that entry. Same could occur with Video_ts folders, except instead of having 24 choices you would have say 3 choices if the season was 3 discs long (or 3 video_ts folder links). Hopefully this makes some sense, hehe. It is afterall 3 am and I am up doing this instead of sleeping.

NOTE: The current focus is reached by instead of pressing up on the remote you press down and it would focus on the available links (notice the white outline around the 24 episode link choices) and currently episode 5 is selected. With a press of the play button here it would begin to play episode 5, obviously.

CLICK FOR LARGER SIZE:


On this mockup, I am showing what the possible tableview could look like if you have 3 actual disc from the season you need to number for organizational benefits. i.e. I have all my DVDs arranged in a custom built drawer system and they each are in a numbered paper sleeve. So if I was to go looking for Jericho Season 01 Disc 3, I could find it by finding number 000003c in the above mockup. This is better for me instead of having the whole collection numbered just 000003. I know pretty anal, hehe.

Also, you will notice the triangle to the left of the main Jericho entry works like a normal folder view. This would allow you to keep it closed most of the time to keep your tableview easy to navigate. But with a click of the triangle, you could view all the discs in that season.

Final note about this tableview, in fullscreen mode it would know to group them together under one coverart. However, it would be cool to have the coverart switch in the same footprint as the housing coverart. i.e. In the fullscreen TV mockup, you have 3 link choices below the Jericho coverart. Because, it is grouped due to this option in the tableview. Thus when you select "02" it would switch the coverart to Disc 02's coverart. The reason this would be so powerful is in boxsets. Just think you have the Ultimate Matrix boxset with 10 discs. Instead of the fullscreen view of this boxset taking up 10 spaces to scroll thru you only have one main image to scroll thru. However, say you wish to watch Matrix III. You scroll across to the Ultimate Matrix coverart in fullscreen mode (Showing the cool box coverart) and then press down to get to your sub entries (discs). Pressing over three times gets you to Disc 03 of the Ultimate Matrix boxset or Matrix III. As you scroll thru the sub link choices the coverart in focus changes for those sub entries (discs) so instead of all the links showing only the Ultimate Matrix Box coverart, it shows Matrix III coverart when you select 03 in the available links below the Play box. This would be "Ultimately Cool"

Now, I have NO idea how hard this would be to implement or even how good it would work. Just something I thought up, heeh. So be scared, be very scared. However, most everthing I am "fantasizing" about is already built in to DVDpedia (with the exception of the sub entries). I don't claim to know anything about GUI, programming, etc. Just a user hoping for quicker navigation as I have over 2000 DVDs and scrolling takes ever so long in fullscreen mode.

I think these mockups would function even with the simple Apple remote. As I am only using left and right, up and down, and select (play/pause). The focus dictates what you are selecting when pressing left and right and select (play/pause).

Finally please note: I merely used the data from my movies for the Jericho info as that season isn't even out yet. Just a mockup afterall.

Sorry for the super long post. If you made it this far, I appreciate your patience with my rambling. Hopefully, it makes sense. If not, just ask and I will explain my thought further. Thanks to Conor, Nora, and the other pedia gurus for this great piece of software.

~DreamStatic

[applepunks]

Sweet ideas!

Optional playlist would be nice, for example:
Instead of the genre line it would be | playlist / last added / genre
then clicking one of those would open up (on the same line) your play list or last ten added or genre choices.

The biggest thing I miss using this program in full screen *versus a full fledge windows media pc* is the ability to quickly cross reference movies based on director or stars. I mean using the search field on top with a keyboard is FAR better and faster but my girlfriend doesn't like the keyboard idea since our media center doesn't need one to search.

[DreamStatic]

Thank you applepunks for the comments and suggestions.

I agree with you, the sorting lines would be more powerful if they could be chosen and then more choices based on that choice would replace the current selections.

The playlist and last added are obvious choices I should have included. I am away from my computer for a couple of weeks, but once we have a few ideas. I will mockup another version with those ideas included.

Maybe with enough heads, ideas, and thoughts we can make the fullscreen rival the media pc options. At least enough to fit our needs.

Keep the sweet collaboration coming. Even if it isn't implemented it is fun to dream.

~DreamStatic

[Conor]

Thank you for such a detailed post, with the mock-ups it's easy to understand what you would like from DVDpedia. I like most of the ideas very much. I really like how the middle image becomes bigger than the others. The white selection with the play button integrated looks very good. The ideas got me so excited that I wanted to start tweaking the fullscreen right away, but I have to finish the Core Data transition I am doing now before I forget which sections still need updating.

I like the genre bar at the top, but having two of them only looks good because you made them the same size. And with an unlimited genres it would need to scroll in some way. I think what applepunks mentioned is a better choice, your same bar but with a specific number of options that drop down menus for the choices. Such as genre, collection, rated, same director, same actors... If the bar disappeared and came up only with the up button it could be interesting as well, but then most users would not know it's there intuitively.

One of the things we'd like to do is change your play button for a details button. Open up a different screen with more information about a movie. A lot of our users would like a way to bring up the summary and other data. Some have suggested that it pop up on the bottom part of the screen, but that I think can be crowded, especially for something like the summary. The first focus in the details would be the play button so that playing a movie is still only two short play clicks away, instead of one.

On the box sets with the arrows, its been on the feature list for a while. But the view that has the ability to do the arrow expansion is very complex and has several bugs that make it a hassle to work with. Even in Tiger you have to use it in an improper way to make it work. For this reason we have been steering away from doing the arrow thing for now.

Some very interesting ideas though. Thank you for taking the time to do those mock-ups. Look forward to the bug testing coming up sometime next month. (The longer I delay the beta and polish it up the more useful the beta testing becomes.) At first the beta will be a lot of Core Data testing, it will be a lot like it is now but different under the hood, then we can move on to adding exciting new features, such as changing the fullscreen.

[applepunks]

have you guys used "my movies" for Windows Media Center (mymovies.name)?

One of the interesting things about that interface is this:
If you click on a movie image from the main screen it DOESN'T play the movie... it opens the detail overview page THEN you can select play. That doesn't work well when you want to just get to a movie.

I like the idea of bringing up the details by choice or by playing by choice but with the apple remote it's a little limited since there is only one button. One thing you could do is place "details" below the "play".

What you would do is click left and right to choose the movie, then down for play then down again for the details, down again would bring you to the bookpedia cdpedia choices at the bottom.
---
one other thing, the play button -
could it be customized from a menu system to play locally OR use the remote feature to play on another machine that would be nice for this dual computer idea I am coming up with for my computer.

[DreamStatic]

Thanks again for the replies applepunks and Conor. I am pretty excited about the suggestions as well.

applepunks, I haven't really ever used Windows Media Center, but I do understand your comments anyhow.

I like the idea of having the Play button on the first screen along with the Info button. I have some neat ideas I want to mock up to get your suggestions and tweaks on, but I am away from my graphic tools so it will have to wait. Anything else you all think of, please post so I can include it in the next mockup.

Thanks,

~DreamStatic

[applepunks]

Ah I though about something!

I think it might be better to move the abc line BELOW the movie posters for this reason:

Top line is GENRE, with an ALL GENRE listed first. You choose one, let's say "family", now as soon as you drop down in your mockups you would be limited by what ever letter you came down to.

If you had the abc line below, selecting a genre by default would show all the films of the genre. Dropping down a line to the abc line would then let you narrow it.

I have been looking at various solutions and/or devices ALL day for my new townhouse that are girlfriend friendly. Seriously, this program with a slightly better interface would be the best idea!

I think what stops it now is that you have to really have a keyboard hooked up to quickly get to movies that you want. It also, by displaying every movie at everytime, makes it hard to "browse and stumble" onto something to watch. The interface mockup above would let my girlfriend better browse thru 600 movies that she has no idea what's there.

Oh yea, smart collections would be GREAT to do as well. Last ten added would let her know what I just got.

[DreamStatic]

It's me again. My Dad and I seem to be addicted to coming up with ideas for this fullscreen stuff. Thanks again for all of your comments and suggestions. All of them were right on par with what I am looking for in a media center app.

I still am away from my computer, but I couldn't wait to do some more mockups, so I downloaded the trial version of photoshop and mocked up some updates. Hope you all will bear with me again thru another lengthy post. Thanks in advance.

Click for Larger view:


In the above view, I have mocked up a simpler setup. The first thing you may notice is the Movie Rating appears on the top left of the selected coverart and the User Rating on the right. This, of course, will change as you select different movies.

Next, the Play button remains the main option. However, with a down press you get to Links and left or right gets you to Sort and Info, respectively.

Click for Larger view:


If you have Links selected either a Play/Pause or Down on the remote will reveal the available links. The Link row width will depend on the number of links available. In the Casino Royale example (shown above) we have three links. The links will always be numbered. However, as you select the number, the actual name of the Link will appear below the numbered links. This really makes it easy to organize the links, but still have needed info. As you scroll left and right selecting links a Play/Pause on the remote will play the selected link. However, if you press down you go to the Pedia Switcher and Up takes you back to just the Links button. So you can either go left or right for the Sort and Info buttons or Up to the Play button.

All and all very few key presses on the remote get you around in this view. All still possible with just the basic Apple remote.

Click for Larger view:


Okay, if you press right and select the Info button it will transition to the Info screen. This view takes over the complete screen. That way you can get as much info as possible. I think it would be cool to fade out the non-selected coverart and slide the selected coverart up to the left while the other items fade in. I left the Title on the top just slide it left and placed the User Rating on the right.

In this view you still have the selected coverart as the main option and Play still active. Thus one click still will Play the first link in the available links. The coverart could also implement the Borrowed status if applicable. If not, then the coverart would look like it does in the Main view. If you wish to go back to the Main view, you press left while the coverart is selected and the Back button will become active. With a Play/Pause on the remote it would transition back to the normal Main view.

All the fields are pretty self explanatory. A couple of details though. The Down arrow that appears on the right of the field box headers mean there are more than you can currently see listed in that box and would require scrolling to see them all. In the larger view you will notice the SORT icon is present where applicable to left of each sortable field. This way you could actually be in Info view for a currently selected movie and navigate to the Credits field and select/Activate it and select Daniel Craig. By doing this it would resort your Main view to show only movies starring Daniel Craig. And, of course, close the Info view and transition back to the Main view with the first alphabetical Daniel Craig movie selected. This would work the same on any "Sortable" field item.

Click for Larger view:


Now, shown above, is the SIMPLER Sort Option view. This would replace the Main view when you select/Activate the Sort button in the Main screen view. This is VERY similar to Front Row. I had a more complicated version in my previous post, however; once I thought about it I thought this would be more flexible. This way would have the benefit of allowing us to have a preference pane to turn on each sorting option. This would allow you to make either a full poweruser list of every sortable option, or make a very short easy to navigate list of sort options. In the preference panel you could have a way to turn each sorting option on or off and a way to order them the way you feel are important. I also updated the animation below to show this simpler sorting option in use. The other more complicated sorting view really isn't flexible enough after some thought.

The coverart in this view would be dynamic. It would show the currently selected movie from the previous Main view and the next two offset behind it.

Also, to navigate back to the Main screen view without selecting anything, you merely reach the top of the list to jump to the back button. Or press left once or twice depending on if you are in the sub category list or not.

I know this is probably hard to follow, so I made an animation to show you what I am mean with the navigation. Hope it helps brings some clarity to my explanations. Remember all of this navigation is all possible using just the up, down, left, right, and Play/Pause buttons on the standard Apple remote.

Click thumbnail to view Animation showing the navigation steps: NOTE: Lower Res 1.16MB gif animation.


Thanks again for the great comments and suggestions. I feel we are getting closer and closer to a SWEET solution.

~DreamStatic

[Conor]

Those are some nice mock ups. I like the star rating on the top and the details view. I think the sort screen is a bit heavy. I think menus that pop up in place might be more appropriate. Like must controller manipulated interfaces where making a selection replaces the menu with the submenu for that selection. Being able to click on most of the fields like a specific actor to run a search would be very convenient. I am going on vacation for a week, but then I will pick up where I left off and hopefully be closer to doing some actual work on the fullscreen.

Thank you for all the work and interest in the future of the pedias.

P.S. I can't believe you didn't give Casino Royale 5 stars.

[DreamStatic]

Thank you Conor. I appreciate your openness to your user's comments and suggestions.

One more reason DVDpedia continues to outshine it's competitors.

I agree on the Original Sort screen being heavy. I actually posted a new version in that same post and updated the animation to reflect the simpler sort setup.

I only hope these mockups will assist in sparking unique ideas, so DVDpedia's media center option will stand out from the crowd as something creative and more powerful.

I have another idea to help speed searching in the Sort option screen. I will mock it up and post another post to show what I mean.

Thanks again Conor. Enjoy your vacation. I am sure you deserve it.

~DreamStatic

[DreamStatic]

As promised, I mocked up a new quicksort tool in the Sorting options view. What makes it cool would be when you are sorting the Actors view, for instance, and have literally hundreds or thousands of actors/actresses to scroll thru. By just pressing to the right and choosing the letter and then pressing Play/Pause on the remote it would jump to the letter selected. Saving loads of time scrolling thru all the available actors/actresses.

View the animation for an example in action. Click for Larger view and the animation. NOTE: Lower Res animation 1.32MB.


Or here is a static screenshot - Click for Larger view:


Thanks

~DreamStatic

[DreamStatic]

Okay, I am officially done doing mockups, hehe. I just checked out the CenterStage UI demo they have planned and it is pretty sweet. Has a lot of the same ideas, just done in a sexier way.

So take a moment and go check it out.

Homepage:
http://centerstageproject.com/index.php

Forum Post:
http://centerstageproject.com/forum/vie ... 1#pid11195

UI Demo Page:
http://centerstageproject.com/the-future.php

I have been watching this project since it started way back. They continue to plow along. It is difficult with volunteer help. But they continue to strive forward. Best of luck to the whole team, past, present, and future.

The movie section is pretty sweet. However, I feel the cover art is a bit small and spaced out too greatly. I like what DVDpedia is doing size-wise. One thing I do like VERY much is an old idea they had way back. But seeing it in action really brings it to life, is the Fan Art pages. Pretty slick. Even though it is lite on details and more about pretty pictures on the info pages. We need to find a happy medium of Pretty pictures, and info in the new and improved DVDpedia fullscreen builds.

Also, the breadcrumb navigation is nice for location purposes. Lots more ideas that are similar to what we have started here. Very cool demonstration. Kudos to artist putting it all together.

Anyhow, take a look and report back.

Thanks,

~DreamStatic