Best way to add data in empty fields

Question

I want to add data in empty fields and below are the attached solutions i come up with.

Solution1: Refer to first two images: I have added one "+" button on the top of the page> When user clicks>All the disabled/empty fields gets enable> User fill data>save

Solution 2: Refer to last two images : Have added "+" button infront of every empty fields> user click> make it editable> fill data> save

Problems:

1: In second method, user have to click evry time he wants to fill any empty fields which means extra burden. Because there could be lots of empty fields.

2: 2nd method also make lots of noise in page with icons but it gives a clue of empty fields but i don't think we need extra focus here.

3:Do you think adding labels to "+" make any sense or should i add "ADD" text?

Answer 1

Check out Gmail's form for editing contact details. IMHO, that's greatest among current styles.

points to note from there: 1. Don't show any icon if it current context doesn't say so. for example, showing 2nd line for address-input is absolutely unnecessary when 1st line is blank yet or user didn't clicked the address box yet.

1. when clicked on the relevant text_box, then show relevant icons; for example, "recycle bin" icon for delete current text to blank. Or, "+" button or "Add another" text for another address, "..." or "Details" for expanded view for input.

2. when done with a text_box, check that for wrong input. If wrong, highlight with Red-color, or show "x" beside. Else, mark with Green or tick.

...

P.S. Keep in mind "simple isn't simplistic" to attain.

Answer 2

Both solutions are confusing and require excessive actions from user.

I think common practice here is the following:

1. Make field editable if user have permissions to change it and you are expecting him to change it.
2. If field is required to be filled, make user know about that. E.g. mark field label with red asterix.
3. Validate user input as soon as you got it. You can validate each field every time user leaves it (on focus lost event). If mandatory field is not filled, outline it on the form with clear message to user that he is required to fill it.
4. If you are using Submit button to save whole form, then validate user input on submit. Outline all required fields missing data. If your form contains a lot of fields consider displaying validation errors recap on top of the form, so user will have clear view of all the fields he is required to fill.

Answer 3

I'm still not sure why you have to enable to empty field before to fill it (is that to access a kind of admin?), but here is how I would do;

Instead of adding small icons to tell whether you filled the input box, make it more visual and simply add a background color inside your field. Define a redish color when not filled, and a greenish color when correctly filled. The enter button would simply consider it as "filled" (like a comment in Facebook).

EDIT: This might not work if you cannot add any information within the input box or beside, but this is how I would do it: Make all empty fields light-orange with an example inside. When the user clicks, the example disappears and he can put whatever he wants. While writing, the input box is either white (like for the address) or Red (Subadministrative area) with a small explanation of what is happening. Finally, once the input box is not in focus anymore (user clicks elsewhere, tab or enter), the text will simply display like your other already filled lines (e.g. Street)

Answer 4

Here's a completely different approach that I'm working on at the moment. The form is divided into sections. Each field can be altered immediately, without enabling anything. When something is changed in a section, the 'Save Changes' option becomes available. More fields are added automatically while you along. In the example below I just entered a new Course at the bottom, called 'course 1'. Automatically, the form extends and a new empty field is added to the one I just filled in. The 'Save Changes' button has become available for that section.