3 Keys to Great Form Design in Apps

I’m writing today about everyone’s favorite topic: Form design. OK, maybe it’s not quite as interesting as Taylor Swift giving out relationship advice on Instagram.

While you may consider the topic of forms a buzzkill, forms can have a huge impact on the success or failure of your mobile app. We at ArcTouch are inspired by the details that produce successful forms.

Why Form Design Matters

Forms often mark the entryway to your company’s ecosystem and the beginning of a product experience. Wrap your head around that for a minute and think about how important first impressions are.

For the first-time visitor who’s heard about your company but never tried your products, the sign-up form is like a first handshake. The login form sets the tone for repeat visitors, like the familiar barista in your favorite coffee shop. In both cases, the form is an ambassador of your brand.

Functionally, sign-up forms must guide users easily through the onboarding process. Log-in forms need to be simple enough to comfortably use every day, offering as little resistance as possible. Longer forms can be tedious, especially on a mobile device, so it is a challenge to create an experience that will keep a user’s attention without frustrating them.

Beyond offering a good app experience to your customers, the form is the quickest way for you to learn what information you need from your user to create the experience you want to offer them. But if these forms are confusing or too laborious, you might receive bad information — or worse, lose potential customers. Form abandonment can make a negative impact on your business.

The 3 Things that Matter Most

1. Clarity

Truly intuitive forms are achieved using the right wording, layout, order, keyboard, padding, font size and color.

Wording on the form must be understandable, without any ambiguity. For example, you might think everyone understands what to enter into a field labeled “Name.” But is it obvious whose name it is? Your name, someone else’s name that you are sending something to, or a new name for a document? If it is your name, how specific does it need to be? Is it an arbitrary nickname, username to sign up for a service, or the exact name from a government ID?

Some simple advice: Test your wording before you push a form live. Send it to your internal team to complete and ask for feedback. You’d be surprised how much is open for interpretation.

Layout plays a major role in how easy a form is to understand. Labels can be positioned above an input field, to the left, inside the input field, or even as placeholder text within the input field that gets replaced as the user enters information.

Having labels above the input field allows for more flexibility on the line length of labels, however forms with this layout become long quickly. Labels to the left of input fields are common in mobile because they make forms quick to scan. Also, when your on-screen keyboard is active, the label is nicely aligned above the keyboard every step of the way. The downside to this technique is the labels must be succinct. Character length becomes an even bigger challenge when forms need to be localized to multiple languages.

The order in which form fields are presented is also important. You need to usher the user through a story that makes sense and avoids confusion. If you’re taking your user through account setup, asking for a “Password” after their “Email Address” might lead them to enter their email address password instead of creating a new one for your service.

Choosing the right keyboard type is also critical in designing forms. Users expect to be able to type letters and numbers into a password field, they expect to see the @ sign for email addresses, and they expect a telephone keypad for telephone numbers. If they can’t easily find the right characters, some will abandon the form.

Using padding and white space is more than simply finding a visual balance. If you choose to position a label above an input field, it is important to make it obvious whether the label is for the field above or below it. The simplest way to do this is to add additional padding to separate the fields (as shown below in the Label Above form). Another thing to be aware of with padding is tap regions. Apple suggests at least 44px tap regions. If your design has a button that is smaller than 44px tall, you should compensate by adding additional padding between the tappable elements.

Font size and color work together to insure legibility in forms. If the text is too small or does not have enough contrast, you might send your users reaching for their glasses. Read up on best practices for font sizes and color contrast levels. Never use a mobile font size under 12pt. Use a tool such as The Colour Contrast Check Tool  to make sure your text is W3C compliant. If color is used to distinguish labels from input fields, they need to be distinct enough so it is obvious which values are editable.

2. Simplicity

Overwhelming forms will be skimmed or abandoned. If the text introducing the form or the labels within it are too wordy, some people will read only the first few words and assume they already know the rest. This could cause all sorts of problems.

Worse, when presented with a long form on their mobile device, users re-think whether this is a good use of their time and might feel more like they’re signing their life away. Studies show the longer the form, the more likely your visitors will leave forever — or they may decide to try to sign up later on their computer because it may be more efficient. If it’s the latter, you have to hope they remember to come back.

Generally, sign-up forms for mobile need to be as short as possible, capturing only the minimum information. Really think about the bare necessities, and eliminate everything else. For example, while requesting a U.S. address, “City” and “State” fields are not needed if you have a “Zip Code” field. Also ask yourself whether you really need an address.

3. Error Handling

One of the biggest challenges with forms is addressing errors — and communicating the right information back to the user. People intrinsically think they have done everything right — and don’t like to be corrected. It is best to explain things such as “password must be at least 8 characters” upfront. Do not wait until the user has thought of a password, typed it in and submitted the form to tell them that they did it all wrong — or you risk losing them.

It is best practice to use real-time validation for each field in the form. This way, users receive immediate feedback rather than completing the form, hitting confirm and THEN seeing an error.

However, real-time validation can be overdone. When users start typing they should only see an error after they leave the field. Sometimes apps show errors before the user has finished filling out a field. People will start to ignore errors if they see too many of them.

Overly verbose error messages can also add aggravation. Instead of saying “Please remember to fill in this form field, it is required,” perhaps just say “Required.”

Remember to be considerate of color blind users when styling a form; if the text on a form is green, using error text that’s red will go unnoticed. It is best to add an additional indicator besides color to call out the error. Thicker line weight, icons, or error text solve this.

You can’t always rely on real-time validation; some form validation has to be done on the server side. Think about a sign-up form that needs to check the server to see if an email address is already registered. Validation like this must be prompted via a “submit” button click. It is often disorienting to return to a completed form and search for errors. You can make it easier by helping the user focus on the first error on the screen by automatically scrolling to it, and launching the virtual keyboard.

Whitney Wilson González works as both a designer and hybrid app engineer at ArcTouch. When not glued to her computer, you can find her outside exploring any sport from snowboarding to slacklining.