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?
I see several possible considerations here:
- 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.
- 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?
- 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.