Upgrade Your Signup System with these Proven Best Practices Used by Tech Giants.
cover photo by Austin Distel on Unsplash
A signup system is very important, the less perfect it is, the more chances the user gets frustrated and decides not to use the app/site at all.
Your signup form is one of first relationships you have with your users, if you mess it up, you'll lose trust from the beginning.
Don't just copy and paste random signup systems into your projects. If you want to climb the ladder and work on great projects/companies one day, you need to start building things the way that works in the real world.
The quality of an onboarding/signup process is mostly balancing usability with security and that's what we'll be focusing on, although there are wider scope of things. This article only exhausts usability and security which is the first step to stepping up the way you build onboarding systems.
Best Practices For Great Usability:
1. One Click Registration:
You should integrate the signup/login with socials to your form. (Sign up with Google/Facebook/etc).
It makes people feel more comfortable, as they can sign up with two clicks, instead of providing all of their information from scratch.
You can integrate the social account based on the nature of your project.
Usually google and Facebook works but there are some cases where some more specific options can be used – Let's say you're building something for developers, like a deploying tool, you can integrate a signup with GitHub to make things easier. Etc.
2. Real-time Input Validation:
Validate the email format in real time, Validate the password strength in real time.
Same goes for any formatting you need to validate. Don't wait for the user to click on submit before you tell them their password isn't strong or the email format is invalid.
3. Don't put the confirm password field just because you saw it in another project:
People put in sometimes to make sure users don't misspell their passwords and all, but when you put a confirm password field in a one page signup form, it reduces your conversion rate.
An effective thing to do that should always follow your password input is to always put a show/hide button for the password input.
4. Indicate Caps Lock:
When your user is signing up from a computer, sometimes the Caps lock key can be ON and can affect their input. Letting them know that the Caps Lock is ON can help with a better UX.
It might seem like these little things don't matter that much, but when you get these little things wrong, it affects the whole system negatively.
5. Clearly State Your Password requirements:
Display the password requirements near the password input so that users can see it clearly. Don't show-hide toggle it.
If the password doesn't meet a requirement, explicitly explain the requirements that weren't fulfilled to the user–instead of having them guess what's wrong with their password.
Also remember to include a 'remember me' checkbox to make it easier for them to sign in next time.
Provide an Easy-to-find Switch between the signup page and login page. Make sure your UI is easy to navigate, decent and accessible. You can look up basic UI/UX fundamentals and make sure you follow them in your form
6. Ask for Email instead of Username when applicable:
It's easier for people to remember their emails rather than usernames. Sometimes they have to compromise on the selection of their usernames when it already exists to create unique ones.
7. Split things up:
You can group your fields logically in a multi-step signup system. Tech giants like Google, Facebook, Netflix, Binance, and lots more do this.
This helps users to manage providing large information in a simplified way (this doesn't mean you should increase the fields).
It can also help with validation and security. When creating a multi-step signup system; make sure it's user friendly, make sure you can show them their progress (Like 1 of 4), make it easy to navigate back and forth, and show them a summary of their input before submitting.
You can also choose to require basic information required for signup, and the user can input other information later. This helps reduce the friction and optimizes the conversion rate of your signup form.
I was going to prepare some pictures for what your signup form should look like. But you can just check out the full experience yourself with the signup systems of Facebook, Google etc, spot the lessons learned here and practice building better systems.
8. Best Practices For Great Security:
Signing up users and verifying their email addresses might seem straightforward, but it comes with unique challenges.
Verifying emails is more than just sending a confirmation link. We must ensure that the confirmation email (and future emails) reliably lands in users' inbox.
What is responsible for where your emails end up?
IP Reputation
IP reputation. The IP from which you are sending your emails is scored and taken note of by Internet Service Providers.
IP reputation determines whether your message should enter the inbox or the spam folder or not get delivered.
ISPs (Internet Service Providers) score you and rank you with their algorithms based on some factors. If your reputation is good, you're marked as a trustworthy source and your message will be allowed to go to the recipient's inbox.
However, the score changes based on your email sending behavior and the way recipients respond to it.
Let's look at how your email verification system should work to make sure it is IP reputation friendly:
1. Make sure the email addresses are valid:
You should have systems put in place in order to protect your IP reputation which would improve your deliverability.
I am not talking about the email format validation in bootstrap and the likes–I'm talking about verifying whether an email address exists or not.
This is usually not always practiced in building small scale projects, but we are here to learn to build things that'll thrive in the real world.
In order to verify and email you can use libraries and APIs depending on what you're building with. For example, you can use the email-existence library in Node Js or py3-email-validator in Python, you can find the suitable libraries for your language or other libraries other than I've mentioned as well.
Now, one thing to note is, this changes the way your UI is going to turn out a little different. Remember what I said about balancing usability with security? You'll need to balance that here.
You can't verify the email on a one page form without ruining the usability. That's one of the reasons why in large systems like Google, Facebook etc, they split the forms logically in a multi-step signup system as we discussed earlier to create a seamless signup system.
Another example would be with OpenAI. Think about when you're signing up for/into chatGPT, a similar multi-step system is used for security and fine usability.
2. Complaints from users:
Make sure you aren't spamming people's emails with campaigns and the likes.
Try to keep things decent and don't send too many notifications from the project. If you're sending notifications, make sure you prompt the user to determine if they want to receive such notifications.
The less emails you send, the better, because you want to watch your email activity
3. Blacklists: If you're trying to upgrade an existing signup system to standard or in a similar situation, the IP reputation may already be bad and blacklisted. You need to check if the email you're sending messages from is found in a blacklist, and if so, get it out as soon as possible.
Internet Service Providers check your external reputation (blacklists), which is a compiled list of email addresses that are not trust worthy based on your email activity and the way recipients react to it.
4. Email activity: You need to be careful on how much your server is sending emails, else you'll come off as spam and lose your IP Reputation which will affect your deliverability drastically.
If you rarely send emails or use a new email IP, your score will be low. If you send an email blast and send a bunch of emails at once, even if it's just high traffic of people signing up (which is good for your project). It can come off as spam and impact your IP Reputation as well.
How do you manage your activity in a balanced way that's not too high or too low? How would you protect your signup from bots? DDoS attacks?
Rate limiting
Rate limiting is a mechanism used to control the rate at which clients or users can make requests to a server or API. It prevents abuse, ensures fair usage, and helps maintain optimal system performance.
Think of it as the traffic lights for activities(traffic) on your server.
Rate limiting is essential for several reasons:
Fairness: Rate limiting ensures that all users or clients get equal access to resources, promoting fairness.
Resource Management: It helps balance server loads and ensures that the system operates efficiently even during traffic spikes.
Security: Rate limiting serves as a crucial security mechanism that shields web applications and APIs from a range of threats, including Brute Force, SQL injection, Cross-Site Scripting (XSS), and Content Security Policy (CSP) attacks.
The way it limits the way requests and activity on the activity makes it difficult for those kinds of attacks to be done on the server. Just like the way a traffic light prevents accidents.
Strategies For Rate Limiting
When it comes to employing rate limits strategies, there's no one-size-fits-all method, but there are several methods based on what you're building.
1. IP-based Rate Limiting:
Implementing IP-based rate limiting sets a limit on the number of requests that can be made from a single IP address within a specific time period.
This approach is particularly effective in preventing brute-force attacks and limiting the impact of Distributed Denial of Service (DDoS) attacks. By monitoring and restricting the number of requests from an IP address, the system can mitigate potential threats while ensuring fair access to resources.
2. User-based Rate Limiting:
User-based rate limiting focuses on setting limits on the number of requests that can be made by a single user account within a specific time frame.
This strategy requires user authentication and is useful for preventing abuse by individual users. By enforcing rate limits on authenticated users, the system can prevent actions such as spamming, scraping, or unauthorized access attempts.
3. Token-based Rate Limiting:
Token-based rate limiting involves assigning tokens to users or clients, which are then used to authenticate and authorize requests.
Each token has its own rate limit, allowing for more granular control over API usage. This approach is particularly useful when different types of clients or users require varying levels of access or have different usage patterns.
4. Endpoint-based Rate Limiting:
Endpoint-based rate limiting allows for setting different rate limits for different endpoints or API routes.
This flexibility enables developers to tailor rate limits based on the specific needs and resources of each endpoint. By implementing endpoint-based rate limiting, the system can optimize performance while ensuring fair access to critical resources.
5. Dynamic Rate Limiting:
Dynamic rate limiting adjusts the rate limit dynamically based on factors such as server load, user behavior, or the time of day.
This approach ensures optimal performance while still providing protection against abuse. By dynamically adapting the rate limits, the system can handle fluctuations in traffic and prevent potential bottlenecks during peak usage periods.
Implementing Rate Limiting:
When implementing rate limiting, it is essential to choose the right tools and libraries based on your programming language and framework. Here are a few examples:
Express Rate Limit: A popular middleware for rate limiting in Node.js applications using the Express framework. It provides easy integration and configuration options for setting rate limits.
Redis: A key-value store that can efficiently store rate limit counters and enforce rate limits. Redis is widely used for its performance and scalability in handling rate limiting requirements.
NGINX: A powerful web server that can be configured to handle rate limiting at the server level, providing an additional layer of protection. NGINX's rate limiting module allows for fine-grained control over request rates.
Implementing rate limiting is just the first step towards building a perfect signup system. It is crucial to continuously monitor and analyze the effectiveness of the rate limits over time. This monitoring helps identify potential bottlenecks, adjust rate limits as needed, and ensure optimal performance and security.
Key Considerations:
Determine the desired rate limits based on your platform's requirements, considering factors such as user expectations, available resources, and potential threats.
Tailor rate limits to specific use cases, endpoints, or user roles to provide a fair and optimized user experience.
Implement logging and analytics to track usage patterns, identify anomalies, and detect potential abuse or security breaches.
Regularly review and update rate limits based on evolving usage patterns, system performance, and security needs.
Rate limits aren't sufficient enough to guarantee complete security, bots that follow your rate limits can still sneak in.
You need to keep bots off the other side of a sign up form. To ensure that all your users are humans.
CAPTCHA
Adding a CAPTCHA to a sign-up system is crucial for ensuring the security and authenticity of user registrations. CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a challenge-response test that verifies if the user is a human or a bot.
The importance of CAPTCHA lies in its ability to prevent automated bots from creating multiple accounts or conducting malicious activities. It adds an extra layer of protection by requiring users to solve puzzles, identify images, or enter specific characters, proving their human identity.
Unlike rate limiting, which restricts the number of requests from a specific IP address, CAPTCHA focuses on verifying the user's identity. It helps prevent automated attacks that bypass rate limiting measures.
Conclusion
The key to a decent real world sign up system is balancing security and usability, we've seen some great usability and security principles to keep in mind when building sign up systems.
Keep them in mind when building projects.
Look up tutorials on how to implement some of the systems mentioned like email verification and rate limiting in your preferred programming languages,and make sure to check out other sign up systems you come across and find ways they can be improved.
Feel free to reach out if you have any questions and join my newsletter to get tips like this on how to build in ways that'll get you cold hard cash.
Remember, practicing is the most important part.
Keep Thriving.
Top comments (0)