Filling out forms can often be considered as busywork. However, a good UI designer will be able to turn an otherwise chore-like activity into something either efficient enough that the user doesn’t think about it too much, or engaging enough that the user actively enjoys doing it. Form UI design is something that can be easily overlooked in the bigger picture of user interface design, but it is an important aspect to master for any designer. It’s mostly difficult because there aren’t any hard and fast rules when it comes to the form design UI, which is what inspired us to compile this list. We’re breaking down the 7 best form design tips which can instantly elevate any form UI from good to great.
Stick to using one column
The UI design process is, in essence, all about streamlining everything for the user, and this principle doesn’t change in form UI design. When creating a form, present all fields in a single column, instead of multiple. This has the effect of creating a vertical flow, which gives the user a sense of progression as they fill out blank fields. A benchmark conducted by the Baymard Institute suggests that 13% of all forms online utilize a multi-column set up, a staggering amount for something inadvisable. They also concluded that users are more likely to skip out fields, and input information into incorrect fields on forms with multiple columns. With this in mind, whether you’re doing website form design or mobile form design, stick to one column, and the results will be noticeable.
Drop the placeholder text
This is something which tempts many a UI designer in UI form design, and with good reason, it is a quick way to spice up any interface! However, studies conducted by the Nielsen Norman Group (the forerunners of research-based UX UI design) suggest that placeholder text is far more likely to confuse users than point them in the right direction. Essentially, NN/g argue that these placeholders strain the memory of users, and make users more likely to miss fields as well, a huge detriment to any forms UI. This flies in the face of the thousands of forms with placeholder text, which was believed to be a trendy, quick-fix improvement to UI’s just half a decade ago. NN/g goes one step further, however, and suggests alternatives to placeholder text in form design UI.
Their research suggests that floating labels are a much stronger, less confusing, and more efficient way to display information pertaining to blank fields and promote user retention throughout the form filling process. As can be seen in the wireframes, and the final product of our SuprDaily micro-delivery platform, team Onething greatly favored floating labels, as our research too suggested their superiority over placeholder text when it comes to the form UIs.
Steer clear of dropdown menus
Dropdown menus are a long-standing staple of form UI design, however, with the rise of mobile users in the past 10 years, they have become less and less precise. On mobile, in particular, a dropdown menu usually requires 3 or more taps to complete one action, these are opening the menu, scrolling at least once, and selecting the appropriate option. Adding to this the fact that most forms will require more than one dropdown menu to be filled out, that’s an immense amount of clicks for what could be a simple operation otherwise. Instead of using dropdowns, try using steppers, radio groups, or sliders as appropriate in your form UI, as these are far more efficient uses of forms fields, and are easier on the user as well.
Size your fields according to the question being asked
Something which is often overlooked in form UI design, is the actual size and positioning of fields. Deciding, in particular, the size of your fields has a big impact on how the user goes about filling your form. The size of a specific field gives the user an idea as to how much information is required to answer a particular question, intuitively influencing the length of their answer, without intruding the process at all. For example fields for a zipcode question will be much smaller than a street address question, and this will communicate to the user that one question requires a far more detailed response than another.
Clearly, visually mark optional fields
In an attempt to keep your form UI as crisp as possible, you shouldn’t have any optional fields at all right? Wrong. Fact is, neither forms, nor form UI design processes are ideal, and you might have situations where optional fields can do you big favors. The tip here, however, is to clearly communicate to the user what fields are optional, and what isn’t. This needs to be done using clearly communicated cues in your form UI. Doing this can make them far less likely to be confused, and also question why certain information is being asked. This practice is often associated with an asterisk to mark required fields, but can oftentimes confuse users, since asterisks are also used in some forms to denote optional fields. Refrain from getting caught in the ambiguity of using the asterisk, and try to instead use text tags instead, such as an “(optional)” tag above the field which isn’t required.
Divide and arrange questions intuitively
The process of filling out any form should feel natural, and organic from the user side, something to consider in your UI form design. Stick to known conventions, such as asking for names first in the form, or doing a ‘username’ and then ‘password’ in account creation. These conventions are familiar to the user, and they will naturally feel a certain comfort when these things are in place. Additionally, if you have more than 6 questions on a form, it’s advisable to divide them into different sections, for easier understanding and digestion on the users’ part. Be sure to provide a small amount of white space between sections, to clearly indicate where one has stopped, and another has begun.
Make error messages clear
A point which is carried over from our ‘Login Screen UI Design Tips’ blog, which demonstrates how commonly this is omitted from the UI design process, particularly in form UIs. There will always be restrictions placed on the possible answers which a user can enter, these can include certain password security requirements, using valid emails, or having appropriate language in a username. For this reason, telling the user exactly how to fix something when it goes wrong can be an immense relief for them, and contribute greatly to any form. A clear, visual indication should be in place on your forms UI, which lets the user know when something has gone wrong, and the steps to take in order to fix it.
Be mindful of page numbers
There can be some oddities when viewing a forms UI at times. Examples that come to mind are forms with 10 questions on 10 different pages, or the more intimidating, forms with 100 questions on 1 page. Don’t be this kind of designer, arrange your questions smartly, and appropriately across a well-thought-out number of pages. As an extension to the second point on this list, just as you should arrange your questions intuitively in form UI design, you should arrange your pages intuitively too. A good example of this is the PayPal signup form, which keeps personal data on one page, and finance-related data on the other. This creates a clear distinction between the two aspects of their operations.
Tell the user ‘why’ you’re asking for something
Sensitive information such as phone numbers, family information, or identification details can easily turn off any user from filling out a form. Naturally, as with other aspects of UI, in form UI design being transparent is the solution, and can make the user much more likely to fill out the form in its entirety. Having a small note near the field when asking for an email stating ‘we will never share this with anyone’ may seem cliche, but does make a difference when it comes to developing trust with users, and is a simple enough change which can be implemented in all kinds of website forms and mobile forms.
Conclusion
Great UI form design can seem difficult, since it can be a crucial part of any app or website, and many designers are led to believe that tinkering with established formulas will damage their UI. This, however, is not the case, and the fixes mentioned in this blog can be easily ‘plugged and played’ into any form UI, to instantly make a noticeable difference.