What is the best location for the "Add New Button"?

Question

I have a list of records. A new record will be added on a regular basis, but only one record at a time. Having trouble deciding on the best location for the "Add New Button". Clicking on the button will open a new window where the user can enter record details.

Two options are being considering:

1. A list with an add record button outside the list (above, below, left aligned, right aligned?)
2. A list with a permanent additional row (either top or bottom) with a link to add new record. Making it clear the new record will be added to this table.

My client loves 2, but I'm having trouble find any existing examples. So is this used anywhere successfully?

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

Answer 1

Design for your workflow!

Model out why and how your users create records.

For example:

• If users are likely to open the page with a clear intent to create a record, then placing the button immediately at the top left allows users to accomplish that task with minimal friction (no need to hunt for the button)

• If users need to scan the table before creating a record (eg to see if there's already an existing record) then placing the create button at the bottom helps that workflow.

• If 90% of users read the table and only 10% of users add records, then placing the table at the top and the create button below is a better workflow for 90% of users.

...these examples should help give you an idea for how to approach modeling your user work flows and design an effective solution based on real workflows and productivity, rather than just copying what some random other site does.

Answer 2

The position of the element depends on the amount of content. If the element is positioned under the records, a user needs to scroll further down as he adds more rows.

Looking at the Floating Action Button

Google's Material Design Floating Action Button is often placed at the bottom right side of the screen and is positioned absolute from the elements on the page. There have been some UX complains regarding the FAB button, because it could block the user's view in some situations. If that's the case on your website, you should place the button at the top right part of the content.

When the user adds many rows, positioning the button at the bottom right side of the screen in a fixed position would be most user friendly.

Button or link?

According to Fitts' law, it should be a button if the user clicks it regularly.

Answer 3

Continuing from Razor9012's answer:

Placing the button at top is a good idea. Reason being let's say if your table has numerous rows which covers the entire viewport. Then in this case, your button will be hidden from the viewport. Users will have to scroll down to actually add a new row. Most users will not even know that there is a add button if they have a small screen and if they did not scrolled down. The images mentioned in the Razor9012's answer are good examples for this. The idea is to make the primary action button visible to the user.

Answer 4

From what i've seen top right seems to be the most common placement for the add new button, with the exception for middle eastern region where they read from right to left.

http://blog.mailchimp.com/wp-content/uploads/2013/06/Redesign2x_iPad.png http://blog.datalicious.com/assets/sites/2/TagSummary1.png https://www.submarinecrm.com/assets/post-shortcuts.png