Effective Form Design

Following from my previous blog, I have been considering the design of my form. I read this article on the this topic that I had come across previously and saved for later reference. To my horror I realised I had fallen into some bad design habits that ultimately make forms less intuitive and user friendly.

This was my previous design:

It is a newsletter sign up for that appears as a footer. I'll be honest that I hadn't spent a lot of thought into the design (aside from a handwriting style font).

Placeholders vs Labels - So, it turn out using placeholders instead of labels in an attempt to save space is actually a bad idea. This article explains why Placeholders in Form Fields Are Harmful.

Descriptive CTAs - Rather than a bland and uninformative 'Submit' button, inform users what they are doing!

Indicating Required and Optional Fields - It is not usually necessary to have an asterisk (*) next to every field that is required (as most fields are, you want people to fill out that form!). This method also requires a key to specify what the asterisk means. Instead, a simple "Optional" label will explain all that is needed.

Result

It's only a short form but I believe it's important to make changes to improve usability and visual appeal. This is the form now looks like:

I reckon there are some improvements that could be made to the background and font colors (the thin white text is not very easy to read). Color schemes are not my strong point but this will be something to work on next!