What is the best way to deal with very complex forms?
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:
In the example above I'm using the one column form (most recommended in UX studies), but with a very long vertical scroll.
In the second example I tried to reduce vertical space by using two columns.
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.
4 columns is a lot to put on some screens. Unless all your users are in house running desktop PC's with large screens I would not even consider 4 columns.
Does your client fill all the available fields every time? I guess not. I would vouch for simplifying and breaking down this huge form into several subforms. You could then present a very basic form with all the *essential* fields, and add some kind of control which they can use to invoke the extra fields. I say your client will complain first ("You dumbed down my super-cool CRM!"), but will thank you later.
Thank you for your opinion and I agree with them because I personally prefer one column form, to me it's much better to "scan". But even with all studies and good explanations about why it's better to use one column form, users keep demanding multiple columns like the example with 4 columns I presented. if users ask it and say it is good to them, should I hear them even knowing it's not good to them? Tks
Can you show them mock ups ? This may help them visualise things they hadn't considered ?
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.
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.
Most of inputs are mandatory ones, and to me a weird thing is they don't like scrolling, I use to ask why and they say they loose time scrolling up/down the page looking for some information when there is horizontal space available and it could avoid vertical scrolling if it was used too... this is the main allegation unfortunately they don't understand too much about the advantages of horizontal white space I suppose, but I will try to make a usability test with some clients using wireframes to try to show them the difference...
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)
I was trying to keep it with top label about the studies and recommendations but it might be a possibility to try to avoid multicolumn I will create a wireframe trying this too...
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 (http://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
The term "single column form" refers to forms having the labels on top of the input fields. You will be much better off with a "two column layout": labels before the inputs, in the same line. The single col layout has many problems for forms other than a login. Firstly, the forms end up being too tall, albeit with a lot on empty unused space to the right. Secondly, labels are displayed in small forms, which is an issue for users 45~50+ years old.
@ColinSharpe I don't know exactly what is the hardware used for all staff, it's more than 10000 users... it's a very large team so I'm trying to deal with a lot of conditions but always thinking about the users with bad devices (mouses, screens etc).
@JuanLanus I agree with your arguments... thinking about it I'm trying to get other solution besides "one column" I'm finishing some new studies to try to make an usability test.
@Marcos: I'd like very much to see the outcome of your studies, even if they are in a language other then English.
There is another suggestion I recalled after my prior comments: in long forms it is very handy for the user to highlight the "current field", the one that has the focus. Browsers now apply an "outline" automatically, which can be configured. I also like to slightly change the background color. This helps the user to get back th where he was working after having looked somewhere else, his papers usually.
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:
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 easier)
- Completely hide input fields you would otherwise disable
- 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.
How to fit large form to screen width, without using colums
One useful method I've used on one of my projects some time ago is using 2 panels, which auto-align vertically on smaller screens, and align horizontally on wider screens.
If you are in doubt about whether some of your ideas will be a usability+ or usability-, let an external UI designer review your real-content mockup.
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.
I really liked your wireframe... I will test my with left align label too...
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:
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:
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.
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.
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.
@ColinSharpe here are just a few. Matteo Penzo has a famous paper about this http://www.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. http://www.uxmatters.com/mt/archives/2010/01/label-alignment-in-long-forms-paper-prototyping-for-engineers.php#labelAlignment . 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 thanks for that. I've long been an advocate for right-aligned labels. Seems a lot of people are against them initially. Nice to have some data!
@Marcos: "The framework does not support wizards" and "we can't do multipage forms" are independent facts. A few years ago I worked in a project involving 200+ fields forms, and after splitting them in pages the forms became usable.
I'll add to the list the capability to automatically save partial results, like for example in the user's local storage. With lengthy forms it happens that a user could experiment a loss of her work due to the session end. It is convenient to ensure that the session is renewed at each user interaction, not only upon submit. You can use AJAX for this purpose.
Also, give the input fields sizes proportional to the size of the expected data. In addition to being a helpful hint, this breaks monotony and helps the to get back to the right point a user who turned her sight out of the screen usually to get a value from a paper. If a designer comes out with an all-same-size-inputs design don't kill him, but give him an warning he can't refuse :-)
User testing should give more objective results. Anyway, my suggestion to complex form is to provide visual indicator of current field, see image.
- to have more concentration on a current field and
- to return to work faster after interruption or break.
The same approach you could see in Excel, which is edge case of complex form, as each cell is an input field.
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?
@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.
@AlexeyKolchenko I am a little confused by your answer. I get the point of highlighting the field (great point), but I am confused by your screenshot that shows a four-column design. Are you suggesting using four-column design? Or you are just providing an advise to utilize highlighting?
@Mo'ath thanks for comment, my piece of advice is about highlighting only. When one deals with complex layout (i.e. multi-column), you need to provide some kind of navigational help, like "you are here". Concerning four-column layout, it's not my choice, rather customer's requirement.
Based purely on what you have and visually re-arranging things, I'd suggest going from labels-on-top:
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?
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?
@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.
I think the proposed layout is much batter then the labels-on-top one. But in the mockups I see an issue, which is that all fields are the same size. IMO input boxes of the appropriate size for each input give the user a valuable clue, and also contribute to not getting lost in the uniformity. When the user takes the sight out of the screen, for example to check data that is on paper, getting back to an all-the-same-size-fields form is very error prone.
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.
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.
Give visibibility to the process to manage expectations and maintain strong trust.
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:
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.
I appreciate the strong trust comment above. I often encounter motivated users or testers that don't want to engage with a form driven process because they don't trust that their input will be collected or saved correctly
There are few questions that need to be answered:
- Is this CRM system strictly for your client's employees only?
- If so, are they dedicated to using this CRM most of their day?
- Do these users have uniform screen size?
- What kind of forms are these? Do they fill out most of the fields (vs less than half)?
- How often do users fill out new form from scratch, vs simply viewing them?
- 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.
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
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.
Since this is a web-based client-server data-entry form, it has at least 3 major use-cases:
- new record
- update record
- 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...
- Identify source document field
- If possible, select and copy the field
- Find corresponding form field
- 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.
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
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.
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.
You can use placeholder instead of showing label. It saves the height.
4Column fields are bad idea. If you are thinking to save the height, user may get frustrate to see/fill the form.
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.
You can split in 2 or 3 pages depends on you fields like steps process.
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,
You can show ads/suggestions/features of you product or website to right side or left side of the form.. Ref:Google Registration.