Submit and Reset button, what's the best order?

Question

In a form with a Submit and a Reset button and the end, what's the best order for the user experience ?

Submit first ?

Or Reset first ?

Answer 1

I would suggest removing the Reset button entirely. See this excerpt from the Nielsen Norman Group:

Reset: Don't Use

The Web would be a happier place if virtually all Reset buttons were removed. This button almost never helps users, but often hurts them.

Reset clears away the user's input on a Web form, but why would people want to do that? The Web is characterized by frequent movement between pages and users rarely encounter the same form twice. Thus, a Web form is almost always cleared when the user sees it. Even when a user revisits a form in a single session, it is usually faster to edit the old data than to erase it and start over.

The Reset button hurts users in three ways:

1.) The worst problem about Reset is that users click the button by mistake when they wanted to click Submit . Bang — all your work is gone!

2.) Having two buttons at the bottom of a form clutters up the interface and makes it harder for users to clearly see their next step. Some small amount of wasted time is spent scanning the useless button and deciding which of the two buttons is the correct one.

3.) Even when users do want to eliminate some of the data they have entered into a form, it may slow them down to have a dedicated button for doing so, since the extra button means that users have a choice: edit the erroneous fields and replace the old text with the new text click Reset and type the new text into nice clean fields The extra choice requires extra thinking, and the time saved by using an optimal interaction technique is often smaller than the time wasted on having to think instead of just moving ahead with a single interaction technique that is always used. It takes at least one second and often two seconds to decide between two possible interaction techniques which is why it is usually better not to offer users a choice. (A second may not seem like much, but it translates into about $100 million in lost productivity per year world-wide.)

http://www.nngroup.com/articles/reset-and-cancel-buttons/

Answer 2

Others have mentioned the 'Reset' button isn't a good idea to begin with. However, if you really need more than 1 button, the 'proper' order really depends on what computer your site is being viewed on:

On the Mac, the "default" button is expected to be on the far right, others to the left of it.

On Windows, the order is generally reversed. So whatever order you use, you'll (slightly) confuse some of your users.

This is for multiple-choice buttons, of course. If you're in an Assistant/Wizard-like situation with multiple pages, both platforms generally have "Next" on the right and "Previous" on the left.

(Swap right and left for Right-to-Left script systems like Arabic or Hebrew, of course)

Update: Forgot to mention: Generally, one should also put the dangerous buttons at a physical distance from the "safe" ones. E.g. on MacOS, the "Do you want to save the changes made to this document" dialog has the buttons arranged like:

[Don't Save]                    [Cancel] [Save]

That means if you jerk the mouse while clicking (something beginners and casual users with less practice using the mouse easily do) you can't slip and end up on "Don't Save". Either you close the dialog (Cancel) or you save the file (your data is preserved) or nothing happens (you clicked in empty space).

Answer 3

First one if Submit is a primary action. Also, I think, that Reset button is unnecessary.

Some guides from Web Form Design: Filling in the Blanks by Luke Wroblewski:

• Avoid secondary actions on forms whenever possible. Provide people with a single path to completion.
• If secondary actions are required, ensure that there is a clear visual distinction between the primary and secondary actions.
• When you are distributing the questions in a form across multiple Web pages, primary actions move people closer to completion and secondary actions allow them to go back.
• If you do choose to include potentially destructive secondary actions like Reset or Clear in your form, provide people with an easy way to undo them.

Additional info in Primary & Secondary Actions in Web Forms.

Answer 4

Keep it on the left - most current forms do this, cf. Image search for 'forms with reset buttons' so it will be more familiar to the user.

Also, while you have mentioned Reset I'd prefer it to be labeled Clear (or Clear Form / Clear Fields), that's just a personal preference but Reset seems a bit more techie language (like asking for 'Login ID' instead of 'User Name').

Answer 5

If you think you have a good reason for having a Reset button, there are issues much more important than order.

1. Since the Reset button will delete data, make sure there is a confirmation step after the user presses it.
2. It’s also good for destructive buttons to be more specific about exactly what they do. You don’t want to be too verbose, of course, but they deserve more than one word.
3. Separate the Reset button from the Submit button as much as is reasonable.

Then consider platform-specific conventions as per uliwitness’ answer.

Answer 6

In my experience, the order relative to each other doesn't matter as much as how they are positioned on the form. I find that the order is intuitive so long as the more commonly used option (hopefully submit) is closer to the edge of the form.

The reason for this is that when running it maximized, it's often easier to swing the cursor to the edge of the screen than it is to navigate to the middle of the screen. This generally helps to avoid misclicking on the reset option. Your color scheme also helps with this, assuming your background isn't red.

As Grant commented, enter should send submit, but, I would also suggest eliminating reset from the tab order entirely, so if anyone wanted to use it, they'd have to use their mouse if they were using keyboard shortcuts. And, as an additional protection against accidental resets, could always have a warning to be safe.

Answer 7

Reset first is the best order. Most of the users in the world r right handed. So it would be easy to press submit as hands prefer to move towards right first.

Answer 8

IMO there is a confusion between reset and cancel.

"Reset" is an HTML feature, a button that reverts all the input fields to the values that had when the form was first rendered in the browser.

"Cancel" is a feature of the application, to allow the user to escape without completing the current task. Like, one that is st the checkout of an online store and realized that he doesn't really need that expensive gadget, or that he needs more that one, just before clicking "Submit" that should be labeled something like "Complete purchase".
By clicking "Cancel" he's taken back to the shopping area.

The "Reset" button, instead, would revert the input fields of the form to their initial values (not clear them).
In the late nineties was customary put a "Reset" button, which was largely unused. Its only use was to be clicked by mistake and making the user fill each and every field again.

About the "Submit" button I'd like to say that "Submit" is developer's lingo. The users should see a label telling about the semantic effect of the button, like "Complete purchase", "Send", whatever but "Submit".

Answer 9

A different way of solving this is to demphasize the more destructive action by making it less visually obvious. For example, making it a link instead of a button. This assumes of course that there is a more destructive action that is less preferred.

Since reset seems like a more destructive action to me, I would do make the reset action a link and right align it. In this manner, users will be less likely to accidentally click the Reset form link as it is a distance away from the primary submit action. See below image for what I mean.

---

And, if the form is not that long, I might even consider placing the Reset form link at the top right corner of the form. This way, accidental clicks are even less likely, but the reset action is still readily available. See below image for this.

Answer 10

when you see a Submit button on a form, what comes to your mind? One could easily reason that clicking the button submits the user’s information into the system for processing. A Submit button describes what the system does well, but it doesn’t describe what the user does at all.

When users fill out a form, they are engaging in a task. The action button should affirm what that task is, so that users know exactly what happens when they click that button. A button that describes the user’s task tells users that the form focuses on carrying out that specific task. The more focused your form is, the more likely you’ll get users to complete your form.

A form button that says Submit gives users the impression that the form isn’t focused on a specific task. It also gives off the impression that your website is not user-friendly because you’re speaking in a technical way that most users aren’t familiar with. If this is the impression your users get when they fill out your form, you can bet that you’re losing a few users in the process.

But Reset button is done after submit button because it displays default value so it should be in second button.

Answer 11

The question to ask, is what does Submit do? and What does Reset Do?

Should Submit and Reset be used in conjunction?

Usually, 'Submit' and 'Cancel' are used together, in the order shown, Cancel basically means cancel out of this page or interaction and go back to the screen/page before you came to the screen with 'Submit' & 'Cancel' page.

Reset is used when you want to clear or redo the page/screen.

Maybe you might consider something like this: 'Submit', 'Reset', & 'Cancel'