1

I am currently building a web application which has large forms (10 - 30 input fields). I am using DevExtreme's DxForm to do this. The users using this form will be on desktop computers 100% of the time. Some input fields can be read-only based on whether you are viewing or editing the data. What are some best practices to follow when building large forms which will be used every day by people doing their jobs in terms of;

  • Label position
  • Font sizes
  • Font weights
  • Fonts used
  • Grouping form items together
  • Input field layout (Multiple columns vs 1?)

Imagine having the following fields;

  • ID
  • Forename
  • Surname
  • Nickname surname
  • Nickname forename
  • Maiden name
  • Gender
  • Birth place
  • Birth date
  • Nationality + nationality code (3 letters)
  • Marital Status (Drop down)
  • A yes/no flag (checkbox)
  • 7 address sections (for example, should you have a label for each address part or just 1 for "Address"?)
  • 2 text areas

What the form currently looks like (zoomed out so it can all fit);

form mockup

7
  • How does device use percentages breakdown among users? What percent mobile, tablet, desktop...? Commented Jan 22, 2023 at 12:45
  • Do you have any examples, mockups, wireframes you're considering, you can share in your question? Commented Jan 22, 2023 at 12:47
  • 100% of the use cases are desktop Commented Jan 22, 2023 at 13:07
  • I work at a software house which doesn't have any designers so we did little to no wireframes or mockups but started implementing straight away. I added how the form looks currently in the question. Commented Jan 22, 2023 at 13:18
  • Thanks for updating your question. --- Describe your users. Do they use the form often? What are the most common tasks? Entering new records? Editing existing records? When editing, how many fields are typically edited? Which ones? Commented Jan 22, 2023 at 14:15

2 Answers 2

2

Here are some brief notes:

Chunking

Big, complex forms can be intimidating for users. Break them into smaller 'chunks' wherever possible. A user who sees three pages with 10 fields on each page is more likely to complete the form than a user who sees a single form with 30 fields.

Logical Grouping

When you're thinking about Chunking, try to organise the fields into groups that make sense to the user. An obvious example is the collection of fields needed for an address: you naturally want to see the street address, city, and country all grouped together because they are related to each other. The user is already thinking about their location so it's better to ask for all the data about that in one go. What other connected fields might you have that can be drawn together into groups to try to smooth out some of the mental leaps for your user?

Spacing

When you've figured out the groups of fields, make sure the change from group to group is obvious to the user so that they know when to start thinking about a different data set. You can look up 'gestalt grouping/spacing' if you want to know more about how this works but essentially, just add some spacing between the groups to show a change.

There are all sorts of ways you can encourage users to complete forms that are just too numerous to go into there and probably rely too much on user research for where you are right now but the basic ideas above should get you some way towards making good forms.

If you want to know a little bit more, I wrote a LinkedIn article about form engagement which may be worth reading.

1

I sympathize with your situation - people assume you are building a webform and care about conversion rates etc. We also build large forms that are internal tools and people's advice about engagement etc is not helpful. Our users are paid to use these forms - how do we make them efficient and fast? I found user testing to be very useful, it's easy to watch people fill out a large form and realize how strangely they are doing it.

Having said all that I do recommend articles on UX and usability rather than form design. Here is one I found helpful. https://cxl.com/blog/form-design-best-practices/

Your Answer

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

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