• Skip to main content
  • Skip to footer

InRhythm

Your partners in accelerated digital transformation

  • Who We Are
  • Our Work
  • Practices & Products
  • Learning & Growth
  • Culture & Careers
  • Blog
  • Contact Us

Nov 14 2018

5 Best Practices for Building Better Forms

 

Various forms like sign-ups, logins or checkout pages are seen everywhere in application and websites, but what attracts a user to fill one out? What exactly makes one click the sign-up or call-to-action button on the page? Forms exist to be filled out, but there are a surprising number of forms which—through poor design, excessive fields, or other factors—push users to abandon them, unfilled. Make your forms simple and easy to navigate, and watch the data come flowing in. Here are a few best practices when putting together your own forms to keep engagement high:

Ask for less information (and have an easy login!)

If you have a page with a sign-up flow for a new mobile app, what do you want to know from your user? It depends on what the product is and why you need the information from them. As an example, a date or friend matching platform would want your age, gender, and zip code on one screen. The next page could be preferences about the person you are hoping to match with. All of this information is necessary for the app’s purpose, but connecting to Facebook or Google has also made it much easier to skip certain steps of this process, and less info needs to be filled out.

Graph explaining process of "Login with Facebook" functionSource: https://developers.facebook.com/docs/facebook-login/overview

The above image shows how easy it is for the user to access all of the fields needed—i.e. name, picture, friends—from the Facebook API instead of filling out the same information manually.

Single-column ease vs. multi-column stress

When you’re making a form, make sure it’s single-column instead of multi-column, since it’s easier for users to scan through and complete instead of trying to tab through different fields and potentially getting frustrated.

Form Flow Guide

As the image above illustrates, it’s easier for a user to scan through one column, answering questions in a linear format instead of doing a Z-pattern back and forth.

Automate, automate, automate

One of the best form practices for improving design is automation, since it makes it easier for the user to go through fields faster when what they type is automated, and without worrying about switching from lower and upper cases. The only fields that should not be capitalized are emails and passwords, since those cause delivery issues.

Progress tracker

A user who is filling out a form—unless it’s a simple sign-up—wants to know how long the process will take them, and maybe even if it should be filled out now or saved for later. For mobile and desktop alike, a progress tracker should be included, like the examples shown below.

Survey Progress Bar Example
Source: https://uxplanet.org/progress-trackers-in-ux-design-4319cef1c600

If the user is on a certain step it’s important to note that as well, all within an easily understood display of what they’ve already completed.

Testing (even when you don’t want to)

This is the step that many don’t even think of taking, since the design could be flawed and more time could be wasted in redesigning. The form you just created should be tested on a few different devices (at the very least on mobile and desktop) to see if it actually works and makes sense. What’s the point of developing a product that doesn’t work for the user?

There are many more best practices for forms, but these are a few of the essentials that should be included in yours to make progress as easy as possible. The ultimate goal is getting the user to click on the “continue” or “submit” buttons in the end. By following these best practices, you can remove common roadblocks in form submissions and make the experience better for your users. Subscribe to the InRhythm blog for more UX and UI blogs from the design team!

Written by Lily Malykhina · Categorized: Design UX/UI · Tagged: best practices, ux

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

Interested in learning more?
Connect with Us
InRhythm

140 Broadway
Suite 2270
New York, NY 10005

1 800 683 7813
get@inrhythm.com

Copyright © 2022 · InRhythm on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT