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 four step operation, which adds up to 12 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.