I have notice some sites have the same form for login, register and forgotten password.
Below the form you have 3 buttons
- i forgot my password
- log me in
What are the pros and cons on using this approach and which version would you go for.
There should always be links to register and forgot username/password pages on your login page.
Using a single form with 3 different buttons sharing the same username/password fields would be confusing. Moreover, it's probably not possible:
On the other hand, having separate areas (forms) for register and login operations on the same page could work well.
Registration form on the login page improves the experience for new users (at the cost of clutter for existing users).
This works well for sites that are not re-used frequently and where smooth new user experience is a priority. Good example is a shopping site which gets many first-time users. Their goal is to order merchandise with as few obstacles as possible. For such a site, registration should feel as minor part of the checkout. Having it on a different page feels like an extra side-step and an impediment in the process.
Forgetting a password (or username) is an infrequent scenario. I think a separate page is sufficient, and does not clutter the main workflow.
There is no possible "pro" to having a single form like you suggest that outweighs the most important "con": it will confuse your users. Even having a shared form for just login and registration (as Lukas suggested) is bound to lead to confusion. People see a form and they assume they know what it is for, and they don't really read the text of a button, they just click it, assuming that it will sign you in.
Also, for accessibility and advanced users, how would a form like that work if you hit enter rather than clicking a button? Sure, you can say that the default would be to do a login, but many users DO just hit enter after filling in a form and if a user is trying to register that way, you have just made things harder for them to register. That means that you are likely to lose that registration entirely.
Also on the accessibility front, how would you name that form? A screen reader goes from top to bottom, so the name of the form is used to help the user understand what the form is for. If you have a form with multiple purposes, how is that user supposed to know that?
The only pros I could come up with are:
Which aren't really that much of a pro at all.
The cons I can think of straight away are much stronger:
As to which to go for - separate pages every time.
You're not asking for the same data in each case and inexperienced or occasional users will need more guidance anyway.
Well, actually I think if you try to login and use a wrong password, there could be a link appearing like "forgot password?" This would send you a new one via email. Since you do not need more information apart from the email/login that should work just fine.
I would however agree with the other posts, that there should not be a button on the login form but just a link, which directs you to a form which asks you for your email/username.
Due to Charles Boyungs comment I did rethink my statement and came to the conclusion, that his criticism is actually well put. I do still think though, that it is not a bad idea to give the possibility to register in the login form. This is, because often the user is asked to login while trying to access a certain page, if the user has no account, here is the place to have him sign up.
It could work like this. The form („Login Form“ for the screen reader) has a field for email & password to login and the default action on hitting enter is to login. There is however a button register. Clicked the user is redirected to a different form with all necessary informations (if there are more needed apart from email & password). If the user did fill in the email and password, it gets passed to the other form.
In case you do not need more information, clicking on register would either present you with a success page if you filled in your information already or if you did not, with a form to fill in the information and just one button „register“.
This way you do have 3 forms, but you can combine them so that it is, in my opinion easy for the user and very convenient.
The main reason you should separate them is to avoid users accidentally creating new accounts. I tried to be similarly creative with a form like this in the past, and ended up with tons of users who tried to "login" using the registration form, and then wondered why all their data had been deleted.
Even though I didn't let existing users register, given enough users, some will mistype their email on login AND click the register button which creates not only a UX fail, but also unnecessary customer support and churn issues.