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.

I'm trying to give the best experience to users of a very huge system (like a CRM). It has a lot of forms and much of these have a lot of fields. My doubt is about if I should use a single column form (which raises too much vertical scrolling), or a two columns form (which needs less vertical scrolling and uses more horizontal white space) and a last one with four columns (which has few scrolling and uses almost whole white space to try to keep most of the fields above the fold).

It's important to say that our clients hate scrolling, and they always ask why we don't use the horizontal white space when we present a one column form).

So I'm little bit confused about it, because a lot of UX studies and good practices recommend to do not use/avoid multicolumn forms but the clients most of times ask multi column forms.

Our clients are very used to desktop programs and not everybody is very familiar with web based systems.

Below follows some possibilities I would like to share to illustrate an example of a complex form in the system with the three possibilities I mentioned:

screenshot of one-column version

In the example above I'm using the one column form (most recommended in UX studies), but with a very long vertical scroll.

screenshot of two-column version

In the second example I tried to reduce vertical space by using two columns.

screenshot of four-column version

This is the client's favorite one, 4 columns using white space and trying to keep everything above the fold.

  • The lengths of fields are based on the average of characters amount for each field.

I would like to know your opinion about the best approach to this case.

share|improve this question
2  
Can you show them mock ups ? This may help them visualise things they hadn't considered ? –  Toni Leigh Oct 16 '13 at 21:38
2  
If your client is not the actual person sitting there filling in the forms, then I think they should try with your mock up. As completing a form is a task, the easier it is to complete it the more successful your design is. Looking at it is not enough, the physical act of filling it in -- see @ColinSharpe answer is required. Avoid a design that increases the average handling time of the user. –  micap Oct 16 '13 at 22:02
1  
I would keep in mind that although one column forms have many advantages, these may count for nothing if the users hate scrolling. What is the point of efficiency and ease of use when the users hate it anyway because another factor overwhelms those advantages? Food for thought. –  uxzapper Oct 17 '13 at 0:11
2  
Have you considered labels to the left? Right aligned? That would let you keep one column with a lot less vertical space (roughly half the vertical space) –  DA01 Oct 17 '13 at 4:57
2  
have you considered the mice they are using? Are they stuck on some awful legacy hardware where the mice don't have scrollwheels? Are they using touch pads? Are the scrollbars set in from the screen edge violating Fitts Law (en.wikipedia.org/wiki/Fitts's_law)? In all mentioned cases scrolling can be a real headache! Give them a well designed, keyboard accessible form and mice with scrollwheels and the scroll may be less of a problem –  Toni Leigh Oct 17 '13 at 21:20

12 Answers 12

I strongly advise AGAINST multiple columns, because this breaks the eye flow and work flow. However, grouping multiple inputs in the same line by logic, can be a usability+++, and will save you a lot of space.

Here I made a quick example of what I mean:

enter image description here

In addition, you can:

  • Reduce the number of input fields to a minimum (hide optional fields in an expandable box below the form, or move them to an additional panel on the side)
  • Group some logically connected inputs by group box or title (won't save space, but makes navigation more easy)
  • Place labels on the left (they are better on top for smaller forms, but if you have large forms, they can be better on the left)
  • Use pop-ups (where simple dropdown is not enough), or even better, create your own dropdown container component.

EDIT: How to fit large form to screen width, without using colums

Since this question is becoming quite popular, I've decided to extend it with a useful method I've used on one of my projects some time ago. Use 2 panels, which auto-align vertically on smaller screens, and align horizontally on wider screens.

enter image description here

If you in doubt about whether some of your ideas will be a usability+ or usability-, let an external UI designer review your real-content mockup.

share|improve this answer
    
This is a very good example. I don't know the term for it but 'by logic' works well. This is a pattern heavily utilized by Apple in their online forms, BTW. –  DA01 Oct 18 '13 at 19:38
    
I really liked your wireframe... I will test my with left align label too... –  Marcos Rocha Oct 21 '13 at 4:37
    
@Alph.Dev great mockup... thanks for sharing... I will create some new mockups based in yours to show to the users... –  Marcos Rocha Oct 28 '13 at 15:23

I think there are some other ways of dealing with scrolling and modelling complex forms that will yield better results than just trying to squash all the fields onto one screen. Ways that will lessen the obviousness of scrolling, or remove it altogether as well as making white-space more manageable and less obvious.

I would advise considering the following strategies (as well as strongly advising that single columns are best):

multiple pages - complex forms can be split over multiple pages with continue buttons and intelligent data saving. A step count will help with navigation and with showing the user where they are at in the process. Takes some of the cognitive weight off a large form.

complexity - analyse the forms use, ensure that commonly used inputs are more prominent and that the form can react to certain selections by exposing / activating other parts of the form.

tab index - keep a close eye on your tab index, the order of the fields as they are selected by actions like tab. Ensure all elements are accessible with the tab key and the form responds to focus intelligently. Tab index allows the form to be filled in with just the keyboard when done correctly. (http://ui-patterns.com/blog/Input-contexts-switching-from-mouse-to-keyboard). Tabbing from field to field will help users to ignore the scrolling as it will just happen - they won't have to keep reaching for the mouse (I would hypothesise that this makes up for quite a bit of their scrolling fatigue).

defaults - provide good defaults constructed from user observation and let advanced users set their own defaults. Allow pre-population from existing records with duplicate / copy functions. Avoid as much actually filling in as possible.

scrolling - don't feel harangued into avoiding scrolling if it is necessary to present complex inputs. Good tab ordering and complexity management (as covered in the first three points) will help with this. (You may also find someone has a bee in their bonnet about 'above the fold').

feedback - use white-space for feedback on the field entries. This should help cope with unwieldy white space on a single column form also provide users with quick verification for field entry data. Complex and usual fields might also benefit from advise. This will help balance the page with useful information.

undo - give users an undo function to roll back changes.

There is a lot of evidence involving studies of eye tracking and forms to support the assertion that single column forms are the easiest to fill in:

EDIT ...

Due to the presented research and contributions from experienced members I'm editing this to say that right aligned labels to the left of the fields is also a valid, usable way of marking up a form, with the added advantage of supporting the OPs specific use case. See links in the comments for more info. Thanks @Rasha and @DA01

... END EDIT

Here is a good link that goes into more detail:

http://www.cxpartners.co.uk/cxblog/web_forms_design_guidelines_an_eyetracking_study/

share|improve this answer
3  
I would also add to this immediate field validation. Nothing like clicking submit and having your data rejected then having to hunt for the right field in a large form. –  BergQuester Oct 16 '13 at 22:15
    
Very good points, the only problems is about a limitation to use multiple pages/wizards forms, the framework we are using to develop this system does not support wizards, so I'm trying to deal the best way I can with all this huge data quantity. –  Marcos Rocha Oct 17 '13 at 3:03
1  
Great advice in this answer. For the last point, although labels-on-top approach is probably the best, using right-aligned labels next to their fields will help balance the page more and have less scrolling. Right-aligned labels have been studied and they perform as well as labels-on-top. Avoid Left-aligned labels. –  Rasha Oct 17 '13 at 7:45
    
Interesting @rasha, can you link to said studies ? –  Toni Leigh Oct 17 '13 at 18:34
2  
@ColinSharpe here are just a few. Matteo Penzo has a famous paper about this uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php . Another interesting article by Janet M. Six which debates the pros and cons of each of the three placements of labels. uxmatters.com/mt/archives/2010/01/… . There are many good articles on this if you search the web. But I'm only listing a few. Matteo Penzo's is one that is referenced a lot. –  Rasha Oct 18 '13 at 8:05

User testing should give more objective results. Anyway, my suggestion to complex form is to provide visual indicator of current field, see image.

It allows:

  • to have more concentration on a current field and
  • to return to work faster after interruption or break.

enter image description here

The same approach you could see in Excel, which is edge case of complex form, as each cell is an input field.
enter image description here

share|improve this answer
    
Very interesting, I never paid attention in this highlight of field in Excel but it really helps and it's the same concept you showed in your wireframe... in your opinion this highlight would reduce the "harms" of using a for column form? –  Marcos Rocha Oct 17 '13 at 12:12
    
@MarcosRocha I think the biggest problem in a complex form is in losing orientation which leads to breaking task flow. Highlighting should solve this problem. –  Alexey Kolchenko Oct 17 '13 at 15:54
    
this is a very good suggestion ! I wish I'd put it on my list –  Toni Leigh Oct 17 '13 at 18:03

Based purely on what you have and visually re-arranging things, I'd suggest going from labels-on-top:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

To labels-on-left:

mockup

download bmml source

While wider, it's about half the height, so would drastically reduce scrolling.

Alternatively, how about a wizard or tab-style layout? Can the form be logically grouped into 2 or 3 'screens' instead of one long one?

share|improve this answer
    
Surely a right aligned label will dramatically reduce vertical scroll in the screen... and it will help to balance white space too... I will try a new wireframe using this to show to some clients too... Unfortunately the framework which system has been developed does not support using wizard forms, but other solution would be group this forms in tabs, it will have a similar effect, no? –  Marcos Rocha Oct 17 '13 at 12:17
    
@MarcosRocha yep, I think that'd be the same end result. The goal is to really reduce the form into smaller chunks so it's not overwhelming as one large form. Just be sure to add a 'next' button at the bottom of each tab so it's easy for a keyboard user to quickly get to the next tab and continue typing without resorting to the mouse. –  DA01 Oct 17 '13 at 14:00

There are few questions that need to be answered:

  1. Is this CRM system strictly for your client's employees only?
  2. If so, are they dedicated to using this CRM most of their day?
  3. Do these users have uniform screen size?
  4. What kind of forms are these? Do they fill out most of the fields (vs less than half)?
  5. How often do users fill out new form from scratch, vs simply viewing them?
  6. Do these form pages have separate "View-only / browse" mode?

When designing internal applications with captive audience, different set of UX rules apply than if you were designing consumer-centric applications. Depending on the answers, there are benefits to cramming fields above the fold.

share|improve this answer
    
Answering your questions: 1. Yes, strictly for our client's employees only. 2. Yes, they will use this every day all day long. 3. Yes, most of them have uniform screen size. 4. Most of fields are mandatory ones. 5. They will fill out new form as much as they will only consult previous recorded information. 6. The "view-only/browser" solution will be the same adopted to the form (the same quantity/disposition of columns) the only difference is the data will not be inside an input field it will be showed as a text label to improve the readability of them What are your considerations to it? tks –  Marcos Rocha Oct 17 '13 at 2:55

The context of the form and the intent of the user are very important qualifications to the approach...

Categories for Design by Use and Motivation of User

1. Transactional Forms - the intent is to engage the user. You want permission to ask them the next question, and the best form of engagement is a click. Start with the simplest possible question at the start or base of the decision tree. Do not start with Contact information, unless you have a relationship. Ask a question that indicates the VALUE to the customer. If you are selling hamburgers ask: what's your favorite hamburger? Then you can ask for contact info, to deliver it. Even if you have a long form, get buy-in first if you dont't have a relationship with the user.

screenshot: single question

Next, you can expand the scope of your questions, but I would recommend doing this gradually. Do not overwhelm. Use common sense on the layout of the form. First rule: Be consistent. Same field sizes, locations and graphical styles. Very good idea to consider and test WHEN you can ask for contact info. If this is required to deliver value - it is easier to ask for contact info sooner.

ScreenSholt: expanded scope of information

Give visibibility to the process to manage expectations and maintain strong trust. SCREENSHOT: VISIBILITY

2. Complex Data Gathering Forms I found the most complex form I know of.. it is for insurance coverage for a client with multiple houses, vehicles, drivers and other valuable assets:

NOTES:

a. Recommend telling people how long it is expected to take. b. Break the form up into sections visually c. Allow people to scroll if their answers could possbily be subject to adjustment as they go along. Otherwise probably better as pages. d. Give the user the ability to save as they go e. Automatically save data regularly (they should be registered by now) f. Leave optional windows closed, but visible - they open when clicked g. Where possible, create dynamic form fields based on the information architecture and order the questions. This may require multiple pages depending on the backend systems you are using. h. Make it possible to TAB through the fields, and hit return to select check boxes (programming the checkbox can be done with JavaScript).

USEAGE: Nobody is going to WANT to fill a form like this out. They will need to be motivated. In this case, they get the coverage they need, and even then, we found the agent often had to walk them through the process on the phone.

MULTIPAGE OPTION: make the number of pages visible from the start and save at each subsection.

I hope this is helpful. The form below is not perfect. Would have like to use sliderbars and dynamic content - but it is at least robust.

enter image description here

share|improve this answer

Since this is a web-based client-server data-entry form, it has at least 3 major use-cases:

  1. new record
  2. update record
  3. view record

Your question and most of the answers focus only on #1. Even if this is for a group that only enters new records, it's almost guaranteed it will eventually be used for views and updates as well and that's where the scrolling really becomes a big issue.

Single column with scrolling is worse case for data entry
Single column with scrolling only works for casual data-entry (most web forms for registering users, etc.) and viewing. Even then, a scrollwheel is mandatory.

Single-column is bad for adding new records since the source documents (which could be other online or on-screen forms) never have fields in the same order as your form. As the user moves sequentially through the source document fields, they must constantly scroll up and down looking for the corresponding form field. The more fields off-screen, the more scrolling, and the easier it is to get lost and miss entering a field -- very bad. Finding the desired form field when updating data is even slower and more frustrating.

Multi-column/Multi-tab with No Scrolling best for data entry/update
Data-entry of a field (case #1 and #2) goes something like...

  1. Identify source document field
  2. If possible, select and copy the field
  3. Find corresponding form field
  4. If possible, paste selected data into field. If not, type it in.

The time required for step #3 often dwarfs the other three steps combined.

If all form fields are on one screen, the user's eyes can scan both horizontally and vertically (two dimensions) to rapidly locate the correct one. Accuracy and speed are enhanced if related fields appear on same line. If there is a common grouping and order the user is familiar with (like the postal name and address format), using it will further improve productivity.

If there are too many fields for one screen and there is a logical grouping the user is familiar with that can be identified by a short title, then tabs (could instead be a single level menu if tabs are not well supported) bearing those titles is the next best approach.

It's all about optimizing for what the user expects. On identifying a source field, they should be able to immediately find where it goes on the destination form.

Hands off the mouse...
Data-entry is most productive when users never take their hands off the keyboard. If you want the data-entry users to love you (or at least think twice about forming a linch mob), be sure that the tab order is set logically (in the West, left-to-right, top-to-bottom) and there are easy shortcut keys for all actions, particularly navigation actions like switching tabs and submitting the record. A listing of those shortcuts should also be a single keystroke away.

RESOURCES

share|improve this answer
1  
Very interesting comment and I agree with you because these forms will be used not just to new records, but to update and view data recorded too... and other important information, to view data we have created a 4 column screen and the values are showed with a simple label, not inside an input (with borders, shadows etc), it's clean and it has a better readability... if a four columns just to view data looks fine to the users (we knew this about their opinion) I was wondering about a four columns form too... Do your opinion is tested or based by any study or test? Thank you –  Marcos Rocha Oct 21 '13 at 4:36
    
I've added a couple of resources to the answer. These have some good info on what you're doing but I've been unable to locate an easily accessible study or test directly covering this. My advice comes from 30+ years writing software including designing several data-entry systems for large organizations with "assertive" data entry personnel. –  DocSalvager Oct 21 '13 at 10:26

I think you should look at @Jung Lee's answer.

In my opinionn UX should apply differently on different contexts, also, there's a barrier with the clients that we always forget. It's said that the client is always right, so if your client is stubborn enough, you should agree with what they want (trying to convince them first) in the end they are paying for a product.

In your case I would tell them the advantages of 1 column layout, backing it up with a bit of actual studios and/or data.

Also you have a HUGE advantage there, you have the actual final users at your reach, not some "similar target demographic testers". The definetively most effective way would be to let the employees to complete the forms (or a similar setups) for X times, and keep the record of the time used up, along with their feedback, and then decide.

share|improve this answer

if you need to show forms having multiple rows you should consider a free open source table presentation framework such as http://Datatables.net or http://flexigrid.info/ to achieve best presentation. Don't bother with them if you only have single user/single item tables, but if you have tables for management listing several rows each for a different customer or other multi-row table layout needs, they'll give you tons of UI goodness for little effort. Notice that some of them support out of the box "card view" which is a way of showing a single line of data that might be too wide as a stacked series of input boxes. In an ideal presentation you can use the same layout on both the management presentation of multiple customers as you use for customer data entry and thereby reduce the cognitive load associated with showing the same data in multiple formats.

share|improve this answer

Personally I like multi-page or 'step' systems. It breaks up a long process into seemingly more managable chunks and you can also easily show how far through the process the user is.

I have also had instances where a form hasn't submitted correctly meaning I have to fill it all out again. If this were to happen it would be better if it were only 1/5 of the form rather than the entirety.

share|improve this answer
    
I also like it but this a very complex system using a pre existing framework as base that unfortunately does not support use of wizards :/ –  Marcos Rocha Oct 17 '13 at 3:01
    
there's no way that a form should be left in a state where it all needs to be filled in again, not with local storage available –  Toni Leigh Feb 7 at 16:12

While my thread is closed, I alluded to some of the issues that this thread discusses.

Multi-Column Form Design: Is There a Consensus?

share|improve this answer
  1. You can use placeholder instead of showing label. It saves the height.

  2. 4Column fields are bad idea. If you are thinking to save the height, user may get frustrate to see/fill the form.

  3. As per your first one, your form has too much right white space. To avoid this you can center the form. User will be attention to the center.

  4. You can split in 2 or 3 pages depends on you fields like steps process.

  5. We should take care designs especially for forms. Those are not easy at all. We have to take user smoothly till the end of the form. For that we have to work with colors, font sizes, dividers, some interactions,... You can check the examples:Yahoo registration, ebay registration,

  6. You can show ads/suggestions/features of you product or website to right side or left side of the form.. Ref:Google Registration.

share|improve this answer

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.