HandBrake UI Idea & Mockup

Mucx · Post by **Mucx** » Wed Apr 11, 2007 4:22 pm

Hi,

Wasn't sure where to post this, here or in the development pages but thought it would be more fun if I put it here. A lot people love HandBrake, myself included yet we do not have the powers or technical know how to help you along in terms of development and coding. What I am good at (or at least make a living from) is Graphic Design. So I thought I would put some of those layout and logic skills to good use and apply them to HandBrake. I am not privvy to where or what is going to be in the next release but I based a design off of what I do know (current public release) and thought that a different way of organising the UI was needed.

At the moment I feel like the UI is:
- cluttered
- Not very 'Apple-esque' (well it looks a bit outdated)
- Not all that intuitive to get around or read.

I understanding that work has been done to tidy up the interface so no offence but I am sure most will agree it still isnt quite right? I understand what Opensource software is like (first hand experience) so all ideas should be welcome and it is just an idea.What Apple is known for or they tend to do is stop progress on future feature development and have a good round up of things and make them better. I know from reading the forums that there area ton of new features coming and planned for and to be honest it makes me nervous thinking about what will happen to the UI as more stuff is thrown into it. So I thought about something that was somewhat visually pleasing but more importantly easy to navigate, was all on 'one screen' more or less and probably more important from a dev point of view would be easy to add to without much head scratching about where it goes.

This is a rough mockup, just to sort of flesh out the idea in my head. Take it or leave it and I do not proclaim that it is by any ways brilliant or the final solution but I think it might be an improvement. One thing that is missing is a setting your own preference button type thing but pretty much everything is there that is in the current public release: -

What is wrong or missing on this?
- I spelt Qeue wrong! (doh)
- Preferences adding and selecting
- button aesthetic is a bit er...could be better but was conecntrating more on the overall layout than pure aesthetics.
- All the other ideas I have.

A larger image of the one above showing the entire interface expanded out (which you couldnt do in reality due to screenspace so it would have to be scrolled) is available here: http://centerstageproject.com/nightlybu ... panded.jpg If anybody wants to talk to me about it or have the .PSD for a bit of a play you can contact me via this form here: http://centerstageproject.com/contact.php?to=david

At the end of the day it was a bit of fun for me,
Cheers,

Mucx

cbud · Post by **cbud** » Wed Apr 11, 2007 4:33 pm

Where do you crop the video?

I do like the scrolling instead of switching through tabs or opening new windows. I think this project is not short on ideas, but instead it needs more experienced developers contributing to the code.

cbud · Post by **cbud** » Wed Apr 11, 2007 4:34 pm

cbud wrote:Where do you crop the video?

I do like the scrolling instead of switching through tabs or opening new windows. But, I think this project is not short on ideas, but instead it needs more experienced developers contributing to the code.

(sorry I see it now)

Mucx · Post by **Mucx** » Wed Apr 11, 2007 4:42 pm

cbud wrote:Where do you crop the video?

I do like the scrolling instead of switching through tabs or opening new windows. I think this project is not short on ideas, but instead it needs more experienced developers contributing to the code.

Yeah dont forget the expanded verson link in my first post.

The thing about dev's is, (if you are looking to stereo-type them) is that they spend mos of their time heads down bashing 1's and 0's out. So more of them means a faster progressing code base but they arent usually aesthetically minded people.

On the flip side, graphics people tend to come up with wild ideas that cause a dev no end of grief to code and match but can get the look of something just right.

It is the balance of those two 'worlds' that makes for good software. Again it is something Apple gets right.

Mucx

rhester · Post by **rhester** » Wed Apr 11, 2007 4:47 pm

My concern is that - odd as it sounds - inexperienced users won't even realize there's anything to scroll down to and will post incessant questions about why they can't find the button to do so-and-so. It's a very neat idea, I'll give you that, but I'm not convinced it's practical.

Rodney

Mucx · Post by **Mucx** » Wed Apr 11, 2007 4:53 pm

rhester wrote:My concern is that - odd as it sounds - inexperienced users won't even realize there's anything to scroll down to and will post incessant questions about why they can't find the button to do so-and-so. It's a very neat idea, I'll give you that, but I'm not convinced it's practical.

Rodney

You still have your instant HandBrake dont you? I heard a rumour or idea that when you start the app a panel is displayed to load your DVD or VIDEO_TS and choose a quick prefix setting (iPod, AppleTV etc) or click 'Advanced' and the 'proper' HB window opens up?

I suppose what you are saying is true...if a little cynical lol. People can be morons I grant you that but I dunno...you can't hold their hand through things either.

It could be modified to have tabs along the top for Video, Audio, Picture Settings etc. instead of scrolling down to reach them.

Mucx

loyalty_anchored · Post by **loyalty_anchored** » Wed Apr 11, 2007 5:05 pm

Mucx wrote: It could be modified to have tabs along the top for Video, Audio, Picture Settings etc. instead of scrolling down to reach them.

Mucx

