+2  A: 

Because tabs are not allowed, you can create a more grid like layout.

Gamecat
@Gamekat : unfortunately, I can't use tabs (it's written explicitly in my question)
Brann
Ok missed that part.
Gamecat
Np. I changed my question to make it obvious. Btw, I can't change my vote (vote too old to be changed because you edited your post during the 5mn initial period. I'll fill up a bug report on meta for that)
Brann
-> http://meta.stackoverflow.com/questions/23701/why-cant-i-change-my-vote-despite-the-post-being-edited
Brann
Brann: This is a "feature" that is considered "by design". You can remove your vote now.
Noon Silk
@silky. Even considering Gamecat changed his post AFTER my downvote ? I think it's a bug related to the edition being made during the 5mn initial "furtive editing" period
Brann
I'll leave you to discuss that with the people of meta :)
Noon Silk
+1  A: 

Adding detachable panes for related options and commands can help the user to organise them, at least. If they can be minimised/unpinned when not needed, then they can also free up valuable screen estate and unclutter the UI. See VisualStudio itself for a nice implementation.

Joel in Gö
I'm afraid this would lead to confusion among non-IT users. VS-style docking is nice when you're used to it, but non-It users might have a hard time getting back panes they've accidentally unpinned/moved/etc
Brann
true enough; I must admit having lost the odd pane in VS myself :)
Joel in Gö
+10  A: 

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.

DR
After fixing the obvious mistakes you're pointing at, the window still looks ugly, but now you don't even know why ! :)
Brann
Not without seeing it no. Can't you put a screenshot of the *real thing* online? Change some text to protect the innocent etc, etc...
Lieven
If you do so, please keep the *original* screenshot as a reference.
DR
+1 for the rule of thumb, that's a really nice way to "visualize" the concept of clutter that uneven controls produce.
Joachim Sauer
Unfortunately, I can't post a screenshot of the real thing ; That being said, I'm pretty confident the steps described in your post have already been taken on it. I'm more looking into advices re the use of colors, icon, fonts, etc. I'm thinking about how to rephrase my question accordingly. I'll keep the original UI for reference.
Brann
@Brann: colors/icons/fonts don't really do anything to *decrease* the visual clutter, quite the opposite indeed.. "Empty" space and slight use of contrast might be more interesting in this direction.
Joachim Sauer
+3  A: 

If you're on WinForms, One trick I've found useful is to pack multiple-instance data in a DataGridView, and single-instance data in a PropertyGrid. Both these controls help you pack lots of information in very small space, and still give you full control over their visualization (you can add descriptions, tooltips, etc.)

Guido Domenici
+1  A: 

Here's my random selection of suggestions:

  • make it bigger, this allows a more structured grouping by reducing the space constraint on each group
  • add some structure by grouping options that the user might want to combine at the same time
  • add meaningful headers (might require the previous item). "special", "running options", "retrieval options" don't really convey any useful information.
  • make sure that only options that can be combines randomly are checkboxes (for example are "no info", "all info", "some info" really completely independent options? Same for "append to logfile", "overwrite logfile").
  • use appropriate controls (spinner for number entry, file selection dialog for files, radio buttons for mutually exclusive items, ...)
  • deactivate controls that make no sense with current configuration (for example custom directory text field).
  • move all actions to a single place
  • hide the scrollbars unless they are actually needed (i.e. reduce visual clutter)
  • be more consistent (why is it "running options" and "retrieval options" but not "special options"?)
Joachim Sauer
+1  A: 

One thing that you may have, but is obvious for the WGET example is the use of a main menu, e.g. File, Edit, Tools, Help. And also a button bar too?

Chris S
@Chris. Unfortunately, that doesn't apply in my example ; see the other example I provided.
Brann
A: 

Duplication - they might all have to be available instantly, but they could be available elsewhere as well. So you can have a keyboard accelerator, menu option, detachable panel, tabbed area ...

So this existing form could be the main, default interface (albeit improved with some of the other good design tips in other answers), but why not create an "expert" panel which can be a lot neater and try to work your users on to that, and away from this old "do everything" blotter.

Unsliced
A: 

I would really consider evaluating the usability goals of your project. Figure out what users want to do most frequently and most consistently with your application and default to that.

You should consider a wizard for this UI. Guide the user through a set of screens for the first use. And move many of these features as configurable options preferences.

Usability is not merely aesthetics IMHO. It is about making clear what the app is intending to do. I would refactor this app to provide shortcuts to common options patterns. If 90% of the time I am going to use a specific configuration of options why do I need to see every feature enumerated in the UI 100% of the time? It is just unnecessary clutter. Sensible defaults powerful configuration that is the goal. You don't have to sacrifice features, in a sense not making me think is a feature, perhaps the most important feature.

With respect to your specific app I would rework it with two basic screens a clean default screen and an advanced screen. Add the ability to create shortcuts to common configuration sets on the default screen. A simple button that maps to a specific configuration set and asks me for a url. And if the user needs to tweak an option present them with the advanced screen but treat it as preference configuration screen that saves the preference out to a shortcut button. If I want to use the configuration more than once let me save it as a custom bookmark or option on the defaults screen.

