Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Could you post an English version of this form? –  dnbrv Jan 23 '12 at 17:37
    
sure, give me a minute –  Xosler Jan 23 '12 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?) –  borego Jan 23 '12 at 18:03
    
All fields are required –  Xosler Jan 23 '12 at 18:36
    
this is a good idea (eg They Provide Zip code, you fill in City / State?) –  Xosler Jan 23 '12 at 18:42
show 1 more comment

3 Answers

up vote 15 down vote accepted

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.

share|improve this answer
    
I should've just posted my comment as an answer T_T :P –  borego Jan 23 '12 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 '12 at 18:59
2  
Awkward form alignment makes baby jesus cry –  Ben Brocka Jan 23 '12 at 19:19
1  
This is one of the ugliest windows I ever seen. My eyes bleeeeed... –  caarlos0 Jan 23 '12 at 19:37
1  
I...I don't even see the misaligned form. All I see is blonde, brunette, red-head. –  Rahul Jan 24 '12 at 0:22
show 4 more comments

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.

share|improve this answer
2  
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 '12 at 23:34
    
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 '12 at 1:17
    
Tabs can easily be used as pages with prev, next buttons. –  Danny Varod Jan 24 '12 at 1:19
add comment

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?).

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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