20 Quick UX Tips for Designing Usable Forms

By Momentum |

1. Tell Users What They’re Submitting

Submit is no longer a reasonable action for users to complete. It’s important to speak your user’s language and “submit,” doesn’t tell a user much. Go for the alternatives like, “Sign Up Now,” “Get In Touch,” etc. Tell your users exactly what action they are completing.

2. Error Handling

Users don’t want to fill out their entire form again, if they’ve only filled out one field improperly, let them fix that one and carry on. If you clear all of their fields, even the ones put in properly, you’re adding a gigantic amount of frustration to their experience and will suffer in dropped traffic.

3. Error Explanations

Keep error messages concise, polite, and informative. They should explain why there is an error and how they are to be corrected in simple, human terms (again, speak their language!)

4. Error Styling

Errors should be styled in a manner that is easily noticeable at a glance. Use color, text, icons, or whatever means necessary to not only highlight the problem area, but also explain their error (See Error Explanations above).

5. Keep it simple

Only ask for necessary information, keep forms as short and simple as possible. Online forms and any other methods of interaction can easily be a point of frustration for users. Make their life easier and you’ll benefit in higher conversions.

6. Input sizes

Match the size of the input fields to the expected length of answer. A zip code or Social Security Number will always be the same length, design with this in mind.

7. Radio Options

When using radio buttons keep the number of options to a minimum (4 or 5 at the most), after which it is more efficient to use a dropdown selection to save screen real estate and keep things simple. In each instance they have to pick only one option, so why not save the room.

8. User Formatting

It’s common to see forms with explanations on how exactly they are to format certain fields (social security, credit card, and phone number are a couple examples). With the idea of keeping forms as simple as possible keep this formatting behind the scenes. You know what characters are needed and your form can be developed to strip out any unnecessary special characters that the user adds. Explanations can be misconstrued, misunderstood entirely, and lead to errors in formatting. Keep it simple and do the extra work necessary to keep this behind the scenes.

9. User Formatting Continued

If a specific format is required which can not be handled by the processing of the form behind the scenes, state this clearly and concisely. The better alternative is stated above, but if this is not an option for you make it as clear and concise as possible.

10. Insanely Complex Passwords

Passwords don’t need a special character, number, letter, upper-case letter, etc. The length of password derives how secure it is, not the characters within it. Let users choose which characters to use in their passwords, so long as it is at least a particular number of characters (7 or 8 is ideal).

11. Form Confirmation

After the form has been submitted, clearly tell the user in familiar language that the form has been successfully completed / submitted. And what steps they can take from there.

12. Reset Button

Do not include reset or clear buttons, plain and simple. Especially right next to your submission button. These can be clicked accidentally and cause a world of frustration in having to fill out the form again. There is really no reason a user would find it necessary to re-do the entire form they’ve been filling out. These were implemented with the thought of making life easier for users, but they only accomplish the opposite.

13. Social Sign Up

Where applicable signing up through different social media platforms (facebook, twitter, etc) can save time and trouble. Reiterate to your users that you won’t be posting to their accounts without asking. This builds trust in what could be seen as an untrustworthy sign up. Users fear that you will use their data inappropriately, or post out to the public without their consent. Take the necessary step in building trust and explain your intentions.

14. Required Fields

If necessary, highlight what fields are required and which are not. Although it is best practice to include only what is absolutely necessary, if for whatever reason this is unavoidable and extra fields need to be included they need to be clearly highlighted.

15. Focused Field

Let users know where they are in the form by clearly highlighting which field they’ve clicked into or are typing into. This will avoid lost placement and cut down on confusion.

16. Field Labels

Inline field labels have been gaining a great deal of popularity, but they have risks. If a user clicks into a field and forgets what information is being asked they’ll click out of the field and back in. This adds to the amount of time and frustration for users. Be careful when using this type of styling. A possible solution is the float label pattern by Brad Frost. Although it is still being worked on, it shows great potential and solves this problem.

17. Break It Down

If your form has several sections or is especially large break these down into attainable steps. No more than 5. Form’s can be easily overwhelming for users as there is a lot of interaction, by breaking these down into steps we create more attainable goals. The better solution is to shorten your form, but if that’s not an option give the user a clear idea of how many steps are necessary to complete your form. Getting a user to fill out 24 fields over 6 field steps is much easier then convincing them to fill out 24 fields.

18. Usernames

Unless your application has a very specific need for a username and can be justified as such, this is an unnecessary step. Email Addresses serve as a perfectly good indicator of an individual. This is also substantially easier to remember. Designing forms is all about designing for humans, and making them as easy as possible is always the best solution.

19. Email Confirmation

Let users peruse your application or service before they confirm their email. If you don’t have a very specific reason for not letting users continue without confirming their e-mail address it is better to let them use your service and simply remind them that their email needs to be confirmed. Confirming an email will take users off-site, either to their email platform or somewhere else, leading in possible lose of traffic and application / service use.

20. Conclusion and Resource

To conclude: In the world of form design just remember to be thoughtful of your user’s needs and time. As stated before, with forms and any type of interaction online there can be a lot of things misunderstood. Keep your forms as simple as possible and you will surely benefit in better conversions and happier users.

A Couple Quick Examples of Well Designed Forms

electricpulp

Electric Pulp did a nice job of keeping their form extremely simple, because it’s all that’s necessary for them to attain. Many other applications or services will need more information than this, but this is just a nice example of simplicity. “Send,” could be portrayed to be a bit ambiguous but it’s much better than “Submit.” I think “Send Message” would add just a little more context to improve the form. Overall a great example of simplicity with great aesthetic

 

rsq

RSQ went in a non-traditional direction with their form and pulled it off perfectly. All of the fundamentals are still here and with their own creative twist. This is one to be experienced, so click on the link and play with the form!