The way your signup and login form opens can make your interface less engaging. You’re likely opening your form in a new screen. That won’t hinder users from signing up or logging in, but it can disrupt their task flow and increase their cognitive load.
Interstitial Signups & Logins
Not all users will click the native signup and login button in the navigation bar to sign up and log in. Sometimes they’ll do it through other action buttons that require an account. For example, a Save and Like button would trigger a signup and login form when users click it. This form acts as an interstitial for user authentication before users can use those buttons.
Opening the interstitial form in a new screen isn’t ideal because it covers the user’s current screen, causing them to lose their task context. As a result, they’ll experience a higher cognitive load to recall and complete their task after signing up or logging in. Filling out the form places users in a different mindset from their task. This mindset activates a different set of cognitive processes. Without the task context, it’s easy for them to lose track of what they were doing.
The cognitive load magnifies if the signup or login form is challenging to fill out. For example, if users make typos, forget their password, or are confused by a field label, they’ll have to make more of a mental adjustment to resume their task. Sometimes they could even forget about it altogether. Not only that but opening your signup and login in a new screen disrupts the user’s task flow. They experience a jarring and abrupt transition because the form requires loading time and dominates the entire screen.
To decrease cognitive load and prevent task disruption, you must maintain the user’s context with a right form drawer. A right form drawer doesn’t cover the entire screen. Instead, it only covers the right side so users can still see their task context. Keeping their task context visible makes it easier for them to recall what they were doing before.
The form drawer will also display a transparent overlay that redirects the user’s attention when the form gets triggered. After they fill out the form, the drawer will slide off the screen, and the overlay will fade away seamlessly. They’ll experience a smooth and continuous transition back to their screen. The flow will feel like they never left their task.
Not for Complex Signups
A right form drawer not only maintains context, but it’s also space-efficient. Since most signups and logins don’t require a lot of screen width to display, the drawer provides enough space for a basic form. However, it may not work well for complex signups with two columns and many fields.
Subscribe to access the full article
Read the full article to learn how right form drawers compare against modal screens and a left form drawer. You’ll also learn how to make them work for multi-page signup forms and on mobile screens.
Book
Affiliate
I agree with this, it totally have sense from UX POV
Seems like a good pattern to follow. Is the usage of a right-side drawer instead of another side based on anything specific? I see that the mockup has a button on the right side triggering the drawer, but wonder if it has any other performance benefits versus, say, the left side, which is a pattern that a lot of Google and Material-ish apps seem to be following.
Thanks for the article.
I was wondering how would it look on a responsive layout. Even on the larger devices we have today, 3/4 of the screen for any entry fields would look a bit clustered. Most app practices would either be full overlay or bottom modal, etc.