4

We are building an application that allows a user to build a form.

The user can enter the name of the label, pick the type of the input field and indicate whether or not it should be mandatory. The user can then click a button to append the new field to the form.

The new items get added to the bottom of the list by default, but the fields in the form can be reordered using drag and drop.

Would it be more logical to put the input fields to add a new form field above or below the list of fields already in the form?

Personally, I think it makes sense to have it below the list of fields, because the item you're adding also gets added to the bottom of the list. However, this looks a bit weird when there are no or only a few items in the (scrollable) space available for the items.

Available area filled

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Available area not filled

mockup

download bmml source

Improve this question
6
  • Is there a reason the parent (scrollable div in your mock) has to be a set height? Is it part of the design?
    – TJH
    Jul 10, 2012 at 13:05
  • @TJH: Yes. It displayed in the right half of a fixed size popup window. On the left side, we show the general properties of the form (to whom submissions should be mailed, what the subject of that mail should be, ...)
    – Kristof Claes
    Jul 10, 2012 at 13:17
  • @VitalyMijiritsky: the question you refer to is about the position of new items. My question is about the position of the input fields.
    – Kristof Claes
    Jul 10, 2012 at 13:18
  • I see. It's a tricky one. Without knowing the UI I don't know if this will work but could the add new item append to the bottom of the list rather than bottom of the frame? That way you don't have the "Gap of disassociation" mentioned in the post. One reservation is times where the list extends beyond the fold by default - the user won't see the addition form and might not know it exists.
    – TJH
    Jul 10, 2012 at 13:20
  • I've been thinking about that too: put the input field right below the last added item, and move it down after adding a new item. I can also make the row of input fields always visible and put a scrollbar on the list.
    – Kristof Claes
    Jul 10, 2012 at 13:23

4 Answers 4

Reset to default
2

I would suggest putting that add controls at the bottom of the screen. In most cases when people think about adding items to the list, they add them to the bottom. As such I would suggest putting the controls there. A real world example of this would be Drupals Content Type creation screen. See screen shot below.

enter image description here

A nice enhancement would be to add the ability to drag an item up or down to change placement. It is possible that a user might have to add an field after a form is first launched. Simply tacking new inputs to the end could become confusing if logical inputs are not grouped together. Again a screen shot of Drupal menu system best demonstrates this functionality.

enter image description here

Improve this answer
0

Why not exploit the best of both worlds - put the 'add new' control at the top, but prepend new elements to the start of the list, rather than sticking them on the end? This will allow you to transform the add new form on submission, but provides a design that still works well with a small number of items.

Improve this answer
2
  • Because it doesn't really make sense to add new items to the top of the list. Most of the time people know what fields should be in their form and they build it top to bottom. If we add new items to the top, people would have to build their forms bottom to top.
    – Kristof Claes
    Jul 10, 2012 at 12:46
  • @Kristof Claes - I've seen this pattern numerous times, especially when lists are ordered with newest items first
    – Jimmy Breck-McKye
    Jul 10, 2012 at 15:23
0

I agree appended items should go at the bottom of the list, and then should be able to be sorted up the list based on priority, i.e. higher priority items are closer to the top which reflects a top-down priority list for the to-do items.

Very similar to how trello's UI is laid out.

Improve this answer
1
  • I'm already adding items to the bottom of the list. My question though was if it would be best or more logical to put the row with input fields above or below the list.
    – Kristof Claes
    Jul 10, 2012 at 16:02
0

Both versions have their pros and cons. By placing controls on the top it looks like a toolbar with the main functionality to add new items. But process of adding items on the bottom must be visible. If you place the controls on the bottom the adding functionality is perceived less.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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