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.

I'm designing a form that will be used for posting an advertisement. The form will include the following buttons in its bottom section:

  • Reset
  • Preview
  • Update

I need advice regarding the ordering and placement of these buttons. what would be the best, most logical button arrangement for this case?

The current arrangement can be seen here:

UI Sample

share|improve this question

6 Answers 6

up vote 0 down vote accepted

I would do it in order of importance, assuming the left is the least important, and the right is the most important. In most cases importance = amount of frustration if misused, and permanence. Under that logic you're order should be changed from it's current: Reset, Preview Update, to: Preview, Update, Reset, but I think in this specific case an exception should be made, and it should be Preview, Reset, Update, because I believe that Update is the primary function, and thus is the most important, and I believe that it's importance far outweighs the risk of "delete" and the order should be: Preview, Reset, Update.

*As a side note: * I think that your reset button should be red, and that your update button be green, because of their positive and negative connotations, this will greatly improve usability.

share|improve this answer

A suggestion:

Leave "rest" button out if it is meant to clear the form-fields only. No body fills out a form to find a button which asks him to reset a form. If your propose is to reset whole add and its settings across multiple tabs (or sections) even then Reset is a process which cannot be undone and user essentially take the "undo-able risk" to rest his form.

Coming to your question

  • If you had to place these three buttons together, I would suggest you to display "Reset" space space space "Preview" space "Update". Idea is to group buttons which perform related actions and keeping the irreverent buttons physically and visually apart.

  • Regarding order, I would go with Reset, Preview and Update as you has suggested. Our visual scanning starts at top-left and ends at bottom-right. Also in any given list, first and last element is the easiest to spot and click. Considering importance and usage of Preview and Update buttons, I would suggest to keep them at the "most visible" place which is bottom-right.

  • If you were looking to place your buttons on the top of the form (like in case of a web application) even then my suggested order would be the same. Reset ----- Preview - Update.

  • Another layer of improvement would be give "Update" button more prominence by changing its color or providing an outline/border around it. If you do that, you can display these three buttons together as RESET - PREVIEW - UPDATE.

share|improve this answer
  1. Coming to the question - "I'm designing a form that will be used for posting an advertisement". Buttons labels are based on "the action user want you to take". Current scenario user want to post their advertising So labeling "Update" button to "Post" will be more perceived.
  2. "Reset" button come to picture when you have large number of input field and user had to manually remove the text for each field when they input wrong. No reset button is required in below example as the form is short https://www.redbox.com/register?ReturnUrl=http%3a%2f%2fwww.redbox.com%2f

Order of placement will be - Preview and Post next to each other

Order of placement including the reset - Set Reset button little bit away form the Preview and post button. so user accidentally don't click it. For more specific answer please share your design form screen.

share|improve this answer

As the other posters have mentioned, it's generally considered poor form to include "Reset" buttons on web forms nowadays.

If you're able to remove that button, you will be able to make the button order more logical, making the "Update" button the primary one (as an aside, that button's text should ideally be changed to "Save Changes", "Update Ad" or similar to make it clearer, since "Update" as a verb could also mean "Refresh the page", which has a very different meaning to the user).

So being the primary button you can put it leftmost under the form and position the "preview" button to the right of it as a secondary action.

share|improve this answer

As with most answers, there's no real right or wrong way to do this, especially when we don't have detailed information about the exact context or users. However, some general guidelines do exist:

  1. The order should be logical and consistent (e.g. most used to least used, least important to most important).
  2. The default button that is highlighted should be logical, except in the case where the action may be destructive (i.e. cause loss of information), in which case you should prevent the user from being able to click it by accident and not make it default.
  3. Naming convention should be simple and clear (Reset might be ambiguous if there were other steps involved in the process, so Clear might be better?)
  4. Test and see if your assumptions match actual user expectations/behaviour!
share|improve this answer

Reset buttons are not essentially required unless demanded explicitly.

  • You can put the Update - Preview - Close (if any) buttons in the right lower area, as this is the common position for interacting with buttons.

  • Please note that Windows follows the pattern Update (OK) and Cancel.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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