Help with the positioning of a SAVE button

[Clone45]

Hello! We’re working on a desktop app design. Initially, we had the Save Changes button at the top of the application, like so…

This button would apply to all of the form elements on the page, even those in different categories. For example, you could make changes to your personal information, then update your privacy settings, then your Date and Time settings, and finally click Save Changes.

This pattern seems to have some drawbacks:

1. Form validation errors are difficult to manage, especially if the inputs are in a category that’s not selected.
2. Generally speaking, for forms, the save button is at the bottom. I’m worried that this might be confusing for our users.

I’m trying to come up with a a logical way of selecting where the save button goes. Here’s my first attempt, and I’d love your feedback:

RULE #1: If the submit button is associated with a form, it should be at the bottom left of the form, or full width.

RULE #2: If the submit button is associated with a document within an application, then it should be on top. Examples would be:

• A document in Google Docs
• A page in Confluence
• A workflow in Hubspot

What I would LOVE would be an article or reference where someone smarter than myself has written about this.

Thanks!
Bret

[dougcollins]

Jakob’s Law: “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”

A quick survey of the location of “Save” buttons for forms shows that they are traditionally under the form (for the most part.)

That said, when in doubt, find out!

If you have the ability, a simple way to do this is to setup an A/B test with the button in both locations and measure relevant success metrics (time on task, completion percentage, bounce rate, etc.)

In general, form buttons are traditionally below and to the right of the relevant form. Unless the “Save” button performs better above the form (and my hypothesis would be that it won’t), I’d keep the “Save” button in the traditional button location.

[Clone45]

Thanks Doug! That’s where I’m leaning as well - putting the button below the form.

In this case, I’m torn about putting the save button to the right or to the left. Putting it at the right suggests, to me at least, that clicking on it would bring me somewhere new. In this situation, saving doesn’t lead to a new location. Instead, a toast notification will alert them that the action was successful.

I’m by no means an experienced UX person, so I love your idea of running A/B tests. We don’t have that pipeline figured out yet, but it’s on my to-do list.

Thanks for introducing me to Jakob’s Law. Good call.

Bret

[Brian]

Considering that your users will typically navigate to one category, make a change, then click Save Changes, I think placing the button at the bottom/left is best.

If your users were frequently making changes across multiple categories, then you’d have a good argument for placing the button at the top.

BTW, the validation problem you mentioned can be solved. Hit me up if you want to know more. jbsalzman@gmail.com

[11111]

wow amazing