2

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

2
  • 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. Feb 19, 2014 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, 2014 at 11:20

2 Answers 2

2

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
1
  • 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. Feb 19, 2014 at 12:31
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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