Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I enhance the aesthetics of an ugly windows form packed with too many (necessary) features?

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)

like image 984
Brann Avatar asked Sep 28 '09 10:09

Brann


3 Answers

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.

like image 145
9 revs Avatar answered Nov 03 '22 14:11

9 revs


grid systems grid systems http://ecx.images-amazon.com/images/I/51kcWOOyUoL._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA240_SH20_OU01_.jpg

thinking with type thinking with type

other reccomendations:

stop stealing sheep

elements of typographic style

the design of everyday things

the humane interface

like image 37
Breton Avatar answered Nov 03 '22 14:11

Breton


If you've already dealt with alignment and organizational aspects as much as you can, then your problem probably is the graphic design of the controls. Heavy 3-D controls in large numbers are detrimental to the aesthetics and usability of a window. Consider editing their properties to flatten and lighten the controls’ appearance, using something I call “compact presentation.” In addition to removing the ugliness and distraction of heavy borders and backgrounds, this also allows controls to be placed closer together, freeing white space for grouping them without resorting cluttering lines and frames.

It looks something like this (after also fixing alignment and redundancy along with a little re-arrangement of groups):

wGetGui window with faint borders for controls on a uniform white background
(source: zuschlogin.com)

like image 4
Michael Zuschlag Avatar answered Nov 03 '22 12:11

Michael Zuschlag