To ensure that your user experience is seamless from the very beginning, you should design your login forms to be as intuitive as possible. “How hard can designing a login form be?” If this thought ever entered your mind, you will be surprised at the many intricate details that could leave a negative impression on your users; or increase your product’s conversion rate. After all, the login form is the gateway to your product, and we all know that first impressions matter.

It may seem simple, but it’s crucial to pay extra attention while designing the login form to set the overall user experience. Let’s go through some login patterns, and I will explain why I find them not ideal and how it would affect the user experience.

Login modals

Login modals can look nice and all, but there are several limitations and flaws with such a design. The main downside is not being able to link directly to the login, which can be a pain for your customer support. Now, instead of giving just a link to the user, they have to give a bunch of instructions and steps to get to the login screen.

This will create problems for your marketing team since they wouldn’t be able to track visits to the login page. Another problem would be marketing campaigns where the CTA is to create an account. There’s no easy way to link to your login screen directly, and users will be directed to the landing page instead. A solution would be to create a separate login page just for that particular marketing campaign, but it takes extra time and effort.

Multiple steps

I seriously don’t get why some products do this!? It’s super annoying to split your login across multiple pages! I have heard reasons such as not overloading the user with too much information at once, but seriously? If just 2 to 3 input fields will overload your user, then your landing page would probably get them mind-blown before that.

This pattern might be useful for a specific context like a checkout flow, where you require the user to go through multiple steps (e.g. shipping option, payment method, billing address, etc). Still, it’s an “overkill” for a login form — especially with such a simple one like Shopify.

Use clear naming conventions

Have you ever clicked on the wrong link just because it looks so similar? It’s easy to mix up “sign in” and “sign up,” considering how similar both phrase is, especially since we all have short attention spans and would click before taking a second look.

It’s easy for users to select the wrong option and potentially start signing up when instead they intended to sign in since both field requirements are relatively the same (e.g. email & password). I would suggest using “login” or “create account” instead of “sign up.” This would provide a more precise distinction from the phrase “sign in” and prevent users from clicking wrongly.

Social logins

Let’s face it — humans are getting lazier by the day with the appearance of all those hyper-convenient apps. I’m talking about UberEats, Lyft, Amazon, etc. This behavior can also be seen when filling in login forms. Instead, most users would use their Facebook or Google account to sign up rather than typing or remembering another god-damn password.

However, with the recent controversies surrounding data sharing on social media platforms, I guess it isn’t unreasonable to omit it from your login form. That is if you value ethics over user convenience. At the end of the day, it’s still the user’s choice whether they prefer social sign up or conventional signup.

Cap locks on

The first person who thought of this is seriously a genius. There have been times when I was perplexed and frustrated due to the multiple “incorrect password” error messages, only to find out that my caps lock was on. Presenting users with an immediate validation that their caps lock is on saves time and prevents negative emotions from swelling up.

Another alternative solution would be to add a “show password” option, allowing users to double-check their inputs. This approach is more passive (waiting for users to an action) than the initial solution that reacts and pinpoints the user’s mistake more efficiently.

Immediate form validation

I love how MailChimp did their login form validation. Laying out all the requirements and fading them when it’s met reduces the chance of users encountering an error upon submission. I have seen other platforms implement something similar, where the validation is shown upon input entry or exit, which works too.

I hate it when I’m presented with an error only after I hit the submit button. “Password requires 8 characters or more” Well thanks, couldn’t you have told me this sooner and not waste 1 minute of my time. It’s always more time-effective if users can know what is required out of them — since different products would have different requirements for their password.

Remember your users

It’s always nice to be remembered by someone. It boosts your self-esteem and makes you feel warm on the inside. Google was able to recreate those emotions by replicating this scenario on their login screen. As a user, it feels nice not to re-enter my credentials every time I wanted to log back onto Google.

This works well, especially if users want to be stayed signed in. But due to security risks, there’s usually a token time limit implemented to prevent hackers from taking advantage of that. Hence this feature would allow users to re-sign in again in the future quickly.

 

Originally published at jeremiahlam.com