Circumstances where a user is adding a list of items to a page and hitting save then adding another. Where would the user expect to see items saved prior? Is it above the "add another" button or below?

  • Need more information to be able to give you a better answer. – Igor-G Nov 13 '12 at 12:00

It's kind of tricky to answer, since there are both options "out there". But the one I see the most are either above or to the right - seldom at the bottom. The reason I think is other controls such as a text input field where you expect feedback above the text, rather than below. To be consistent with that - keep feedback on the same place throughout your application.


download bmml source – Wireframes created with Balsamiq Mockups


So there's two issues you're trying to address:

  1. Communicating to the user that the item is added successfully.
  2. Let the user know that they can continue to add items.

Issue 1:

  • Have success/error messaging at the top of the page when an item has been added as @Benny has shown.
  • Messaging in a dialog/modal window/lightbox; use this option only when you want to disrupt the user flow for whatever reason (e.g. it was a loaded transaction), or the saving takes a while to perform.
  • Flashing the newly-added item.
  • Changing the state of the save button. (Assuming you have both a "save" button and an "add" button).

Issue 2: Where you put the controls depend on the number of items in the collection.

If the number of items in the collection is small, it shouldn't matter if it's consistent at the top or bottom. If you expect there to be a ton of information, then it is worth repeating at the top AND bottom (except in the no data scenario--having 2 sets of the same controls with no content in between will like a mistake):

Newly added row with highlight

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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