Website Optimization Essential: Web Form Design (Pt. 1)

Introduction

People come to your website for all sorts of reasons. They want to shop for your products, gain access to industry newsletters, and engage with your brand through the content you promote. Web forms, simply known as “forms,” play a huge role in SEO and search marketing. They also determine whether or not your customer will convert on what you’re trying to offer, even if it’s as simple as contacting you for more information. There are a few principles in form design that will have you getting the leads you desire, and they include minimizing pain, illuminating a path to completion, considering the context, and ensuring consistent communication.

Everyone’s been to a doctor’s office where they’ve had to fill out a form. Or, maybe you’ve done a lot of online shopping and are familiar with online forms. Whichever the case, we’ve all done this dreadful task. We wanted to shine some light on the subject and show you a few things you should consider when critiquing and improving your forms.

Label Positioning

The three different types of label positioning are right, left, and top aligned. Each of them have their benefits depending on what your form is trying to achieve.

Right Aligned - These labels are great for illustrating clear association between label and field and requires less vertical space on the page. Problem is, they’re more difficult to just scan the labels due to the left rag. All in all, you can usually see the fastest completion times when using this format.

Left Aligned - Use these types of forms with the data required is unfamiliar to the visitor. It enables label scanning, but negatively impacts the association between label and field. Also, changing the label length may impair the overall layout of this type of form.

Top Aligned - These labels are great for when you’re trying to obtain data that the user is familiar with and with minimum completion times. Ie. Name, address, phone number. These type of forms usually require more vertical space, and you should pay attention to your spacing to enable efficient scanning.

Best Practice - Use top aligned for reduced completion times and familiar data input. Use right aligned when vertical screen space is a constraint. And use left aligned for unfamiliar, or advanced data entry.