Shouldn't the submit button be obviously on the right? It's an operation that goes forward in the procedure, in time, like the x axis the process should point right.
Do all web forms have a left aligned button by default? I just realized they do on HN but if you'd asked me 5 minutes ago I'd have told you it was on the right.
I'm surprised to see so many people insisting that the submit button should be on the left. Next time you get a dialog box (or equivalent) on a platform that has user interface guidelines, pay close attention to the button placements. You'll find a preference for right-aligned buttons.
Windows: "Right-align commit buttons in a single row across the bottom of the dialog box, but above the footnote area. Do this even if there is a single commit button (such as OK)."
Mac: "Any buttons in the bottom right of a dialog should dismiss the dialog. An action button, which initiates the dialog’s primary action, should be farthest to the right." (Also noteworthy: "Separate destructive buttons from nondestructive buttons.")
Not necessarily. Having the submit button first means it's the first action the user sees since most people (at least Westerners) read left-to-right. However, your reasoning with having the order the opposite with the submit button last is spot-on.
No specific advantage has actually been attributed to either choice of order. What matters is (1) keeping the order consistent throughout an application, and (2) following the provided style guide for the platform you're developing on.
(Also, the order may need to be changed if the primary action is destructive, such as a "Reset" button.)
> (1) keeping the order consistent throughout an application
Not even just an application. The whole phone needs to be consistent. Every app in it. Otherwise it's just repeatedly discovering and forgetting how to use each and every app's unique interpretation of what their average user wants and what their average user thinks is intuitive.
I mostly agree, and that is why I mentioned that you should follow the general design guidelines for your respective platform. However, when creating a web app, general guidelines are more "implied."
The biggest reason why consistency is more important than following platform guidelines is for cross-platform apps available on multiple devices that have different platform design guidelines. It's obviously not feasible (and I would argue not user-friendly either) to switch the order of action controls for the same app on different devices, especially when the app is available via a web interface as well as native.
On the left it's more linear, rather than tucked away in the far-right corner. It seems more natural to me.
For example I would think this makes much more sense:
Name [arp242 ]
Email [arp242@example.com ]
I have a HN account []
[Submit]
To:
Name [arp242 ]
Email [arp242@example.com ]
I have a HN account []
[Submit]
In the first example the "Submit" is aligned with what you're filling in: Name, email, that checkbox, etc. Your eye will naturally fall to the "submit" because that's the next in the series.
This also works much better if you put the labels above the inputs:
Name
[arp242 ]
Email
[arp242@example.com ]
[] I have a HN account
[Submit]
[Submit]
If you click (or tab) through every one of the inputs one-by-one then you'll end up on the "Submit" if it's on the left, but you need to jump to the right if it's placed there.
And people read things from left-to-right; I find left-alignment almost always more natural; this is why most navigation sidebars are also on the left (which is often also inverted in websites using right-to-left scripts).
It's even worse if you also place a reset button; I would imagine more than a few people in a hurry will accidentally reset forms if it's placed on the left and has equal prominence to submit. Aas the article already mentioned, you probably shouldn't have a reset button at all, and most forms these days don't.
Anyway, I think "it goes forward in the procedure, in time" is overthinking these things too much in too abstract terms. Just put things where people's eyes and mouse cursor will naturally go for these kind of things will get you a long way.
All of that being said, consistency is also important, so if there's a system/platform where things are consistently on the right then sticking to that is usually more important.
Having actions on the right is more natural - this is reinforced by the UX of mobile devices we all use every day. Tap and we flow forward, to go backwards, we go left.
Like spoken languages, the language of design changes over time, and what used to be normal can be quickly outdated (like the reset button on forms).
A desktop computer is not a mobile device though; there are different sensibilities involved because pretty much everything is different. A lot of UX regressions from the last years come from this mistake.
What is more "natural" is a pointless discussion anyway IMO; I regret phrasing it like that and I wish I could edit it. As I said, the key is to put things where people's eyes and mouse cursor will go, and that's rarely a "jump" to an entirely different place on the screen (on mobile this problem exists less because the screens are small). While it doesn't matter too much on narrow forms (less of a jump), on wide forms it's a bigger issue (or if it's placed to the right of the form inputs take).
Having been conditioned on Windows since my childhood (like nearly every person out there), I would be very weirded out if the Submit button was on the left on a desktop.
Whichever is chosen, just make it visually distinct from the other buttons, and be consistent, and I'll be content (if not actually happy, depending on which one matches my opinion).
Entirely agree - left to right reading direction, the last thing you want to do is submit the form.
Having it on the left, imo, people might look there first but continue to scan to see what the other control is.
When you finish reading a sentence of text in a paragraph, you certainly have the last word of it stick out, how is this different?
It's a leftover from windowed UI design. In an OS level window requestor, the "affirmative" button is traditionally on the left, and the "negative" button is on the right. Progressive UIs were not common, except in wizards.
When forms were implemented, it was important to keep the behavior consistent with what people experienced in their OS.
Now that we have touch phones, the situation has changed, but the best practices have not.
No, it depends where you are aligning things among other considerations. But if your form follows the typical "F" pattern, then putting the button where the user's eyes are is the logical step.
The notion is probably "first/common choice on the left." However, I get what you are saying about the go-forward context but that can change based on your language RTL vs LTR.
Do all web forms have a left aligned button by default? I just realized they do on HN but if you'd asked me 5 minutes ago I'd have told you it was on the right.