Can not reorganize large number of controls on a form , in a visually appealing and efficient way

Question

I am software developer that has a job to create database for storing contracts.

Contracts have annexes and construction reports ( I don't know how to translate this better, English is not my native ). Both contract and annex can have none or only one Payment report.

Annexes and construction reports are optional, and if contract does have them, their number is unknown. User should be able to add them by filling out their corresponding data and then hitting Add button, for example.

To make things even worse, data about contract and annexes should stand next to each other, because user needs to compare all of their entered values.

Data about construction reports should be a part of the contract data.

Here is a quick illustration of what I have described above:

In the image above, I have added every control that exists in the project, except labels that describe the purpose of the text fields and other controls. Some of the text boxes ( edit controls ) are multiline, meaning user will 100% enter large text. In the image, they have been pointed out by text MULTILINE, in their box.

EDIT:

Below is the image with added description of every field. Hopefully this will make things easier.

QUESTION:

How can my mockup from above be properly redesigned to meet the requirements described earlier?

Thank you. Best regards.

Answer 1

Why does your boss need to compare the two forms? Think about what your user is doing, not what your user is saying. In other words, try to look for the deeper "story" your boss is telling you about how she wants to use the software, and try to provide that, even if it doesn't look like what she describes.

Is it because the Annex is mostly identical to the original contract, but a few fields need to be changed? If so, add a button that offers to "pre-fill" the Annex with the entered values of the original contract (even if the original contract is on a different page/tab).

Do they want to compare the values to the originals? If so, you can provide a "real time" label after each box in the form (like the password strength indicators on a lot of websites) that says "This is $3,456.45 greater than the original contract". For example:

^{download bmml source – Wireframes created with Balsamiq Mockups}

This prevents you from having to show two duplicate forms side by side.

If you can tease this out, you can design a better layout using the suggestions others have given and deliver software that's even easier and more intuitive to use than your boss originally imagined.

(Also, you can minimize inputs to the form by inferring as many relationships automatically as possible. For example, you don't need the "Has Annex" and "Has Report" checkboxes as separate inputs- they can be inferred by if the user has added either:

If your user has already added annexes and/or reports to the contract, they shouldn't also have to check a box indicating that as well.)

---

Putting it all together (and you should definitely consider the advice given in the other answers when designing your form), I would recommend something like this:

^{download bmml source}

At any time, the user can see/browse the annexes/reports that are associated with the contract (so there's no need for checkboxes indicating whether they exist or not, or navigational buttons). After filling out the main contract (1), they add a new annex by clicking the "New annex" tab, which is a blank annex form (2), but this form can be automatically filled in with the values of the original contract, and the values they enter are compared with the original values as they change them (whatever makes sense for each field). When they click save (3), that tab becomes the new Annex and can be edited or deleted.

Answer 2

I have a personal rule that no single form should contain more than ~20 visible form fields because after that threshold the screen just becomes unusable.

The solution to this problem will change depending on your client's actual needs.

e.g. If there is a workflow where a user can create a contract (by itself first) I would have that as a simple form. Upon saving the contract I'd provide a "read-only" (no form field) view of that contract, with the option to add annexes and construction reports.

My assumption is that realistically you have the following business objects/relationships:

Contract - 1:N - Annex
Contract - 1:N - Construction Report

That said, if the client does need a way to see/browse a contract and it's related annex/construction reports I would do my best to only show 1 of each (annex/report) at a time and observe the following "rules":

1. If a field does not need to be shown (when comparing) hide it
2. If a field does need to be shown but can't be edited show it as plain text not a form field
3. Size the form controls as best as possible to the data (e.g. if your dates do not have time, shrink them
4. Try to group "dates" together in vertical alignment in chronological order
5. If the "Browse < >" bit flips between annexes/reports - I would consider this a "high level" navigation and move it to be more obvious it isn't just a field within each "sub form"

Beyond all this, it is always highly subjective. Without having more info on what all the labels are and how this application would actually be used it is difficult to give concrete advice.

Answer 3

In your case i would split up the whole input form in a wizard-like step by step input area. When looking at your layout it appears that you already started grouping the input fields with boxes. Consider that names of countries, persons and so on could be much longer than the input fields, so give them the space they need to properly display their entered value. Did you considered smaller screen sizes? how does this dialog look like on 1024 width (or 800px)?

I would recommend a process widget, which allows the user to get through the whole form step-by-step. So the user can focus on the currently needed input fields and is not overwhelmed by this huge amount of possible input fields (and possible wrong entries).

For inspiration have a look at: The effect of showing “wizard” style steps in a multistep process

I hope this helps :)