When developing/designing business applications you might face long (or large) webforms. You can have tens of fields and it might be a real mess. I know that it's often the client's request (you know, they want the forms to look exactly like paper documents - the famous one), but, whatever the reason, you have to think about user experience.
As you can see on the image above there are too many fields on the form. Imagine how what it's like for users to fill in the form. How 'easy' would it be to figure out validation messages? If you think this is not a common scenario, let me reassure you. I've dealt with tens of such applications in the past several years.
The key is to organize the form a little bit and group the fields into meaningful groups. But this might not be as easy as it sounds. It is not be enough to do ad-hoc regrouping. You would have to understand the business rules and processes that need to be accomplished by filling the form; is it a simple one like signup process or a more complicated one like the process of opening a bank account.
There are several UI patterns that can be used for this purpose, and here are four of them that can help you:
1. Split form accros tabs
This might not be the perfect solution but surely will help reorganize a form. Basically, Tabs pattern is very simple but you have to be careful when grouping fields. As I said before, they have to be grouped according to business rules or user's preferences. If it's possible, try to talk with users who will use the system. That will help you understand how the real process works and how to design the forms. The downside (which is also an advantage) of this approach is that users won't be able to see the entire form at once.
Recommended readings:
2. Split form to collapsible/expandable regions
This one is similar to tabs. Although collapsible panels pattern is used mainly for navigation, my opinion is that it can be used here as well. The difference between tabs and this pattern is that a user can see the entire form if they expand all the regions.
Recommended readings:
3. Split the process of filling a form into several steps
If you have business processes that support this, you should definitively use this pattern. You can divide the process of filling a form into several steps. This will not only make filling all the necessary data easier but will also guide the user through the entire process. You can use either Steps Left or a Wizard pattern, depending on business rules.
According to ui-patterns.com, these are the cases when Steps Left pattern can be used:
- Use when the user is about to go through a longer process of giving data to the system that is longer than two screens (steps).
- Use
when the steps of a process is so long that the user might get the
impression that it will go on forever without the guidance of steps.
- Do not use when there is only 1 or 2 steps in submitting data to the website.
- Do not use when the process of filling out data is easy foreseeable.
And these when Wizard pattern can be used:
- Use when the user needs to perform a task or a goal that dictates more than one step.
- Use when the user needs to perform a complex task consisting of several dependable sub-tasks.
- Use
when the user needs to input complex data into a system that is easier
for the user to comprehend parting the process into multiple steps.
- Use
when the user needs guidance: the user wants to achieve an overall
goal, but may not be familiar in the steps needed to reach the goal.
- Use when the steps needed to reach a final goal may vary due to decisions made in previous stages.
- Use when the user lacks necessary domain knowledge.
- Use when the user must complete steps in a specific sequence.
Recommended readings:
Do you know any other ways to make large forms easier to use?
Janko is a UI designer, software engineer, blogger, speaker and artist. You can read more about him and warp speed blog here.