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
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.
No comments:
Post a Comment