Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

Submit first ?

enter image description here

Or Reset first ?

enter image description here

share|improve this question
7  
Related: Is a cancel button necessary in a web form? –  Ben Brocka Jul 26 '13 at 15:24
6  
Why is submit in red? –  Izkata Jul 26 '13 at 16:58
4  
Whichever you do, make certain when someone hits enter anywhere in the form, submit gets triggers, not reset. –  Grant Jul 26 '13 at 17:39
1  
Those buttons are extremely pretty, btw –  Christian Stewart Jul 26 '13 at 22:51
    
I've protected this question as it's getting repeat answers that aren't saying anything new. If you're leaving an answer then please read the existing ones to ensure you're not repeating other answers. –  JonW Jul 27 '13 at 13:02

11 Answers 11

up vote 108 down vote accepted

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/

share|improve this answer
    
@Keiwes Thanks for the explanation, that's why I thought too but my form is kind of special and I can't develop the edition/suppression of all parameters/uploads did by users for the first release. –  Alex Jul 26 '13 at 14:16
2  
+1 for "it translates into about $100 million in lost productivity per year world-wide" –  Carter Pape Jul 26 '13 at 17:34
2  
Where did the asinine idea of a "Reset" button on a form come from? I can only imagine back in the days of mainframes and accounting software where the program wasn't as fleeting as a webpage view. –  Nick T Jul 26 '13 at 19:10
1  
This assumes a webform that a user rarely uses, correct? What about a work related webform that is potentially used dozens of times a day by a staff member? –  Austin French Jul 27 '13 at 2:39
    
@AthomSfere I would argue this would still apply to work forms. Even if you are filling out the same form many times throughout the day, the desire is to submit or to save and submit later. The submit action typically clears the form to become ready for the next addition. –  Keiwes Jul 29 '13 at 19:44

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.

share|improve this answer

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)

share|improve this answer
    
+1 One answer that makes most sense and actually answers the question pointedly. –  Kris Jul 27 '13 at 10:55
2  
This may be true if it's an stand-alone application, but if it's referring to a website does this still hold true? –  JonW Jul 27 '13 at 12:54
1  
@JonW The point of a platform's UI guidelines is consistency across the whole machine, including web sites. The user isn't going to be less confused about the wrong button order just because you tell them "Yeah, but this is in a browser" or "but this is written in C, not in C++". End-users don't care. For all it's worth to them, all of this may be implemented using hamsters running in a wheel. –  uliwitness Aug 1 '13 at 17:43
    
But you can't be consistent with platform guidelines if you're building a website because it can be viewed on a mac or a PC and both OS's have button positions reversed, as you state. You're going to be inconsistent with one platform by default. –  JonW Aug 1 '13 at 17:52
    
@JonW That's what you can look at the user agent for. It will tell you what platform you're on. –  uliwitness Aug 2 '13 at 18:07

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').

share|improve this answer

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.

share|improve this answer
    
It's only destructive if you don't have an undo facility. –  Chriseyre2000 Jul 28 '13 at 10:02
    
@Chriseyre2000 Sure, though I’d say that in most “delete lots of data” circumstances confirmation is a better UX than undo. Ideally you have both. YMMV. –  Robert Fisher Jul 30 '13 at 14:35

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'

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
1  
I don't follow this logic. If you're right-handed and it's easier to move towards the right first then by your logic shouldn't the submit button be on the right? I also don't understand what you mean by 'right handed means it's easier to move to the right'. Can you elaborate on what you mean in this answer? –  JonW Jul 27 '13 at 12:58
    
@JonW: I think "Reset first" and "submit button on the right" are the same thing, I'm not quite sure what you're unsure about. I think the claim that moving to the right is easier is questionable though. –  Lie Ryan Jul 27 '13 at 14:27

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.

share|improve this answer

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".

share|improve this answer
    
I don't think "Submit" is developer lingo –  Jop Vernooij Jul 31 '13 at 20:56
    
@Jop I say "submit" is developer lingo because it's a generic taken term taken from the HTML ... type="submit". It refers to the mechanics of the form interaction. Seen usability-wise the user doesn't want to submit the form, he wants to purchase the widget. To achieve his ultimate goal, getting the widget, he has to submit the HTML form. We are so used to see "submit" that we think it's the right thing. Like "insert" or "delete" (less seen) are database lingo. Even the "successfully added" messages are source-code derived. –  Juan Lanus Aug 2 '13 at 15:26
1  
"Submit" means something completely different to most users. It's a very technical term I constantly had to explain to users. Use "Add" or "Next" or "Create" or something that indicates what the result of this action will do. –  uliwitness Aug 2 '13 at 18:06

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.

enter image description here


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.

enter image description here

share|improve this answer

protected by JonW Jul 27 '13 at 12:58

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.