Building Great Mobile Forms

How to help users be successful with the forms you are designing

Published in

UX Planet

5 min readJan 31, 2017

Filling out forms isn’t a thing that anyone likes to do. It just isn’t fun, it is something that we have to do, a means for getting something done, merely a tool. Let’s not focus on making it fun, let’s focus on making it as efficient as possible.

Of course it should be aesthetically pleasing, but the goal here is to make it usable and help people get through it as quickly as possible.

Use segmented controls instead of select dropdowns

In a single-select scenario where there are 2–5 selections available use an inline segmented control instead of of a dropdown. Mostly because all options are instantly visible and a selection can be made with a single interaction instead of at least 3 (tap to open select, do the select, hit set).

Condense multiple select dropdowns into a single field

This might not always be possible but a great example is a date selection. There are three parts to it, month, day and year, which means if using dropdowns you’ll end up with at least 3 times a three step operation, which adds up to 9 interactions. That’s a lot. Use a single field for the entire date picker and get it done with five steps — open, select day, select month, select year, hit set.

Use switches instead of dropdowns

A dropdown with 2 options, like “Show” and “Hide” is like a checkbox. As seen before with the dropdown you are forcing additional interactions on the user. The same can be modeled with a checkbox or a switch, a great implementation of a binary choice.

Sliders

Work your way from a monotone, dropdown heavy form to an easily scannable page by switching controls. Consider using sliders for selecting one or multiple values in a range.

Avoid multiple columns

Especially on smaller screens, where the physical bounds helps users focus on the content at hand it is important to keep it in a single column. It is easier to navigate and helps people stay on track.

Use steppers instead of dropdowns

When users need to make small adjustments to values by increasing or decreasing it avoid free form input and dropdowns. Steppers help in minimizing mistakes, and reduce the number of taps for getting the values right.

Show errors inline instead of grouping them

Showing errors in context next to the field is more important then ever. Most of the times the top or the bottom of a form is outside the viewport of the screen, so keeping the users informed right in place is important. Show the errors when they occur, where they occur. Avoid things like simply stating: “4 errors” or listing everything out at either end of the page.

Don’t be repetitive with required fields

As a rule of thumb try to avoid displaying fields that are not required. It makes forms shorter and users happier. There are times however when you can’t avoid it. So when it comes to fields that are optional, highlight it instead of the other way around of displaying Required or “*” for all other fields.

Group related fields

Grouping related fields helps people scan and find what they are looking for faster. It also breaks up long forms into sections. Divide and conquer!

Provide comfortable touch areas

Don’t make buttons and touch areas too small. People are not clicking on things with a mouse cursor, they are using their fingers to tap on items.

Stay true to the platform

With mobile and especially in apps try to stay true to the platform. Use the same interaction patterns when possible and provide UI that is familiar to users. People have the same expectation from a back button in any app running on the same device, may it be iOS, Android or Windows Phone.

Always keep the goals of the user in mind and if you put a little effort into designing forms you’ll reduce the abandonment rate and increase conversion rate. Make sure to subscribe for more articles like this and check out the tools we are building to help you design better forms.