This is one of the things OS X does really well. There is a lot of power and customizability in OS X, "hidden features" if you will. But the OS defaults to sensible and straight forward options. Provide tools to the power users but don't clutter the system for the first time or casual user. This is not sacrificing functionality, it is effectively organizing functionality.

That is my first suggestion. But if absolutely don't want to hide options, I would make this a long scrollable vertical list organized in clear steps with explanation for each step:

Step 1: Provide URL __________

Step 2: Configure Hosts _________

Step 3: Configure Retrieval Options:

() option

() option

() option

() option

And so on...

At each step provide some context to the meaning of the configuration options.

The advantage to this is that you can clean up the UI aesthetically and provide useful configuration hints. I don't know what "Empty wGetStart.bat" means. I presume this empties a batch file of some sort. Provide me an explanation so that I know whether I want to click that button or not. And then let me hide explanations under a collapsible menu if I use the interface regularly.

My two cents.

Gordon Potter
@Gordon : Those are definitely good guidelines in general UI design. but unfortunately, in my specific situation (see the comments on my question), it seems the screen *has* to be cluttered with a lot of data. What I'm trying to do is to improve the overall look (ie aesthetics), not to change the workflow (ie usability)
Brann
+4  A: 
Breton
@Breton : I'll look into those, thanks for the hint !
Brann
A: 

This may not be appropriate, but...

Hide all the options in a stylesheet, much the way that all the paragraph formatting options are hidden in a word processor. Most of the time, the user just picks a named style. When the scary stuff is necessary, a click of an 'Advanced' button can grow the form to show all the options at a glance, to allow a few to be overridden, or to allow new named styles to be defined.

Obviously, a major advantage is that if there are a few particular configurations that are regularly used, it's trivial to switch between them and there's very little risk of accidentally setting one of the options wrong.

Another option - don't have all your options on display, use tabs or a wizard or whatever. Instead, have a text list of all options currently set (or all options in non-default states or whatever) to get the at-a-glance visibility.

These could be combined, so that your summary display says something like "like <style name>, except for ...", based on the style that's least different to the current options.

Steve314
+2  A: 
Jon Limjap
+6  A: 
Breton
@Breton : Another problem I'm facing is that I want my dialog to fit in a standard 1024*768 window. That being said, spacing up things is definitely helpful !
Brann
+1  A: 

Aside from other much-needed changed, adding a banner (displaying the company logo or something like that) seems to improve the overall appearance of the dialog.

I know it's a pure waste of space but it seems to improve the global feeling about the window.

alt text

Brann
I'm curious to know the reason why someone downvoted this.
Brann
Maybe they thought it was bad advice. What evidence to you have for the claim "... it works !", or is that just a matter of opinion? I'd be interested in knowing if there are any studies that show this to be true. It seems counterintuitive to me.
Bryan Oakley
Well.. I just ask to a few non-It people at my office, and they almost all said the same thing (I showed both dialogs at the same time and asked them which one they preferred)
Brann
I'm surprised to have thought that, but this does indeed look less horrifying to me.
MiseryIndex
+1 because it actually *does* look slightly more professional with the banner. Which I wouldn't have believed until I actually looked at it.
MusiGenesis
By having a banner that visually contrasts so much with the remaining window, all the graphic variation in the controls that gives a cluttered look fades to become a uniform background. The problem is your controls have faded into the background when they’re what you want your users to notice the most. I suspect the same real estate may be better used to spread out and arrange the controls more neatly. But no down-votes from me.
Michael Zuschlag
I think you gained more benefit from having the additional whitespace around the logo than from the presence of the logo itself.
Breton
As Jason and Grant say, debunked!
MiseryIndex
A: 

In a comment you say that a user "HAS to have all information available at once". Does that mean they have to see all the checkboxes and frames and scrollbars at once, or just the information?

For example, instead of having a multitude of checkboxes for option 1, option 2, option 3, etc, in the main GUI, only show the selected options and give the user a way to open a configuration window when they need to change something.

Instead of this:

+- Feature Set X - +
|                  |
|  [x] option 1    |
|  [x] option 2    |
|  [ ] option 3    |
|  [x] option 4    |
|                  |
+------------------+

show this:

feature set x: option 1, option 2, option 4  [configure...]

This lets the users see all the selected options without having to take up valuable real estate for all of the widgets necessary to change the values.

