The application I am working on has dynamic tables that gets longer as the user adds more objects. The user is able to edit the properties of these objects and/or delete them.

I'm quite confident of the button placement being on top of the table rather than the bottom (if it was on the bottom, the buttons would move along with the table getting longer which may get quite annoying). However, I'm unsure of the ordering of the button and whether they should be separated (to avoid accidentally deleting).

enter image description here


It is best to keep destructive actions away from other actions. Even when you have a confirmation for your destructive actions, not accidentally clicking them is the better route then having to cancel out of a confirmation. This means Option B would limit user frustration.

I would recommend swapping the buttons in Option B:

enter image description here

This is because your combo boxes are on the left side and the user does not have to cross the horizontal table length with their eyes or the mouse in order to select multiple boxes and then click the edit. Having to do this for the delete action also makes it more difficult to accidentally click the button.

I'd also suggest duplicating the buttons on the bottom of the table. Might look weird for a shorter table, but not having to scroll to the top would be appreciated by users when interacting with longer tables.

You can also add single row actions on mouse over, again placing the edit & delete buttons appropriately as to avoid accidental activations.

enter image description here

(note that my placement in the above example wouldn't be the best, just an example)

For similar examples and suggestions, see answers to the following question: Many buttons on the page, ways to improve?

  • I forgot to mention that below this table is a similar table but for another category (let's call it Object 2) so I'm not sure if having the same buttons on the top and bottom of each individual table would work. – Vinson Jan 14 '14 at 19:55
  • I actually agree entirely with this, keep them separate; though I would swap them over. For touch screens (which do need to be considered I believe) most users are right handed thus meaning the button on the right can be most easily pressed - keeping on the same theme of making destructive the hardest it would mean swapping it – tim.baker Jan 14 '14 at 21:41

I would not use the edit and delete button at the top of the table, especially if your table can grow massively, as there will be potentially a lot of scrolling up to access them.

I would get rid of the tick boxes (first column) and add have and edit and remove button at the end of each row. Regarding "Accidentaly Deleting", you should always ask the user to confirm or cancel exemple

  • Concerning having multiple buttons on every row, see this question and the associated answers: ux.stackexchange.com/questions/48244/… – Evil Closet Monkey Jan 14 '14 at 18:55
  • 1
    Don't think this deals with the question properly, in the above example it is check boxes allowing them to delete multiple entries in one... Sorry :) – tim.baker Jan 14 '14 at 21:42

Being together shouldn't be much of a problem, aesthetically it looks better to my eyes. You could possibly add a confirmation pop-up when clicking on delete to avoid accidental deletions if you put them beside each other (which should be the case whether they're together or not).

As for being placed on the top or bottom of the list, why not both? Consider a user scrolling down, marking off check boxes as he goes. Once he reaches the end, should he have to scroll back up to do anything? There should be buttons down there. Your list shouldn't be that long, maybe use pagination to keep it at a set length.

Keeping it at the top is also useful for people just checking off a few from the top and then still being at the top.


This is a complete solution and you wouldn't need any checkboxes for separate "Edit"/"Delete" button anymore.

  • Now the rule is these controls appear as you hover your mouse on top of the row.
  • You delete one object at a time
  • Likewise, you edit one object at a time.

A side note for keeping check-boxes is that you cannot edit multiple "objects" together and having a button and check-box set which also allows you to select multiple objects and click "Edit" would be wrong unless you can actually edit multiple objects together.

Credit for the mockup goes to @Evil Closet Monkey.

enter image description here

  • 1
    The reasoning for the checkboxes is because users can actually edit multiple objects at once. – Vinson Jan 15 '14 at 17:42

I think this would be easy enough to test quickly to determine the better option of the two.

Sit a few people down in front of each option and ask them to perform a few tasks (edit and delete). Watch closely where they move the mouse before they click - if they move the mouse to one area before moving somewhere else, you'll know that that is where they expected the action to be.

Keep track of the numbers for this behavior and determine if more people were able to quickly and effectively use one layout over the other. If they're even, then it probably doesn't matter that much.

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.