User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Something like these:

form field group arrangement

The button below adds a new group where the user can fill each of the fields. I think that isn't best way to show because the list could be one-to-infinite and the usability is lost.

share|improve this question
Since I can't see the complete form I'm a bit confused of what the names and dates are for? Can you elaborate? – Tony Bolero Sep 3 '13 at 7:56

I'd try to avoid making a form with so many unlabelled fields, as a general rule.

However, if you have to use this, I'd suggest that you have the default text of each input in each new row be descriptive of the input type.

So instead of 6 empty input fields, have 6 input fields where the value is there, but is grey, not black, to show it is default text.

Input one would have the value "First Name", user two, "Last Name", and so on. You should then use a javascript which clears the default text when the input field gains focus, and replaces it when the element loses focus, if the element has had no text added.

share|improve this answer
That would be the placeholder attribute... – Lg102 Sep 3 '13 at 6:03
The placeholder attribute is a very neat solution, but we don't have sufficient support yet. The pattern is still pretty good though. – puppybeard Sep 3 '13 at 15:17

You can repeat the lables-row every n rows.

So in your table head you have a row like "Firstname | Last name | ... " and you repeat this row of labels every, let's say, 25 rows. The user adds new rows, and after adding the 25th row a row of labels (with different visual look) is inserted that repeates the column's content label, thus ensuring that for another screen length of new rows inserted the label for each column is visible.

share|improve this answer
Can you explain why this would be of benefit? You may well be right and this is an ideal solution, but we really need more information from you on this one. One-line answers don't really convey any reasoning or descriptions. – JonW Dec 3 '12 at 9:10
Updated my answer. – kontur Dec 3 '12 at 9:38
Much better, thanks for the update. – JonW Dec 3 '12 at 9:39

I think puppybeard's answer is good, however the illustration in Mike's answer could be improved upon by leveraging the law of proximity/similarity by placing all of the add/delete actions into the far-right column:

UI screenshot

How it would function is clicking the plus button enables the row and adds a new "add row" below. You could even experiment with not having any editable text box containing a default value, because the "new row" with it's disabled elements with default values would always be directly under new rows.

enter image description here

Depending on your use case and how many rows you think you might have, you might need to take additional steps to help identify the fields, but for up to maybe 10 rows I think this solution would work well.

share|improve this answer

It seems like there are two actions (reviewing and adding) users could be doing on this (I could be wrong, so feel free to correct me).

For reviewing existing data, along the lines of kontur's answer, I've used persistent headers with success in long tables (see the first example here

For adding new rows, I think puppybeard's answer works the best.

So you could end up with something like this: enter image description here

share|improve this answer

agreed with most of the answers. i would suggest keep it simple and be consistent whatever option you choose. i can think of couple more options for this type of data. you can have Plus button at top or bottom row but make it obvious.

Option 1 enter image description here

Option 2 enter image description here

Option 3: this option is different where you can make added entries to read only mode. User would be able to edit or delete entry by enabling row for editing. enter image description here

share|improve this answer

Your Answer


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.