5 minutes

Optimizing the Usability of Online Forms

5 Comments

Forms are the gatekeepers of the internet. They are often filled out as a starting point for one’s journey – such as signing up for an account. They are also filled out in order to get to one’s account – such as login forms. Do you ever wonder that when you compose a tweet or email you are technically filling out a form? They are everywhere and they are underrated. Form optimization is key when you want to improve conversions.

Here, we’ll discuss some tips to help improve and optimize forms.

Keep it Simple, Stupid

The best thing you can do when creating a form is to keep it as simple as possible. (This almost goes without saying.)

Make sure you are only asking users for information you actually need. If it’s not necessary, don’t bother asking. This makes the life of a user much easier, which is what you want.

Iconfinder

Hey designers

Keep it Organized

Fewer fields are better, because it makes for a cleaner experience. However if your form is longer, have no fear. Divide it into chunks and sections by putting like information together. Say it’s a questionnaire about one’s parents, separate the questions about mom from dad.

Keeping things organized will help make the user experience easier. It’s okay if you have to divide the form into pages, but do so only if you have to.

Impress your audience with animated websites and web presentations.

With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.

Create a Website

Fitbit

Jawboneup

If the Form is Long, Show Progress

A multipage form, such as a checkout process, should be documented for a user to let them know where they are in the process. When there are multiple pages involved you need to be transparent. Show how many steps/pages there are to complete. (Try to keep these page numbers to a minimum.) On top of that, you will have to show where in that process a user is — for example, page 1 of 3.

Juiiicy

Workingnomads

Specify Input Syntax

Have you ever wondered about the different ways you can input a phone number into a field? Placeholder text can help specify in what syntax you’d like an entered text to be. If you need a phone number to be (111) 222-333, then say so. However, there is an alternative. If you don’t specify what format you want something, be flexible about formatting. Don’t give errors, when the entered information wasn’t up to your standards.

After all, how can anyone know what you needed them to enter if you don’t specify a pattern? Instead, accept what is given to you and parse it with JavaScript or RegEx.

Easypost

Use Proper Button Names

Buttons are becoming notorious for being poorly named or labeled. Having a form submit button titled “Submit” is a big no-no because it doesn’t actually tell you what will happen once you click it. Using “Send” or “Create an account” is more descriptive and reassuring. It lets users know what they are actually doing.

Dropbox

Use Proper Labels

Input and form labels should be direct and descriptive. You want users to know exactly what they should be entering. Say again you have a form that is asking about someone’s parents. Be direct and state “Mother’s last name” to be as specific and clear as you can be.

Don’t make users guess which last name you were referring to.

Karma

Explain Why You Need Certain Information

For the life of me I sometimes can’t figure out why certain sign up forms or questionnaires want my phone number. That’s because they don’t explain why it’s needed – “for security purposes” means absolutely nothing to me. If you need certain, more sensitive information like a phone number, please explain why.

Personally, I don’t like to give out my phone number. However, if you tell me it’s because you want an easy way to get in touch with me in case something happens to the flight I just booked, I will be reassured that you’re taking good care of my information. Security is key for form conversions.

Stripe

To Drop Down or Not to Drop Down

With only a few options, the less sense it makes sense to have a drop down. The biggest flaw is that drop downs don’t allow you to see other options right away. A user has to click in order to see what else is available. If you are giving a user an option of two even four things, it’s easier to see all the options as once. Instead, use radio buttons or a toggle.

Healthtab

Lovely

Final Tips

To wrap this up, I want to give you a quick list of some other important tips. Your form should be mobile-friendly; make sure it works fine on a smartphone or a tablet. Additionally, consider using a social network sign up. It can be a great and super-easy way to increase conversions – most people use social networks so its easy to click a button to sign up.

It’s important to have a clear reason for users to complete a form. Remind your users of the value or benefit they will receive for successfully completing your form. Login pages should clearly state you are there to log in, and signing up for an eBook via newsletter should be obvious, too.

Medium

Awwwards

Conclusion

Form optimization is all about trust. Explain to users why you are asking for information, and keep it only to things you’d need from them. Make sure to provide as much guidance as possible (placeholder text, anyone?). The best forms are simple, obvious and to the point. Don’t waste anyone’s time.

Paula Borowska

Paula is a freelance web designer who documents her travels with photos and words. She works with small companies that want to re-brand their online businesses to create products that change lives of their customers all in the hopes of gaining more customers and retaining their current ones longer.

Posts by Paula Borowska
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree