Sorting many Text boxes in a form [closed]

Question

I was wondering what to do regarding a form I have that's looking pretty messy and complicated.

There quite a few elements in it and it just looks bad... I removed the labels:

I feel one of the ways to go would be to standardize the text box size and organize by column? I don't really know, I don't like the idea of a date input having the same size of an address field... So I would appreciate any suggestion.

--------------- EDIT -----------------

Here's the form with the labels back.

Answer 1

Here are a few ideas.

Reduce

I'd like to +1 the comment by @DasBeasto: are all of the controls in your form truly necessary? It's entirely possible they are all necessary, but you may also be able to get rid of some edge cases. Put yourself on a UI diet!

Does the product need to be everything to every user on every use, or can you cater to all the most common needs, 80% of the time? This may be a product-management decision more than a user-experience decision. See my remarks below on usage data.

Grouping

This illustration shows strong grouping (left) and weak grouping (right):

Background shading is one way to show grouping, which helps provide a sense of order to the complexity. In the above illustration, the left side clearly shows two groups.

Be cautious with colour

Be careful with coloured borders and coloured backgrounds, as shown in your illustration. Users won't know what each colour means, but they will assume that it's intended to convey something more than just grouping. It may increase confusion. It may also increase the impression of visual clutter.

Headings

The illustrations above and below all show the use of headings to add structure This helps users to scan and skip through the form, since it's clearer where one "section" begins. Organise the sections into groups that make sense to the user. In the illustration below left, the "headings" are also links that trigger the expanding-collapsing action.

Progressive disclosure

This illustration shows progressive disclosure (left) versus all controls (right):

Collapsing and expanding is one way to progressively disclose (show it when it's needed; hide it when it's not), which helps visually reduce or simplify the complexity.

There are many ways to show and handle progressively disclosure, including glyphs, accordions, tabs, which are in place, as well as navigating to other pages, pop-ups, and so on. If you opt for in-place progressive disclosure, be sure to use the correct glyphs that are standard for the platform or operating system.

Check the usage data

Depending on where the results of the form are saved, and depending on how the form is delivered, you may be able to check the server log and check the actual users' data records to determine the frequency and commonality of each control's usage. In plainer language, this means determine how often each control is used:

• How often — every time the form is used? or only sometimes?
• By how many — by most users? or only by some users?

Controls that are used less can be buried. You can bury them by different degrees, using progressive disclosure, or even nested progressive disclosure. (Yes, some of this stinks, but when you have as many controls as you have, it's a question of how to compromise.)