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?

Login page

Register page

  • See ux.stackexchange.com/q/2069/16924
    – Izhaki
    Commented Nov 5, 2014 at 23:04
  • Why would you want to? Why would a user?
    – peterchen
    Commented Mar 1, 2015 at 17:01
  • what if you change the button to 'continue' and have one button. if they are not registered, register them and login. if they are registered, then login Commented Oct 23, 2016 at 5:09

6 Answers 6


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

  • Sign Up is clicked in the Sign in View
  • Sign In is clicked in the Sign Up View

enter image description here


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.

Register/Login Form

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.