UX Breakdown: Sign-up Page

All information you ask users to submit should relate to the task they want to accomplish. The longer the sign-up form is, the less likely users are to finish it. 

Stats say that 67% of people who abandon long online forms never return.^[1] To prevent this, only ask for the information you absolutely need. It's better to ask for optional details later — for example when users visit their profile page.

Most users that arrive at the sign-up page are fairly familiar with the product. Still, this is an excellent opportunity to emphasize what benefits registration brings, and the headline is a great place to do that.

Make the headline concise but meaningful. For example, instead of using a standard "Sign Up," rephrase the value proposition. Some great examples include Facebook's "Connect with friends and the world around you" and Spotify's "Sign up for free to start listening" headlines.

Adding hints about what goes inside each form field can improve completion and conversion rates. These hints are usually provided with labels and placeholders.

Labels tell users what information belongs in a field and are usually positioned outside of it. Placeholder text is typically an example of the information users need to enter and is located inside the field itself. 

Don't rely on placeholder text alone! It disappears when users start typing, and they must strain their memory to remember what it said. It's also terrible in terms of accessibility. For low-vision users, the contrast can be too low to see, and many screenreaders can't read placeholders.

You should only use placeholders as an addition to labels and not as their replacement. Another option is to use floating labels placed inside a field like placeholders — they move to the top of the input when users start typing.^[2]

Social media profiles usually contain a lot of personal information. To ensure users that data is secure, set reasonable password requirements. Keep in mind that coming up with a password that meets all security needs can be tedious and time-consuming.

To help users create a password:

1. Clearly but briefly explain password requirements
2. Avoid setting too many requirements — users can get frustrated and abandon the task
3. Provide real-time password validation. For example, as a user types a capital letter into the field, the capital letter requirement gets a green checkmark
4. Add the option to show/hide password
5. Add a password strength meter. For example, a script to visually show security levels: green, yellow, and red^[3]

Most users are ok with signing up if it takes little time. To make things even easier, add an option to register and log in with third-party providers (e.g., Google account, Facebook, Apple ID, etc.). Research shows that conversion rates of apps that offer third-party authentication increase by 189%.^[4] Linking third-party accounts simplifies sign-up in several ways:

• Users don't need to manually enter data as the system gets it automatically from their pre-existing accounts
• There's no need for email verification
• Users don't need to set and remember a new password
• You don't need to store confidential data on your servers

A word of caution — not all people are eager to share their personal data from other accounts. So, make sure users can register the traditional way with their email or phone number.

Research shows that most people accept legal terms and conditions without reading them.^[5] Still, you need to link them on the sign-up page. Quick access to the agreements gives users a sense of security and confidence that their data is protected.

Speed up the process by alerting users that they agree to legal terms when clicking the sign-up button. Companies that comply with the GDPR or fall under the jurisdiction of CCPA must require users to click a checkbox to opt in. It shows that they make a decision and agree to your Privacy Policy.^[6]

There are two approaches to combining login and sign-up forms.

• Having two different and visually distinct forms: It minimizes users' frustration as they know exactly what journey they are on.
• Using one form: Once a user enters their login credentials or uses their social media profile, the service checks if the user already exists. If not, the service creates a new account. The downside of this approach is that it encourages the creation of accidental accounts. For example, when users misspell their email or use a different email than the one they registered with.

The Sign Up button is the most important element on the page. The more visible it is, the higher the odds of users finishing registration.

One way to make the button stand out is to use one of the brand colors. A nice touch is to add button states to communicate button status: default, disabled, hover, focus, activated, pressed, and loading.^[7]

Keep in mind form accessibility. The color contrast ratio between the button's background and label should be at least 4.5:1 for normal-sized text.

The CTA button is a place where you can highlight the biggest benefit of completing the registration. Get creative and develop a unique label that represents your brand's voice and tone.

You can start by putting yourself in users' shoes and finish the sentence "On this page, I want to…". The answer to this question — for example, "Create an account" or "Join the community" — will help you come up with the right label.

Creative CTA buttons are not a requirement — sometimes simpler is better. If nothing creative comes to mind, use one of the common options users are familiar with: "Sign up," "Register," or "Join."

Input style is not the place to unleash your creativity. Users have expectations about what inputs are supposed to look like. Experimenting with the border radius and colors is generally acceptable, but be careful not to overdo it.

Design different input styles to indicate if users can interact with a field and provide feedback. Aim for 6 states of input fields — default, disabled, hover, focus, error, and success.^[8]

The sign up page is an excellent place to represent your brand with brand colors and logo and increase recognition. Traditionally, on mobile, the logo is placed above input fields. In web and desktop apps, the typical logo placement is either in the upper left corner or above the input fields.

Keep it sized proportionally to other page elements — it should not steal attention from the sign up form or be hard to find.

According to Nielsen Norman Group, it's important to let users know what's going on in the system and if their actions are registered. System feedback also helps users decide what steps to take next.^[9] When designing a sign-up flow, you need to indicate that the sign-up process was successful. You can do it with a progress indicator showing the loading state, and its completion or a small animation triggered when users click or tap the button.

The feedback should appear on time and be visually evident. You can use color, graphics, animation, or microcopy to notify users about successful (or unsuccessful) signing up.

The last and most important step of the sign-up user flow is to ask users to confirm their accounts. The most common ways to do so are:

• Via phone: Send a verification code to users' phone numbers and asking them to enter it into the app. Compared to email, phone verification is a more secure way to guard against fake accounts.^[10]
• Via email: Send a link to their email that they need to activate. If users go with social sign-up, the link should be sent to the email they used for registration at the social media app or website.

Most social media apps or websites allow unauthorized users to view content without the possibility of connecting with other users, posting updates, or performing other essential activities.