(apologies if the ascii art doesn't appear right -- it looks right in a fixed font :-\ )

Bryan Oakley
+1  A: 

First, define a hierarchy of control blocks. Even if everything must be visible, I think that some functions are more important than others. Also, make a clear separation between functions that apply to the domain (e.g., Start wGetStart.bat) and functions that apply to the software (e.g., Save settings).

Second, organize the layout according to this hierarchy: most essential to the top and to the left.

Third, let your design breathe. Space is fundamental for defining content.

mouviciel
A: 

An interesting article on this topic:

Managing UI Complexity by Brandon Walkin.

0xA3
A: 

In the second example I would remove most of the arrows from the right hand side box. I would add the ability to click and drag to change the number(if your users are used to that I know several 3d packages that do it so it wouldn't be uncommon in relation to the example). You can change check boxes to buttons with backgrounds that change color or stay depressed when clicked as another option to reduce visual clutter.

In the right hand side box there are two or three separate functions mixed together that very well could get their own tab. When you are working with an object's color and texture you aren't going to be changing its size and view aspect ratio so having them right there means they are in the way. At the very list they need to be rearranged to be in some sort of logical order right now they are all over the place. Texture and color(things that effect color) should be together. Position rotation and view(things that effect shape\size) should be together.

stonemetal
+1  A: 

Since no one has said this yet, I will: your window isn't really all that bad. Yes, it's ugly, and yes, I would be personally embarrassed to admit that I designed an interface that looks like that.

However, this window only produces a negative reaction the first few times you look at it. Once a user has used this form a couple of times, they will stop seeing it as a random collection of controls and instead start perceiving it as an interface that lets them see every piece of information that they require at a glance and that lets them do everything they need to do with a few mouse clicks.

It's a dialog for setting a bunch of options, and it's probably perfectly functional and not a big deal at all for your users. You could put a lot of work into some weird, fancy-schmantsy replacement UI that might impress the StackOverflow code-noscenti, but we don't pay your salary.

Now, the second window - that's a piece of crap.

MusiGenesis
You're right, the first window could be worse, and the second is a proof of this :)
Brann
+1  A: 

Without knowing both the content your application and what it currently looks like, I can only guess at the problems you are facing, but here goes.

You say that this is being used by traders. While I have never dealt with that segment of the market I have often dealt with executives who need very specific information to run their businesses and the first cut of the application almost always looked like what you have displayed.

The original solution back in the day was to build a very light custom interface for each user of the application focusing on only the information relevant to that person. More recently the move has been toward making the interface customizable by the end user.

Chances are that none of your users are using all of the information presented to them. Each of them is using only a small subset. But each user is using a different subset. Try building the software so that each user can display only the information that they will be basing their decisions on.

Jeff Hornby
+1  A: 

It has already been said, but without seeing your application we can't give you a concrete answer on how to make your dialog less horrifying. If you can't post screenshots, then the best advice I can give is to hire a designer to help you work on the graphical end of your application; otherwise all you will get are general guidelines here.

Some things that might have not been discussed:

  1. Think about the users of your applications and the systems that they run. I believe that most stock traders will have large dual monitor setups, so you can probably make your dialog larger and add space between your controls to make it look less cluttered. You should research your audience and see what they use.

  2. Are you using the best controls for the job? In the first screenshot you posted I noticed a few controls that could be changed:

    a. Under "Running Options" I see three checkbox options called All Info, No Info, Some Info. If only one can be selected at a time then maybe they could be changed into a drop down selection menu. Also under the same "Running Options" there is Append Logfile, Overwrite Logfile, which again you can convert to a drop down menu since you can select only one.

    b. The two text fields where you can put in hosts, can probably be combined into one gridview with three columns. The first column is the host, the second is a checkbox for Accept, and the third is a checkbox for Reject.

By simply using different controls, we can still see everything we need but have less controls on the application.

Again, like I said above, witout seeing YOUR applications I can't really give you any specific suggestions.

Hope this helps.

Waleed Al-Balooshi
@Waleed : I'm looking for general guidelines, nothing related directly to my application. Btw, Stock traders usually have between 4 and 12 monitors, but usually they use a "one application=one screen" for most applications (ie besides bloomberg and/or kobra)
Brann
+2  A: 
Michael Zuschlag
This can harm usability in that, buttons no longer look like buttons, and it becomes difficult to tell what is pressable or just a decorative label. You can establish a visual language for it, but that's not as effective as the psychology of a button having the physical appearance of a button. The problem is not with the button looking button like, but in the lack of contrast of placing a gray button on a grey background, and the distracting visual noise the fine lines of a button outline create. See my above post about contrast/spacing/silluoettes.
Breton
As generally ugly as I think the OS X aqua theme is, they do get one thing right: Blue on gray for buttons, or at least, lighter gray on darker gray, with a very broad round contrasty button style, instead of the fine delicate hard to see button highlights/shadows of win32.
Breton
While I attempt to build on conventional control graphics, compact presentation does indeed imply a new visual language. You shouldn’t try it without testing that the controls are recognizable. There is an advantage to command buttons looking like physical buttons, but I don’t think it’s necessary. Buttons in the original Mac had no 3D. Menu bars and links have always gotten by without 3D. In situations like this, it’s not worth the visual clutter. Some buttons aren’t the most important thing to notice. We need a lightweight version for those cases.
Michael Zuschlag