How to improve usability of a form with lots of fields

Question

I'm tasked with re-designing a HTML browser-based form which is completed by technicians as they complete various parts of a task. At various stages of the task they return to this form and fill in various fields. The form contains around 125 fields. Most are textboxes allowing freeform text entry, but there are a few combo boxes, and also some checkboxes and radio buttons. There are also accordion sections (only one can be expanded at a time) and within some of these accordions are multiple tabs!

Occasionally they need to add new options to the combo boxes too, and must navigate away from the form to do this.

They hate the form because it's so long and difficult to navigate.

Also, it's not currently mobile friendly, and they sometimes need to complete parts of the form using tablet devices.

Also, they will be revisiting the form later when they want to look up the entered information about the task.

I would be most appreciative of any suggestions/ideas on how to redesign this form in an easy-to-complete and navigable layout. I also have to ensure I clearly show the user any input errors when the form is submitted.

Some ideas that may or may not be good:

• Use auto-complete combo boxes instead of text boxes, thus allowing the user to pick from previously entered values as well as add new values.
• Use tabs instead of accordions.
• Shortcut links or hotkeys?
• A "wizard" format probably won't work, as they change various fields at various times during the task.
• Allow the user to add fields only as needed, dynamically, instead of presenting a form with all fields having blank boxes?

Thanks for any suggestions or guidance!

Answer 1

Assuming we cannot split the form on multiple pages, here are some guidelines how to make it more usable:

1. Divide the web forms on sections

Grouping related input fields and visually distinguising them will improve the discoverability of specific forms. You can use even different colors for the different groups.

2. Use inline validation

This makes the forms more usable if error occurs. With inline validation it is easier for the user to locate the exact erroneous field/s. Also, the user don't need to submit the form to find out that there is an error which saves time.

3. Display hints and examples

If the user does not understand something about certain field help hints will definitely be useful. The learnability of the form should be increased.

4. Use default values where possible

We may already know some information about certain fields or expect them to have a certain value. For example, when creating the form you may have date of creation. It will be wise to input todays date, rather than making the user do it.

5. Use visualizations to support working memory

20% of the human brain is wired for processing visual cues, therefore visual representation of objects (cars, machinery) are processed much faster than text only. For example, when the users report a car claim is much easier to point on image of a vehicle which parts exactly were damaged, rather than using the checkboxes only. Problems with naming conventions are also eliminated this way.

6. Support undo

Sometimes users might enter erroneous information and want to go back and undo their progress. It is vital to provide an undo option as it is listed in one of the Nielsen’s 10 usability heuristics.

7. Support for expert users

Expert users use the TAB keyboard button to move quickly between input form fields. Make sure that you provide sequential order of fields so that the users are not confused where their tabulation went. This way expert users will be able to fill the forms faster than manually selecting each field with the mouse.

Also, your UI should support submit on enter, or other keyboard shortcuts, that may help your expert users.

8. Highlighting the active form field

Because there are lots of form fields (125) users can easily lost which field they were looking at. This is why it is a good idea to highlight the active form field.

Answer 2

I suggest having everything visible on one page, with required fields appropriately marked. Everything is open and accessible at all stages of filling in the form.

When making forms for an internal system, I found that users preferred the "open" format because they felt like they had much more control. Sections were just a simple scroll away. Obviously, each section is clearly marked by a heading, and - if you have a giant form - perhaps there's a navigation menu on the side (with smooth scroll!) but the general idea is to keep things open.

Also, if you haven't already, implement a save button that sticks to the window. This boosts user confidence and also may prevent catastrophe if the internet cuts out (especially with a long form like yours).

Of course, since you're working with technicians (not consumers as I was), be sure to test your designs with them as appropriate. I found that opening up a form often requires a bit of creative restructuring - which should ideally be in terms of simplifying the form and reducing how much the user needs to put into

Additional Note: A customizeable template system (like your prior-value combo boxes idea) may also help technicians fill the form faster.

Answer 3

Consider the following:

• Use Tabs - Have a common (non-tabbed) area with key fields always visible and group other fields under appropriate headings
• Hide fields that aren't relevant to any particular workflow journey
• Highlight or group fields that are likely to be relevant to the relevant stage in the workflow journey
• Create a "simple" form that only contains the key/most used fields and allow the user an entry point into the "full fat" form for any deep-dive/off-piste data entry tasks

Answer 4

There are lots of ways to make your form simple and more useful:

1) Use groups to label and its related fields

2) Use single column layout: for example use city, state, zipcode can be present in same row.

3) Match fields to the type and size of the input

4) Distinguish optional and required fields

5) Provide highly visible and specific error messages

6) Avoid unnecessary long form : always try to eliminate those fields that are not relevant.
Hope it helps...

Answer 5

You have a very clear signal from your users - in your own words they "hate long forms" (hopefully you have the data to back this up). You have 125 fields so I am not surprised by this reaction.

So you need to find out what they really need, to change their perception and meet their needs, which is likely to be be a much smaller form than what they currently have.

Obviously there are some things in our "designer's box of tricks", to help reduce the perceived size, e.g. using progressive disclosure

Summary: Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone.

Interaction designers face a dilemma:

• Users want power, features, and enough options to handle all of their special needs. (Everybody is a special case somehow. For example: Who wants line numbers in a word processor? Millions of users, that's who, including most big law firms.)
• Users want simplicity; they don't have time learn a profusion of features in enough depth to select the few that are optimal for their needs.

Progressive disclosure is one of the best ways to satisfy both of these conflicting requirements. It's a simple, yet powerful idea:

1. Initially, show users only a few of the most important options.
2. Offer a larger set of specialized options upon request. Disclose these secondary features only if a user asks for them, meaning that most users can proceed with their tasks without worrying about this added complexity.

Designing the progressive disclosure is not an easy task, because you need to identify the fields that really matter to users, and then work out how you are going to organise all the other stuff, which will be called on demand if needed.