How to Label Submit Buttons

Posted by: Josh Walsh in Design.

Submit button labels are often neglected as part of form design.  Clear actionable text on these buttons is key to a person understanding what happens when they click on it.

HTML uses “submit” as it’s default text, which isn’t ideal in any situation.   We often find ourselves labeling buttons badly, just because it’s become standard to do so.

Best Practices When Labeling Buttons

1. Shorter is better. I should be able to, in a glimpse, understand what action will be taken on the form data I’ve just filled out.
2. It should be consistent with the form title. Consistency between the title of the form, at the top, and the submit button of the form, at the bottom, is important.
3. Includes a verb and a noun. For optimal clarity, I like to use a verb and a noun in each button label.  The verb indicates the action being taken, and the noun indicates the data being submitted.
4. Buttons should be large. Fitts’ Law predicts that the time required to rapidly move to a target area is function of the distance and the size of the target.   Put more simply, it’s easier to click on large buttons than small ones.  I generally tend to make the font-size about 20% larger on submit buttons than on the surrounding text, with plenty of padding.

Examples of Bad Button Labels

Here are a few examples of bad text.

• Submit
• Continue
• Save
• Update
• Go
• Click Here
• Reset

A good friend of mine and great designer, Brad Dielman, fell victim to WordPress’s bad button use.  It’s a simple change, but makes a big difference.  His new site is slated for release in 2017, and I’m sure he’s taken this into consideration.

Google Analytics does a good job of naming buttons with their “Customize Report” functionality.

Everyday examples, and how to improve them

On a password reset form, it’s better to use “Reset my password”  than simply “reset.”  The addition of the noun “my password” makes things even clearer.

When updating account information: “Update My Account” is better than “Save.”  Again, the inclusion of the noun makes the action clearer.

When asking for comments on a blog, I prefer to use “Post Comment” over the default “Submit.”

The occasional exception

I often leave out the noun on search forms, as the context of the search is generally obvious.  In cases where the context of search is not obvious, including the noun makes it clear.