Action buttons placement related to data tables

Question

Background

Over the course of the last few months on common element shared between a large number of internal development teams, is the need to provide functionality on a data table. Once of the primary pieces of functionality almost all of them have is the "Add" record/row options. In some cases the data in the data table is a simple summary, in others its all of the data for current process. While some of the data tables can grow quite large, many of them are fairly small, and when data is large records are hidden through pagination.

Issue

The only thing these development groups don't share is common placement of these "action" buttons. What I'm looking for input on is what is the most usibile place to put these buttons. I have been leaning toward the top right, but should they go inside the table (in the caption area), or above the table? What is the most usibile location?

Example Mockups

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

I would say make the action left-aligned with the table. Since this is a primary action associated with data beneath it you want to place the action in a space that users will immediately look; top-left.

Additionally, you want to create a visual connection between the primary object (i.e. "Account") and the action. This would be further reinforced by place this action directly above the Accounts column.

Finally, if this table has liquid length then having the button right-aligned would push the button way to far on large monitors. Keeping the button left aligned would prevent this.

Answer 2

The actions are affecting the records, so the first layout seems more logical. Still, both are explicit enough and the answer is more related to the context: the space you have between the title ("Data Summary") and the right side of the table for example.

Note that you may also want to link the actions to the table a bit more. For example, you don't need an "Add Account" button. Instead, you may provide an empty line on the end of the table in order for the user to fill the missing fields.