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.

We are designing a Change password box in our web app. This is part of the "Account page" - not in a dialog.

Where does it feel the most natural to place the "Change Password" button in this case?

Option A: enter image description here

Option B: enter image description here

Option C: enter image description here

share|improve this question
1  
For me that would be option C, but that's just pure personal opinion. How do other forms look like in the application? Consistency may be of some importance here as well. –  Bart Gijssens Feb 19 at 10:53
    
As people in western countries always start from the top left and therefore end on the bottom right, i would suggest putting your submit-button (which should be the last action) on the bottom right, so C. –  Kweamod Feb 19 at 11:20

2 Answers 2

up vote 2 down vote accepted

Option B seems best.

If you can match the width of the input boxes and save button and make it look decent, that would feel best visually - in terms of uniformity, alignment, eye movement.

enter image description here

If the text boxes end up being too long and it doesn't make sense to match the width of the button, then don't. I'd still suggest option B, i.e. button left aligned to input box - neat alignment and easy eye movement.

These suggestions are assuming:

  • there's only one (Save) button and not two (Save or Cancel).
  • this is not a dialog, but a part of a page
share|improve this answer
    
You have clearly chosen the answer based on the visual aspect of things. That may not necessarily also be the best solution from a UX point of view. Kweamod's argument of left to right reading order surely makes sens, imo. –  Bart Gijssens Feb 19 at 12:31

I don't think that any of the options are very pleasing to the eye. I would take Option B since it's the closest, but I would change your columns widths to all be of equal width.

Doing that would result in the following:

enter image description here

As you can see, it's much more pleasing to the eye. You have equal widths on the columns which centers things horizontally and in doing that you see that the title and button are centered vertically.

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.