Best practices for login/sign-up from a UX perspective

10 min readAug 26, 2023

--

Nailing the login, sign-up, and forgot password for your app or digital application is key for a good user experience. This is where it all begins. You may think this one screen, usually seen only once in the user’s app life cycle, is insignificant: you are dead wrong. A bad experience will cost you potential users and loyal customers. A simple exercise will illustrate this:

Picture yourself installing an app. After making the tough call of inputting your email in yet another potential source of spam-emitting entities, you are asked to create a password. You try several variations of hello, and are informed that the password does not meet the requirements. But the thing is, you do not know what these requirements are, since the clever designers did not think to add this to the flow (long red text looks unappealing). Would you still want to use the app after this? Enough to frustrate Mahatma Gandhi.

Frustrated woman looking at phone — I already work with morons 8 hours a day and now this.

The one true goal in UX should be: don’t make your customers’ lives hard. And this starts at the beginning.

I in turn make your life easier by summing up all the recommendations into this one easy-on-the-eyes list. Hopefully I can cause the intrigue needed for you to read on! You can also find all the screens shown below on my Figma community page.

Do: offer alternative account sign-up
Don’t: use ‘sign in’ and ‘sign up’ in the same screen
Do: keep sign in/register options nearby…but not too close
Don’t: ask for passwords twice
Do: send clear and concise, helpful messaging
Don’t: cover the fields with a keyboard
Do: offer users easy access and solutions
Don’t: overcomplicate it

Do’s and Don’ts

Don’t be mistaken by the seeming simplicity of this screen. There are a few ways to get it right…and many to get it wrong.

Helpful log in pages are all alike; every unhelpful log in page is unhelpful in its own way — Fiona Tolstoy

1. Do: offer alternative account sign-up

I cannot stress enough how important this is for conversion rates. But don’t take my word: let’s look at some data.

shows two bar charts, one is higher (the one with social sign in options). the normal form bar is at 30 % and the social sign on is at 40% — Plain old form conversion rate versus additional conversion rate with site using social sign on in A/B testing.

And some case studies:

Pinterest saw a 47% conversion increase in sign-ups on desktop and a 126% conversion increase in sign-ups on Android.
Reddit was able to roughly double their new user sign-up and returning user conversion rates.
UXSniff increased sign-up conversion rates by 1200%.

Wowza — those are some impressive numbers right there. I hope by now you are convinced: the effort-reward tradeoff is a no brainer!

Now, you should decide how you will display these much-needed options. You can perform A/B testing to verify which version rakes in the most users. For example:

A nice detail is also to allow for various methods of signing up, like by mobile phone number.

Also, use branded social media buttons. It makes it more recognizable and increases trust.

Nowadays, these different sign up and log in options are super easy to implement with services like Google, Apple or Facebook.

To get your conversion rates sky rocketing, this is a no brainer.

2. Don’t: use ‘sign in’ and ‘sign up’ in the same screen

Were you able to immediately tell the difference between the two in the title? Exactly. Respect your users’ time by avoiding more clicks than necessary or having to spend too much time deciphering the options. A simple solution is using log in in place of sign up, and, conversely, to replace sign up for register. This conveys a clear meaning from the get-go.

But there is so much more to the sign up/register button than may appear at first glance.

The fate of many startups depends almost entirely on one conversion point: When a visitor becomes a user. All too often, this pivotal role falls on the shoulders of a pitifully generic “sign up” button that’s lucky to get even a minute of consideration during development.

As users, we have become somewhat immune to the usual suspects — register, sign up, create account etc. What are you uniquely offering in exchange? How will this registration make the users’ life easier?

Tie the button to your product. “Start creating”, “Start selling”, “Become a driver”. This informs the user about a tangible result they can get out of the transaction. It’s also all about giving: use our human instinct to evaluate reward to your favor. “Get access”, “Create a free user”, “Start free trial” all communicate a fair trade for their much-valued loyalty.

Some great examples of websites that get it right.

In the DataSet case study below, changing the button from “Sign up” to “Try it Free” helped increase the clicks by 212%. At the moment, the new sign-up button says “Get a Demo” (same difference).

Bottom line: get creative. This low effort tweak is what might get your users from window-shopping to loyal customers. You can also consider adding a short message about the benefits of signing up, below the main title. Drive in that message!

3. Do: keep sign in/register options nearby…but not too close

Using the same page for log in and sign up would be a big mistake. No matter how well distinguished your two form titles are, don’t allow for the possibility of your valued customer to put effort into filling up the wrong form. Who has time to read titles anyway?

The perfect way to allow for the distinction of the two flow and also permit the user to seamlessly switch is placing a link to the other form. It’s that simple.

