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:
Option B:
Option C:
asked Feb 19, 2014 at 10:39
-
1For 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 GijssensCommented 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.– KweamodCommented Feb 19, 2014 at 11:20
Add a comment
|
2 Answers
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.
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
-
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. Commented Feb 19, 2014 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:
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.
answered Mar 21, 2014 at 15:27
