20

Where I work, we have a system that has a screen with several fields. There are approximately 50 fields and all are important and should appear.

example of a screen with about 50 fields

//edited in gimp :D

Any suggestions on how to arrange the fields so that it does not look so ugly and complicated?

Improve this question
6
  • Could you post an English version of this form?
    – dnbrv
    Jan 23, 2012 at 17:37
  • sure, give me a minute
    – Xosler
    Jan 23, 2012 at 17:40
  • 1
    Is it completely necessary to display all of these fields on the same screen? It seems like there're a few separate sections here that all deal with different information (contact info, vehicle, contract, etc.), so it might be possible to break up the workflow a bit (as much as I loathe wizards). Also, are there instances where you could auto-fill data (e.g. they provide Zip code, you fill in City/State?)
    – Brad Orego
    Jan 23, 2012 at 18:03
  • All fields are required
    – Xosler
    Jan 23, 2012 at 18:36
  • this is a good idea (eg They Provide Zip code, you fill in City / State?)
    – Xosler
    Jan 23, 2012 at 18:42

4 Answers 4

Reset to default
24

For the question's sake, let's assume all the fields are necessary. But it could be a problem of Information Architecture. Adressing it first could reduce the ammount of fields in the form and make it easier. Here is a good article on IA and web forms.

The most obvious "problem" with the form is the lack of rhythm and balance, in fact it is breaking most of the known design principles.

Notice how there are too many vertical lines. This could be fixed by using a grid, and even composing to a vertical rhythm, it would give order to the form.

enter image description here

Last but not least, you could make it into a multiple step form, so not all the fields are displayed at once. Here a Q&A explaining when to use each and here on how to indicate progress.

Improve this answer
9
  • I should've just posted my comment as an answer T_T :P
    – Brad Orego
    Jan 23, 2012 at 18:13
  • More than a little doubt that I discovered: it would be a bad idea to put the first step of the wizard applet for uploading files? When you click next, it will do the OCR file, which can be time consuming, and has sent to the server, so when the User conclude the registration, it would be faster to save. Part of uploading files had to be done with applets because it uses digital assinatura, and the rest of the register would be done in GWT,
    – Xosler
    Jan 23, 2012 at 18:59
  • 4
    Awkward form alignment makes baby jesus cry
    – Ben Brocka
    Jan 23, 2012 at 19:19
  • 1
    This is one of the ugliest windows I ever seen. My eyes bleeeeed...
    – caarlos0
    Jan 23, 2012 at 19:37
  • 4
    I...I don't even see the misaligned form. All I see is blonde, brunette, red-head.
    – Rahul
    Jan 24, 2012 at 0:22
5

Using tabs instead of groups and placing all the input fields in one constant-sized column would make it a lot easier on the eyes.

If you have comboboxes with less than about 5-7 possible items in them, replace them with listboxes - takes up more vertical space, but looks a lot better and if you use tabs you will have more space.

Improve this answer
3
  • 3
    The problem with tabs it's that it doesn't convey a workflow. You need to expresselly indicate that there is a before and a next: multiple steps form. See this Q: ux.stackexchange.com/questions/3454/…
    – Naoise Golden
    Jan 23, 2012 at 23:34
  • 1
    Tabs could be a reasonable option if there is just one form that must be filled and rest of the tabs would be optional. Otherwise it's pretty bas as Naoise Golden said it does not convey a workflow.
    – Illotus
    Jan 24, 2012 at 1:17
  • Tabs can easily be used as pages with prev, next buttons.
    – Danny Varod
    Jan 24, 2012 at 1:19
5

enter image description here

I think sequential form would be the effective solution for this problem. - It will force user to go through each step to complete process. - No mandatory steps would be missed. (Its problem in tab that we cant see under which tab we have mandatory fields so we have to go through each and every tab) - It reduces users cognitive load by dividing/splitting data.

Hope this will help.

Improve this answer
4

Use tabs for fields that aren't required.

Split the fields up (eg. Personal, financial, Accounting) into seperate appropriate tabs.

Find out what information people normally should fill in, if they fill in all of your form, that's not really UX, because that really are a lot of fields. If you are using this in a commercial application, users are going to think it's to crowded and to difficult, leading to more support calls, ... Perhaps you should look into it with your boss, what information can be automated / deleted. If i'm not mistaking, this is a legal document or a contract. If it's a contract, clients with address, name, number, ... / products with their tax and info should already be in the system, this would make the information overflow some easier to bear ;)

You also have derived fields, eg. when users fill in a city you can get the post/zip-code, region and country. When they fill in the streets, you know all of the previous (or can make a selection based on that), just saying. Splitting in a wizard is one way to address it.

I normally have tabs with the first tab = "global" with all required fields. Then i seperate tabs for their use and their usage (= used a lot - yes / no?).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.