Form Design and UX / UI

Have you had this experience?

You walk into a doctor’s office and are handed a paper form on a clip board  with 100 tiny fields that are not nearly large enough to fill in the information.

You start writing your email address at a normal size and then quickly see you’re running out of room. You are forced to scrunch letters together and write as small as your pen allows. Your email address inevitably pokes out of the designated box and into the next field, making you have to scrunch your next answer as well.

You’re annoyed.

Then you start filling out the extra long Address field with your Street, City, State and Zip. When you’re done with that field you move to the next line only to find that City, State and Zip have their own fields. Guh. Now you need to write those again and scratch out that part on the line above it.

GRRRRRRRRRR.

You don’t want to be at the doctor in the first place, and then you’re being forced to fill out this painfully designed form.

Your temper flares. You chuck the clipboard across the waiting area, hitting the fish tank with a dramatic slap! The fish and all the people sitting quietly are in shock and afraid of what might happen next.

OK maybe that part is just what you feel like doing and not actually what you do.

But seriously, filling out a badly designed form is the pits! Luckily with web form design, we don’t have the constraints of trying to fit 100 fields into an 8.5×11” sheet of paper. And we don’t need to worry about people’s scrunched illegible handwriting.

But still, with a badly designed website form, conversion rates will suffer.

Thoughtful form design has a huge impact on the speed with which users can understand and accurately complete a form as well as the overall conversion rate.

Reading assignment icon

Read this article: (5 min)

Website Forms Usability: Top 10 Recommendations from Nielsen Norman Group will show you a funny example of bad form design and the top 10 best practices for web form design.

https://www.nngroup.com/articles/web-form-design


Reading assignment icon

Read this article (7 min):

This article has some excellent examples of good and bad web form design. Note: You can stop reading when you get to the part about installing Ninja Forms unless you want to learn more about that specific plugin.

https://www.crazyegg.com/blog/guides/great-form-ui-and-ux/