Forms

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. 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.

access full article


Toolkits

Affiliates

elegant wordpress themes

Article written by anthony

Author and founder of UX Movement. Creating a more humane world for users by teaching others how to practice UX the right way through principled design techniques.

This Post Has One Comment

  1. Stefan Smiljkovic Reply

    I agree with this, it totally have sense from UX POV

Leave a Reply

Your email address will not be published. Required fields are marked *