Why is it needed a divider line between these two forms? Isn't proximity enough to group each individual form elements and make each a group? Or is it needed because, since they are sharing the same background but are conceptually different things(a login and a signup), they are being wrongly perceived as a single unit due to the common region gestalt principle and hence need some separation?

enter image description here

1 Answer 1


I see several possible considerations here:

  1. It communicates clearly that only one of the forms needs to be filled out. It literally says "Login or Signup", thus reducing cognitive load for first time visitors.
  2. Although it is discouraged to have forms with two or more columns, they still exist. Even though the forms are divided by the large space between them, they could be perceived as one single form at first glance. Here, the divider also resolves the possibly confusing tab-navigation. Where would you expect the cursor to go in a multi-column form? To the right? Down?
  3. If the page is responsive and the window gets too small, the space between them might not be enough anymore to provide a clearly visible separation between those forms. This also enhances the above points.

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.