I am developing a web application for a concrete and construction contractor.

Their web application consists of a form that allows them to insert projects into the system. In the example below, I have an image of how the design is currently handled to input data for a list of items. In the existing form there are several more items.

The current problem is that they don't use all of the fields displayed on the form right now. I would like to create an easier way to handle this process instead of having to tab through each field. Although, in some instances they do use several of these items... Sometimes they even need to add new items, which is handled by an "Add Row" and a free form input box.

Are there any good ways to improve this design?

After brainstorming the idea, I thought of using a multi-select dropdown to allow the user to quickly type in the item. After the item is selected, they are presented with a dialog box to add values to the quantity, overtime, and taxed. If the item is not in the system already they can add the new item through an input box below the drop down that pulls up the same dialog box to add more information.

Overview of current Design


Is there a way to find out which rows are most commonly (or always) used? If so, displaying those expanded by default is recommended regardless of the following.

Collapsing less used rows into a combo drop-down sounds reasonable, but if your goal is to make the navigation through the fields more efficient, a consideration must be made for requiring the user to keep switching input methods (mouse / keyboard) to add new rows. Hence, the drop-down should allow the user to select all the rows they want at once.

The two "column" layout can also be perceived as complicated to navigate through, especially if all labels have multiple fields. Valid hypothesis can be made that stacking all items vertically would increase overview and thus streamline the process. Last row should provide an option to "add more". Additional space provided then on the right could be utilized for the total / summary - again, clearer overview for the larger picture process.

Adding rows through a combo select - pending context, users could also delete rows from the selection (x)

  • Thanks, but it seems like extra key strokes to enable or disable projects. Although, enabling and disabling is a good idea and I believe I will try to use it. Thanks! – Ratty May 28 '14 at 23:22

You could implement a navigation system using the four arrow keys (and maybe the enter key, as a duplicate of the Tab key) in order to move from field to field, as if you were in a Microsoft Excel calc sheet. And switching to another field could automatically select its content so you can quickly copy/paste using the native OS shortcuts.

Maybe not the greatest idea though. It is maybe not a common thing to do, but once the user know it's available, navigation through fields should be greatly improved.

  • Thanks for the response! Although, making a different navigation system might be unnecessary and may slow down users. – Ratty May 28 '14 at 23:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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