The clear differentiation made in the previous point will now allow you to place quick switching routes for users who began at the wrong place. The goal is that the user gets what they want to get done seamlessly, making wrong actions easily reversible.

How do I go to the other page, dear Lord?

Also, when you do include a quick access to sign in/register (depending on the screen), remember to implement hierarchy correctly. Even with different names it will be hard for your user to quickly identify what button they need to click on to do what they want to do.

How are you supposed to interpret easily the difference between the buttons?

4. Don’t: ask for passwords twice

It’s all about ease of use. That means removing unnecessary inputs which can lead to user frustration. Throwing the confirm password field out the window is a no-brainer for the log in page, but it is presented as a first commandment to have in the sign-up form.

I challenge you to question this. The frustration with unmatching passwords, that force users to re-type and retry, which in bad motor days can lead to an endless cycle of error messages that make you question whether or not the app is malfunctioning, because it can’t be you.

If you know me by now, you know I don’t just make these broad assumptions. The principle is solid, and there are cases to back it up:

Formisimo noticed that that over a quarter of their abandonments were on the “Confirm Password” field. This prompted a change and, together with other modifications to the form, they removed the field. They had an increase of 56% in conversion fields, but, more interesting than this (which may be attributed to the other changes), the password reset request per user remained steady at 10%. This showcases that the confirm password has become more of a formality than a necessity.

Additionally, it has never been easier to add a “show password” toggle in the field. This will ensure your users can view the password before submitting, allowing for corrections to avoid error messages.

5. Do: send clear and concise, helpful messaging

Your users don’t want to sit there guessing what their passwords must contain. Give it to them straight.

How annoying is it to have to read minds?

Also, help the user out. Nothing more frustrating than inputting a password 25 times only to realize you had your caps on the whole time. Have a caps lock indicator.

The caps lock helps set the users expectations

And there is more: please provide input validation! The idea is to prevent users from submitting a form before seeing any errors that need their attention.

Some best practices for this type of message are to display the message only when the user just left the input field. Also, the error message should explain what the problem is and how to resolve it.

A simple error message will save the user from having to start over later on.

Finally, have your buttons convey clear messages. The button label is there to indicate the action the user will perform by clicking. A generic button will make it difficult for the user to relate it with the action, and there is a chance that they will forget what they actually want to do on the screen.

6. Don’t: cover the fields

When the keyboard comes up, the active field of the form should automatically adjust. Covering it could bring serious user unhappiness.

7. Do: offer users easy access and solutions

A very common problem I think everyone has suffered from at least once (if not, congratulations, you are an outlier) is forgetting a password. The fact of forgetting the password already proves tortuous, even more so if there is no easy way to recover it. Many users would much rather create a new account. Offer them an easy way back in.

This option will take users through a smooth process of recovering the password (by either sending a link to their registered email address or sending a unique code to the registered mobile number). Another great option is to remind the users what the password requirements were, after the first time they get the password wrong. This will provide a hint for them to recall their lost password.

Remember not to disclose, for privacy reasons, if the email does or does not belong to an existing account. Privacy comes first.

Another helpful tool for the user to return smoothly to your site or app is to give the option to be remembered. It should be their choice to have an additional level of security, provided that it is not a bank app of course. This provides an extra layer of security, since figuring out account log-ins with an already existing email is, of course, easier.

You could also consider adding the option of having only their emails remembered.

8. Don’t: overcomplicate it

This should be the takeaway message for all UX endeavors. Less is more. The idea is for the user to focus on the relevant actions and not leave, overwhelmed by information. Your pages’ real-estate should follow Bauhaus and minimalistic approaches. This doesn’t mean your app or website needs to be boring, it means its main goal is to complete a function, and the function must never be obscured.

Reevaluate every single field on your form. Is it absolutely necessary? Do you even need an email? We don’t follow dogmas in UX, we follow principles: everything is open to question if it can provide a better user experience.

If you absolutely need a longer form, consider breaking it up into bite-size installments. Let the user know how much longer, and anticipate what is missing. This will allow for your user to see light at the end of the tunnel.

Take HelloFresh’s approach. Now, their customers have an explanation for the long form.

The bottom line

The process of registration and logging on to a site or app is the first interaction that users could have with your product. It is critical to make this step easy for the user by designing usable sign-up and login forms.

The simple advice I have provided derives from research and utilizing design principles. Each change can create a big impact, and even if it does not, the marginal gains will add up, and make your increased conversion rates the winner of your stakeholders' hearts.

I know you enjoyed, so follow me for more deep dives and short rants about UX and life.