User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
In designing my project I've toyed with having the login and registration in the same form. The inputs for the details needed to login would be there initially, and if the user presses the register button further details would appear. I've made a mockup of the two screens below.
How does combining these functions in the same form influence the user experience?
Merging both the register and the login button together is a bad idea. As it can result in a slight confusion as of what happens when the return key is pressed both on touch devices and on PCs, "Join us today" is to blame here. This can also result it accidental tap/click of the wrong part of the button.
Understand the context of when the form is displayed and what the user is most likely to do in that scenario, register or login. Let us say you display the login form with two fields and the user isn't already registered with your service, you provide a convenient link that says something like "Or Register" . Once the user clicks on the Register link you can gracefully animate the one extra field.
A very rough implementation of what happens when
The title of your dialogue is 'Join us today'. If I encounter this on the web, I'd certainly assume that I am on a Sign Up page, and the login button would take me to the Sign In page.
The two intentions of joining and signing in to an existing account are very different. I'd suggest keeping the two separate.
Even though the width of the 'Register' and 'Login' buttons are different (to which the larger button is supposed to go with the text fields), it still implies that I can 'Register' with email address and password only. Imagine that as you fill in the form and thinking that you're done when you clicked the 'Register' button, you are then prompted for an additional field ('Full Name'). Probably breaks the user expectation of having filled out the necessary fields once they clicked the 'Register' button.
Plus, you've associated the same 'Register' button for two different functions. Also, the 'Join us today' caption is really only appropriate with the register action.
Since you are adding more fields (more steps) to register, it'd be better to change the label on second screenshot to 'Complete Registration'.
At what point in the user flow does this form appear? If the call to action is to register, then yes, it is confusing to have both register and signing in as part of the same form. However, if the registration/log in happens as a secondary stage of a more important user flow, such as a checkout process, then a single form could work. I would agree with the other answers that the UI needs to be crystal clear.
You could use AJAX and have it switch the two, I would use links for switching instead of a button.
