R – How to enhance the aesthetics of an ugly windows form packed with too many (necessary) features

user interface

One of the window dialog of a software I'm working on looks a bit like this : (original screen-shot copied from this coding horror post, other examples available on this SO question)

alt text

The thing is that none of the options can be removed (those who can have already been), and that they must all be visible at a glance (i.e. no tabs allowed) Edit : I've added a comment explaining why tabs are not an option in my specific project.

I've tried to use colors, to add icons, but it just added to the overall feeling that someone had just dropped controls randomly using Visual Studio Form designer during a summer internship.

How can I make this dialog more user-friendly less horrifying without deleting features ?

Edit :
The GUI example I took has a lot of obvious design flaws (see those answers 1 2), but even after fixing those (which I've done on the software I'm working on), the dialog still looks pretty ugly.

Below is another example (credit). Controls are (almost) lined up correctly, appropriate controls are used, etc, but the overall result still looks terrible :

alt text
(source: judahhimango.com)

Best Answer

Given the constraints I think you won't have many options.

A good starting point would be to equal the alignments and control distances to increase overall symmetry with the ultimate goal to reduce visual clutter.

Examples:

  • The group boxes "Special" and "Running options" should have equal height.
  • The distances between the four buttons "Save settings" and "Exit" should be equal.
  • All buttons should have the same height, if possible avoid word wrapping.
  • Use the same height for all single-line edit boxes.
  • The quota label and its text field should be at the same baseline.
  • The distance between a group box caption and its first control should be equal (compare "Running options" to "Retrieval options")
  • Increase the distance between the controls in general, i.e. make the form look less dense.

Content fixes:

  • Use the same captions/names for the same things. For example, you use "Append to logfile" but "Overwrite Logfile
  • Use the same character case, sometimes it's "Only the first one", "Every Single Word" and sometimes "it is Camel-cased". Decide on one scheme and use it consequently (Sentence case and Title case are the most common)
  • Don't try to be cool, "Go 2 background" doesn't look very professional.
  • Avoid controls with unreadable shortcuts or no content at all. It doesn't help if the user has to stop on every control and think: "What does this thing do?"

Some more radical/controversal changes:

  • Try making the group boxes more symmetric, possibly be re-positioning them and use the same height. If necessary use two columns of checkboxes, that would still look better than uneven group boxes.
  • Unless it's absolutly necessary, remove the horizontal scroll bars from the two multiline edit boxes
  • Get rid of the "Clear" buttons. For the list box on the buttom left you have to provide some other way to delete items, perhaps make this into a multine text box, too.
  • Try replacing the checkbox collection with a checkable list box or a property grid.

A rule of thumb:

Imagine the lines of the bounding box of each control lengthed until it reaches the form boundary. The less different lines reach the boundary, the better. (Because correctly aligned controls produce more incident (-> less unique visible) lines)

On the use of colors and icons:

Simply adding icons and colors doesn't solve the fundamental problems such forms have. They all suffer from being overloaded with controls and adding even more only worsens the problem, because they just add more visual noise, but don't provide any more visual cues.

Related Topic