Good Form: 5 Tips for a Smooth Sign-up Process

Creative Services Lead

Good Form: 5 Tips for a Smooth Sign-up Process

A lot of effort goes into engaging your visitors to ‘Sign-up’ or ‘Contact’ you. You send them a warm and fuzzy invitation to complete the form, tell them all the great reasons why they should complete the form… but who likes to complete a form? You can help guarantee a smooth sign-up process and increase the completion rate of your web forms with these five tips.

#1 Make it Flow

Before you begin designing that web form, it is always good to create a User Flowchart. Working to establish the form completion process from start to finish, a flowchart will help you:

  • Determine what information is needed (and when)

  • Decide what actions and interactions are appropriate

  • Determine the order of actions

  • Make considerations for new patterns to aid the completion process

A User Flowchart can begin with a simple Flow Outline, which can then be placed in a flowchart diagram and later illustrated using low-fidelity paper prototypes to find the most natural set of actions. When creating the outline consider the following:

  • The Business Objective

    • What is the main objective of the website for achieving successful completion of the form? (ie, we want to gather as many email addresses as possible.)

    • What is the required information needed from the person completing the form? (ie, we need their name and email, and since our site is only for adults we also need their birthdate.)

  • The User Persona

    • Take advantage of the information gained from the User Personas to focus on the user’s various needs and considerations. What problem do they want to solve and how can this form help them?

    • What devices do they access most frequently to complete web forms? It’s good to know in advance if most of the users complete forms on their mobile phones and/or if they have inferior internet connectivity.

  • The Entry Point

    • When designing a User Flowchart, keep in mind the point of entry. Perhaps they arrive after clicking the Call to Action on the homepage. But often web forms are a part of an email or social media campaign, or the user arrives at the form after an organic search. The users should be treated differently based on where they come from and may need ‘orientation’ when they arrive. Consider all possibilities.

#2 Keep it Short and Sweet

Don’t ask for information that’s not needed. Your sign-up or contact form should only ask for the bare necessities needed in order to accomplish that goal. People will usually stick around long enough to enter their name, email address, and password. Anything more than that should be the absolute minimum amount of information needed, with further data obtained in follow-up communications. No one enjoys completing a form, so keep it as simple as possible!

  • Email Address

    • Forward thinking email form fields provide suggestions for fixes when the email address has been entered incorrectly. … Did you mean

    • If you include an auto fix for mistyped email addresses you won’t need to require the user to enter it twice. Otherwise, it’s is a good approach to provide the extra guarantee that they’ve got it right.

    • When the form is for creating an account or signing up for a newsletter, a current practice is to use the email address for the account instead of providing a separate username. This will cause less frustration with creating one that is not already in use, as well as remembering it every time they log in.

  • Name

    • The person’s name is really only needed in instances where account personalization or custom communication is used. A frequent approach is to provide one field for their full name. This is a bonus since some users may have more than two words that make up their full name, and one field takes less time to complete (especially on mobile devices). Check first to see if the system requires the first name to be isolated for marketing purposes.

  • Password

    • Enough with the confirm password already! They will lower your conversion rates. Give the user the option to actually SEE the password they’re entering with a ‘show password’ toggle and they won’t have to enter it twice.

    • Include a Password Strength Indicator. You can get creative with messaging to encourage users to try harder when creating a more secure password like Geeklist does: “Crack Time: 5 minutes”

    • Give them the ability to never have to enter their password again with the ‘Remember Me’ feature.

#3 Make it Easy to Read

Including the labels and inputs, consider the context being used for all text on the page  and work to ensure your font sizes are large enough to be legible on all devices. The amount of content on the page should be considered while using best practices for accessibility.

  • Recent trends are a 14px font size at minimum.

  • When specifying a 16px font size for mobile devices, iOS will not zoom in when the user taps the field, because it’s not needed. This approach can be less distracting especially when there are multiple form fields on the page.

  • Consider the maximum amount of characters that will be needed in all cases to ensure enough room is provided to complete each field. For example, some zip codes in other countries use a varying number of digits.

#4 Inform Everything

  • Label All Things

    • The label of the form field you want the user to complete should ALWAYS remain visible. The labels can be placed outside of the field near the top, right, or left — or even better — use the Infield Top Aligned Label. This popular new approach has been found to be the quickest to scan, has the best flow, and takes up less real estate. The labels are placed inside of the field, jumping to the top left corner as the user begins typing. Either way, at no point should the user lose sight of the information that’s needed.

  • Inline Form Validation

    • Inform the user as they progress if anything has been entered incorrectly or if a field is missing information. Don’t make them click the ‘Submit’ button at the end of the form only to receive a bunch of red text telling them what they have to re-do.

    • Micro interactions such as a simple green check or a red ‘X’ along with a brief message as the user completes the form will improve the workflow.

    • Tell them if their CAPS LOCK IS ON.

  • Required or Optional?

    • Inform the user which fields are required and which are optional for the form to be accepted. An asterisk is often used to designate required information, but they are ignored by screen readers so make sure the required fields include the HTML5 ‘required’ attribute or the aria-required set to true.

  • Field Details

    • Explaining the information needed for each field is another great approach. If your Registration Sign-up Form will require a password with at least 6 unique characters with 2 of them numbers, tell them! Does the phone number field require a a +, or a country code, or an area code? Tell them or show them.

  • Progress Bar

    • A form that’s broken into logical steps is easier to complete. If there are multiple steps that require multiple screens to complete, add a progress bar so the user knows where they are in the process.

    • If possible, add a link to the completed steps in the progress bar so the user can go back if needed.

  • Safety

    • Make your users feel safe during sign-up by informing them about your terms, policies, or rules.

    • Ensure them you will not share their information or spam their email.

    • Provide an easy way to cancel or opt out at any time, without much effort.

#5 Must be Mobile

While optimizing your site for mobile devices, any forms on your site should also be carefully considered. Not only are the screens smaller, but often the connections are slower, and entering text can be a bit tricky, so reducing the number of required fields is especially important. Luckily, recent innovation for mobile forms have provided modern solutions and compression techniques that could actually encourage sign-up on a mobile device:

  • Predefined DropDowns

    • Whenever possible, avoid open input fields and provide a dropdown list instead for easier completion.

    • Dropdown selections should be written as they would normally display (ie, Credit Card expiry date: 01/17). 

  • Collapsible Menus

    • This really helps when multiple offerings are available with details for each.

  • Predictive Search Fields

    • As the user begins typing the keyword, a list of possible results is provided.

  • Calendar Tools

    • Use a calendar that is easy to use, with big targets that help to avoid user input errors.

  • Combine Inputs When Possible

    • Providing only one field for a ‘Full Name’ instead of one for ‘First Name’ and one for ‘Last Name’ will speed up the form completion process and reduce user frustration.

  • Automatic Advance

    • The system should recognize when a date or email has been entered and take the user to the next field automatically, whenever possible.

  • Buttons That Engage

    • The ‘submit’ button should use energetic calls to action such as ‘Sign-Up Now!’

    • Use bright, engaging (and accessible) color combinations. Color changes on tap add even more visual information about the progress.

    • Ensure the tap target is large enough for users with big fingers or who have difficulty being accurate. Apple's iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall.

Additional Resources
The 5 Commandments of Accessible Forms
Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes
Why the Confirm Password Field Must Die
Build It with the User in Mind: How to Design User Flow 

comments powered by Disqus