Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

enter image description here

enter image description here

enter image description here

enter image description here

share|improve this question
    
Could you explain why the user has to enable an empty field to fill it? thx –  leMoisela Nov 21 '12 at 7:33
    
My thought was as we cant show (N/A) or other textual description there. I should show some hint on empty fields but i agree on below commets; we can show red or empty input fields initially. But my original question is still unanswered –  Hem Nov 21 '12 at 8:39
    
well I wouldn't put any "+" nor "Add" anywhere. If an empty field is redish, the user will know there is still smth to do there. You don't need to put a (N/A) or other textual stuff. In the case these entry are not mandatory, maybe i'll go for a presentation where you have everything that was filled listed, and at the bottom of very thema (say "Company Address") you'd have a "Add" (or +) button. If the user clicks on it, the non filled inputs would appear underneath and he would/could fill them. If that wasn't clear, I may add it to my answer below :) –  leMoisela Nov 21 '12 at 9:13
    
lemoisela, had discussed it with my friend, his thoughts are different. He is bit relucdent about using red color as red bg refer to error and he want to add some textual description infornt of every empty fields[I desagree with him completly:D] Also we cant opt for your second solution like adding empty fields at the end becaue of some business cases. Btw thanks –  Hem Nov 21 '12 at 9:29
    
I updated my answer, still not sure whether you can/want to do it like that. When you say "we cant show a textual description" you mean that you don't want or that technically, you're not allowed to/don't have access to it? –  leMoisela Nov 21 '12 at 10:26

4 Answers 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. enter image description here

share|improve this answer

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.
share|improve this answer

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.

share|improve this answer
    
Could you elaborate a little on that answer and make UX reference that will make this answer more valuable to others? –  Benny Skogberg Nov 21 '12 at 14:15
1  
would love to include some images; but my poor reputation is keeping me off ... :( –  kmonsoor Nov 21 '12 at 15:04
    
Now you can :-) –  Benny Skogberg Nov 21 '12 at 17:51

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)

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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