I believe this would be a better idea, you can use a combination of tabs and scrolling if necessary, but as it stands, your design is too verticle in my opinion.

although its a great job! only trying to be constructive.

hawkman · Post by **hawkman** » Wed Apr 11, 2007 5:09 pm

I'd agree with that - cool as it looks (and it does look pretty cool), the world is headed towards widescreen...

jbrjake · Post by **jbrjake** » Wed Apr 11, 2007 5:10 pm

Huzzah! Collapsible triangle folder thingies!

EDIT:
Though it really is too long. I mean, if it doesn't fit on a 1080p display without scrolling...that's a bit much.

Why not have two columns, maybe even three? Use some more horizontal space, try to keep the vertical height within 768 or 1024 pixels.

dynaflash · Post by **dynaflash** » Wed Apr 11, 2007 5:19 pm

jbrjake wrote:Huzzah! Collapsible triangle folder thingies!

As I read down this post, I was just waiting for that!

It is a very nice looking interface. Provokes some great thought. We will be do for an intensive gui redesign in the future. There has been alot of thought on how it should work, etc. I think there will be alot of input from alot of people and this is a nice mockup. It will certainly be taken into consideration, I am sure.

Nice work.

Mucx · Post by **Mucx** » Wed Apr 11, 2007 5:19 pm

Way ahead of you guys honestly hehe, quick and dirty edit because I am at work waiting on a video to process and Fed Ex out (bored in other words and I should be home now):-

Does look a little better without so much scrolling and collapsing. Also jbrake the liong giant one I linked to was just a demo of everything...couldnt do that because it wouldnt fit on the screen...hence the scrollbar in the posted version sitting in the forum. (Which again, looking at it realistically is wouldnt fit on your screen...but you collapse things and scroll on the right anyway). Wasn't intending all that to be one screen. It is just a mockup showing everyone what the other collapsable parts looked like because people will go "yeah but where is this and that" and not realise the term 'mockup' :p

Mucx

Mucx · Post by **Mucx** » Wed Apr 11, 2007 5:34 pm

dynaflash wrote:It is a very nice looking interface. Provokes some great thought. We will be do for an intensive gui redesign in the future. There has been alot of thought on how it should work, etc. I think there will be alot of input from alot of people and this is a nice mockup. It will certainly be taken into consideration, I am sure.

Cool, when you have things in place you know where to find me. It needs more than two hours work or time spent thinking about it which went into everything here. I'd be happy to help someone build something nice for Interface Builder

jbrjake · Post by **jbrjake** » Wed Apr 11, 2007 5:42 pm

Does look a little better without so much scrolling and collapsing. Also jbrake the liong giant one I linked to was just a demo of everything...couldnt do that because it wouldnt fit on the screen...hence the scrollbar in the posted version sitting in the forum. (Which again, looking at it realistically is wouldnt fit on your screen...but you collapse things and scroll on the right anyway). Wasn't intending all that to be one screen.

Well, imo, when everything is expanded, it should still fit on the screen without scrolling. I think just having extra columns would be better than scrolling or the tabs in your second mockup. Allow those of us who want to, to have everything on screen at once.

dynaflash · Post by **dynaflash** » Wed Apr 11, 2007 5:44 pm

Mucx, you have no idea what pandoras box you just opened up.

Mucx · Post by **Mucx** » Wed Apr 11, 2007 6:19 pm

dynaflash wrote:Mucx, you have no idea what pandoras box you just opened up.

Oh I know, but better to be thinking about it early I guess..

Hehe, plus I can see already there are some opinions about what HB should look like. Or rather what people think interfaces should be. At the moment I just dont really get on that well with the HB interface. My idea of an interface isn't a bit grey slab or window with lots of buttons on it for the sake of getting everything on one screen. (though the way the picture setings is done at the moment sort of baffles me?)

I like things very neatly organised that can be got at with one or two clicks. I thought HB is the sort of project that might need a sort of outside view of things maybe as its settings fall under very simple categories. What I think you will need whatever route is chosen is an interface that is flexible enough that can have new features, buttons, widgets, dials, knobs or whatever bolted onto it without going 'where the heck do we put that?' setting for this new thing we just coded.

Would be fun to see if other people are willing to mockup ideas for you as well. That is always enjoyable.

Mucx

Confused Amused · Post by **Confused Amused** » Wed Apr 11, 2007 6:36 pm

Nice! Definitely a big improvement over the current UI. I'm no programmer, but this is one are where I may be able to help out as well. I'll see if I can come up with a mockup soon.

I like the direction of this though. Very streamlined and clean feeling which I think is what OS X apps are about.

Off the top of my head - some quick nitpicky things...

Currently we have checkboxes to choose between Target Size, Average Bitrate and Constant Quality. In UI design you use checkboxes for areas that can have multiple selections, but these selections are exclusive and would probably be better suited to a dropdown box because the user can only choose 1 of them.

