How to make sign up pages NOT exhausting
Signing up- a simple process indeed. You click on the sign-up option — enter the details — and voila, you’re registered. However, no one wants their sign up screen to be sitting as showpieces. You need people to register in order to expand your customer base.
Further, as a business, the goal is to maximize sign-ups and a poorly designed page will most certainly not do the trick. A case study by Formisimo revealed that something about the sign-up page was responsible for the loss of over a quarter of their potential clients. So, read on further in order to design an effective sign-up page!
1. Length of the Page
According to a research by Imaginary Landscape, forms with only four fields had 160% more conversions as it asked for only essential information. This further lead to conclude that the number of questions on a form directly correlated with the rate of people dropping off the form without completing it. After researching 40,000 contact forms, Dan Zarrella at HubSpot reveals that conversion rates improve by 50% when the number of form fields is reduced from four fields to three. Thus, in other words, minimize fields and thus steps involved, further reducing interaction cost.
An article by Instapage recommends some fields to get rid of:
- Username: Do users need a username to sign-up? Or is their e-mail account sufficient? If the username is required, could it be determined at a later stage?
- First/Last Name: Consider using a single field called ‘Full Name’ as a consolidated version of two different fields. You could also just ask for First Name or username if the email id is not sufficient.
- Confirm Password: This field is outdated and only necessary because of password masking. Instead of using a “confirm password” field, allow users to see what they’re typing by unmasking the original “password” field, or using a “show/hide” feature
- User Agreement: Instead of making your users click a checkbox stating they agree to your user terms, consider including a message above your CTA.
2. The Type of Page
Sign up pages can appear in a variety of types — modal or form. Depending on the amount of information required, designers can choose any of the above
- MODAL WINDOW
If the users need to sign-up for a newsletter or exclusive content (like Zoho Academy), for example, a modal window would probably be appropriate as the information required is relatively less than that required for signing up for online banking or mission-critical sign-ups. A modal window can be a great solution as there’s no overlooking or neglecting it. Subsequently, the sense of impatience or interruption disappears when a visitor realizes they can either click that “x” to get back to what they were doing or quickly fill in their email and carry on.
Designer, Joshua Johnson, explains why a modal window is effective for quick conversions:
They overlay current content instead of taking you to a different page. Somehow that’s just less unsettling than being whisked away to somewhere new, which feels like an interruption. By dimming the homepage graphics and bringing up a modal sign registration form, you get the sense that the process will be quick and painless and that you’ll be back to browsing in no time.
- FORM
If you believe that you absolutely don’t want to sacrifice the essential information required, ask for it in steps. Multi-page forms make converting less overwhelming by separating the process into several short steps.
Spacious forms with larger fonts, longer fields, and descriptive labels may be more aesthetically appealing and effective as the user would feel more comfortable. Moreover, adding a progress bar or the number of pages left maintains the users’ anticipation during the registration process.
On the other hand, shortening the form by cramming in small fields, with small fonts and a non-informative process is likely to overwhelm the user.
3. Headline
In a form, the sign-up page is the last step in the conversion process. At this point, the user has already evaluated your product or service and is ready for registration. An effective tagline that calls the user to action would only increase the chances of conversion.
If the sign-up conversion begins as a modal window as soon as the user visits your webpage, they might need a nudge in order to register/subscribe. This is where the headline comes in and an effective one would compel the users to sign-up.
4. Social Autofill
Social Autofill allows users to breeze through the page with a single click and import relevant information they’ve already submitted to social networks. This feature extracts data from users’ Facebook and Google+ accounts or their Open ID login credentials to complete fields. The social autofill feature in forms is
- Faster. In the fast-paced world that we live in, it is proven that the longer it takes someone to fill out a form, the less likely they are to do it. Respondents love short forms that they can finish quickly, thus, speeding up the conversion process. It’s a win-win!
- Effective. This feature is the best way to reduce the interaction cost and help capture more data. All it takes is one click and BOOM, the fields are automatically completed even if the form is a long one with more than 4 fields. [refer to the section: Length of the Page to understand the reference]
- Engaging. Nearly three-quarters of all mobile users wait up to 5 seconds for a web page to load before leaving.
5. Placeholder Text
A User-Experience research by Nielsen Norman Group verifies that Placeholders in Form Fields Are Harmful.
Fun fact:
The placeholder text in the form fields often hurt usability more than help it. It is even worse if the placeholder text is a replacement of the label.
The following 6 drawbacks prove that using the placeholder text as a replacement for labels should be a big NO.
- Users’ short term memory is strained when the text disappears. A user is likely to forget the hint in the form field which results in frustration at the users’ end. Worst case scenario- they click away and refuse to sign up altogether.
- An error-prone form- without labels, the user won’t be able to check the information entered. Further, social autofill might also fill incorrect details. This can be dangerous while entering banking information, social security numbers, credit card information, etc.
- … in the case of error messages, they will also be unable to fix the problem of they don’t even know what the problem is.
- Invisible fields- The placeholder text may render form fields invisible as users’ eyes are drawn more towards empty fields and users may consider the placeholder-text form field as already filled in.
- Irritate tabbing users- when users tab through the form in order to finish it quickly, they don’t often examine the next label before actually getting to it. This will probably annoy the lesser interested users into giving up.
- Additional interaction cost for editable placeholder text- Even if you manage to keep the placeholder text from disappearing, it doesn’t do much good. Manually editing the placeholder text adds to the unnecessary burden on the user for filling the form/page.
Bonus: Additional Design Tips
- Encourage easy input through clear and simple design. Most users scan the form before filling it.
- Align fields and labels to the left to decrease eye movement and speed up the processing time. Also, single-column forms are better than two-column ones.
- Users are more likely to fill visually larger fields rather than smaller ones
- Make questions clear and precise with no room for confusion. If ambiguity arises, give an example or specify requirements
- When reporting input errors, highlight the field(s) responsible to alert the user.
After this research process, I created a sign-up page of my own. The aesthetic challenge was to use a patchwork theme that uses cool, bold colors. So, I designed a modal window for a fictitious patchwork club.
As the purpose of the sign-up page is to get the users to sign-up for e-mail notifications about news, challenges and products, I kept the length of the window to only one field that requires the e-mail id. The two other options for social autofill (Google and Facebook) are enabled to speed up the conversion process and reduce interaction cost. Also, the headline was carefully chosen to encourage a spirited and somewhat comical effect. I also ditched the placeholder text and used larger elements in the window to make it more eye-catching.
What does your signup page look like? Do you have any tips that I missed? Let me know in the comments below.
Are you an artist, a designer or a creative person in general? Check out what the Adobe creative type quiz has in store for you!
If you are new to Adobe XD, I have another recommended read for you. Enjoy a quick read: Adobe XD, beginner-friendly!
