Can you Suggest form improvements?

[dennis-fedco]

I have the following form (attached to this post as a Thumbnail).

 

I want to make it user-friendly, specifically, bring it up to the modern web standards, namely, I am looking for things that that I think are modern and are user friendly and are great when considered by themselves, but together they may even conflict.  And I need some help figuring out what will work best for my situation and what is technically possible.

 

Right now the user enteres fields into the form, into the editable fields on the left.  Then user can save the fields by clicking Save, or click Del to delete the row.  User can Add a new row at the bottom.

 

The things I think will improve the form are:

 * implement a double-click feature on the editable fields to make them editable, and save them automatically upon `blur` event

 * user can use `Tab` key to navigate from one `<input>` field to the next, normally, as before, and edit values inside.

 * user can save all fields entered so far, and restore them via some mechanism (i.e. either to web page or to clipboard, and restore via direct paste for example, or file upload..)

 * Maybe I can use DataTables, but I have never used it so I don't know what could be done

 

Can you help suggest form or UI improvements for the current form that I have?  I may also have some questions on first steps or first examples of implementing particular ones (possibly making a separate post for those)

Edited November 7, 2014 by dennis-fedco

[Psycho]

I am not a UI expert, but I did stay at a holiday Inn last night do work with some who are. So, I can say with certainty that the right UI is directly related on the context of the data being presented to the user and understanding "how" the user would use the data. Your example has been genericized so it is unclear what the data is or how it would be used. So, any suggestions provided would need to be evaluated on the actual need.

 

I think the idea of making the fields not editable until the user double-clicks (or used some other control for enabling them) is a good idea. The display of the tabular data definitely needs an update. I don't know how many rows of data you would normally display, but alternating grid rows might be a good idea. As for "adding" records; instead of having the input fields always be displayed, you could just have an "Add" button and then provide a dialog when clicked. The benefit of this is if you want to have a view where the user can just see "the data". But, if the users will more often than not be adding data, then having a separate dialog might add more work to the user (again it's all about context).

 

I assume the values of the fields to the right are dependent upon the editable fields on the left. If so, you would want to implement AJAX to auto update the rows when changes are made. This *could* be a problem if you want to update the row/record whenever an individual field is changed if that process has any delays.

 

Here are a few pages that may provide some ideas:

http://www.editablegrid.net/en

http://demos.telerik.com/kendo-ui/grid/editing-inline

http://mindmup.github.io/editable-table/

[QuickOldCar]

I really like the second one, am going to integrate this into my project.

Thanks Psycho.

[QuickOldCar]

I thought the above ones were a bit bloated, not to mention not all free.

 

I managed to make my own version using the html5 contenteditable attribute

 

Saw this tutorial, used my own ajax and secured the request form with sessions and a lot of checking

 

http://w3lessons.info/2014/04/13/html5-inline-edit-with-php-mysql-jquery-ajax/

 

Works like a champ, I made a domain policy restrictions table with wildcard,allow/ban