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!