How can I improve this GUI interface?

Question

I'm making a Mac GUI for my application Mac Linux USB Loader and I'm not sure how to design my application's document window to conform to good UX principles. Here's a screenshot of the window:

The window is very cluttered and looks awful compared to other windows in my application. Basically, the intention of the application is to setup a bootable USB drive of a Linux distribution.

The two manual, obligatory fields are Installation Drive and Enterprise Source. These are two drop down menus; the former contains a list of USB drives that you can install to (basically, a list of drives that are plugged in) while the Enterprise source drop down contains a list of sources that are manually defined and added by the user here:

The remainder of the panels (the distribution name and version) are auxiliary and optional. Based on the filename of the distribution, these panels are automagically filled in with the correct values. Unchecking the automatic setup button enables the text fields where the user can change these values manually.

I was thinking about maybe dividing it up into a multi-pane layout or similar, with the basic installation drive and Enterprise source being on the default General pane and the other options being on a secondary pane.

What should I do to improve the window?

Answer 1

1. Dropdowns are good if there are a lot of items (it seems like it's not your case). Radio buttons are good choice if there are just a few of options (or any visual similar kind of controls).
2. There is no need to show a control at all if only one singe item is available (like only one USB drive is plugged in: a majority of cases I believe)
3. Try to avoid anything without a suggested variants (like two latter fields in your case) because it may confuse your users.
4. Place anything optional under Advanced options section.

Taking all these recommendations into an account I can suggest something like this:

Answer 2

Some small issues about the current UI:

• The destination is before the source.
• The first dropdown has "---" pre-filled, but not the other one.
• The "Setup Enterprise Automatically" checkbox is not clear. You explain it right below but as a user, I would expect the whole setup to be done automatically. I would use such a phrase on a button, not a checkbox.
• The two Distribution fields are not aligned with the dropdowns (small issue though).
• These two fields are visible before having chosen the Enterprise source. What happens if a user fills these fields and then chooses an Enterprise source?

Ok, so here's a quick UI that could improve the user flow:

^{download bmml source – Wireframes created with Balsamiq Mockups}

On the left, the initial state:

• Start with the source, and prompt the user to choose an option from the dropdown with a placeholder text.
• If you can, try to detect a USB key that is already plugged in. Some programs that I've used do it, and it's quite convenient (there's usually only 1 USB drive plugged in, and it's plugged in for exactly that purpose). If you can't or don't want to detect, use a placeholder as well.
• The Distribution name and version are disabled because the user hasn't chosen an Enterprise source yet.
• The Install button is disabled because the 2 dropdowns aren't filled yet.

On the right, the next state:

• The 2 dropdowns have an option chosen. Considering these are the 2 mandatory fields, the rest of the form is completely enabled.
• The Distribution fields are automatically filled. Here, it's a design choice of mine: I think most users will really like the fact that these fields can be automatically filled ("Magic!"). And it's not an issue because these fields are still editable afterwards. Just make the workflow quicker and easier for your users, but still provide enough control for those who want to.
• The Install button is available now because everything is set.

Also, try to align everything vertically. The visual flow will be crystal clear: from which source, to which drive, with what name and version, and done.

Answer 3

Get rid of the decades old elements like a dropdowns and checkboxes. Imagine an interface as if you're designing the app for a tablet, what kind of interface would you like to see if this was an app for iPad? The same interface would look good on a laptop too. (unless your app is like photoshop and can't do without showing lots of buttons).

^{download bmml source – Wireframes created with Balsamiq Mockups}

Ask for other advanced options on the next screen. Here are 2 rules that should help you in the future:

• At most 7 items on screen at once.
• At most 3 "next" steps.