I don't have my Mac in front of me, but from what I remember 2-pass encoding is always visible, but is grayed out depending on the encoding method (size, bitrate, quality). I think an option that isn't applicable to all encoding modes shouldn't be present for all modes. Only offer the checkbox to modes that support it. Sorry if I'm wrong, I can't remember this off-hand.

A "summary" page prior to an encode would be helpful similar to how "Picture Settings" appear at the bottom currently. No change-able options, but a list of how the movie will be encoded, displaying information from all the other tabs. Maybe even make that the default page and if a user needs to change anything let them dig into the different tabs that are present.

Getting really picky here, but surely we can present the track length in a more "human" manner? Couldn't 01h43m56s be displayed more like 1 Hour 43 Minutes & 56 Seconds?

Food for thought...

baggss · Post by **baggss** » Wed Apr 11, 2007 7:05 pm

I like the UI as it is, but that's just me.

Mucx · Post by **Mucx** » Wed Apr 11, 2007 7:47 pm

I actually based it off of Apple Aperture, the button styling and check boxes. Basically because it had the longest most tedious day at work waiting around for clients, someone to finsih some video editing for a client so I could phone them and FedEx it off....er anyway moaning when I shouldnt.

So I had aperature open and have always liked the drop down, scroll click arrow deal-y they use for the interface. You are right about selectable option and what should and shouldn't be a checked option or a drop down. Sort of details you miss when bashing things together lol.

What might be 'nice' as well as a summary is if the encoding settings were placed in the 'Spolight Comments' field of the file itself when done. A summary is probably a good suggestion because you get a single quick check list without having to click through and recheck everything...one glance at a single check list page and you can hit Rip.

Fun

Aric · Post by **Aric** » Wed Apr 11, 2007 8:09 pm

Good work on the mockup Mucx! Its always cool to see a UI refresh on an existing program from someone else's viewpoint. I really like the shorter version with the tabs/buttons under the video preview- although I dont like idea of having to scroll.. I think im just being lazy and want to see it all at the same time

Leo · Post by **Leo** » Wed Apr 11, 2007 9:01 pm

Cool, Mucx.

I like your layouts. I agree that everything on one page would look a bit cluttered -- especially to most users. You could have an "all on one page" toggle button which would lay it out like that. Can we get this for PC too? I was thinking of writing a webpage/HTA interface for the HB CLI last year (actually had started) and then found that sr55 had just made his GUI a few weeks earlier! (altho mine wouldn't have been as sexy as yours, lol.)

** I used to use the interface/front-end RazorLame for the Lame mp3 encoder for encoding WAV files. One thing I really liked about it was that it has a box at the bottom which lists all the command-line options for the settings you're choosing. The awesomeness of this is that an intermediate or experienced user can glance at it and immediately check there aren't any options left on that he wouldn't like to use! (No need to flick through all the tabs and check every option!) Even if you're not using a command-line interface (I'm not sure what the mac version uses) listing a command-line is great for this quick glance, and much better than a verbose summary/explanation of every selected option.

I spelt Qeue wrong!

Yeah, and again too! lol. Just in case it ends up spelled wrong in a gui, it's "Queue". Gotta love English -- 5 letters when you only needed one!

Mucx · Post by **Mucx** » Wed Apr 11, 2007 9:49 pm

Q...u...e...u...e

wow long day. I'm usually the spell check guy in work but gord...messed that up huh?

Post by **s55** » Wed Apr 11, 2007 10:02 pm

I like your layouts. I agree that everything on one page would look a bit cluttered -- especially to most users. You could have an "all on one page" toggle button which would lay it out like that. Can we get this for PC too?

Your kidding right? The window would be HUGE. I really dont see a point in doing this. Its already fairly crampt as is and the window is already poaching too large on smaller displays.

I'm open to design changes but that ones a No.

Theres also a few issues with the IDE i'm using so there are also a few limitations on components i use so anything overly fancy and pretty is really quite difficult to impliment. I must get an upgraded IDE to work with at some point and maybe a few plugins

Leo · Post by **Leo** » Thu Apr 12, 2007 6:14 pm

Your kidding right? The window would be HUGE. I really dont see a point in doing this. Its already fairly crampt as is and the window is already poaching too large on smaller displays.

Nope; I think jbrkjake was suggesting something similar. The page would be scrollable of course. I'm using 1920x1200 so no probs fitting it all in for me, lol!

I reckon all the Hb 0.8.0b1 command-line options (that come up under command-line "help") could fit into 1024x768 without much trouble. I wasn't suggesting that it would have to look non-cluttered or use big text, and wasn't suggesting that most users should use this or that it should be the default.

dynaflash · Post by **dynaflash** » Thu Apr 12, 2007 6:18 pm

Leo wrote: You could have an "all on one page" toggle button which would lay it out like that. Can we get this for PC too?

Honestly, neither idea is likely. Unless someone wants to write one and see if people like it. I know I'm not going to.

baggss · Post by **baggss** » Thu Apr 12, 2007 6:21 pm

....wonder if Mucx knows that dynaflash is the GUI guru for Mac Handbrake.....