Why Signups & Logins Should Open in a Right Form Drawer


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.

The reason this happens is that 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 any field labels, they’ll have to make more mental adjustments 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 interrupts and 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.

A drawer wouldn’t have enough space to fit a two-column signup form. It would make the drawer too wide, which would defeat its purpose of maintaining context. Too many fields would force users to scroll, which is harder to do within a sidebar. As such, this approach works best for short, single column signups.

End of free sample. The full article includes a podcast about this topic and explains how right form drawers perform 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.

To read the full article and receive exclusive access to all premium articles, get a UX Movement subscription.

Get subscription

elegant wordpress themes