In-line editing, display at the top or the bottom of a list?

Question

I'm working with a nested list view. In order to add data to the list, the user initially sees an "add" button. Clicking this add button prompts a search bar where the user can then search for the desired content to make additions to their list.

My question here is, should the add button/search bar be at the top or the bottom of the list?

Aesthetically, I like the add/search to display at the bottom because then the results never overlap the list and additions are pushed to the bottom. However, what happens when the user has a long list? They would likely have to scroll down to the bottom to find the add button.

Another question to consider is if I do implement the add/search at the top, would it make better sense for the additions to push to the top of the list or the bottom?

Answer 1

If the list has the potential to be lengthy and scroll off the screen, I think I would go with the add option at the top and any newly added items appear at the top of the list so the user has that immediate feedback of a successful addition. Admittedly, the drawback of this is that the user will have to scroll through the list anyway if they to make sure that what they are adding is not going to be a duplicate and then they will have to scroll back up to the action.

Alternatively, you could consider the floating action button concept (or sticky toolbar for web), where the "add" option is always on screen, regardless of where the user is in the list.

Answer 2

Given that this list could be long and scroll off the screen, I wouldn't rely on putting the Add button at the bottom, as some users will have trouble finding it. Rather, I would put the Add button at the top right, probably pinned on scroll, as a biggish CTA. Additionally, as a convenience, you could put an add button at the bottom of the list, for example displaying the words "New Item..." as the next item in your list, which the user clicks to add something right there.