1

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:

A screenshot of my application's 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:

enter image description 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?

  • 2
    You are asking us to make design recommendations on a UI for an application we know nothing about, with entry fields who's purpose we know nothing about. You need to be a lot more specific if you want serious UX recommendations. – Evil Closet Monkey Mar 15 '14 at 0:17
  • Fair enough. I'll expand a bit. – SevenBits Mar 15 '14 at 0:18
  • I think it needs less "Enterprise". What does that even mean in this context?, distribution release or even source ISO. – Dan D. Mar 15 '14 at 8:07
  • Enterprise is a software program that is installed onto the bootable USB, to put simply. The distribution version and release are the version and name of the Linux distribution to be installed. I think you can tell that I'm a programmer and not a designer. ;) – SevenBits Mar 15 '14 at 11:10
2
  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:

enter image description here

  • I like it. The only concern is, for the checkboxes where the user selects the installation source, it is possible to add your own sources in the preferences. Conceivably therefore this list could be 30 items long. How should I deal with that many checkboxes? – SevenBits Mar 15 '14 at 18:03
  • @SevenBits in a case of many options you may go with dropdown. I think that you may choose to show radio buttons (shown in my example, less than 5 items I think) or dropdown (your own solution) depending on the number of options. And it's always a good idea to preselect something if possible. – alexeypegov Mar 15 '14 at 21:35
  • That's for the help. – SevenBits Mar 18 '14 at 2:30
4

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:

mockup

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.

0

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).

mockup

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.