Why are two forms on one page bad?

Question

I have been requested to put two forms on one page. The page is directed to from a "Pay Bill" link on our home page. The user currently lands on the page and they have a log in form with two inputs, one for username and one for password, a button below that with "Log In". This is all surrounded by a light gray border. Under this bordered area there is a button that says "continue without logging in". The continue without logging in link lands on page with a form with two input fields, one for the account number and the other for an email address they have to enter if they want a receipt.

The two forms are separate and I'm happy. But, as I said, I have orders to put the two forms on one page.

They are both very simple forms, and my idea is to put the login form on the left with the continue without logging in form on the right with thin light gray borders around each to separate them as much as possible. But this just doesn't seem like the best user experience. I need to know solid reasons as to why two forms on one page is bad though. The stuff I have read says not to do it but it doesn't explain where the hang-up is exactly. I'm new to user experience and really trying to get it to take hold and shape the decisions in my company. So I need to know what I'm talking about when I bring it up so it's not just brushed off as an unimportant part of design.

My thoughts and then the devil's advocate:

1) You are forcing the user to make a decision immediately as to which form to fill out. Response: they have to choose whether they want to sign in or not sign in anyway.

2) One form per page makes for a cleaner page and makes the desired action more obvious Response: Not for the people who want to pay without logging in. They have to click an extra button.

Arguments for my particular case but I'd like to hear more general answers:

3) The user may be expecting some sort of log in screen anyway since it's to pay a bill Response: Without user testing it's actually impossible to know what the user is expecting

4) Only 5% of our users in the last six months have used the pay without logging in option. This extra form is causing unnecessary confusion for 95% of our visitors. Response: want to make login option the same for all customers

So, trying to steer this to a definitive answer, why exactly are two forms on a page bad for user experience?

Answer 1

It's not explicitly two forms, since credentials are intuitive enough that users are able to recognize the username/password boxes with a low cognitive load.

I actually agree with having login forms on the same page, because if you always click on continue without logging in, you are just adding an extra step for that user.

But, just because they are on the same page doesn't mean they have to both be visible. One example I found has a tab you can switch between. Sure it's an extra click for the B Case users, but it's exactly not loading a new page.

Another example here, uses the same 2 boxes but allows you to input different types of data, and the login process is handled in the back-end.

I think 2 forms are bad on the same page if you have to fill both of them out. If you're only choosing one, that is fine because it's instead giving you options, like sign-up forms, e.g.:

• https://stackoverflow.com/users/signup
• https://vimeo.com/join
• https://dribbble.com/signup?basic=true

Answer 2

In tasks where users need to go through a series of steps to complete a task, the key to improving the conversion or success rate is to reduce the complexity of the task, whether it is perceived or actual complexity.

Putting two forms in front of the user asks them to make a decision before they even get to assess the difficulty of the task, and puts a lot more information in front of them than what might be necessary. This is why you see lots of landing pages with large buttons asking the user to make a choice rather than putting two forms in front of them a letting them figure out what option that should choose.

I would suggest looking up topics and techniques on 'progressive disclosure' to get a better idea of the concept and see if you can apply it to your arguments.

Answer 3

It depends, frankly, whether you're more interested in the UX or pleasing your bosses.

You could try having a good old chat with them if you really think two forms are bad, but you'll need something to persuade them with.

If you want to make them happy: put both on one page but gray the 'continue without login' form out until the user clicks that option. Both on one page but only one displayed at a time. However, might get users confused/annoyed as it's not intuitive and is a bit odd.

If you're thinking of your users: you're fine putting them both on one page. The horizontal separation is a good idea, keep it. A login form is simple and widespread enough that users can use it without thinking, and if you put nice big numbers by each form then you can illustrate that you have to use one form before the other. Apart from that, you're pretty safe with those two forms. If they were other kinds of forms you might not be though (think of online tax returns), so don't take this advice for every similar situation, consider it first.

Answer 4

It can be quite risky to put two forms on one page. I would strongly argue against this if the case is that you have two columns with forms and actions right next to each other.

There exist some user research made in this area, where the conclusion is that multi-column forms should be avoided in most cases:

The only deviation from this single-column guideline we found during testing was [first name] [last name] fields and [country] [state] fields. In these cases the test subjects had no problems interacting with the fields even though they were placed next to each other (in two columns).

The before-mentioned eye tracking study also mentions date fields [day] [month] [year] as an instance where multi-column layouts are acceptable.

But otherwise, you should avoid multi-column layouts for form fields.

According to the study mentioned above, users interpret these kind of forms in multiple ways: