This post covers the most common mistakes designers make and how to fix them, also some tricks & tips on delivering a good looking UI and a better UX.

Before starting with a design, we should always keep in mind that the main goal with every form is completion. Everything else should serve that purpose.

1.Build a perfect input field

Input fields are a part of every form UI, here are some tips and tricks to deliver better Input fields.

  • Place a label at the top
  • Never use uppercase labels
  • Use placeholders
  • Use masks and limiters
  • Size fields accordingly

1BUQQjv3afpC2VAkoNBthqw

For all examples, click to see the full-size version

2.Improve input field UX

A user frequently leaves a site because of badly designed forms, here are some super quick tips to avoid this:

  • Add an info icon where any kind of explanation may be needed
  • Add focus to indicate the selected field
  • Highlight and explain errors
  • Add a field completion signifier

1TpQV8l9bmYlJRgI2YZPZwQ

3.Single column design

When using a single column design, the user’s eyes move naturally from top to bottom. Use a single column on small forms, or group them in other cases.

10dBTMMM8uc1NC85eidor6Q

4. Avoid dropdown menus

Dropdown menus keep the options hidden from the user, making it hard to see the choices. Avoid them when you have a small number of choices to provide.

1lYkpyYxrCRZOL6vVgGcE3Q

5. Avoid text input whenever possible

We complete forms because we want to achieve the goal but a finger swipe or a mouse movement is way faster and less stressful.

11T8e6_LyTPSUBXiy458spw

6. As few fields as possible

Let me explain this with as few words as possible: First Name, Last Name = Full Name.

1p6Ceb-OseaeAo1mGhUCT8Q

7. Differentiate primary and secondary actions

Use design to differentiate primary and secondary actions, making the primary call to action more visible than the secondary one to reduce errors.

1jy56cwfvsl9xwwKtFr-ToA

8. Group related elements

Use white space to create groups or separate elements visually. If the form is long, break it down into multiple steps.

1Iz1dTBXDZVtfiC_sb9L2Fw

Conclusion

If you follow just the guidelines above, you’ll create a form that will be better than 95% of forms out there. There are a few additional rules or guidelines that could be added but they are not always applicable or universal. The 8 above you can safely use in almost any situation.

The rules look simple but have a look at a few forms online and you’ll notice how many of them do not follow even such straightforward rules.

8 Rules for Perfect Form Design

PS. A common mistake is to design forms only for perfect conditions. But what if the width is much smaller than what you designed for? Or the layout is much wider? What about the errors? The wrong input? In all these cases, does the form still look and perform perfectly?

RELATED ARTICLESMORE FROM AUTHOR